Shutdown notice.

Signed-off-by: antonnell <antonnell.crypto@gmail.com>

components/shutdownNotice/package.json

@@ -0,0 +1,3 @@
+{
+  "main": "shutdownNotice.js"
+}

components/shutdownNotice/shutdownNotice.js

@@ -0,0 +1,32 @@
+import { Dialog, Typography, Button } from '@material-ui/core';
+import classes from "./shutdownNotice.module.css";
+import PowerSettingsNewIcon from "@material-ui/icons/PowerSettingsNew";
+
+export default function shutdownNotice({ close }) {
+
+  return (
+    <Dialog fullScreen open={ true } onClose={close} >
+      <div className={ classes.dialogContainer }>
+        <div className={classes.warningContainer}>
+          <PowerSettingsNewIcon className={ classes.warningIcon } />
+          <Typography className={classes.para2} align='center'>
+            This service will no longer be available from 03 April 2022.
+          </Typography>
+          <Typography className={classes.para2} align='center'>
+            The source code is open source, anyone that would like to continue hosting this service is welcome to.
+          </Typography>
+          <div className={ classes.buttonsContainer }>
+            <Button
+              fullWidth
+              variant='contained'
+              size='large'
+              className={classes.primaryButton }
+              onClick={close}>
+              <Typography className={ classes.buttonTextPrimary }>Okay</Typography>
+            </Button>
+          </div>
+        </div>
+      </div>
+    </Dialog>
+  )
+}

components/shutdownNotice/shutdownNotice.module.css

@@ -0,0 +1,130 @@
+.dialogContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 100vw;
+  min-height: 100vh;
+}
+
+.warningContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  max-width: 540px;
+}
+
+.warningIcon {
+  width: 140px !important;
+  height: 140px !important;
+  margin-bottom: 30px !important;
+  font-size: 30px !important;
+  fill: #646464 !important;
+}
+
+.title1 {
+  font: normal normal normal 23px/36px Inter !important;
+  letter-spacing: 0px !important;
+}
+
+.title2 {
+  font: normal normal bold 29px/36px Inter !important;
+  letter-spacing: 0px !important;
+  margin-bottom: 36px !important;
+}
+
+.para1 {
+  text-align: center;
+  font: normal normal bold 20px/28px Inter !important;
+  letter-spacing: 0px !important;
+  margin-bottom: 33px !important;
+}
+
+.para2 {
+  font: normal normal normal 16px/26px Inter !important;
+  letter-spacing: 0px;
+  color: #646464;
+  margin-bottom: 32px !important;
+}
+
+.buttonsContainer {
+  padding: 0px 24px;
+}
+
+.primaryButton {
+  margin-bottom: 20px !important;
+  background: transparent linear-gradient(180deg, #1C45F4 0%, #0F1DD3 100%) 0% 0% no-repeat padding-box !important;
+  min-width: 457px !important;
+}
+
+.secondaryButton {
+
+}
+
+.buttonTextPrimary {
+  font: normal normal bold 16px/19px Inter !important;
+  letter-spacing: 0px !important;
+  color: #FFFFFF !important;
+  text-transform: none;
+}
+
+.buttonTextSecondary {
+  font: normal normal bold 16px/19px Inter !important;
+  letter-spacing: 0px  !important;
+  color: #000 !important;
+  text-transform: none;
+}
+
+@media screen and (max-width: 600px) {
+  .warningContainer {
+    max-width: 340px;
+  }
+
+  .para1 {
+    font: normal normal bold 16px/28px Inter !important;
+  }
+
+  .warningIcon {
+    height: 50px !important;
+    margin-bottom: 30px !important;
+  }
+
+  .buttonTextPrimary {
+    font: normal normal bold 16px/19px Inter !important;
+  }
+
+  .primaryButton {
+    margin-bottom: 20px !important;
+    background: transparent linear-gradient(180deg, #1C45F4 0%, #0F1DD3 100%) 0% 0% no-repeat padding-box !important;
+    min-width: 320px !important;
+  }
+}
+
+@media screen and (max-width: 360px) {
+  .warningContainer {
+    max-width: 260px;
+  }
+
+  .para1 {
+    font: normal normal bold 15px/22px Inter !important;
+  }
+
+  .para2 {
+    font: normal normal bold 13px/18px Inter !important;
+  }
+
+  .warningIcon {
+    height: 40px !important;
+    margin-bottom: 20px !important;
+  }
+
+  .buttonTextPrimary {
+    font: normal normal bold 13px/16px Inter !important;
+  }
+
+  .primaryButton {
+    margin-bottom: 20px !important;
+    background: transparent linear-gradient(180deg, #1C45F4 0%, #0F1DD3 100%) 0% 0% no-repeat padding-box !important;
+    min-width: 260px !important;
+  }
+}

pages/_app.js

@@ -3,6 +3,7 @@ import { ThemeProvider } from '@material-ui/core/styles';
 import CssBaseline from '@material-ui/core/CssBaseline';
 
 import SnackbarController from '../components/snackbar'
+import ShutdownNotice from '../components/shutdownNotice'
 
 import stores from '../stores/index.js'
 
@@ -34,11 +35,19 @@ function MyApp({ Component, pageProps }) {
     stores.dispatcher.dispatch({ type: CONFIGURE })
   },[]);
 
+  const [shutdownNoticeOpen, setShutdownNoticeOpen] = useState(true);
+  const closeShutdown = () => {
+    setShutdownNoticeOpen(false)
+  }
+
   return (
     <ThemeProvider theme={ themeConfig }>
       <CssBaseline />
       <Component {...pageProps} changeTheme={ changeTheme } />
-        <SnackbarController />
+      <SnackbarController />
+      { shutdownNoticeOpen &&
+        <ShutdownNotice close={ closeShutdown } />
+      }
     </ThemeProvider>
   )
 }