add banner

ChainSafe · Sep 25, 2021 · e01a135 · e01a135
1 parent 0a440b7
commit e01a135
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 18 deletions.
diff --git a/packages/files-ui/src/Components/Layouts/AppWrapper.tsx b/packages/files-ui/src/Components/Layouts/AppWrapper.tsx
@@ -1,19 +1,21 @@
 import { useFilesApi } from "../../Contexts/FilesApiContext"
-import { createStyles, ITheme, makeStyles } from "@chainsafe/common-theme"
+import { createStyles, ITheme, makeStyles, useThemeSwitcher } from "@chainsafe/common-theme"
 import React, { useState } from "react"
 import { ReactNode } from "react"
 import clsx from "clsx"
-import { CssBaseline } from "@chainsafe/common-components"
+import { Button, CssBaseline, Typography, useHistory } from "@chainsafe/common-components"
 import AppHeader from "./AppHeader"
 import AppNav from "./AppNav"
 import { useThresholdKey } from "../../Contexts/ThresholdKeyContext"
+import {Trans} from "@lingui/macro"
+import {ROUTE_LINKS} from "../FilesRoutes"
 
 interface IAppWrapper {
   children: ReactNode | ReactNode[]
 }
 
 const useStyles = makeStyles(
-  ({ animation, breakpoints, constants }: ITheme) => {
+  ({ animation, breakpoints, constants, palette }: ITheme) => {
     return createStyles({
       root: {
         minHeight: "100vh"
@@ -24,7 +26,6 @@ const useStyles = makeStyles(
           padding: "0",
           "&.active": {
             // This moves the content areas based on the size of the nav bar
-
             padding: `${0}px ${constants.contentPadding}px ${0}px ${
               Number(constants.navWidth) +
               Number(constants.contentPadding)
@@ -34,33 +35,55 @@ const useStyles = makeStyles(
         [breakpoints.down("md")]: {}
       },
       content: {
+        height: "initial",
         [breakpoints.up("md")]: {
           height: "100%",
           minHeight: "100vh",
           transitionDuration: `${animation.translate}ms`,
-          padding: 0,
           "&.active": {
-            height: "initial",
             padding: `${constants.contentTopPadding}px 0 0`
-          }
+          },
+          "&.bottomBanner": {
+            paddingBottom: 80,
+          },
         },
         [breakpoints.down("md")]: {
           minHeight: "100vh",
           "&.active": {
-            height: "initial",
             padding: `${constants.mobileHeaderHeight}px 0 0`
-          }
+          },
+          "&.bottomBanner": {
+            paddingBottom: 110,
+          },
         }
-      }
+      },
+      accountInArrearsNotification: {
+        position: 'fixed',
+        bottom: 0,
+        backgroundColor: palette.additional["gray"][10],
+        color: palette.additional['gray'][1],
+        padding: '16px 24px',
+        marginLeft: 0,
+        width: '100vw',
+        [breakpoints.up("md")]: {
+          marginLeft: `${constants.navWidth}px`,
+          width:`calc(100vw - ${constants.navWidth}px)`,
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center'
+        }
+      },
     })
   }
 )
 
 const AppWrapper: React.FC<IAppWrapper> = ({ children }: IAppWrapper) => {
   const classes = useStyles()
+  const { desktop } = useThemeSwitcher()
   const [navOpen, setNavOpen] = useState<boolean>(false)
-  const { isLoggedIn, secured } = useFilesApi()
+  const { isLoggedIn, secured, accountInArrears } = useFilesApi()
   const { publicKey, isNewDevice, shouldInitializeAccount } = useThresholdKey()
+  const { redirect } = useHistory()
 
   return (
     <div className={classes.root}>
@@ -84,18 +107,33 @@ const AppWrapper: React.FC<IAppWrapper> = ({ children }: IAppWrapper) => {
           setNavOpen={setNavOpen}
         />
         <section
-          className={clsx(classes.content, {
+          className={clsx(
+            classes.content, {
             active:
               isLoggedIn &&
               secured &&
               !!publicKey &&
               !isNewDevice &&
               !shouldInitializeAccount
-          })}
+            }, {
+              bottomBanner: accountInArrears
+            }
+          )}
         >
           {children}
         </section>
       </article>
+      {accountInArrears && 
+        <div className={classes.accountInArrearsNotification}>
+          <Typography variant='body2'>
+            <Trans>You've got a payment due. Until you've settled up, we've placed your account in restricted mode</Trans>
+          </Typography>
+          <Button 
+            onClick={() => redirect(ROUTE_LINKS.Settings)}
+            fullsize={!desktop}>
+              <Trans>Go to Payments</Trans>
+          </Button>
+        </div>}
     </div>
   )
 }

diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx
@@ -83,7 +83,10 @@ const useStyles = makeStyles(
           minHeight: `calc(100vh - ${Number(constants.contentTopPadding)}px)`,
           "&.droppable": {
             borderColor: palette.primary.main
-          }
+          },
+          "&.bottomBanner": {
+            minHeight: `calc(100vh - ${Number(constants.contentTopPadding) + 80}px)`,
+          },
         }
       },
       header: {
@@ -295,7 +298,7 @@ const useStyles = makeStyles(
         width: 20,
         marginRight: constants.generalUnit * 1.5,
         fill: constants.previewModal.menuItemIconColor
-      }
+      },
     })
   }
 )
@@ -658,9 +661,13 @@ const FilesList = ({ isShared = false }: Props) => {
 
   return (
     <article
-      className={clsx(classes.root, {
-        droppable: isOverUploadable && allowDropUpload
-      })}
+      className={clsx(
+        classes.root, {
+          droppable: isOverUploadable && allowDropUpload
+        }, {
+          bottomBanner: accountInArrears
+        }
+      )}
       ref={!isUploadModalOpen && allowDropUpload ? dropBrowserRef : null}
     >
       <div