more pwa styles added

web/src/components/About/index.jsx

@@ -1,14 +1,13 @@
 import axios from 'axios'
 import { useEffect, useState } from 'react'
 import Button from '@material-ui/core/Button'
-import Dialog from '@material-ui/core/Dialog'
 import InfoIcon from '@material-ui/icons/Info'
 import ListItemIcon from '@material-ui/core/ListItemIcon'
 import ListItemText from '@material-ui/core/ListItemText'
 import { useTranslation } from 'react-i18next'
 import { useMediaQuery } from '@material-ui/core'
 import { echoHost } from 'utils/Hosts'
-import StyledMenuButtonWrapper from 'style/StyledMenuButtonWrapper'
+import { StyledDialog, StyledMenuButtonWrapper } from 'style/CustomMaterialUiStyles'
 import { isStandaloneApp } from 'utils/Utils'
 
 import LinkComponent from './LinkComponent'
@@ -42,18 +41,19 @@ export default function AboutDialog() {
         )}
       </StyledMenuButtonWrapper>
 
-      <Dialog
+      <StyledDialog
         open={open}
         onClose={() => setOpen(false)}
         aria-labelledby='form-dialog-title'
         fullScreen={fullScreen}
         maxWidth='xl'
+        hideBackdrop={isStandaloneApp}
       >
         <DialogWrapper>
           <HeaderSection>
             <div>{t('About')}</div>
             {torrServerVersion}
-            <img src='/apple-touch-icon.png' alt='ts-icon' />
+            <img src='/apple-icon-180.png' alt='ts-icon' />
           </HeaderSection>
 
           <div style={{ overflow: 'auto' }}>
@@ -88,7 +88,7 @@ export default function AboutDialog() {
             </Button>
           </FooterSection>
         </DialogWrapper>
-      </Dialog>
+      </StyledDialog>
     </>
   )
 }

web/src/components/About/style.js

@@ -26,6 +26,10 @@ export const HeaderSection = styled.section`
       width: 60px;
     }
   }
+
+  @media screen and (display-mode: standalone) {
+    padding-top: 30px;
+  }
 `
 
 export const ThanksSection = styled.section`

web/src/components/Add/AddDialog.jsx

@@ -1,6 +1,5 @@
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import Button from '@material-ui/core/Button'
-import Dialog from '@material-ui/core/Dialog'
 import { torrentsHost, torrentUploadHost } from 'utils/Hosts'
 import axios from 'axios'
 import { useTranslation } from 'react-i18next'
@@ -10,9 +9,10 @@ import { useMediaQuery } from '@material-ui/core'
 import CircularProgress from '@material-ui/core/CircularProgress'
 import usePreviousState from 'utils/usePreviousState'
 import { useQuery } from 'react-query'
-import { getTorrents } from 'utils/Utils'
+import { getTorrents, isStandaloneApp } from 'utils/Utils'
 import parseTorrent from 'parse-torrent'
-import { ButtonWrapper, Header } from 'style/DialogStyles'
+import { ButtonWrapper } from 'style/DialogStyles'
+import { StyledDialog, StyledHeader } from 'style/CustomMaterialUiStyles'
 
 import { checkImageURL, getMoviePosters, checkTorrentSource, parseTorrentTitle } from './helpers'
 import { Content } from './style'
@@ -223,8 +223,15 @@ export default function AddDialog({
   }
 
   return (
-    <Dialog open onClose={handleClose} fullScreen={fullScreen} fullWidth maxWidth='md'>
+    <StyledDialog
-      <Header>{t(isEditMode ? 'EditTorrent' : 'AddNewTorrent')}</Header>
+      open
+      onClose={handleClose}
+      fullScreen={fullScreen}
+      fullWidth
+      maxWidth='md'
+      hideBackdrop={isStandaloneApp}
+    >
+      <StyledHeader>{t(isEditMode ? 'EditTorrent' : 'AddNewTorrent')}</StyledHeader>
 
       <Content isEditMode={isEditMode}>
         {!isEditMode && (
@@ -279,6 +286,6 @@ export default function AddDialog({
           {isSaving ? <CircularProgress style={{ color: 'white' }} size={20} /> : t(isEditMode ? 'Save' : 'Add')}
         </Button>
       </ButtonWrapper>
-    </Dialog>
+    </StyledDialog>
   )
 }

web/src/components/Add/index.jsx

@@ -3,7 +3,7 @@ import ListItemIcon from '@material-ui/core/ListItemIcon'
 import LibraryAddIcon from '@material-ui/icons/LibraryAdd'
 import ListItemText from '@material-ui/core/ListItemText'
 import { useTranslation } from 'react-i18next'
-import StyledMenuButtonWrapper from 'style/StyledMenuButtonWrapper'
+import { StyledMenuButtonWrapper } from 'style/CustomMaterialUiStyles'
 import { isStandaloneApp } from 'utils/Utils'
 
 import AddDialog from './AddDialog'

web/src/components/App/PWAFooter/index.jsx

@@ -1,7 +1,7 @@
 import { CreditCard as CreditCardIcon } from '@material-ui/icons'
 import { useTranslation } from 'react-i18next'
 import CloseServer from 'components/CloseServer'
-import StyledMenuButtonWrapper from 'style/StyledMenuButtonWrapper'
+import { StyledMenuButtonWrapper } from 'style/CustomMaterialUiStyles'
 import AddDialogButton from 'components/Add'
 import AboutDialog from 'components/About'
 import SettingsDialogButton from 'components/Settings'

web/src/components/App/PWAFooter/style.js

@@ -1,12 +1,14 @@
 import styled from 'styled-components'
 
+export const pwaFooterHeight = 90
+
 export default styled.div`
   background: #575757;
   color: #fff;
   position: fixed;
   bottom: 0;
   width: 100%;
-  height: 90px;
+  height: ${pwaFooterHeight}px;
 
   display: none;
 

web/src/components/App/style.js

@@ -2,6 +2,8 @@ import { IconButton } from '@material-ui/core'
 import { rgba } from 'polished'
 import styled, { css } from 'styled-components'
 
+import { pwaFooterHeight } from './PWAFooter/style'
+
 export const AppWrapper = styled.div`
   ${({
     theme: {
@@ -19,7 +21,7 @@ export const AppWrapper = styled.div`
 
     @media screen and (display-mode: standalone) {
       grid-template-columns: 0 1fr;
-      grid-template-rows: 90px 1fr 90px;
+      grid-template-rows: ${pwaFooterHeight}px 1fr ${pwaFooterHeight}px;
       height: 100vh;
     }
   `}
@@ -50,7 +52,7 @@ export const AppHeader = styled.div`
       padding: 7px 16px;
       position: fixed;
       width: 100%;
-      height: 90px;
+      height: ${pwaFooterHeight}px;
     }
   `}
 `
@@ -105,7 +107,7 @@ export const TorrentListWrapper = styled.div`
   }
 
   @media screen and (display-mode: standalone) {
-    height: calc(100vh - 90px);
+    height: calc(100vh - ${pwaFooterHeight}px);
     padding-bottom: 105px;
   }
 `

web/src/components/CloseServer.jsx

@@ -4,7 +4,7 @@ import { PowerSettingsNew as PowerSettingsNewIcon } from '@material-ui/icons'
 import { shutdownHost } from 'utils/Hosts'
 import { useTranslation } from 'react-i18next'
 import { isStandaloneApp } from 'utils/Utils'
-import StyledMenuButtonWrapper from 'style/StyledMenuButtonWrapper'
+import { StyledMenuButtonWrapper } from 'style/CustomMaterialUiStyles'
 
 export default function CloseServer({ isOffline, isLoading }) {
   const { t } = useTranslation()

web/src/components/DialogTorrentDetailsContent/DialogHeader.jsx

@@ -1,9 +1,10 @@
 import { AppBar, IconButton, makeStyles, Toolbar, Typography } from '@material-ui/core'
 import CloseIcon from '@material-ui/icons/Close'
 import { ArrowBack } from '@material-ui/icons'
+import { isStandaloneApp } from 'utils/Utils'
 
 const useStyles = makeStyles({
-  appBar: { position: 'relative' },
+  appBar: { position: 'relative', ...(isStandaloneApp && { paddingTop: '30px' }) },
   title: { marginLeft: '5px', flex: 1 },
 })
 

web/src/components/Settings/SettingsDialog.jsx

@@ -1,5 +1,4 @@
 import axios from 'axios'
-import Dialog from '@material-ui/core/Dialog'
 import Button from '@material-ui/core/Button'
 import Checkbox from '@material-ui/core/Checkbox'
 import { FormControlLabel, useMediaQuery, useTheme } from '@material-ui/core'
@@ -11,6 +10,8 @@ import Tabs from '@material-ui/core/Tabs'
 import Tab from '@material-ui/core/Tab'
 import SwipeableViews from 'react-swipeable-views'
 import CircularProgress from '@material-ui/core/CircularProgress'
+import { StyledDialog } from 'style/CustomMaterialUiStyles'
+import { isStandaloneApp } from 'utils/Utils'
 
 import { SettingsHeader, FooterSection, Content } from './style'
 import defaultSettings from './defaultSettings'
@@ -82,7 +83,14 @@ export default function SettingsDialog({ handleClose }) {
   const handleChangeIndex = index => setSelectedTab(index)
 
   return (
-    <Dialog open onClose={handleClose} fullScreen={fullScreen} fullWidth maxWidth='md'>
+    <StyledDialog
+      open
+      onClose={handleClose}
+      fullScreen={fullScreen}
+      fullWidth
+      maxWidth='md'
+      hideBackdrop={isStandaloneApp}
+    >
       <SettingsHeader>
         <div>{t('SettingsDialog.Settings')}</div>
         <FormControlLabel
@@ -179,6 +187,6 @@ export default function SettingsDialog({ handleClose }) {
           {t('Save')}
         </Button>
       </FooterSection>
-    </Dialog>
+    </StyledDialog>
   )
 }

web/src/components/Settings/index.jsx

@@ -3,7 +3,7 @@ import ListItemText from '@material-ui/core/ListItemText'
 import { useState } from 'react'
 import SettingsIcon from '@material-ui/icons/Settings'
 import { useTranslation } from 'react-i18next'
-import StyledMenuButtonWrapper from 'style/StyledMenuButtonWrapper'
+import { StyledMenuButtonWrapper } from 'style/CustomMaterialUiStyles'
 import { isStandaloneApp } from 'utils/Utils'
 
 import SettingsDialog from './SettingsDialog'

web/src/components/Settings/style.js

@@ -1,11 +1,11 @@
 import styled, { css } from 'styled-components'
 import { mainColors } from 'style/colors'
-import { Header } from 'style/DialogStyles'
+import { StyledHeader } from 'style/CustomMaterialUiStyles'
 
 export const cacheBeforeReaderColor = '#b3dfc9'
 export const cacheAfterReaderColor = mainColors.light.primary
 
-export const SettingsHeader = styled(Header)`
+export const SettingsHeader = styled(StyledHeader)`
   display: grid;
   grid-auto-flow: column;
   align-items: center;

web/src/components/TorrentCard/index.jsx

@@ -5,7 +5,7 @@ import {
   Close as CloseIcon,
   Delete as DeleteIcon,
 } from '@material-ui/icons'
-import { getPeerString, humanizeSize, humanizeSpeed, removeRedundantCharacters } from 'utils/Utils'
+import { getPeerString, humanizeSize, humanizeSpeed, isStandaloneApp, removeRedundantCharacters } from 'utils/Utils'
 import { playlistTorrHost, torrentsHost } from 'utils/Hosts'
 import { NoImageIcon } from 'icons'
 import DialogTorrentDetailsContent from 'components/DialogTorrentDetailsContent'
@@ -16,6 +16,7 @@ import axios from 'axios'
 import ptt from 'parse-torrent-title'
 import { useTranslation } from 'react-i18next'
 import AddDialog from 'components/Add/AddDialog'
+import { StyledDialog } from 'style/CustomMaterialUiStyles'
 
 import { StyledButton, TorrentCard, TorrentCardButtons, TorrentCardDescription, TorrentCardPoster } from './style'
 
@@ -121,16 +122,17 @@ const Torrent = ({ torrent }) => {
         </TorrentCardDescription>
       </TorrentCard>
 
-      <Dialog
+      <StyledDialog
         open={isDetailedInfoOpened}
         onClose={closeDetailedInfo}
         fullScreen={fullScreen}
         fullWidth
         maxWidth='xl'
         TransitionComponent={Transition}
+        hideBackdrop={isStandaloneApp}
       >
         <DialogTorrentDetailsContent closeDialog={closeDetailedInfo} torrent={torrent} />
-      </Dialog>
+      </StyledDialog>
 
       <Dialog open={isDeleteTorrentOpened} onClose={closeDeleteTorrentAlert}>
         <DialogTitle>{t('DeleteTorrent?')}</DialogTitle>

web/src/style/CustomMaterialUiStyles.js

@@ -0,0 +1,33 @@
+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 { Header } from 'style/DialogStyles'
+
+export const StyledMenuButtonWrapper = 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;
+  }
+`
+
+export const StyledDialog = styled(Dialog)`
+  @media screen and (display-mode: standalone) {
+    margin-bottom: ${pwaFooterHeight}px;
+
+    .MuiDialog-container .MuiPaper-root {
+      box-shadow: none;
+    }
+  }
+`
+
+export const StyledHeader = styled(Header)`
+  @media screen and (display-mode: standalone) {
+    padding-top: 47px;
+  }
+`

web/src/style/GlobalStyle.js

@@ -22,12 +22,6 @@ export default createGlobalStyle`
     }
   }
 
-  header {
-    @media screen and (display-mode: standalone) {
-      padding-top: 30px;
-    }
-  }
-
   button {
     font-family: "Open Sans", sans-serif;
     letter-spacing: -0.1px;

web/src/style/StyledMenuButtonWrapper.js

@@ -1,14 +0,0 @@
-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;
-  }
-`