more standalone styles added

web/src/style/GlobalStyle.js

@@ -15,6 +15,17 @@ export default createGlobalStyle`
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     letter-spacing: -0.1px;
+    -webkit-tap-highlight-color: transparent;
+
+    @media screen and (display-mode: standalone) {
+      height: 100vh;
+    }
+  }
+
+  header {
+    @media screen and (display-mode: standalone) {
+      padding-top: 30px;
+    }
   }
 
   button {

web/src/style/StyledMenuButtonWrapper.js

@@ -0,0 +1,14 @@
+import { ListItem } from '@material-ui/core'
+import styled from 'styled-components'
+
+export default styled(ListItem).attrs({ button: true })`
+  @media screen and (display-mode: standalone) {
+    width: 100%;
+    height: 60px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    font-size: 10px;
+  }
+`

web/src/style/materialUISetup.js

@@ -1,4 +1,4 @@
-import { createMuiTheme, useMediaQuery } from '@material-ui/core'
+import { createTheme, useMediaQuery } from '@material-ui/core'
 import { useEffect, useMemo, useState } from 'react'
 
 import { mainColors } from './colors'
@@ -7,7 +7,7 @@ export const THEME_MODES = { LIGHT: 'light', DARK: 'dark', AUTO: 'auto' }
 
 const typography = { fontFamily: 'Open Sans, sans-serif' }
 
-export const darkTheme = createMuiTheme({
+export const darkTheme = createTheme({
   typography,
   palette: {
     type: THEME_MODES.DARK,
@@ -15,7 +15,7 @@ export const darkTheme = createMuiTheme({
     secondary: { main: mainColors.dark.secondary },
   },
 })
-export const lightTheme = createMuiTheme({
+export const lightTheme = createTheme({
   typography,
   palette: {
     type: THEME_MODES.LIGHT,
@@ -45,7 +45,7 @@ export const useMaterialUITheme = () => {
 
   const muiTheme = useMemo(
     () =>
-      createMuiTheme({
+      createTheme({
         typography,
         palette: {
           type: theme,