more standalone styles added

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

@@ -0,0 +1,31 @@
+import { CreditCard as CreditCardIcon } from '@material-ui/icons'
+import { useTranslation } from 'react-i18next'
+import CloseServer from 'components/CloseServer'
+import StyledMenuButtonWrapper from 'style/StyledMenuButtonWrapper'
+import AddDialogButton from 'components/Add'
+import AboutDialog from 'components/About'
+import SettingsDialogButton from 'components/Settings'
+
+import StyledPWAFooter from './style'
+
+export default function PWAFooter({ setIsDonationDialogOpen, isOffline, isLoading }) {
+  const { t } = useTranslation()
+
+  return (
+    <StyledPWAFooter>
+      <CloseServer isOffline={isOffline} isLoading={isLoading} />
+
+      <StyledMenuButtonWrapper onClick={() => setIsDonationDialogOpen(true)}>
+        <CreditCardIcon />
+
+        <div>{t('Donate')}</div>
+      </StyledMenuButtonWrapper>
+
+      <AddDialogButton isOffline={isOffline} isLoading={isLoading} />
+
+      <AboutDialog />
+
+      <SettingsDialogButton isOffline={isOffline} isLoading={isLoading} />
+    </StyledPWAFooter>
+  )
+}

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

@@ -0,0 +1,18 @@
+import styled from 'styled-components'
+
+export default styled.div`
+  background: #575757;
+  color: #fff;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  height: 90px;
+
+  display: none;
+
+  @media screen and (display-mode: standalone) {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    justify-items: center;
+  }
+`