style: improve design on waiting pages (#410)

* style: improve design on waiting pages

* chore: remove dead Restart page

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>
+  )
+}

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 (
-    <>
+    <Grid container direction="column" justifyContent="center" alignItems="center">
-      <Box mb={4}>
+      <Box mb={9}>
-        <Loading />
+        <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>
   )
 }

src/pages/restart/Restart.tsx

@@ -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>
-    </>
-  )
-}

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 />} />