standaloneMedia added

web/src/style/CustomMaterialUiStyles.js

@@ -1,12 +1,14 @@
 import { ListItem } from '@material-ui/core'
 import Dialog from '@material-ui/core/Dialog'
 import { pwaFooterHeight } from 'components/App/PWAFooter/style'
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 import { Header } from 'style/DialogStyles'
 import { isStandaloneApp } from 'utils/Utils'
 
+import { standaloneMedia } from './standaloneMedia'
+
 export const StyledMenuButtonWrapper = styled(ListItem).attrs({ button: true })`
-  @media screen and (display-mode: standalone) {
+  ${standaloneMedia(css`
     width: 100%;
     height: 60px;
     display: flex;
@@ -14,23 +16,23 @@ export const StyledMenuButtonWrapper = styled(ListItem).attrs({ button: true })`
     justify-content: center;
     align-items: center;
     font-size: 10px;
-  }
+  `)}
 `
 
 export const StyledDialog = styled(Dialog).attrs({
   ...(isStandaloneApp && { hideBackdrop: true, transitionDuration: 0 }),
 })`
-  @media screen and (display-mode: standalone) {
+  ${standaloneMedia(css`
     margin-bottom: ${pwaFooterHeight}px;
 
     .MuiDialog-container .MuiPaper-root {
       box-shadow: none;
     }
-  }
+  `)}
 `
 
 export const StyledHeader = styled(Header)`
-  @media screen and (display-mode: standalone) {
+  ${standaloneMedia(css`
     padding-top: 47px;
-  }
+  `)}
 `

web/src/style/GlobalStyle.js

@@ -1,4 +1,6 @@
-import { createGlobalStyle } from 'styled-components'
+import { createGlobalStyle, css } from 'styled-components'
+
+import { standaloneMedia } from './standaloneMedia'
 
 export default createGlobalStyle`
   *,
@@ -17,9 +19,10 @@ export default createGlobalStyle`
     letter-spacing: -0.1px;
     -webkit-tap-highlight-color: transparent;
 
-    @media screen and (display-mode: standalone) {
+
+    ${standaloneMedia(css`
       height: 100vh;
-    }
+    `)}
   }
 
   button {

web/src/style/standaloneMedia.js

@@ -0,0 +1,7 @@
+import { css } from 'styled-components'
+
+export const standaloneMedia = styles => css`
+  @media screen and (display-mode: standalone) {
+    ${styles};
+  }
+`