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/VersionCheck.tsx

@@ -1,60 +1,47 @@
-import type { ReactElement } from 'react'
-import { Typography } from '@material-ui/core/'
+import { ReactElement, useContext } from 'react'
 import CodeBlockTabs from '../../../components/CodeBlockTabs'
+import ExpandableList from '../../../components/ExpandableList'
+import ExpandableListItem from '../../../components/ExpandableListItem'
+import ExpandableListItemNote from '../../../components/ExpandableListItemNote'
+import StatusIcon from '../../../components/StatusIcon'
+import { Context } from '../../../providers/Bee'
 
-type Props = StatusNodeVersionHook
+export default function VersionCheck(): ReactElement | null {
+  const { status, isLoading, latestUserVersion, latestPublishedVersion, latestBeeVersionUrl } = useContext(Context)
+  const isOk = status.version
 
-export default function VersionCheck({ isOk, userVersion, latestVersion, latestUrl }: Props): ReactElement | null {
-  const version = (
-    <div style={{ display: 'flex' }}>
-      <div style={{ marginRight: '30px' }}>
-        <p>
-          <span>User Version</span>
-        </p>
-        <Typography component="h5" variant="h5">
-          <span>{userVersion}</span>
-        </Typography>
-      </div>
-      <div>
-        <p>
-          <span>Latest Version</span>
-        </p>
-        <Typography component="h5" variant="h5">
-          <span>{latestVersion}</span>
-        </Typography>
-      </div>
-    </div>
-  )
-
-  // Running latest bee version
-  if (isOk) {
-    return (
-      <>
-        <span>You are running the latest version of Bee</span>
-        {version}
-      </>
-    )
-  }
-
-  // Old version or not connected to bee debug API
   return (
-    <>
-      <span>
-        Your Bee version is out of date. Please update to the{' '}
-        <a href={latestUrl} rel="noreferrer" target="_blank">
-          latest
-        </a>{' '}
-        before continuing. Rerun the installation script below to upgrade. Reference the docs for help with updating.{' '}
-        <a href="https://docs.ethswarm.org/docs/installation/manual#upgrading-bee" rel="noreferrer" target="_blank">
-          Docs
-        </a>
-      </span>
-      <CodeBlockTabs
-        showLineNumbers
-        linux={`bee version\nwget https://github.com/ethersphere/bee/releases/download/${latestVersion}/bee_${latestVersion}_amd64.deb\nsudo dpkg -i bee_${latestVersion}_amd64.deb`}
-        mac={`bee version\nbrew tap ethersphere/tap\nbrew install swarm-bee\nbrew services start swarm-bee`}
-      />
-      {version}
-    </>
+    <ExpandableList
+      label={
+        <>
+          <StatusIcon isOk={isOk} isLoading={isLoading} /> Bee Version
+        </>
+      }
+    >
+      <ExpandableListItemNote>
+        {isOk ? (
+          'You are running the latest version of Bee.'
+        ) : (
+          <>
+            Your Bee version is out of date. Please update to the{' '}
+            <a href={latestBeeVersionUrl} rel="noreferrer" target="_blank">
+              latest
+            </a>{' '}
+            before continuing. Rerun the installation script below to upgrade. For more information please see the{' '}
+            <a href="https://docs.ethswarm.org/docs/installation/manual#upgrading-bee" rel="noreferrer" target="_blank">
+              Docs
+            </a>
+            .
+            <CodeBlockTabs
+              showLineNumbers
+              linux={`bee version\nwget https://github.com/ethersphere/bee/releases/download/${latestPublishedVersion}/bee_${latestPublishedVersion}_amd64.deb\nsudo dpkg -i bee_${latestPublishedVersion}_amd64.deb`}
+              mac={`bee version\nbrew tap ethersphere/tap\nbrew install swarm-bee\nbrew services start swarm-bee`}
+            />
+          </>
+        )}
+      </ExpandableListItemNote>
+      <ExpandableListItem label="Your Version" value={latestUserVersion || '-'} />
+      <ExpandableListItem label="Latest Version" value={latestPublishedVersion || '-'} />
+    </ExpandableList>
   )
 }