feat: status page redesign (#214)

* feat: initial rewrite without status indicators

* feat: status icon as a component and add to the node setup

* feat: added input list item component

* feat: improved the topology status info

* fix: disabled state of the buttons

* chore: removed unused components

* chore: remove debug console log

* fix: deposit modal helper text

src/pages/status/SetupSteps/NodeConnectionCheck.tsx

@@ -1,61 +1,61 @@
 import { ReactElement, useContext } from 'react'
-import { Typography, Accordion, AccordionSummary, AccordionDetails } from '@material-ui/core/'
-import { ExpandMoreSharp } from '@material-ui/icons/'
 
-import ConnectToHost from '../../../components/ConnectToHost'
 import CodeBlockTabs from '../../../components/CodeBlockTabs'
 import { Context as SettingsContext } from '../../../providers/Settings'
+import ExpandableList from '../../../components/ExpandableList'
+import ExpandableListItem from '../../../components/ExpandableListItem'
+import ExpandableListItemNote from '../../../components/ExpandableListItemNote'
+import ExpandableListItemInput from '../../../components/ExpandableListItemInput'
+import StatusIcon from '../../../components/StatusIcon'
+import { Context } from '../../../providers/Bee'
 
-type Props = StatusHookCommon
-
-export default function NodeConnectionCheck({ isOk }: Props): ReactElement | null {
+export default function NodeConnectionCheck(): ReactElement | null {
   const { setApiUrl, apiUrl } = useContext(SettingsContext)
+  const { status, isLoading } = useContext(Context)
+  const isOk = status.apiConnection
 
   return (
-    <div>
-      <div style={{ display: 'flex', marginBottom: '25px' }}>
-        <span style={{ marginRight: '15px' }}>
-          Node API (<Typography variant="button">{apiUrl}</Typography>)
-        </span>
-        <ConnectToHost setHost={setApiUrl} defaultHost={apiUrl} />
-      </div>
-      <div>
-        {!isOk && (
-          <Typography component="div" variant="body2" gutterBottom style={{ margin: '15px' }}>
-            We cannot connect to your nodes API at <Typography variant="button">{apiUrl}</Typography>. Please check the
-            following to troubleshoot your issue.
-            <Accordion style={{ marginTop: '20px' }}>
-              <AccordionSummary expandIcon={<ExpandMoreSharp />} aria-controls="panel1a-content" id="panel1a-header">
-                <Typography>Troubleshoot</Typography>
-              </AccordionSummary>
-              <AccordionDetails>
-                <Typography component="div">
-                  <ol>
-                    <li>Check the status of your node by running the below command to see if your node is running.</li>
-                    <CodeBlockTabs showLineNumbers linux={`sudo systemctl status bee`} mac={`brew services list`} />
-                    <li>
-                      If your node is running, check your firewall settings to make sure that port 1633 (or your custom
-                      specified port) is exposed to the internet. If your node is not running try executing the below
-                      command to start your bee node
-                    </li>
-                    <CodeBlockTabs
-                      showLineNumbers
-                      linux={`sudo systemctl start bee`}
-                      mac={`brew services start swarm-bee`}
-                    />
-                    <li>Run the commands to validate your node is running and see the log output.</li>
-                    <CodeBlockTabs
-                      showLineNumbers
-                      linux={`sudo systemctl status bee \njournalctl --lines=100 --follow --unit bee`}
-                      mac={`brew services list \ntail -f /usr/local/var/log/swarm-bee/bee.log`}
-                    />
-                  </ol>
-                </Typography>
-              </AccordionDetails>
-            </Accordion>
-          </Typography>
-        )}
-      </div>
-    </div>
+    <ExpandableList
+      label={
+        <>
+          <StatusIcon isOk={isOk} isLoading={isLoading} /> Connection to Bee API
+        </>
+      }
+    >
+      <ExpandableListItemNote>
+        {isOk
+          ? 'The connection to the Bee nodes API has been successful'
+          : 'Could not connect to your Bee nodes API. Please check the troubleshoot below on how you may resolve it.'}
+      </ExpandableListItemNote>
+      <ExpandableListItemInput label="Bee API" value={apiUrl} onConfirm={setApiUrl} />
+      {!isOk && (
+        <ExpandableList level={1} label="Troubleshoot">
+          <ExpandableListItem
+            label={
+              <ol>
+                <li>Check the status of your node by running the below command to see if your node is running.</li>
+                <CodeBlockTabs showLineNumbers linux={`sudo systemctl status bee`} mac={`brew services list`} />
+                <li>
+                  If your node is running, check your firewall settings to make sure that port 1633 (or your custom
+                  specified port) is exposed to the internet. If your node is not running try executing the below
+                  command to start your bee node
+                </li>
+                <CodeBlockTabs
+                  showLineNumbers
+                  linux={`sudo systemctl start bee`}
+                  mac={`brew services start swarm-bee`}
+                />
+                <li>Run the commands to validate your node is running and see the log output.</li>
+                <CodeBlockTabs
+                  showLineNumbers
+                  linux={`sudo systemctl status bee \njournalctl --lines=100 --follow --unit bee`}
+                  mac={`brew services list \ntail -f /usr/local/var/log/swarm-bee/bee.log`}
+                />
+              </ol>
+            }
+          />
+        </ExpandableList>
+      )}
+    </ExpandableList>
   )
 }