From 8775283508a6a94f036ef8de652b6e5251b4bbc3 Mon Sep 17 00:00:00 2001
From: Cafe137 <77121044+Cafe137@users.noreply.github.com>
Date: Mon, 20 Jun 2022 15:34:19 +0200
Subject: [PATCH] style: improve design on waiting pages (#410)

* style: improve design on waiting pages

* chore: remove dead Restart page
---
 src/components/Waiting.tsx             | 10 +++++++
 src/pages/restart/LightModeRestart.tsx | 21 ++++++++-----
 src/pages/restart/Restart.tsx          | 41 --------------------------
 src/routes.tsx                         |  2 --
 4 files changed, 24 insertions(+), 50 deletions(-)
 create mode 100644 src/components/Waiting.tsx
 delete mode 100644 src/pages/restart/Restart.tsx

diff --git a/src/components/Waiting.tsx b/src/components/Waiting.tsx
new file mode 100644
index 0000000..561e8a1
--- /dev/null
+++ b/src/components/Waiting.tsx
@@ -0,0 +1,10 @@
+import { CircularProgress, Grid } from '@material-ui/core'
+import { ReactElement } from 'react'
+
+export function Waiting(): ReactElement {
+  return (
+    <Grid container direction="row" justifyContent="center" alignItems="center">
+      <CircularProgress size={240} style={{ color: '#ffffff' }} />
+    </Grid>
+  )
+}
diff --git a/src/pages/restart/LightModeRestart.tsx b/src/pages/restart/LightModeRestart.tsx
index da1cf44..99e12ef 100644
--- a/src/pages/restart/LightModeRestart.tsx
+++ b/src/pages/restart/LightModeRestart.tsx
@@ -1,8 +1,8 @@
 import { BeeModes } from '@ethersphere/bee-js'
-import { Box, Typography } from '@material-ui/core'
+import { Box, Grid, Typography } from '@material-ui/core'
 import { ReactElement, useContext, useEffect, useState } from 'react'
 import { useNavigate } from 'react-router'
-import { Loading } from '../../components/Loading'
+import { Waiting } from '../../components/Waiting'
 import { Context } from '../../providers/Bee'
 import { ROUTES } from '../../routes'
 
@@ -22,11 +22,18 @@ export default function Settings(): ReactElement {
   }, [startedAt, navigate, nodeInfo, apiHealth])
 
   return (
-    <>
-      <Box mb={4}>
-        <Loading />
+    <Grid container direction="column" justifyContent="center" alignItems="center">
+      <Box mb={9}>
+        <Waiting />
       </Box>
-      <Typography>Your node is being upgraded to light mode... postage syncing may take up to 10 minutes.</Typography>
-    </>
+      <Box mb={1}>
+        <Typography>
+          <strong>Upgrading Bee</strong>
+        </Typography>
+      </Box>
+      <Typography>
+        You will be redirected automatically once your node is up and running. This may take up to 10 minutes.
+      </Typography>
+    </Grid>
   )
 }
diff --git a/src/pages/restart/Restart.tsx b/src/pages/restart/Restart.tsx
deleted file mode 100644
index c51fe9a..0000000
--- a/src/pages/restart/Restart.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { Box, Typography } from '@material-ui/core'
-import { ReactElement, useContext, useEffect, useState } from 'react'
-import { useNavigate } from 'react-router'
-import { Loading } from '../../components/Loading'
-import { Context } from '../../providers/Bee'
-import { ROUTES } from '../../routes'
-
-export default function Settings(): ReactElement {
-  const [waited, setWaited] = useState(false)
-  const { apiHealth } = useContext(Context)
-  const navigate = useNavigate()
-
-  useEffect(() => {
-    if (waited) {
-      return
-    }
-
-    const timeout = setTimeout(() => setWaited(true), 5_000)
-
-    return () => clearTimeout(timeout)
-  }, [waited])
-
-  useEffect(() => {
-    if (!waited) {
-      return
-    }
-
-    if (apiHealth) {
-      navigate(ROUTES.INFO)
-    }
-  }, [navigate, waited, apiHealth])
-
-  return (
-    <>
-      <Box mb={4}>
-        <Loading />
-      </Box>
-      <Typography>You will be redirected automatically once your node is up and running.</Typography>
-    </>
-  )
-}
diff --git a/src/routes.tsx b/src/routes.tsx
index 1f1e7e8..b1f3452 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -14,7 +14,6 @@ import { UploadLander } from './pages/files/UploadLander'
 import GiftCards from './pages/gift-code'
 import Info from './pages/info'
 import LightModeRestart from './pages/restart/LightModeRestart'
-import Restart from './pages/restart/Restart'
 import Wallet from './pages/rpc'
 import Confirmation from './pages/rpc/Confirmation'
 import Settings from './pages/settings'
@@ -80,7 +79,6 @@ const BaseRouter = (): ReactElement => (
     <Route path={ROUTES.TOP_UP_BANK_CARD_SWAP} element={<Swap header="Top-up with bank card" />} />
     <Route path={ROUTES.TOP_UP_GIFT_CODE} element={<GiftCardTopUpIndex />} />
     <Route path={ROUTES.TOP_UP_GIFT_CODE_FUND} element={<GiftCardFund />} />
-    <Route path={ROUTES.RESTART} element={<Restart />} />
     <Route path={ROUTES.RESTART_LIGHT} element={<LightModeRestart />} />
     <Route path={ROUTES.ACCOUNT_WALLET} element={<AccountWallet />} />
     <Route path={ROUTES.ACCOUNT_CHEQUEBOOK} element={<AccountChequebook />} />