chore: release 0.8.0 (#205 )

* chore: release 0.8.0 * chore: update changelog Co-authored-by: Vojtech Simetka <vojtech@simetka.cz>
feat: updated readme to new bee version and UI examples with new design (#230 )
2021-10-20 19:43:39 +02:00 · 2021-10-20 16:24:43 +02:00 · 2021-10-14 15:59:25 +02:00 · 2021-10-13 13:20:06 +02:00 · 2021-10-13 11:38:09 +02:00 · 2021-10-13 11:37:59 +02:00
77 changed files with 13041 additions and 9026 deletions
@@ -1,4 +1,9 @@
 {
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "prettier",
@@ -42,10 +42,10 @@ jobs:
      - name: Commit linting
        uses: wagoid/commitlint-github-action@v2

-      # - name: Code linting
-      #   run: npm run lint:check
-      #   env:
-      #     CI: true
+      - name: Code linting
+        run: npm run lint:check
+        env:
+          CI: true

      - name: Build
        run: npm run build
@@ -1,5 +1,45 @@
 # Changelog

+## [0.8.0](https://www.github.com/ethersphere/bee-dashboard/compare/v0.7.0...v0.8.0) (2021-10-20)
+
+In this version we are adding support for the bee release 1.2.0. The app also went through a graphical redesign. More to come soon!
+
+
+### Features
+* support for bee 1.2.0
+* update files page design ([#218](https://www.github.com/ethersphere/bee-dashboard/issues/218)) ([93af7f3](https://www.github.com/ethersphere/bee-dashboard/commit/93af7f35a371d54864c068be6e1d8a70092afe28))
+* update info page design ([#207](https://www.github.com/ethersphere/bee-dashboard/issues/207)) ([57f5a73](https://www.github.com/ethersphere/bee-dashboard/commit/57f5a73f3a8d957bf967c51612dc09c802bb68dc))
+* update status page design ([#214](https://www.github.com/ethersphere/bee-dashboard/issues/214)) ([b666cd2](https://www.github.com/ethersphere/bee-dashboard/commit/b666cd2657cf1003651c44b6b4fa5bdcf11e895f))
+* update troubleshooting component design ([#204](https://www.github.com/ethersphere/bee-dashboard/issues/204)) ([c4c1573](https://www.github.com/ethersphere/bee-dashboard/commit/c4c1573263868b6dc8a863124e4aee824dceadbb))
+* update accounting page design ([#209](https://www.github.com/ethersphere/bee-dashboard/issues/209)) ([ecbc116](https://www.github.com/ethersphere/bee-dashboard/commit/ecbc1164756de912d14ce44aa9b2c155dded6dac))
+* update postage stamps page design ([#217](https://www.github.com/ethersphere/bee-dashboard/issues/217)) ([f241b2f](https://www.github.com/ethersphere/bee-dashboard/commit/f241b2fc5f6ec0741e275498ebef5a18ce710b81))
+* update settings page design ([#215](https://www.github.com/ethersphere/bee-dashboard/issues/215)) ([32e5ea9](https://www.github.com/ethersphere/bee-dashboard/commit/32e5ea9e56fdf957b758ec714bb6a4fe1903082a))
+
+
+### Bug Fixes
+
+* hover state style of ListItems which are clickable to be in line with other buttons ([#223](https://www.github.com/ethersphere/bee-dashboard/issues/223)) ([6c3f6c1](https://www.github.com/ethersphere/bee-dashboard/commit/6c3f6c1019801267aa5e51002f6e21f769edc210))
+* size of the troubleshoot component button ([#226](https://www.github.com/ethersphere/bee-dashboard/issues/226)) ([b4c9d9e](https://www.github.com/ethersphere/bee-dashboard/commit/b4c9d9e0182c4bee5ebb2d4e43e0aaad2aeb616b))
+* style of the update bee version button ([#222](https://www.github.com/ethersphere/bee-dashboard/issues/222)) ([83c6d13](https://www.github.com/ethersphere/bee-dashboard/commit/83c6d1341790d664c7986dd2a816fe6a3b069e5c))
+* typo in population text ([#228](https://www.github.com/ethersphere/bee-dashboard/issues/228)) ([cc5e778](https://www.github.com/ethersphere/bee-dashboard/commit/cc5e778f892b73b0b7ff5e0fa00c4816f3298ac7))
+* unknown routes should point to info page ([#227](https://www.github.com/ethersphere/bee-dashboard/issues/227)) ([f11bbd5](https://www.github.com/ethersphere/bee-dashboard/commit/f11bbd5008a78ef7d5c73fc2758ee4e2dafae01e))
+* used label in postage stamp list ([#220](https://www.github.com/ethersphere/bee-dashboard/issues/220)) ([0326568](https://www.github.com/ethersphere/bee-dashboard/commit/03265687ad630b0100da3134518b680327af1636))
+* wording in chequebook setup ([#211](https://www.github.com/ethersphere/bee-dashboard/issues/211)) ([e7188f4](https://www.github.com/ethersphere/bee-dashboard/commit/e7188f4a35c85204eef6a01ae6f1e679d076180c))
+
+
+## [0.7.0](https://www.github.com/ethersphere/bee-dashboard/compare/v0.6.0...v0.7.0) (2021-08-31)
+
+
+### Features
+
+* removed dark theme and theme switching ([#190](https://www.github.com/ethersphere/bee-dashboard/issues/190)) ([d1720e2](https://www.github.com/ethersphere/bee-dashboard/commit/d1720e243c4415d75763a229250fa20e3664290e))
+* separate info and status page ([#183](https://www.github.com/ethersphere/bee-dashboard/issues/183)) ([02a7bff](https://www.github.com/ethersphere/bee-dashboard/commit/02a7bff733b7fac70c6a36f94e6ba1425854a0af))
+* styling of the sidebar ([#194](https://github.com/ethersphere/bee-dashboard/pull/194))
+
+
+### Bug Fixes
+* bee 1.1.0 version reporting workaround ([#197](https://github.com/ethersphere/bee-dashboard/issues/197))
+
 ## [0.6.0](https://www.github.com/ethersphere/bee-dashboard/compare/v0.5.0...v0.6.0) (2021-08-24)


@@ -6,23 +6,28 @@
 ![](https://img.shields.io/badge/npm-%3E%3D6.0.0-orange.svg?style=flat-square)
 ![](https://img.shields.io/badge/Node.js-%3E%3D10.0.0-orange.svg?style=flat-square)

-> An app which helps users to setup their Bee node and do actions like cash out cheques, upload and download files or manage your postage stamps.
+> An app which helps users to setup their Bee node and do actions like cash out cheques, upload and download files or
+> manage your postage stamps.

-**Warning: This project is in alpha state. There might (and most probably will) be changes in the future to its API and working. Also, no guarantees can be made about its stability, efficiency, and security at this stage.**
+**Warning: This project is in alpha state. There might (and most probably will) be changes in the future to its API and
+working. Also, no guarantees can be made about its stability, efficiency, and security at this stage.**

-![Status page](/ui_samples/status.png)
+This project is intended to be used with the latest released version of Bee. Using it with older Bee versions is not
+recommended and may not work. Stay up to date by joining the [official Discord](https://discord.gg/GU22h2utj6) and by
+keeping an eye on the [releases tab](https://github.com/ethersphere/bee-dashboard/releases).

-| Node Setup | Browse & Upload Files | Accounting | Peers | Settings |
-|-------|---------|-------|----------|------|
-| ![Setup](/ui_samples/node_setup.png) | ![Files](/ui_samples/file_upload.png) | ![Accounting](/ui_samples/accounting.png) | ![Peers](/ui_samples/peers.png) | ![Settings](/ui_samples/settings.png) |
+![Status page](/ui_samples/info.png)

+| Node Setup                           | Upload Files                           | Download Content                           | Accounting                                | Postage Stamps                           |
+| ------------------------------------ | -------------------------------------- | ------------------------------------------ | ----------------------------------------- | ---------------------------------------- |
+| ![Setup](/ui_samples/node_setup.png) | ![Upload](/ui_samples/file_upload.png) | ![Download](/ui_samples/file_download.png) | ![Accounting](/ui_samples/accounting.png) | ![Peers](/ui_samples/postage_stamps.png) |

 ## Table of Contents

 - [Install](#install)
 - [Usage](#usage)
-    - [Terminal](#terminal)
-    - [Docker](#docker)
+  - [Terminal](#terminal)
+  - [Docker](#docker)
 - [Contribute](#contribute)
 - [Development](#development)
 - [Maintainers](#maintainers)
@@ -38,11 +43,15 @@ npm install -g @ethersphere/bee-dashboard

 ## Usage

-:warning: To successfully connect to the Bee node, you will need to enable the Debug API and CORS. You can do so by setting `cors-allowed-origins: ['*']` and `debug-api-enable: true` in the Bee config file and then restart the Bee node. To see where the config file is, consult the [official Bee documentation](https://docs.ethswarm.org/docs/working-with-bee/configuration#configuring-bee-installed-using-a-package-manager)
+:warning: To successfully connect to the Bee node, you will need to enable the Debug API and CORS. You can do so by
+setting `cors-allowed-origins: ['*']` and `debug-api-enable: true` in the Bee config file and then restart the Bee node.
+To see where the config file is, consult the
+[official Bee documentation](https://docs.ethswarm.org/docs/working-with-bee/configuration#configuring-bee-installed-using-a-package-manager)

 ### Terminal

 To start use:
+
 ```sh
 bee-dashboard
 ```
@@ -80,7 +89,8 @@ There are some ways you can make this module better:

 - Consult our [open issues](https://github.com/ethersphere/bee-dashboard/issues) and take on one of them
 - Help our tests reach 100% coverage!
- Join us in our [Discord chat](https://discord.gg/wdghaQsGq5) in the #develop-on-swarm channel if you have questions or want to give feedback
+- Join us in our [Discord chat](https://discord.gg/wdghaQsGq5) in the #develop-on-swarm channel if you have questions or
+  want to give feedback

 ## Maintainers

@@ -1,6 +1,6 @@
 {
  "name": "@ethersphere/bee-dashboard",
-  "version": "0.6.0",
+  "version": "0.8.0",
  "description": "An app which helps users to setup their Bee node and do actions like cash out cheques",
  "keywords": [
    "bee",
@@ -24,52 +24,52 @@
    "url": "https://github.com/ethersphere/bee-dashboard.git"
  },
  "dependencies": {
-    "@ethersphere/bee-js": "^1.2.0",
-    "@material-ui/core": "^4.11.4",
-    "@material-ui/icons": "^4.11.2",
-    "@material-ui/lab": "^4.0.0-alpha.57",
-    "@types/react-router": "^5.1.13",
-    "@types/react-router-dom": "^5.1.7",
-    "axios": "^0.21.1",
-    "bignumber.js": "^9.0.1",
-    "feather-icons": "^4.28.0",
-    "formik": "^2.2.8",
-    "formik-material-ui": "^3.0.1",
-    "material-ui-dropzone": "^3.5.0",
-    "notistack": "^1.0.9",
-    "opener": "^1.5.2",
-    "qrcode.react": "^1.0.1",
-    "react": "^17.0.2",
-    "react-copy-to-clipboard": "^5.0.3",
-    "react-dom": "^17.0.2",
-    "react-feather": "^2.0.9",
-    "react-identicons": "^1.2.5",
-    "react-router-dom": "^5.2.0",
-    "react-syntax-highlighter": "^15.4.3",
-    "semver": "^7.3.2",
-    "serve-handler": "^6.1.3"
+    "@ethersphere/bee-js": "2.1.0",
+    "@material-ui/core": "4.12.3",
+    "@material-ui/icons": "4.11.2",
+    "@material-ui/lab": "4.0.0-alpha.57",
+    "@types/react-router": "5.1.13",
+    "@types/react-router-dom": "5.1.7",
+    "axios": "0.21.1",
+    "bignumber.js": "9.0.1",
+    "feather-icons": "4.28.0",
+    "formik": "2.2.8",
+    "formik-material-ui": "3.0.1",
+    "material-ui-dropzone": "3.5.0",
+    "notistack": "1.0.9",
+    "opener": "1.5.2",
+    "qrcode.react": "1.0.1",
+    "react": "17.0.2",
+    "react-copy-to-clipboard": "5.0.3",
+    "react-dom": "17.0.2",
+    "react-feather": "2.0.9",
+    "react-identicons": "1.2.5",
+    "react-router-dom": "5.2.0",
+    "react-syntax-highlighter": "15.4.3",
+    "semver": "7.3.2",
+    "serve-handler": "6.1.3"
  },
  "devDependencies": {
-    "@testing-library/jest-dom": "^5.12.0",
-    "@testing-library/react": "^11.2.6",
-    "@testing-library/user-event": "^13.1.5",
-    "@types/jest": "^26.0.22",
-    "@types/node": "^14.14.41",
-    "@types/qrcode.react": "^1.0.1",
-    "@types/react": "^17.0.3",
-    "@types/react-copy-to-clipboard": "^5.0.0",
-    "@types/react-dom": "^17.0.3",
-    "@types/react-syntax-highlighter": "^13.5.0",
-    "@types/semver": "^7.3.6",
-    "eslint": "^7.24.0",
-    "eslint-config-prettier": "^8.2.0",
-    "eslint-plugin-jest": "^24.3.5",
-    "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-react": "^7.23.2",
-    "prettier": "^2.2.1",
+    "@testing-library/jest-dom": "5.12.0",
+    "@testing-library/react": "11.2.6",
+    "@testing-library/user-event": "13.1.5",
+    "@types/jest": "26.0.22",
+    "@types/node": "14.14.41",
+    "@types/qrcode.react": "1.0.1",
+    "@types/react": "17.0.3",
+    "@types/react-copy-to-clipboard": "5.0.0",
+    "@types/react-dom": "17.0.3",
+    "@types/react-syntax-highlighter": "13.5.0",
+    "@types/semver": "7.3.6",
+    "eslint": "7.32.0",
+    "eslint-config-prettier": "8.3.0",
+    "eslint-plugin-jest": "24.4.0",
+    "eslint-plugin-prettier": "3.4.1",
+    "eslint-plugin-react": "7.24.0",
+    "prettier": "2.3.2",
    "react-scripts": "4.0.3",
-    "typescript": "^4.2.4",
-    "web-vitals": "^1.1.1"
+    "typescript": "4.2.4",
+    "web-vitals": "1.1.1"
  },
  "scripts": {
    "prepare": "npm run build",
@@ -10,6 +10,6 @@ declare module 'react-identicons' {
    getColor?: () => string
  }

-  const Identicon = (props: Props): JSXElementConstructor => ReactNode
+  const Identicon = (props: Props): JSXElementConstructor => ReactNode //eslint-disable-line @typescript-eslint/no-unused-vars
  export default Identicon
 }
@@ -1,62 +1,42 @@
-import { ReactElement, useEffect, useState } from 'react'
+import { ReactElement } from 'react'
 import { BrowserRouter as Router } from 'react-router-dom'
 import './App.css'

-import { ThemeProvider } from '@material-ui/styles'
+import { ThemeProvider } from '@material-ui/core/styles'
 import CssBaseline from '@material-ui/core/CssBaseline'
 import { SnackbarProvider } from 'notistack'

-import BaseRouter from './routes/routes'
-import { lightTheme, darkTheme } from './theme'
+import BaseRouter from './routes'
+import Dashboard from './layout/Dashboard'
+import { theme } from './theme'
 import { Provider as StampsProvider } from './providers/Stamps'
 import { Provider as PlatformProvider } from './providers/Platform'
 import { Provider as BeeProvider } from './providers/Bee'
 import { Provider as SettingsProvider } from './providers/Settings'

-const App = (): ReactElement => {
-  const [themeMode, toggleThemeMode] = useState('light')
-
-  useEffect(() => {
-    const theme = localStorage.getItem('theme')
-
-    if (theme) {
-      toggleThemeMode(String(localStorage.getItem('theme')))
-    } else if (window?.matchMedia('(prefers-color-scheme: dark)')?.matches) {
-      toggleThemeMode('dark')
-    }
-
-    window?.matchMedia('(prefers-color-scheme: dark)')?.addEventListener('change', e => {
-      toggleThemeMode(e?.matches ? 'dark' : 'light')
-    })
-
-    return () =>
-      window?.matchMedia('(prefers-color-scheme: dark)')?.removeEventListener('change', e => {
-        toggleThemeMode(e?.matches ? 'dark' : 'light')
-      })
-  }, [])
-
-  return (
-    <div className="App">
-      <ThemeProvider theme={themeMode === 'light' ? lightTheme : darkTheme}>
-        <SettingsProvider>
-          <BeeProvider>
-            <StampsProvider>
-              <PlatformProvider>
-                <SnackbarProvider>
+const App = (): ReactElement => (
+  <div className="App">
+    <ThemeProvider theme={theme}>
+      <SettingsProvider>
+        <BeeProvider>
+          <StampsProvider>
+            <PlatformProvider>
+              <SnackbarProvider>
+                <Router>
                  <>
                    <CssBaseline />
-                    <Router>
+                    <Dashboard>
                      <BaseRouter />
-                    </Router>
+                    </Dashboard>
                  </>
-                </SnackbarProvider>
-              </PlatformProvider>
-            </StampsProvider>
-          </BeeProvider>
-        </SettingsProvider>
-      </ThemeProvider>
-    </div>
-  )
-}
+                </Router>
+              </SnackbarProvider>
+            </PlatformProvider>
+          </StampsProvider>
+        </BeeProvider>
+      </SettingsProvider>
+    </ThemeProvider>
+  </div>
+)

 export default App
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="172" height="30" viewBox="0 0 172 30">
+    <g fill="none" fill-rule="evenodd">
+        <g>
+            <g>
+                <path d="M0 0H172V30H0z" transform="translate(-64.000000, -64.000000) translate(64.000000, 64.000000)"/>
+                <path fill="#F9F9F9" fill-rule="nonzero" d="M94.26 21.338c1.242 0 2.168-.427 2.779-1.28.61-.853.916-2.118.916-3.796 0-1.677-.306-2.942-.916-3.795-.611-.854-1.537-1.28-2.778-1.28h-2.836v10.15h2.836zm-.057-1.062h-1.556V12.25h1.556c.814 0 1.427.28 1.84.843.411.562.617 1.357.617 2.385v1.57c0 1.028-.206 1.823-.618 2.386-.412.562-1.025.843-1.84.843zm6.767 1.062l.858-2.894h3.563l.858 2.894h1.294l-3.112-10.151h-1.614l-3.112 10.15h1.265zm4.13-3.956h-2.981l1.425-4.9h.131l1.425 4.9zm7.698 4.13c1.135 0 2.01-.266 2.625-.8.616-.533.924-1.27.924-2.21 0-.33-.044-.645-.131-.945-.087-.3-.235-.572-.444-.815-.208-.242-.482-.45-.821-.625-.34-.175-.757-.305-1.251-.393l-1.09-.189c-.718-.126-1.215-.332-1.491-.618-.277-.286-.415-.657-.415-1.112 0-.582.184-1.018.553-1.31.368-.29.897-.436 1.585-.436.63 0 1.144.117 1.541.35.398.232.737.533 1.018.901l.858-.742c-.339-.494-.787-.877-1.345-1.148-.557-.272-1.243-.408-2.058-.408-1.037 0-1.861.238-2.472.713-.61.475-.916 1.178-.916 2.109 0 .32.044.627.13.923.088.296.234.567.437.815.204.247.473.458.807.632.335.175.75.306 1.244.393l1.134.189c.698.116 1.188.313 1.469.589.281.276.422.662.422 1.156 0 .61-.194 1.086-.582 1.425-.388.34-.95.51-1.687.51-.61 0-1.137-.122-1.578-.364-.441-.243-.86-.611-1.258-1.106l-.887.728c.378.523.858.952 1.44 1.287.581.334 1.328.501 2.24.501zm7.262-.174v-4.61h3.956v4.61h1.221V11.187h-1.221v4.48h-3.956v-4.48h-1.222v10.15h1.222zm11.988 0c.388 0 .75-.075 1.084-.226.334-.15.625-.356.872-.618.248-.261.439-.572.575-.93.135-.36.203-.742.203-1.15 0-.707-.184-1.248-.552-1.62-.369-.374-.839-.629-1.411-.764v-.044c.465-.145.846-.393 1.142-.742.295-.349.443-.829.443-1.44 0-.794-.247-1.43-.741-1.904-.495-.476-1.178-.713-2.051-.713h-3.447v10.15h3.883zm-.567-5.745h-2.094V12.25h2.094c.514 0 .916.116 1.207.349.291.232.436.581.436 1.047v.567c0 .465-.145.812-.436 1.04-.29.227-.693.341-1.207.341zm.204 4.683h-2.298v-3.68h2.298c.562 0 1.003.13 1.323.386.32.257.48.643.48 1.156v.597c0 .523-.16.911-.48 1.163-.32.252-.761.378-1.323.378zm8.774 1.236c.62 0 1.154-.118 1.6-.356.446-.237.814-.58 1.105-1.025.29-.446.504-.994.64-1.644.136-.65.203-1.39.203-2.225 0-.824-.067-1.563-.203-2.217-.136-.655-.35-1.205-.64-1.651-.29-.446-.66-.788-1.105-1.025-.446-.238-.98-.357-1.6-.357-.62 0-1.154.12-1.6.357-.446.237-.814.579-1.105 1.025-.29.446-.504.996-.64 1.65-.136.655-.204 1.394-.204 2.218 0 .834.068 1.576.204 2.225.136.65.35 1.198.64 1.644.29.446.66.788 1.105 1.025.446.238.98.356 1.6.356zm0-1.061c-.407 0-.751-.08-1.033-.24-.28-.16-.513-.386-.698-.676-.184-.291-.317-.643-.4-1.055-.082-.412-.123-.875-.123-1.389v-1.658c0-.504.041-.964.123-1.381.083-.417.216-.77.4-1.062.185-.29.417-.516.698-.676.282-.16.626-.24 1.033-.24.407 0 .751.08 1.032.24.282.16.514.385.699.676.184.291.317.645.4 1.062.082.417.123.877.123 1.381v1.658c0 .514-.041.977-.124 1.39-.082.411-.215.763-.4 1.054-.184.29-.416.516-.698.676-.28.16-.625.24-1.032.24zm6.564.887l.858-2.894h3.563l.858 2.894h1.294l-3.112-10.151h-1.614l-3.113 10.15h1.266zm4.13-3.956h-2.981l1.425-4.9h.13l1.426 4.9zm5.895 3.956v-4.334h1.614l2.472 4.334h1.367l-2.588-4.392c.814-.078 1.434-.364 1.861-.858.427-.495.64-1.154.64-1.978 0-.921-.247-1.638-.742-2.152-.494-.514-1.212-.771-2.152-.771h-3.694v10.15h1.222zm2.443-5.366h-2.443v-3.723h2.443c.514 0 .914.128 1.2.385.286.257.429.623.429 1.098v.756c0 .475-.143.841-.43 1.098-.285.257-.685.386-1.2.386zm8.454 5.366c1.241 0 2.167-.427 2.778-1.28.61-.853.916-2.118.916-3.796 0-1.677-.305-2.942-.916-3.795-.611-.854-1.537-1.28-2.778-1.28h-2.836v10.15h2.836zm-.058-1.062h-1.556V12.25h1.556c.814 0 1.428.28 1.84.843.412.562.618 1.357.618 2.385v1.57c0 1.028-.206 1.823-.618 2.386-.412.562-1.026.843-1.84.843z" transform="translate(-64.000000, -64.000000) translate(64.000000, 64.000000)"/>
+                <path fill="#F9F9F9" d="M5.064 14.685l4.822 2.709v5.4L5.064 25.5l-4.82-2.706v-5.4l4.82-2.71zm11.034 0l4.822 2.709v5.4L16.098 25.5l-4.82-2.706v-5.4l4.82-2.71zm42.17-3.332v7.644l1.655 1.432.017-.014-1.187 1.327h-.019l-2.097-1.815-2.505 1.465c-.41.237-.876.362-1.35.357-.709-.005-1.392-.277-1.91-.762-.539-.503-.838-1.213-.824-1.95-.002-.974.52-1.874 1.367-2.356l5.05-2.895v-.644H50.55v-1.79h7.719zm-29.357.085c.802-.392 1.705-.529 2.588-.392.845.17 1.627.57 2.258 1.159.166.145.443.417.632.606l.122.121.08.08-1.178 1.336c.014-.017-.801-.773-.883-.841-.389-.367-.863-.627-1.383-.754-.539-.12-1.104-.022-1.573.27-.323.195-.508.552-.484.928.006.372.213.71.54.885.547.291 1.136.49 1.747.586.387.075.766.172 1.102.261.335.088.662.21.974.359.314.11.602.285.844.515.233.194.416.438.537.715.152.298.232.626.236.96.034.957-.403 1.87-1.17 2.444-.81.602-1.8.911-2.809.876-.379.002-.76-.036-1.131-.114-1.007-.247-1.925-.768-2.652-1.506-.05-.043-.608-.566-.608-.566l1.145-1.378c.246.23.486.462.741.677.313.303.655.574 1.02.813.913.518 2.035.518 2.948 0 .375-.227.596-.638.58-1.074.008-.364-.223-.687-.569-.799-.634-.27-1.298-.47-1.979-.59-.864-.152-1.684-.485-2.408-.978-.602-.433-.895-1.095-.895-2.025-.018-.85.365-1.657 1.03-2.183.186-.152.386-.282.598-.39zm17.705-.135c0-.022.006.006.006.006h1.922l-1.606 10.212h-3.152l-1.15-8.808h-.024l-1.164 8.804H38.3l-1.573-10.214h1.926l1.267 8.822h.024l1.114-8.822h3.157l1.109 8.822h.025zm33.488-.29c.703-.039 1.386.244 1.858.765.435.557.655 1.252.618 1.958v7.76h-1.89V14.08c-.014-.314-.113-.621-.288-.886-.212-.26-.54-.396-.873-.359-.362-.011-.708.145-.936.427-.272.41-.4.9-.357 1.391v6.854h-1.88v-7.337c.018-.353-.097-.7-.317-.976-.206-.241-.508-.373-.824-.359-.376-.022-.74.145-.966.448-.253.366-.379.808-.358 1.252v6.978h-1.876v-10.21h1.876v.946c.153-.354.401-.657.715-.877.38-.245.821-.37 1.272-.358.465-.02.923.124 1.296.404.304.244.535.57.664.937.424-.855 1.312-1.381 2.266-1.341zm-13.503-.011c.899-.011 1.763.349 2.387.996.66.62 1.031 1.488 1.023 2.393v.588h-1.764v-.588c0-.05-.003-.099-.008-.146-.08-.877-.859-1.519-1.735-1.436-.832.111-1.449.829-1.431 1.668v5.205h2.574v1.764H61.56v-1.764h1.687v-5.62l-1.697-1.538 1.178-1.315 1.195 1.096c.626-.846 1.625-1.332 2.677-1.303zm-10.136 4.89L52.32 18.27c-.288.158-.465.46-.46.789.01.496.41.894.905.905.166-.003.328-.052.468-.143h-.022l3.254-1.89v-2.04zM10.544 5.254l1.847 1.102v3.181l.634.354 2.347 1.318v2.15l-4.82 2.707-4.82-2.706v-5.4l4.812-2.706zm5.638-.755l2.568 1.44v2.886l-2.548 1.428-.02-.011-2.553-1.43V5.951l.005-.021L16.182 4.5z" transform="translate(-64.000000, -64.000000) translate(64.000000, 64.000000)"/>
+            </g>
+        </g>
+    </g>
+</svg>
@@ -1,101 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   viewBox="0 0 230.07104 58.680001"
-   version="1.1"
-   id="svg28566"
-   sodipodi:docname="swarm-logo.svg"
-   inkscape:version="1.0.1 (3bc2e81, 2020-09-07)"
-   width="230.07104"
-   height="58.68">
-  <metadata
-     id="metadata28570">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title>Swarm Logo &amp;amp; Lettering 4</dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="1920"
-     inkscape:window-height="1016"
-     id="namedview28568"
-     showgrid="false"
-     inkscape:zoom="3.1325"
-     inkscape:cx="123.33"
-     inkscape:cy="35.939998"
-     inkscape:window-x="0"
-     inkscape:window-y="27"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="Layer_2"
-     fit-margin-top="0"
-     fit-margin-left="0"
-     fit-margin-right="0"
-     fit-margin-bottom="0" />
-  <defs
-     id="defs28540">
-    <style
-       id="style28538">.cls-1{fill:#fafafa;}.cls-2{fill:#242424;}</style>
-  </defs>
-  <title
-     id="title28542">Swarm Logo &amp;amp; Lettering 4</title>
-  <g
-     id="Layer_2"
-     data-name="Layer 2"
-     transform="translate(-76.67,-71.05)">
-    <path
-       class="cls-2"
-       d="m 206.24,90.06 -3.54,24.65 c 0,0 -0.06,0 -0.07,0 l -3.1,-24.65 c 0,0 0,0 0,0 h -8.82 l -3.11,24.65 c 0,0 -0.06,0 -0.07,0 l -3.54,-24.65 h -5.38 c 0,0 0,0 0,0 L 183,118.6 h 8.8 L 195.05,94 c 0,0 0.06,0 0.07,0 l 3.21,24.61 h 8.81 l 4.49,-28.53 h -5.37 c 0,0 -0.02,-0.08 -0.02,-0.02 z"
-       id="path28546" />
-    <path
-       class="cls-2"
-       d="m 305,91.39 a 6.52,6.52 0 0 0 -5.19,-2.14 6.74,6.74 0 0 0 -6.33,3.75 v 0 a 5.85,5.85 0 0 0 -1.86,-2.62 5.61,5.61 0 0 0 -3.62,-1.13 6.26,6.26 0 0 0 -3.55,1 5.78,5.78 0 0 0 -2,2.45 v -2.64 c 0,0 0,0 0,0 h -5.24 c 0,0 0,0 0,0 v 28.53 h 5.24 v -19.5 a 5.72,5.72 0 0 1 1,-3.5 3.14,3.14 0 0 1 2.7,-1.25 2.85,2.85 0 0 1 2.3,1 4.08,4.08 0 0 1 0.89,2.73 v 20.5 c 0,0 0,0 0,0 h 5.25 V 99.42 a 6.08,6.08 0 0 1 1,-3.89 3.22,3.22 0 0 1 2.61,-1.19 2.75,2.75 0 0 1 2.44,1 4.9,4.9 0 0 1 0.81,2.92 v 20.28 c 0,0 0,0 0,0 h 5.28 V 96.86 A 8.18,8.18 0 0 0 305,91.39 Z"
-       id="path28548" />
-    <path
-       class="cls-2"
-       d="m 243.47,115.52 -3.32,3.71 h -0.05 l -5.86,-5.07 c 0,0 0,0 0,0 l -7,4.09 a 7.38,7.38 0 0 1 -3.77,1 7.91,7.91 0 0 1 -5.34,-2.13 7.28,7.28 0 0 1 -2.3,-5.45 7.54,7.54 0 0 1 3.82,-6.58 L 233.76,97 c 0,0 0,0 0,0 v -1.8 h -16.53 c 0,0 0,0 0,0 v -5 c 0,0 0,0 0,0 h 21.57 v 21.36 c 0,0 0,0 0,0 l 4.62,4 z m -18.8,-1.66 9.09,-5.28 c 0,0 0,0 0,0 v -5.7 a 0.03,0 0 0 0 -0.06,0 l -11.58,6.65 a 2.46,2.46 0 0 0 -1.29,2.2 2.59,2.59 0 0 0 2.53,2.53 2.51,2.51 0 0 0 1.31,-0.4 z"
-       id="path28550" />
-    <path
-       class="cls-2"
-       d="m 268.75,92 a 9.1,9.1 0 0 0 -6.67,-2.78 9,9 0 0 0 -7.48,3.64 l -3.34,-3.06 a 0.025,0 0 0 0 -0.05,0 l -3.29,3.67 4.74,4.3 v 15.7 h -4.71 c 0,0 0,0 0,0 v 4.93 h 17 c 0,0 0,0 0,0 v -4.93 h -7.19 V 98.93 a 4.61,4.61 0 0 1 4,-4.66 4.45,4.45 0 0 1 4.87,4.42 v 1.64 c 0,0 0,0 0,0 h 4.93 c 0,0 0,0 0,0 V 98.69 A 9.1,9.1 0 0 0 268.75,92 Z"
-       id="path28552" />
-    <path
-       class="cls-2"
-       d="m 173.32,106.74 a 5.41,5.41 0 0 0 -1.5,-2 6.58,6.58 0 0 0 -2.36,-1.44 15.31,15.31 0 0 0 -2.72,-1 c -0.94,-0.25 -2,-0.52 -3.08,-0.73 a 15.43,15.43 0 0 1 -4.88,-1.64 2.85,2.85 0 0 1 -1.51,-2.47 2.81,2.81 0 0 1 1.35,-2.59 5.91,5.91 0 0 1 4.4,-0.76 8.68,8.68 0 0 1 3.86,2.11 c 0.23,0.19 2.51,2.3 2.47,2.35 l 3.29,-3.73 c 0,0 -1.58,-1.6 -2.33,-2.26 a 13,13 0 0 0 -6.31,-3.24 12.18,12.18 0 0 0 -7.23,1.1 9.58,9.58 0 0 0 -1.67,1.09 7.57,7.57 0 0 0 -2.88,6.1 c 0,2.6 0.82,4.45 2.5,5.66 a 17.33,17.33 0 0 0 6.73,2.73 25.41,25.41 0 0 1 5.53,1.65 2.29,2.29 0 0 1 1.59,2.23 3.36,3.36 0 0 1 -1.62,3 8.35,8.35 0 0 1 -8.24,0 19.32,19.32 0 0 1 -2.85,-2.27 c -0.71,-0.6 -1.38,-1.25 -2.07,-1.89 v 0 l -3.2,3.85 c 0,0 1.56,1.46 1.7,1.58 a 15.66,15.66 0 0 0 7.41,4.21 15.26,15.26 0 0 0 3.16,0.32 12.45,12.45 0 0 0 7.85,-2.45 8.17,8.17 0 0 0 3.27,-6.83 6.14,6.14 0 0 0 -0.66,-2.68 z"
-       id="path28554" />
-    <polygon
-       class="cls-2"
-       points="76.67,122.17 90.14,129.73 103.61,122.17 103.61,107.08 90.14,99.51 76.67,107.08 "
-       id="polygon28556" />
-    <polygon
-       class="cls-2"
-       points="121.2,71.05 114.08,75.05 114.07,75.11 114.07,83.1 121.2,87.1 121.26,87.13 128.38,83.14 128.38,75.08 "
-       id="polygon28558" />
-    <polygon
-       class="cls-2"
-       points="134.44,107.08 120.97,99.51 107.5,107.08 107.5,122.17 120.97,129.73 134.44,122.17 "
-       id="polygon28560" />
-    <polygon
-       class="cls-2"
-       points="105.45,73.16 92,80.72 92,95.81 105.47,103.37 118.94,95.81 118.94,89.8 112.38,86.12 110.61,85.13 110.61,83.1 110.61,76.24 "
-       id="polygon28562" />
-  </g>
-</svg>
@@ -1 +0,0 @@
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 468 142" xml:space="preserve"><style>.st1,.st2,.st3,.st4{opacity:.45;enable-background:new}.st2,.st3,.st4{opacity:.6}.st3,.st4{opacity:.3}.st4{opacity:.8}</style><g id="XMLID_41_"><g id="XMLID_1_"><g id="Swarm_typeface"><g id="XMLID_42_" opacity=".8"><path id="XMLID_31_" d="M193.7 90c0 9.1-9.5 13.4-17.4 13.4-8.5 0-17.8-3.3-17.8-13.2 0-1.7.1-3 2.2-3 1 0 1.4 1.3 1.4 2.1 0 8.5 6.8 10.6 14.2 10.6 5.8 0 13.8-2.8 13.8-9.8 0-13-31-5.3-31-20.3 0-8.6 9.6-10.8 16.5-10.8 8.1 0 17.1 3 17.1 12.6 0 1-1 1.7-1.9 1.7-1.1 0-1.7-1-1.7-1.9-.3-2.1-.6-3.5-2.1-5.2-2.6-3-7.7-3.6-11.5-3.6-4.5 0-12.9 1-12.9 7.1.1 10.9 31.1 3.5 31.1 20.3z"/><path id="XMLID_30_" d="M264.4 60.9c0 .8-13.2 37.6-14.5 40.9-.3 1-1 1.1-1.9 1.1-.9 0-1.6-.1-1.9-1.1l-12.9-36-12.9 36c-.3 1-1 1.1-1.9 1.1-.9 0-1.7-.1-1.9-1.1-1.3-3.3-14.5-40.1-14.5-40.9 0-1 .8-1.8 1.8-1.8.8 0 1.4.4 1.7 1.1l13 36.4 13-36.4c.3-.9 1-1.1 1.8-1.1.9 0 1.6.3 1.9 1.1l12.9 36.4 13-36.4c.3-.8.9-1.1 1.7-1.1.8 0 1.6.8 1.6 1.8z"/><path id="XMLID_45_" d="M315.3 60.9v39.2c0 1-.8 1.8-1.8 1.8s-1.8-.8-1.8-1.8v-8.2c-3.6 6.6-10.3 11.2-18 11.2-12.1 0-20.7-10.8-20.7-22.4s8.6-22.4 20.7-22.4c7.7 0 14.4 4.6 18 11.2v-8.6c0-.9.8-1.8 1.8-1.8s1.8.9 1.8 1.8zm-4.5 19.8c0-9.6-6.9-18.8-17.1-18.8-10 0-17.1 9.1-17.1 18.8s7.1 18.8 17.1 18.8c10.2 0 17.1-9.2 17.1-18.8z"/><path id="XMLID_27_" d="M352.4 61.3c0 1.1-.6 1.8-1.7 1.9-10.5 1.6-15.3 10.2-15.3 20.2v17.2c0 1-.8 1.8-1.8 1.8-1.1 0-1.8-.8-1.8-1.8V61.4c0-1 .8-1.8 1.8-1.8 1.1 0 1.8.8 1.8 1.8v8c3-5 8.9-9.8 15.1-9.8.8 0 1.9.6 1.9 1.7z"/><path id="XMLID_2_" d="M430.6 77.7v23c0 1-.9 1.8-1.8 1.8-1 0-1.8-.8-1.8-1.8v-23c0-7.7-4.4-15.3-13-15.3-10.9 0-15 11.6-15 20.6v17.8c0 1-.9 1.8-1.8 1.8-1 0-1.8-.8-1.8-1.8v-23c0-7.7-4.4-15.3-13-15.3-10.9 0-15.4 8.6-15.1 20.1 0 .3.1.8 0 .9v17.4c0 1-.8 1.8-1.8 1.8s-1.8-.8-1.8-1.8V61.4c0-1 .8-1.8 1.8-1.8s1.8.8 1.8 1.8V68c3.1-5.5 8.6-9.1 15.1-9.1 7.3 0 13 4.6 15.3 11.5 3-6.7 8.8-11.5 16.2-11.5 10.6-.1 16.7 9.1 16.7 18.8z"/></g></g></g><g id="Swarm_Icon"><path id="XMLID_26_" class="st1" d="M121.3 27v12.4l-11.1-6.2V20.7z"/><path id="XMLID_25_" class="st2" d="M110.2 33.2v12.4l11.1-6.2V27z"/><path id="XMLID_24_" class="st3" d="M37.4 102.7l22.1 12.4 22.1-12.4-22.1-12.5z"/><path id="XMLID_23_" class="st1" d="M59.5 90.2v24.9l-22.1-12.4V77.8z"/><path id="XMLID_22_" class="st1" d="M81.6 77.8v24.9L59.5 90.2V65.4z"/><path id="XMLID_21_" class="st2" d="M59.5 90.2v24.9l22.1-12.4V77.8z"/><path id="XMLID_20_" class="st2" d="M37.4 77.8v24.9l22.1-12.5V65.4z"/><path id="XMLID_19_" class="st4" d="M84 48.4l11 6.2 11.1-6.2L95 42.2z"/><path id="XMLID_18_" class="st4" d="M37.4 77.8l22.1 12.4 22.1-12.4-22.1-12.4z"/><path id="XMLID_17_" class="st3" d="M86.9 102.7l22.1 12.4 22.1-12.4L109 90.2z"/><path id="XMLID_16_" class="st1" d="M109 90.2v24.9l-22.1-12.4V77.8z"/><path id="XMLID_15_" class="st1" d="M131.1 77.8v24.9L109 90.2V65.4z"/><path id="XMLID_14_" class="st2" d="M109 90.2v24.9l22.1-12.4V77.8z"/><path id="XMLID_13_" class="st2" d="M86.9 77.8v24.9L109 90.2V65.4z"/><path id="XMLID_12_" class="st4" d="M86.9 77.8L109 90.2l22.1-12.4L109 65.4z"/><path id="XMLID_11_" class="st2" d="M84 35.9v12.5l11-6.2V29.7z"/><path id="XMLID_10_" class="st3" d="M61.9 60.8L84 73.2l22.1-12.4L84 48.4z"/><path id="XMLID_9_" class="st1" d="M84 48.4v24.8L61.9 60.8V35.9z"/><path id="XMLID_8_" class="st2" d="M61.9 35.9v24.9L84 48.4V23.5z"/><path id="XMLID_7_" class="st2" d="M95 54.6V42.2l-11 6.2v24.8L95 67l11.1-6.2V48.4z"/><g id="XMLID_5_"><path id="XMLID_6_" class="st1" d="M95 29.7l-11-6.2v24.9l22.1 12.4V48.4L95 42.2z"/></g><path id="XMLID_4_" class="st4" d="M84 23.5l11 6.2-11 6.2v12.5L61.9 35.9z"/><path id="XMLID_3_" class="st4" d="M99.2 27l11 6.2 11.1-6.2-11.1-6.3z"/></g></g></svg>
@@ -1,35 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" viewBox="0 0 230.07104 58.680001" version="1.1" id="svg28566" sodipodi:docname="swarm-logo.svg" inkscape:version="1.0.1 (3bc2e81, 2020-09-07)" width="230.07104" height="58.68">
-  <metadata id="metadata28570">
-    <rdf:RDF>
-      <cc:Work rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
-        <dc:title>Swarm Logo &amp;amp; Lettering 4</dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <sodipodi:namedview pagecolor="#ffffff" bordercolor="#666666" borderopacity="1" objecttolerance="10" gridtolerance="10" guidetolerance="10" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-width="1920" inkscape:window-height="1016" id="namedview28568" showgrid="false" inkscape:zoom="3.1325" inkscape:cx="123.33" inkscape:cy="35.939998" inkscape:window-x="0" inkscape:window-y="27" inkscape:window-maximized="1" inkscape:current-layer="Layer_2" fit-margin-top="0" fit-margin-left="0" fit-margin-right="0" fit-margin-bottom="0"/>
-  <defs id="defs28540">
-    <style id="style28538">
-      .cls-1 {
-        fill: #fafafa;
-      }
-      .cls-2 {
-        fill: #dd7200;
-      }
-    </style>
-  </defs>
-  <title id="title28542">Swarm Logo &amp;amp; Lettering 4</title>
-  <g id="Layer_2" data-name="Layer 2" transform="translate(-76.67,-71.05)">
-    <path class="cls-2" d="m 206.24,90.06 -3.54,24.65 c 0,0 -0.06,0 -0.07,0 l -3.1,-24.65 c 0,0 0,0 0,0 h -8.82 l -3.11,24.65 c 0,0 -0.06,0 -0.07,0 l -3.54,-24.65 h -5.38 c 0,0 0,0 0,0 L 183,118.6 h 8.8 L 195.05,94 c 0,0 0.06,0 0.07,0 l 3.21,24.61 h 8.81 l 4.49,-28.53 h -5.37 c 0,0 -0.02,-0.08 -0.02,-0.02 z" id="path28546"/>
-    <path class="cls-2" d="m 305,91.39 a 6.52,6.52 0 0 0 -5.19,-2.14 6.74,6.74 0 0 0 -6.33,3.75 v 0 a 5.85,5.85 0 0 0 -1.86,-2.62 5.61,5.61 0 0 0 -3.62,-1.13 6.26,6.26 0 0 0 -3.55,1 5.78,5.78 0 0 0 -2,2.45 v -2.64 c 0,0 0,0 0,0 h -5.24 c 0,0 0,0 0,0 v 28.53 h 5.24 v -19.5 a 5.72,5.72 0 0 1 1,-3.5 3.14,3.14 0 0 1 2.7,-1.25 2.85,2.85 0 0 1 2.3,1 4.08,4.08 0 0 1 0.89,2.73 v 20.5 c 0,0 0,0 0,0 h 5.25 V 99.42 a 6.08,6.08 0 0 1 1,-3.89 3.22,3.22 0 0 1 2.61,-1.19 2.75,2.75 0 0 1 2.44,1 4.9,4.9 0 0 1 0.81,2.92 v 20.28 c 0,0 0,0 0,0 h 5.28 V 96.86 A 8.18,8.18 0 0 0 305,91.39 Z" id="path28548"/>
-    <path class="cls-2" d="m 243.47,115.52 -3.32,3.71 h -0.05 l -5.86,-5.07 c 0,0 0,0 0,0 l -7,4.09 a 7.38,7.38 0 0 1 -3.77,1 7.91,7.91 0 0 1 -5.34,-2.13 7.28,7.28 0 0 1 -2.3,-5.45 7.54,7.54 0 0 1 3.82,-6.58 L 233.76,97 c 0,0 0,0 0,0 v -1.8 h -16.53 c 0,0 0,0 0,0 v -5 c 0,0 0,0 0,0 h 21.57 v 21.36 c 0,0 0,0 0,0 l 4.62,4 z m -18.8,-1.66 9.09,-5.28 c 0,0 0,0 0,0 v -5.7 a 0.03,0 0 0 0 -0.06,0 l -11.58,6.65 a 2.46,2.46 0 0 0 -1.29,2.2 2.59,2.59 0 0 0 2.53,2.53 2.51,2.51 0 0 0 1.31,-0.4 z" id="path28550"/>
-    <path class="cls-2" d="m 268.75,92 a 9.1,9.1 0 0 0 -6.67,-2.78 9,9 0 0 0 -7.48,3.64 l -3.34,-3.06 a 0.025,0 0 0 0 -0.05,0 l -3.29,3.67 4.74,4.3 v 15.7 h -4.71 c 0,0 0,0 0,0 v 4.93 h 17 c 0,0 0,0 0,0 v -4.93 h -7.19 V 98.93 a 4.61,4.61 0 0 1 4,-4.66 4.45,4.45 0 0 1 4.87,4.42 v 1.64 c 0,0 0,0 0,0 h 4.93 c 0,0 0,0 0,0 V 98.69 A 9.1,9.1 0 0 0 268.75,92 Z" id="path28552"/>
-    <path class="cls-2" d="m 173.32,106.74 a 5.41,5.41 0 0 0 -1.5,-2 6.58,6.58 0 0 0 -2.36,-1.44 15.31,15.31 0 0 0 -2.72,-1 c -0.94,-0.25 -2,-0.52 -3.08,-0.73 a 15.43,15.43 0 0 1 -4.88,-1.64 2.85,2.85 0 0 1 -1.51,-2.47 2.81,2.81 0 0 1 1.35,-2.59 5.91,5.91 0 0 1 4.4,-0.76 8.68,8.68 0 0 1 3.86,2.11 c 0.23,0.19 2.51,2.3 2.47,2.35 l 3.29,-3.73 c 0,0 -1.58,-1.6 -2.33,-2.26 a 13,13 0 0 0 -6.31,-3.24 12.18,12.18 0 0 0 -7.23,1.1 9.58,9.58 0 0 0 -1.67,1.09 7.57,7.57 0 0 0 -2.88,6.1 c 0,2.6 0.82,4.45 2.5,5.66 a 17.33,17.33 0 0 0 6.73,2.73 25.41,25.41 0 0 1 5.53,1.65 2.29,2.29 0 0 1 1.59,2.23 3.36,3.36 0 0 1 -1.62,3 8.35,8.35 0 0 1 -8.24,0 19.32,19.32 0 0 1 -2.85,-2.27 c -0.71,-0.6 -1.38,-1.25 -2.07,-1.89 v 0 l -3.2,3.85 c 0,0 1.56,1.46 1.7,1.58 a 15.66,15.66 0 0 0 7.41,4.21 15.26,15.26 0 0 0 3.16,0.32 12.45,12.45 0 0 0 7.85,-2.45 8.17,8.17 0 0 0 3.27,-6.83 6.14,6.14 0 0 0 -0.66,-2.68 z" id="path28554"/>
-    <polygon class="cls-2" points="76.67,122.17 90.14,129.73 103.61,122.17 103.61,107.08 90.14,99.51 76.67,107.08 " id="polygon28556"/>
-    <polygon class="cls-2" points="121.2,71.05 114.08,75.05 114.07,75.11 114.07,83.1 121.2,87.1 121.26,87.13 128.38,83.14 128.38,75.08 " id="polygon28558"/>
-    <polygon class="cls-2" points="134.44,107.08 120.97,99.51 107.5,107.08 107.5,122.17 120.97,129.73 134.44,122.17 " id="polygon28560"/>
-    <polygon class="cls-2" points="105.45,73.16 92,80.72 92,95.81 105.47,103.37 118.94,95.81 118.94,89.8 112.38,86.12 110.61,85.13 110.61,83.1 110.61,76.24 " id="polygon28562"/>
-  </g>
-</svg>
@@ -7,6 +7,7 @@ import DialogContentText from '@material-ui/core/DialogContentText'
 import DialogTitle from '@material-ui/core/DialogTitle'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useState, useContext } from 'react'
+import { Zap } from 'react-feather'
 import { Context as SettingsContext } from '../providers/Settings'
 import EthereumAddress from './EthereumAddress'

@@ -59,8 +60,8 @@ export default function CheckoutModal({ peerId, uncashedAmount }: Props): ReactE

  return (
    <div>
-      <Button variant="contained" color="primary" onClick={handleClickOpen} style={{ marginLeft: '7px' }}>
-        Cashout
+      <Button variant="contained" onClick={handleClickOpen} startIcon={<Zap size="1rem" />}>
+        Cash out peer {peerId.substr(0, 8)}[…]
      </Button>
      <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
        <DialogTitle id="form-dialog-title">Cashout Cheque</DialogTitle>
@@ -1,50 +0,0 @@
-import React, { ReactElement, useState } from 'react'
-import { TextField, Button } from '@material-ui/core'
-
-interface Props {
-  defaultHost?: string
-  setHost: (host: string) => void
-}
-
-export default function ConnectToHost(props: Props): ReactElement {
-  const [hostInputVisible, toggleHostInputVisibility] = useState(false)
-  const [host, setHost] = useState('')
-
-  const handleNewHostConnection = () => {
-    if (host) {
-      props.setHost(host)
-      toggleHostInputVisibility(!hostInputVisible)
-    }
-  }
-
-  return (
-    <div>
-      {hostInputVisible ? (
-        <div style={{ display: 'flex' }}>
-          <TextField
-            defaultValue={props.defaultHost}
-            label="Enter host"
-            variant="outlined"
-            size="small"
-            onChange={e => setHost(e.target.value)}
-            style={{ marginRight: '15px', minWidth: '300px' }}
-          />
-          <Button onClick={() => handleNewHostConnection()} size="small" variant="outlined">
-            Connect
-          </Button>
-          <Button
-            style={{ marginLeft: '7px' }}
-            onClick={() => toggleHostInputVisibility(!hostInputVisible)}
-            size="small"
-          >
-            Cancel
-          </Button>
-        </div>
-      ) : (
-        <Button onClick={() => toggleHostInputVisibility(!hostInputVisible)} size="small" variant="outlined">
-          Change host
-        </Button>
-      )}
-    </div>
-  )
-}
@@ -1,59 +0,0 @@
-import { ReactElement } from 'react'
-
-import { createStyles, makeStyles } from '@material-ui/core/styles'
-import { Card, CardContent, Typography } from '@material-ui/core/'
-
-import EthereumAddress from '../components/EthereumAddress'
-
-import type { ChequebookAddressResponse, NodeAddresses } from '@ethersphere/bee-js'
-
-const useStyles = makeStyles(() =>
-  createStyles({
-    root: {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'space-around',
-      flexWrap: 'wrap',
-    },
-    details: {
-      display: 'flex',
-      flexDirection: 'column',
-    },
-    content: {
-      flex: '1 0 auto',
-    },
-  }),
-)
-
-interface Props {
-  nodeAddresses: NodeAddresses | null
-  chequebookAddress: ChequebookAddressResponse | null
-}
-
-function EthereumAddressCard(props: Props): ReactElement {
-  const classes = useStyles()
-
-  return (
-    <Card className={classes.root}>
-      <div className={classes.details}>
-        <CardContent className={classes.content}>
-          <Typography variant="subtitle1" gutterBottom>
-            Ethereum Address
-          </Typography>
-          <EthereumAddress address={props.nodeAddresses?.ethereum} />
-        </CardContent>
-      </div>
-
-      <div className={classes.details}>
-        <CardContent className={classes.content}>
-          <Typography variant="subtitle1" gutterBottom>
-            Chequebook Contract Address
-          </Typography>
-          <EthereumAddress address={props.chequebookAddress?.chequebookAddress} />
-        </CardContent>
-      </div>
-    </Card>
-  )
-}
-
-export default EthereumAddressCard
@@ -0,0 +1,82 @@
+import { ReactElement, ReactNode, useState } from 'react'
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
+import { Collapse, ListItem, ListItemText, Typography } from '@material-ui/core'
+import { ExpandLess, ExpandMore } from '@material-ui/icons'
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      width: '100%',
+      padding: 0,
+      margin: 0,
+      marginTop: theme.spacing(4),
+      '&:first-child': {
+        marginTop: 0,
+      },
+    },
+    rootLevel1: { marginTop: theme.spacing(1) },
+    rootLevel2: { marginTop: theme.spacing(0.5) },
+    header: {
+      backgroundColor: theme.palette.background.paper,
+    },
+    contentLevel0: {
+      marginTop: theme.spacing(1),
+    },
+    contentLevel12: {
+      marginTop: theme.spacing(0.25),
+    },
+    infoText: {
+      color: '#c9c9c9',
+    },
+  }),
+)
+
+interface Props {
+  children?: ReactNode
+  label: ReactNode
+  info?: ReactNode
+  level?: 0 | 1 | 2
+  defaultOpen?: boolean
+}
+
+export default function ExpandableList({ children, label, level, defaultOpen, info }: Props): ReactElement | null {
+  const classes = useStyles()
+  const [open, setOpen] = useState<boolean>(Boolean(defaultOpen))
+
+  const handleClick = () => {
+    setOpen(!open)
+  }
+
+  let rootLevelClass = ''
+  let typographyVariant: 'h1' | 'h2' | 'h3' = 'h1'
+  let contentLevelClass = classes.contentLevel0
+
+  if (level === 1) {
+    rootLevelClass = classes.rootLevel1
+    typographyVariant = 'h2'
+    contentLevelClass = classes.contentLevel12
+  } else if (level === 2) {
+    rootLevelClass = classes.rootLevel2
+    typographyVariant = 'h3'
+    contentLevelClass = classes.contentLevel12
+  }
+
+  return (
+    <div className={`${classes.root} ${rootLevelClass}`}>
+      <ListItem button onClick={handleClick} className={classes.header}>
+        <ListItemText primary={<Typography variant={typographyVariant}>{label}</Typography>} />
+        <div style={{ display: 'flex' }}>
+          {!open && (
+            <Typography variant="body2" className={classes.infoText}>
+              {info}
+            </Typography>
+          )}
+          {open ? <ExpandLess /> : <ExpandMore />}
+        </div>
+      </ListItem>
+      <Collapse in={open} timeout="auto" unmountOnExit>
+        <div className={contentLevelClass}>{children}</div>
+      </Collapse>
+    </div>
+  )
+}
@@ -0,0 +1,54 @@
+import { ReactElement, ReactNode } from 'react'
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
+import { Typography, Grid, IconButton, Tooltip } from '@material-ui/core'
+import { Info } from 'react-feather'
+import ListItem from '@material-ui/core/ListItem'
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    header: {
+      backgroundColor: theme.palette.background.paper,
+      marginBottom: theme.spacing(0.25),
+      wordBreak: 'break-word',
+    },
+    copyValue: {
+      cursor: 'pointer',
+      padding: theme.spacing(1),
+      borderRadius: 0,
+      '&:hover': {
+        backgroundColor: '#fcf2e8',
+        color: theme.palette.primary.main,
+      },
+    },
+  }),
+)
+
+interface Props {
+  label?: ReactNode
+  value?: ReactNode
+  tooltip?: string
+}
+
+export default function ExpandableListItem({ label, value, tooltip }: Props): ReactElement | null {
+  const classes = useStyles()
+
+  return (
+    <ListItem className={classes.header}>
+      <Grid container direction="row" justifyContent="space-between" alignItems="center">
+        {label && <Typography variant="body1">{label}</Typography>}
+        {value && (
+          <Typography variant="body2">
+            {value}
+            {tooltip && (
+              <Tooltip title={tooltip} placement="top" arrow>
+                <IconButton size="small" className={classes.copyValue}>
+                  <Info strokeWidth={1} />
+                </IconButton>
+              </Tooltip>
+            )}
+          </Typography>
+        )}
+      </Grid>
+    </ListItem>
+  )
+}
@@ -0,0 +1,39 @@
+import { ReactElement, ReactNode } from 'react'
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
+import { Grid } from '@material-ui/core'
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    action: {
+      marginTop: theme.spacing(0.75),
+      marginBottom: theme.spacing(1),
+      marginRight: theme.spacing(1),
+    },
+  }),
+)
+
+interface Props {
+  children: ReactNode | ReactNode[]
+}
+
+export default function ExpandableListItemActions({ children }: Props): ReactElement | null {
+  const classes = useStyles()
+
+  if (Array.isArray(children)) {
+    return (
+      <Grid container direction="row">
+        {children.map((a, i) => (
+          <Grid key={i} className={classes.action}>
+            {a}
+          </Grid>
+        ))}
+      </Grid>
+    )
+  }
+
+  return (
+    <Grid container direction="row">
+      <Grid className={classes.action}>{children}</Grid>
+    </Grid>
+  )
+}
@@ -0,0 +1,145 @@
+import { ReactElement, ChangeEvent, useState } from 'react'
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
+import Collapse from '@material-ui/core/Collapse'
+import { ListItem, Typography, Grid, IconButton, InputBase, Button } from '@material-ui/core'
+import { Edit, Minus, RotateCcw, Check } from 'react-feather'
+
+import ExpandableListItemActions from './ExpandableListItemActions'
+import ExpandableListItemNote from './ExpandableListItemNote'
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    header: {
+      backgroundColor: theme.palette.background.paper,
+      marginBottom: theme.spacing(0.25),
+      borderLeft: `${theme.spacing(0.25)}px solid rgba(0,0,0,0)`,
+      wordBreak: 'break-word',
+    },
+    headerOpen: {
+      borderLeft: `${theme.spacing(0.25)}px solid ${theme.palette.primary.main}`,
+    },
+    copyValue: {
+      cursor: 'pointer',
+      padding: theme.spacing(1),
+      borderRadius: 0,
+      '&:hover': {
+        backgroundColor: '#fcf2e8',
+        color: theme.palette.primary.main,
+      },
+    },
+    content: {
+      marginTop: theme.spacing(1),
+      marginBottom: theme.spacing(1),
+    },
+    keyMargin: {
+      marginRight: theme.spacing(1),
+    },
+    unselectableLabel: {
+      cursor: 'default',
+      userSelect: 'none',
+      // Many browsers don't support yet the general user-select css property
+      WebkitUserSelect: 'none',
+      MozUserSelect: 'none',
+      msUserSelect: 'none',
+    },
+  }),
+)
+
+interface Props {
+  label: string
+  value?: string
+  placeholder?: string
+  helperText?: string
+  expandedOnly?: boolean
+  confirmLabel?: string
+  confirmLabelDisabled?: boolean
+  onChange?: (value: string) => void
+  onConfirm: (value: string) => void
+}
+
+export default function ExpandableListItemKey({
+  label,
+  value,
+  onConfirm,
+  onChange,
+  confirmLabel,
+  confirmLabelDisabled,
+  expandedOnly,
+  helperText,
+  placeholder,
+}: Props): ReactElement | null {
+  const classes = useStyles()
+  const [open, setOpen] = useState(Boolean(expandedOnly))
+  const [inputValue, setInputValue] = useState<string>(value || '')
+  const toggleOpen = () => setOpen(!open)
+  const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    setInputValue(e.target.value)
+
+    if (onChange) onChange(e.target.value)
+  }
+
+  return (
+    <>
+      <ListItem className={`${classes.header} ${open ? classes.headerOpen : ''}`}>
+        <Grid container direction="column" justifyContent="space-between" alignItems="stretch">
+          <Grid container direction="row" justifyContent="space-between" alignItems="center">
+            {label && (
+              <Typography variant="body1" className={classes.unselectableLabel}>
+                {label}
+              </Typography>
+            )}
+            <Typography variant="body2">
+              <div>
+                {!open && value}
+                {!expandedOnly && (
+                  <IconButton size="small" className={classes.copyValue}>
+                    {open ? (
+                      <Minus onClick={toggleOpen} strokeWidth={1} />
+                    ) : (
+                      <Edit onClick={toggleOpen} strokeWidth={1} />
+                    )}
+                  </IconButton>
+                )}
+              </div>
+            </Typography>
+          </Grid>
+          <Collapse in={open} timeout="auto" unmountOnExit>
+            <InputBase
+              value={inputValue}
+              placeholder={placeholder}
+              onChange={handleChange}
+              fullWidth
+              className={classes.content}
+              autoFocus
+            />
+          </Collapse>
+        </Grid>
+      </ListItem>
+      <Collapse in={open} timeout="auto" unmountOnExit>
+        {helperText && <ExpandableListItemNote>{helperText}</ExpandableListItemNote>}
+        <ExpandableListItemActions>
+          <Button
+            variant="contained"
+            disabled={
+              inputValue === value ||
+              Boolean(confirmLabelDisabled) || // Disable if external validation is provided
+              (inputValue === '' && value === undefined) // Disable if no initial value was not provided and the field is empty. The undefined check is improtant so that it is possible to submit with empty input in other cases
+            }
+            startIcon={<Check size="1rem" />}
+            onClick={() => onConfirm(inputValue)}
+          >
+            {confirmLabel || 'Save'}
+          </Button>
+          <Button
+            variant="contained"
+            disabled={inputValue === value || inputValue === ''}
+            startIcon={<RotateCcw size="1rem" />}
+            onClick={() => setInputValue(value || '')}
+          >
+            Cancel
+          </Button>
+        </ExpandableListItemActions>
+      </Collapse>
+    </>
+  )
+}
@@ -0,0 +1,114 @@
+import { ReactElement, useState } from 'react'
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
+import Collapse from '@material-ui/core/Collapse'
+import { ListItem, Typography, Grid, IconButton, Tooltip } from '@material-ui/core'
+import { Eye, Minus } from 'react-feather'
+import { CopyToClipboard } from 'react-copy-to-clipboard'
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    header: {
+      backgroundColor: theme.palette.background.paper,
+      marginBottom: theme.spacing(0.25),
+      borderLeft: `${theme.spacing(0.25)}px solid rgba(0,0,0,0)`,
+      wordBreak: 'break-word',
+    },
+    headerOpen: {
+      borderLeft: `${theme.spacing(0.25)}px solid ${theme.palette.primary.main}`,
+    },
+    copyValue: {
+      cursor: 'pointer',
+      padding: theme.spacing(1),
+      borderRadius: 0,
+      '&:hover': {
+        backgroundColor: '#fcf2e8',
+        color: theme.palette.primary.main,
+      },
+    },
+    content: {
+      marginTop: theme.spacing(2),
+      marginBottom: theme.spacing(2),
+    },
+    keyMargin: {
+      marginRight: theme.spacing(1),
+    },
+  }),
+)
+
+interface Props {
+  label: string
+  value: string
+}
+
+const lengthWithoutPrefix = (s: string) => s.replace(/^0x/i, '').length
+
+function isPrefixedHexString(s: unknown): boolean {
+  return typeof s === 'string' && /^0x[0-9a-f]+$/i.test(s)
+}
+
+const split = (s: string): string[] => {
+  const nonPrefixLength = lengthWithoutPrefix(s)
+
+  if (nonPrefixLength % 6 === 0) return s.match(/(0x|.{6})/gi) || []
+
+  return s.match(/(0x|.{1,8})/gi) || []
+}
+
+export default function ExpandableListItemKey({ label, value }: Props): ReactElement | null {
+  const classes = useStyles()
+  const [open, setOpen] = useState(false)
+  const [copied, setCopied] = useState(false)
+  const toggleOpen = () => setOpen(!open)
+
+  const tooltipClickHandler = () => setCopied(true)
+  const tooltipCloseHandler = () => setCopied(false)
+
+  const splitValues = split(value)
+  const hasPrefix = isPrefixedHexString(value)
+
+  return (
+    <ListItem className={`${classes.header} ${open ? classes.headerOpen : ''}`}>
+      <Grid container direction="column" justifyContent="space-between" alignItems="stretch">
+        <Grid container direction="row" justifyContent="space-between" alignItems="center">
+          {label && <Typography variant="body1">{label}</Typography>}
+          <Typography variant="body2">
+            <div>
+              {!open && (
+                <span className={classes.copyValue}>
+                  <Tooltip title={copied ? 'Copied' : 'Copy'} placement="top" arrow onClose={tooltipCloseHandler}>
+                    <CopyToClipboard text={value}>
+                      <span onClick={tooltipClickHandler}>{`${
+                        hasPrefix ? `${splitValues[0]} ${splitValues[1]}` : splitValues[0]
+                      }[…]${splitValues[splitValues.length - 1]}`}</span>
+                    </CopyToClipboard>
+                  </Tooltip>
+                </span>
+              )}
+              <IconButton size="small" className={classes.copyValue}>
+                {open ? <Minus onClick={toggleOpen} strokeWidth={1} /> : <Eye onClick={toggleOpen} strokeWidth={1} />}
+              </IconButton>
+            </div>
+          </Typography>
+        </Grid>
+        <Collapse in={open} timeout="auto" unmountOnExit>
+          <div className={classes.content}>
+            <Tooltip title={copied ? 'Copied' : 'Copy'} placement="top" arrow onClose={tooltipCloseHandler}>
+              <CopyToClipboard text={value}>
+                {/* This has to be wrapped in two spans otherwise either the tooltip or the highlighting does not work*/}
+                <span onClick={tooltipClickHandler}>
+                  <span className={classes.copyValue}>
+                    {splitValues.map((s, i) => (
+                      <Typography variant="body2" key={i} className={classes.keyMargin} component="span">
+                        {s}
+                      </Typography>
+                    ))}
+                  </span>
+                </span>
+              </CopyToClipboard>
+            </Tooltip>
+          </div>
+        </Collapse>
+      </Grid>
+    </ListItem>
+  )
+}
@@ -0,0 +1,32 @@
+import { ReactElement, ReactNode } from 'react'
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
+import { Typography } from '@material-ui/core'
+import ListItem from '@material-ui/core/ListItem'
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    header: {
+      backgroundColor: '#F7F7F7',
+      marginBottom: theme.spacing(0.25),
+    },
+    typography: {
+      color: '#242424',
+    },
+  }),
+)
+
+interface Props {
+  children?: ReactNode | ReactNode[]
+}
+
+export default function ExpandableListItemNote({ children }: Props): ReactElement | null {
+  const classes = useStyles()
+
+  return (
+    <ListItem className={classes.header}>
+      <Typography variant="body1" className={classes.typography}>
+        {children}
+      </Typography>
+    </ListItem>
+  )
+}
@@ -1,55 +0,0 @@
-import { useState, ReactElement } from 'react'
-
-import { createStyles, makeStyles } from '@material-ui/core/styles'
-import { Toolbar, IconButton } from '@material-ui/core/'
-
-import { Sun, Moon } from 'react-feather'
-
-const drawerWidth = 240
-
-const useStyles = makeStyles(() =>
-  createStyles({
-    appBar: {
-      width: `calc(100% - ${drawerWidth}px)`,
-      marginLeft: drawerWidth,
-    },
-  }),
-)
-interface Props {
-  themeMode: string
-}
-
-export default function SideBar(props: Props): ReactElement {
-  const [darkMode, toggleDarkMode] = useState(false)
-
-  const switchTheme = () => {
-    const theme = localStorage.getItem('theme')
-
-    if (theme) {
-      localStorage.setItem('theme', theme === 'light' ? 'dark' : 'light')
-    } else {
-      localStorage.setItem('theme', darkMode ? 'dark' : 'light')
-    }
-
-    toggleDarkMode(!darkMode)
-    window.location.reload()
-  }
-
-  const classes = useStyles()
-
-  return (
-    <div>
-      <div style={{ display: 'fixed' }} className={classes.appBar}>
-        <Toolbar style={{ display: 'flex' }}>
-          <div style={{ width: '100%' }}>
-            <div style={{ float: 'right' }}>
-              <IconButton style={{ marginRight: '10px' }} aria-label="dark-mode" onClick={() => switchTheme()}>
-                {props.themeMode === 'dark' ? <Moon /> : <Sun />}
-              </IconButton>
-            </div>
-          </div>
-        </Toolbar>
-      </div>
-    </div>
-  )
-}
@@ -1,24 +0,0 @@
-import type { ReactElement } from 'react'
-import { Typography } from '@material-ui/core'
-
-function truncStringPortion(str: string, firstCharCount = 10, endCharCount = 10) {
-  return `${str.substring(0, firstCharCount)}...${str.substring(str.length - endCharCount, str.length)}`
-}
-
-interface Props {
-  peerId: string
-  characterLength?: number
-}
-
-export default function PeerDetail({ peerId, characterLength }: Props): ReactElement {
-  return (
-    <Typography
-      variant="button"
-      style={{
-        fontFamily: 'monospace, monospace',
-      }}
-    >
-      {truncStringPortion(peerId, characterLength, characterLength)}
-    </Typography>
-  )
-}
@@ -1,67 +1,53 @@
-import { ReactElement } from 'react'
-import { Link, RouteComponentProps } from 'react-router-dom'
+import type { ReactElement } from 'react'
+import { Link } from 'react-router-dom'

 import { createStyles, Theme, makeStyles } from '@material-ui/core/styles'
-import { ListItemText, ListItemIcon, ListItem, Divider, List, Drawer, Link as MUILink } from '@material-ui/core'
 import { OpenInNewSharp } from '@material-ui/icons'
-import { Activity, FileText, DollarSign, Share2, Settings, Layers } from 'react-feather'
+import { Divider, List, Drawer, Grid, Link as MUILink } from '@material-ui/core'
+import { Home, FileText, DollarSign, Settings, Layers, BookOpen } from 'react-feather'
+import { ROUTES } from '../routes'
+import SideBarItem from './SideBarItem'
+import SideBarStatus from './SideBarStatus'

-import SwarmLogoOrange from '../assets/swarm-logo-orange.svg'
-import { Health } from '@ethersphere/bee-js'
-
-const drawerWidth = 240
+import Logo from '../assets/logo.svg'

 const navBarItems = [
  {
-    label: 'Status',
-    id: 'status',
-    path: '/',
-    icon: Activity,
+    label: 'Info',
+    path: ROUTES.INFO,
+    icon: Home,
  },
  {
    label: 'Files',
-    id: 'files',
-    path: '/files/',
+    path: ROUTES.FILES,
    icon: FileText,
  },
  {
    label: 'Stamps',
-    id: 'stamps',
-    path: '/stamps/',
+    path: ROUTES.STAMPS,
    icon: Layers,
  },
  {
    label: 'Accounting',
-    id: 'accounting',
-    path: '/accounting/',
+    path: ROUTES.ACCOUNTING,
    icon: DollarSign,
  },
-  {
-    label: 'Peers',
-    id: 'peers',
-    path: '/peers/',
-    icon: Share2,
-  },
  {
    label: 'Settings',
-    id: 'settings',
-    path: '/settings/',
+    path: ROUTES.SETTINGS,
    icon: Settings,
  },
 ]

+const drawerWidth = 300
+
 const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
-      display: 'flex',
-    },
-    appBar: {
-      width: `calc(100% - ${drawerWidth}px)`,
-      marginLeft: drawerWidth,
-    },
-    logo: {
-      padding: 1,
-      marginTop: 20,
+      flexWrap: 'nowrap',
+      minHeight: '100vh',
+      paddingTop: theme.spacing(8),
+      paddingBottom: theme.spacing(8),
    },
    drawer: {
      width: drawerWidth,
@@ -69,106 +55,79 @@ const useStyles = makeStyles((theme: Theme) =>
    },
    drawerPaper: {
      width: drawerWidth,
+      backgroundColor: '#212121',
    },
-    activeSideBar: {
-      color: '#dd7700',
+    logo: {
+      marginLeft: theme.spacing(8),
+      marginRight: theme.spacing(8),
    },
-    activeSideBarItem: {
-      borderLeft: '4px solid #dd7700',
-      backgroundColor: 'inherit !important',
+    icon: {
+      height: theme.spacing(4),
+    },
+    iconSmall: {
+      height: theme.spacing(2),
+    },
+    divider: {
+      backgroundColor: '#2c2c2c',
+      marginLeft: theme.spacing(4),
+      marginRight: theme.spacing(4),
+    },
+    link: {
+      color: '#9f9f9f',
+      textDecoration: 'none',
+      '&:hover': {
+        textDecoration: 'none',
+
+        // https://github.com/mui-org/material-ui/issues/22543
+        '@media (hover: none)': {
+          textDecoration: 'none',
+        },
+      },
    },
-    toolbar: theme.mixins.toolbar,
  }),
 )

-interface Props extends RouteComponentProps {
-  themeMode: string
-  health: boolean
-  nodeHealth: Health | null
-}
-
-export default function SideBar(props: Props): ReactElement {
+export default function SideBar(): ReactElement {
  const classes = useStyles()

  return (
-    <div className={classes.root}>
-      <Drawer
-        className={classes.drawer}
-        variant="permanent"
-        classes={{
-          paper: classes.drawerPaper,
-        }}
-        anchor="left"
-      >
-        <div className={classes.toolbar} style={{ textAlign: 'left', marginLeft: 20 }}>
-          <Link to="/">
-            <img
-              alt="swarm"
-              className={classes.logo}
-              src={props.themeMode === 'light' ? SwarmLogoOrange : SwarmLogoOrange}
-              style={{ maxHeight: '30px', alignItems: 'center' }}
-            />
+    <Drawer className={classes.drawer} variant="permanent" anchor="left" classes={{ paper: classes.drawerPaper }}>
+      <Grid container direction="column" justifyContent="space-between" className={classes.root}>
+        <Grid className={classes.logo}>
+          <Link to={ROUTES.INFO}>
+            <img alt="swarm" src={Logo} />
          </Link>
-        </div>
-        <List>
-          {navBarItems.map(item => (
-            <Link to={item.path} key={item.id} style={{ color: 'inherit', textDecoration: 'none' }}>
-              <ListItem
-                button
-                selected={props.location.pathname === item.path}
-                className={props.location.pathname === item.path ? classes.activeSideBarItem : ''}
-              >
-                <ListItemIcon className={props.location.pathname === item.path ? classes.activeSideBar : ''}>
-                  <item.icon style={{ height: '20px' }} />
-                </ListItemIcon>
-                <ListItemText
-                  primary={item.label}
-                  className={props.location.pathname === item.path ? classes.activeSideBar : ''}
+        </Grid>
+        <Grid>
+          <List>
+            {navBarItems.map(p => (
+              <Link to={p.path} key={p.path} className={classes.link}>
+                <SideBarItem
+                  key={p.path}
+                  iconStart={<p.icon className={classes.icon} />}
+                  path={p.path}
+                  label={p.label}
                />
-              </ListItem>
-            </Link>
-          ))}
-        </List>
-        <Divider />
-        <List>
-          <MUILink href={process.env.REACT_APP_BEE_DOCS_HOST} target="_blank" style={{ textDecoration: 'none' }}>
-            <ListItem button>
-              <ListItemText primary={'Docs'} />
-              <OpenInNewSharp fontSize="small" />
-            </ListItem>
-          </MUILink>
-        </List>
-        <div style={{ position: 'fixed', bottom: 0, width: 'inherit', padding: '10px' }}>
-          <ListItem>
-            <div style={{ marginRight: '30px' }}>
-              <div
-                style={{
-                  backgroundColor: props.health ? '#32c48d' : '#c9201f',
-                  marginRight: '7px',
-                  height: '10px',
-                  width: '10px',
-                  borderRadius: '50%',
-                  display: 'inline-block',
-                }}
+              </Link>
+            ))}
+          </List>
+          <Divider className={classes.divider} />
+          <List>
+            <MUILink href={process.env.REACT_APP_BEE_DOCS_HOST} target="_blank" className={classes.link}>
+              <SideBarItem
+                iconStart={<BookOpen className={classes.icon} />}
+                iconEnd={<OpenInNewSharp className={classes.iconSmall} />}
+                label={<span>Docs</span>}
              />
-              <span>API</span>
-            </div>
-            <div>
-              <div
-                style={{
-                  backgroundColor: props.nodeHealth?.status === 'ok' ? '#32c48d' : '#c9201f',
-                  marginRight: '7px',
-                  height: '10px',
-                  width: '10px',
-                  borderRadius: '50%',
-                  display: 'inline-block',
-                }}
-              />
-              <span>Debug API</span>
-            </div>
-          </ListItem>
-        </div>
-      </Drawer>
-    </div>
+            </MUILink>
+          </List>
+        </Grid>
+        <Grid>
+          <Link to={ROUTES.STATUS} className={classes.link}>
+            <SideBarStatus path={ROUTES.STATUS} />
+          </Link>
+        </Grid>
+      </Grid>
+    </Drawer>
  )
 }
@@ -0,0 +1,62 @@
+import type { ReactElement, ReactNode } from 'react'
+import { useLocation, matchPath } from 'react-router-dom'
+
+import { createStyles, Theme, makeStyles, withStyles } from '@material-ui/core/styles'
+import { ListItemText, ListItemIcon, ListItem } from '@material-ui/core'
+
+const StyledListItem = withStyles((theme: Theme) => ({
+  root: {
+    paddingLeft: theme.spacing(4),
+    paddingRight: theme.spacing(4),
+    borderLeft: '4px solid rgba(0,0,0,0)',
+    '&.Mui-selected, &.Mui-selected:hover': {
+      borderLeft: `4px solid ${theme.palette.primary.main}`,
+      backgroundColor: '#2c2c2c',
+      color: '#f9f9f9',
+    },
+  },
+  button: {
+    '&:hover': {
+      backgroundColor: '#2c2c2c',
+      color: '#f9f9f9',
+
+      // https://github.com/mui-org/material-ui/issues/22543
+      '@media (hover: none)': {
+        backgroundColor: '#2c2c2c',
+        color: '#f9f9f9',
+      },
+    },
+  },
+}))(ListItem)
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    icon: {
+      color: 'inherit',
+    },
+    activeIcon: {
+      color: theme.palette.primary.main,
+    },
+  }),
+)
+
+interface Props {
+  iconStart?: ReactNode
+  iconEnd?: ReactNode
+  path?: string
+  label: ReactNode
+}
+
+export default function SideBarItem({ iconStart, iconEnd, path, label }: Props): ReactElement {
+  const classes = useStyles()
+  const location = useLocation()
+  const isSelected = Boolean(matchPath(location.pathname, { path, exact: true }))
+
+  return (
+    <StyledListItem button selected={isSelected} disableRipple>
+      <ListItemIcon className={isSelected ? classes.activeIcon : classes.icon}>{iconStart}</ListItemIcon>
+      <ListItemText primary={label} />
+      <ListItemIcon className={isSelected ? classes.activeIcon : classes.icon}>{iconEnd}</ListItemIcon>
+    </StyledListItem>
+  )
+}
@@ -0,0 +1,79 @@
+import { ReactElement, useContext } from 'react'
+import { useLocation, matchPath } from 'react-router-dom'
+import { ArrowRight } from 'react-feather'
+
+import { createStyles, Theme, makeStyles } from '@material-ui/core/styles'
+import { ListItemText, ListItemIcon, ListItem, Typography } from '@material-ui/core'
+import { Context } from '../providers/Bee'
+import StatusIcon from './StatusIcon'
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    icon: {
+      color: 'inherit',
+    },
+    iconSmall: {
+      height: theme.spacing(2),
+    },
+
+    root: {
+      height: theme.spacing(4),
+      paddingLeft: theme.spacing(1),
+      paddingRight: theme.spacing(4),
+      color: '#f9f9f9',
+      borderLeft: '0px solid rgba(0,0,0,0)',
+      '&.Mui-selected, &.Mui-selected:hover': {
+        borderLeft: `0px solid ${theme.palette.primary.main}`,
+        backgroundColor: '#2c2c2c',
+      },
+    },
+    rootError: {
+      backgroundColor: 'rgba(255, 58, 82, 0.25)',
+    },
+    button: {
+      '&:hover': {
+        backgroundColor: '#2c2c2c',
+        color: 'white',
+
+        // https://github.com/mui-org/material-ui/issues/22543
+        '@media (hover: none)': {
+          backgroundColor: '#2c2c2c',
+          color: 'white',
+        },
+      },
+    },
+    smallerText: {
+      fontSize: '0.9rem',
+    },
+  }),
+)
+
+interface Props {
+  path?: string
+}
+
+export default function SideBarItem({ path }: Props): ReactElement {
+  const { status, isLoading } = useContext(Context)
+  const classes = useStyles()
+  const location = useLocation()
+  const isSelected = Boolean(matchPath(location.pathname, { path, exact: true }))
+
+  return (
+    <ListItem
+      button
+      classes={{ root: `${classes.root} ${status.all ? '' : classes.rootError}`, button: classes.button }}
+      selected={isSelected}
+      disableRipple
+    >
+      <ListItemIcon style={{ marginLeft: '30px' }}>
+        <StatusIcon isOk={status.all} isLoading={isLoading} />
+      </ListItemIcon>
+      <ListItemText
+        primary={<Typography className={classes.smallerText}>{`Node ${status.all ? 'OK' : 'Error'}`}</Typography>}
+      />
+      <ListItemIcon className={classes.icon}>
+        {status.all ? null : <ArrowRight className={classes.iconSmall} />}
+      </ListItemIcon>
+    </ListItem>
+  )
+}
@@ -1,43 +0,0 @@
-import { Card, CardContent, Typography } from '@material-ui/core/'
-import { makeStyles } from '@material-ui/core/styles'
-import { Skeleton } from '@material-ui/lab'
-import type { ReactElement } from 'react'
-import { Title } from './Title'
-
-const useStyles = makeStyles({
-  root: {
-    minWidth: 275,
-  },
-})
-
-interface Props {
-  label: string
-  statistic?: string
-  loading?: boolean
-  tooltip?: string
-}
-
-export default function StatCard({ loading, label, statistic, tooltip }: Props): ReactElement {
-  const classes = useStyles()
-
-  return (
-    <Card className={classes.root}>
-      <CardContent>
-        {loading && (
-          <>
-            <Skeleton width={180} height={25} animation="wave" />
-            <Skeleton width={180} height={35} animation="wave" />
-          </>
-        )}
-        {!loading && (
-          <>
-            <Title label={label} tooltip={tooltip} />
-            <Typography variant="h5" component="h2">
-              {statistic}
-            </Typography>
-          </>
-        )}
-      </CardContent>
-    </Card>
-  )
-}
@@ -0,0 +1,28 @@
+import type { ReactElement } from 'react'
+import { CircularProgress } from '@material-ui/core'
+
+interface Props {
+  isOk: boolean
+  isLoading?: boolean
+  size?: number | string
+  className?: string
+}
+
+export default function StatusIcon({ isOk, size, className, isLoading }: Props): ReactElement {
+  const s = size || '1rem'
+
+  if (isLoading) return <CircularProgress size={s} className={className} />
+
+  return (
+    <span
+      className={className}
+      style={{
+        backgroundColor: isOk ? '#1de600' : '#ff3a52',
+        height: s,
+        width: s,
+        borderRadius: '50%',
+        display: 'inline-block',
+      }}
+    />
+  )
+}
@@ -1,9 +1,6 @@
 import React, { ReactElement, ReactNode } from 'react'
-import { makeStyles } from '@material-ui/core/styles'
-import Tabs from '@material-ui/core/Tabs'
-import Tab from '@material-ui/core/Tab'
-import Typography from '@material-ui/core/Typography'
-import Box from '@material-ui/core/Box'
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
+import { Tab, Tabs } from '@material-ui/core'

 interface TabPanelProps {
  children?: ReactNode
@@ -16,24 +13,25 @@ function TabPanel(props: TabPanelProps) {

  return (
    <div role="tabpanel" hidden={value !== index} {...other}>
-      {value === index && (
-        <Box p={3}>
-          <Typography>{children}</Typography>
-        </Box>
-      )}
+      {value === index && children}
    </div>
  )
 }

-const useStyles = makeStyles(() => ({
-  root: {
-    flexGrow: 1,
-  },
-}))
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      flexGrow: 1,
+    },
+    content: {
+      marginTop: theme.spacing(2),
+    },
+  }),
+)

 interface TabsValues {
  component: ReactNode
-  label: string
+  label: ReactNode
 }

 interface Props {
@@ -55,16 +53,18 @@ export default function SimpleTabs({ values, index, indexChanged }: Props): Reac

  return (
    <div className={classes.root}>
-      <Tabs value={v} onChange={handleChange}>
+      <Tabs value={v} onChange={handleChange} variant="fullWidth">
        {values.map(({ label }, idx) => (
          <Tab key={idx} label={label} />
        ))}
      </Tabs>
-      {values.map(({ component }, idx) => (
-        <TabPanel key={idx} value={v} index={idx}>
-          {component}
-        </TabPanel>
-      ))}
+      <div className={classes.content}>
+        {values.map(({ component }, idx) => (
+          <TabPanel key={idx} value={v} index={idx}>
+            {component}
+          </TabPanel>
+        ))}
+      </div>
    </div>
  )
 }
@@ -1,41 +0,0 @@
-import { Grid, Tooltip, Typography } from '@material-ui/core/'
-import { makeStyles } from '@material-ui/core/styles'
-import { Info } from '@material-ui/icons'
-import type { ReactElement } from 'react'
-
-interface TitleProps {
-  label: string
-  tooltip?: string
-}
-
-const useStyles = makeStyles({
-  title: {
-    fontSize: 16,
-  },
-})
-
-export function Title({ label, tooltip }: TitleProps): ReactElement {
-  const classes = useStyles()
-
-  if (!tooltip) {
-    return (
-      <Typography className={classes.title} color="textSecondary" gutterBottom>
-        {label}
-      </Typography>
-    )
-  }
-
-  // span is needed as Tooltip expects a non-functional element!
-  return (
-    <Tooltip title={tooltip}>
-      <span>
-        <Grid container direction="row" justify="space-between">
-          <Typography className={classes.title} color="textSecondary" gutterBottom>
-            {label}
-          </Typography>
-          <Info />
-        </Grid>
-      </span>
-    </Tooltip>
-  )
-}
@@ -1,66 +1,43 @@
 import type { Topology } from '@ethersphere/bee-js'
-import { Grid } from '@material-ui/core/'
 import type { ReactElement } from 'react'
 import { pickThreshold, ThresholdValues } from '../utils/threshold'
-import StatCard from './StatCard'
+import ExpandableListItem from './ExpandableListItem'

-interface RootProps {
+interface Props {
  topology: Topology | null
 }

-interface Props extends RootProps {
-  thresholds: ThresholdValues
-}
-
-const TopologyStats = (props: RootProps): ReactElement => {
+const TopologyStats = (props: Props): ReactElement => {
  const thresholds: ThresholdValues = {
    connectedPeers: pickThreshold('connectedPeers', props.topology?.connected || 0),
    population: pickThreshold('population', props.topology?.population || 0),
    depth: pickThreshold('depth', props.topology?.depth || 0),
  }

-  return (
-    <>
-      <Indicator {...props} thresholds={thresholds} />
-      <Metrics {...props} thresholds={thresholds} />
-    </>
-  )
-}
-
-const Indicator = ({ thresholds }: Props): ReactElement => {
  const maximumTotalScore = Object.values(thresholds).reduce((sum, item) => sum + item.maximumScore, 0)
  const actualTotalScore = Object.values(thresholds).reduce((sum, item) => sum + item.score, 0)
  const percentageText = Math.round((actualTotalScore / maximumTotalScore) * 100) + '%'

  return (
-    <div style={{ marginBottom: '20px' }}>
-      <StatCard label="Overall Health Indicator" statistic={percentageText} />
-    </div>
+    <>
+      <ExpandableListItem label="Overall Health Indicator" value={percentageText} />
+      <ExpandableListItem
+        label="Connected Peers"
+        value={props.topology?.connected.toString()}
+        tooltip={thresholds.connectedPeers.explanation}
+      />
+      <ExpandableListItem
+        label="Population"
+        value={props.topology?.population.toString()}
+        tooltip={thresholds.population.explanation}
+      />
+      <ExpandableListItem
+        label="Depth"
+        value={props.topology?.depth.toString()}
+        tooltip={thresholds.depth.explanation}
+      />
+    </>
  )
 }

-const Metrics = ({ topology, thresholds }: Props): ReactElement => (
-  <Grid style={{ marginBottom: '20px', flexGrow: 1 }}>
-    <Grid container spacing={3}>
-      <Grid key={1} item xs={12} sm={12} md={6} lg={4} xl={4}>
-        <StatCard
-          label="Connected Peers"
-          statistic={topology?.connected.toString()}
-          tooltip={thresholds.connectedPeers.explanation}
-        />
-      </Grid>
-      <Grid key={2} item xs={12} sm={12} md={6} lg={4} xl={4}>
-        <StatCard
-          label="Population"
-          statistic={topology?.population.toString()}
-          tooltip={thresholds.population.explanation}
-        />
-      </Grid>
-      <Grid key={3} item xs={12} sm={12} md={6} lg={4} xl={4}>
-        <StatCard label="Depth" statistic={topology?.depth.toString()} tooltip={thresholds.depth.explanation} />
-      </Grid>
-    </Grid>
-  </Grid>
-)
-
 export default TopologyStats
@@ -1,47 +1,64 @@
 import type { ReactElement } from 'react'
 import { Link } from 'react-router-dom'

-import { makeStyles } from '@material-ui/core/styles'
-import { Card, CardContent, Typography } from '@material-ui/core/'
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import { Button, Grid, Typography, Link as MuiLink } from '@material-ui/core/'
+import { ROUTES } from '../routes'
+import { Activity } from 'react-feather'

-const useStyles = makeStyles({
-  root: {
-    flexGrow: 1,
-    marginTop: '20px',
-  },
-  title: {
-    textAlign: 'center',
-    fontSize: 26,
-  },
-})
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      height: '100%',
+    },
+    content: {
+      maxWidth: 500,
+      marginBottom: theme.spacing(4),
+      '&:last-child': {
+        marginBottom: 0,
+      },
+    },
+    icon: {
+      height: '1rem',
+    },
+  }),
+)

 export default function TroubleshootConnectionCard(): ReactElement {
  const classes = useStyles()

  return (
-    <Card className={classes.root}>
-      <CardContent>
-        <Typography className={classes.title} gutterBottom>
-          Looks like your node is not connected
+    <Grid container direction="column" justifyContent="center" alignItems="center" className={classes.root}>
+      <Grid item className={classes.content}>
+        <Typography variant="h1" align="center">
+          Uh oh, it looks like your node is not connected.
        </Typography>
-        <div style={{ marginBottom: '20px', textAlign: 'center' }}>
-          <strong>
-            <Link to="/">Click to run status checks</Link> on your nodes connection or check out the{' '}
-            <a href={process.env.REACT_APP_BEE_DOCS_HOST} target="_blank" rel="noreferrer">
-              Swarm Bee Docs
-            </a>
-          </strong>
-        </div>
-
-        <div style={{ marginBottom: '20px', textAlign: 'center' }}>
-          <p style={{ marginTop: '50px' }}>
-            Still not working? Drop us a message on the Ethereum Swarm{' '}
-            <a href={process.env.REACT_APP_BEE_DISCORD_HOST} target="_blank" rel="noreferrer">
-              Discord
-            </a>
-          </p>
-        </div>
-      </CardContent>
-    </Card>
+      </Grid>
+      <Grid item className={classes.content}>
+        <Typography align="center">
+          Please check your node status to fix the problem. You can also check out the{' '}
+          <MuiLink href={process.env.REACT_APP_BEE_DOCS_HOST} target="_blank" rel="noreferrer">
+            Swarm Bee Docs
+          </MuiLink>{' '}
+          or ask for support on the{' '}
+          <MuiLink href={process.env.REACT_APP_BEE_DISCORD_HOST} target="_blank" rel="noreferrer">
+            Ethereum Swarm Discord
+          </MuiLink>
+          .
+        </Typography>
+      </Grid>
+      <Grid item className={classes.content}>
+        <Typography align="center">
+          <Button
+            component={Link}
+            variant="contained"
+            startIcon={<Activity className={classes.icon} />}
+            to={ROUTES.STATUS}
+          >
+            Check node status
+          </Button>
+        </Typography>
+      </Grid>
+    </Grid>
  )
 }
@@ -1,4 +1,4 @@
-import { ReactElement, useState } from 'react'
+import { ReactElement, ReactNode, useState } from 'react'
 import Button from '@material-ui/core/Button'
 import Input from '@material-ui/core/Input'
 import Dialog from '@material-ui/core/Dialog'
@@ -19,6 +19,7 @@ interface Props {
  max?: BigNumber
  min?: BigNumber
  action: (amount: bigint) => Promise<string>
+  icon?: ReactNode
 }

 export default function WithdrawDepositModal({
@@ -29,6 +30,7 @@ export default function WithdrawDepositModal({
  max,
  label,
  action,
+  icon,
 }: Props): ReactElement {
  const [open, setOpen] = useState(false)
  const [amount, setAmount] = useState('')
@@ -36,8 +38,9 @@ export default function WithdrawDepositModal({
  const [amountError, setAmountError] = useState<Error | null>(null)
  const { enqueueSnackbar } = useSnackbar()

-  const handleClickOpen = () => {
+  const handleClickOpen = (e: React.MouseEvent<HTMLButtonElement>) => {
    setOpen(true)
+    e.stopPropagation()
  }

  const handleClose = () => {
@@ -74,7 +77,7 @@ export default function WithdrawDepositModal({

  return (
    <div>
-      <Button variant="outlined" color="primary" onClick={handleClickOpen}>
+      <Button variant="contained" onClick={handleClickOpen} startIcon={icon}>
        {label}
      </Button>
      <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
@@ -1,4 +1,5 @@
 import { ReactElement, useContext } from 'react'
+import { Download } from 'react-feather'
 import { Context as SettingsContext } from '../providers/Settings'

 import WithdrawDepositModal from '../components/WithdrawDepositModal'
@@ -11,8 +12,9 @@ export default function DepositModal(): ReactElement {
    <WithdrawDepositModal
      successMessage="Successful deposit."
      errorMessage="Error with depositing"
-      dialogMessage="Specify the amount of BZZ you would like to withdraw from your node."
+      dialogMessage="Specify the amount of BZZ you would like to deposit to your node."
      label="Deposit"
+      icon={<Download size="1rem" />}
      min={new BigNumber(0)}
      action={(amount: bigint) => {
        if (!beeDebugApi) throw new Error('Bee Debug URL is not valid')
@@ -1,4 +1,5 @@
 import { ReactElement, useContext } from 'react'
+import { Upload } from 'react-feather'
 import { Context as SettingsContext } from '../providers/Settings'

 import WithdrawDepositModal from '../components/WithdrawDepositModal'
@@ -13,6 +14,7 @@ export default function WithdrawModal(): ReactElement {
      errorMessage="Error with withdrawing."
      dialogMessage="Specify the amount of BZZ you would like to withdraw from your node."
      label="Withdraw"
+      icon={<Upload size="1rem" />}
      min={new BigNumber(0)}
      action={(amount: bigint) => {
        if (!beeDebugApi) throw new Error('Bee Debug URL is not valid')
@@ -6,6 +6,7 @@ import { Balance, Settlements, Settlement } from '../types'

 interface UseAccountingHook {
  isLoadingUncashed: boolean
+  totalUncashed: Token
  accounting: Accounting[] | null
 }

@@ -60,16 +61,21 @@ function mergeAccounting(
      }),
  )

-  // If there are no cheques (and hence last cashout actions), we don't need to sort and can return values right away
-  if (!uncashedAmounts) return Object.values(accounting)
+  // If there are no cheques (and hence last cashout actions)
+  if (!uncashedAmounts) return Object.values(accounting).sort((a, b) => (a.peer < b.peer ? -1 : 1))

  uncashedAmounts?.forEach(({ peer, uncashedAmount }) => {
    accounting[peer].uncashedAmount = new Token(uncashedAmount)
  })

-  return Object.values(accounting).sort((a, b) =>
-    b.uncashedAmount.toBigNumber.minus(a.uncashedAmount.toBigNumber).toNumber(),
-  )
+  // Return sorted by the uncashed amount first and then by the peer id
+  return Object.values(accounting).sort((a, b) => {
+    const diff = b.uncashedAmount.toBigNumber.minus(a.uncashedAmount.toBigNumber).toNumber()
+
+    if (diff !== 0) return diff
+
+    return a.peer < b.peer ? -1 : 1
+  })
 }

 export const useAccounting = (
@@ -98,8 +104,14 @@ export const useAccounting = (

  const accounting = mergeAccounting(balances, settlements?.settlements, uncashedAmounts)

+  let totalUncashed: Token = new Token('0')
+  accounting?.forEach(
+    ({ uncashedAmount }) => (totalUncashed = new Token(totalUncashed.toBigNumber.plus(uncashedAmount.toBigNumber))),
+  )
+
  return {
    isLoadingUncashed,
+    totalUncashed,
    accounting,
  }
 }
@@ -1,4 +1,4 @@
-import { useState, useEffect, useContext, ReactElement } from 'react'
+import { useContext, ReactElement } from 'react'
 import ErrorBoundary from '../components/ErrorBoundary'
 import AlertVersion from '../components/AlertVersion'
 import { Container, CircularProgress } from '@material-ui/core'
@@ -6,70 +6,44 @@ import { Container, CircularProgress } from '@material-ui/core'
 import { createStyles, Theme, makeStyles } from '@material-ui/core/styles'

 import SideBar from '../components/SideBar'
-import NavBar from '../components/NavBar'

 import { Context } from '../providers/Bee'

-import { RouteComponentProps } from 'react-router'
-
 const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    content: {
-      marginLeft: '240px',
-      flexGrow: 1,
      backgroundColor: theme.palette.background.default,
-      padding: theme.spacing(3),
-      paddingBottom: '65px',
+      minHeight: '100vh',
    },
  }),
 )

-interface Props extends RouteComponentProps {
+interface Props {
  children?: ReactElement
 }

 const Dashboard = (props: Props): ReactElement => {
  const classes = useStyles()

-  const [themeMode, toggleThemeMode] = useState('light')
-
-  const { isLoading, apiHealth, debugApiHealth } = useContext(Context)
-
-  useEffect(() => {
-    const theme = localStorage.getItem('theme')
-
-    if (theme) {
-      toggleThemeMode(String(localStorage.getItem('theme')))
-    } else if (window?.matchMedia('(prefers-color-scheme: dark)')?.matches) {
-      toggleThemeMode('dark')
-    }
-
-    window?.matchMedia('(prefers-color-scheme: dark)')?.addEventListener('change', e => {
-      toggleThemeMode(e?.matches ? 'dark' : 'light')
-    })
-
-    return () =>
-      window?.matchMedia('(prefers-color-scheme: dark)')?.removeEventListener('change', e => {
-        toggleThemeMode(e?.matches ? 'dark' : 'light')
-      })
-  }, [])
+  const { isLoading } = useContext(Context)

  return (
-    <div>
-      <SideBar {...props} themeMode={themeMode} health={apiHealth} nodeHealth={debugApiHealth} />
-      <NavBar themeMode={themeMode} />
-      <ErrorBoundary>
-        <main className={classes.content}>
-          <AlertVersion />
-          {isLoading ? (
-            <Container style={{ textAlign: 'center', padding: '50px' }}>
-              <CircularProgress />
-            </Container>
-          ) : (
-            props.children
-          )}
-        </main>
-      </ErrorBoundary>
+    <div style={{ display: 'flex' }}>
+      <SideBar />
+      <Container className={classes.content}>
+        <ErrorBoundary>
+          <>
+            <AlertVersion />
+            {isLoading ? (
+              <div style={{ textAlign: 'center', width: '100%' }}>
+                <CircularProgress />
+              </div>
+            ) : (
+              props.children
+            )}
+          </>
+        </ErrorBoundary>
+      </Container>
    </div>
  )
 }
@@ -1,94 +0,0 @@
-import { ReactElement } from 'react'
-
-import { createStyles, makeStyles } from '@material-ui/core/styles'
-import { Card, CardContent, Typography, Theme } from '@material-ui/core/'
-import WithdrawModal from '../../containers/WithdrawModal'
-import DepositModal from '../../containers/DepositModal'
-
-import type { ChequebookAddressResponse } from '@ethersphere/bee-js'
-import { Token } from '../../models/Token'
-
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      display: 'flex',
-    },
-    buttons: {
-      display: 'flex',
-      columnGap: theme.spacing(1),
-    },
-    gridContainer: {
-      display: 'flex',
-      width: '100%',
-      marginLeft: theme.spacing(1),
-      marginRight: theme.spacing(1),
-      columnGap: theme.spacing(1),
-      rowGap: theme.spacing(1),
-      flex: '0 1 auto',
-      flexWrap: 'wrap',
-      justifyContent: 'space-between',
-    },
-    chequebookActions: {
-      justifyContent: 'space-between',
-      display: 'flex',
-      marginBottom: theme.spacing(1),
-    },
-  }),
-)
-
-interface ChequebookBalance {
-  totalBalance: Token
-  availableBalance: Token
-}
-
-interface Props {
-  chequebookAddress: ChequebookAddressResponse | null
-  chequebookBalance: ChequebookBalance | null
-  totalsent?: Token
-  totalreceived?: Token
-}
-
-function AccountCard({ totalreceived, totalsent, chequebookBalance }: Props): ReactElement {
-  const classes = useStyles()
-
-  return (
-    <div>
-      <div className={classes.chequebookActions}>
-        <Typography component="h2" variant="h6">
-          Chequebook
-        </Typography>
-        <div className={classes.buttons}>
-          <WithdrawModal />
-          <DepositModal />
-        </div>
-      </div>
-
-      <Card className={classes.root}>
-        <CardContent className={classes.gridContainer}>
-          <div>
-            <Typography component="h2" variant="h6" color="primary" gutterBottom>
-              Total Balance
-            </Typography>
-            <Typography variant="h5">{chequebookBalance?.totalBalance.toFixedDecimal()} BZZ</Typography>
-          </div>
-          <div>
-            <Typography component="h2" variant="h6" color="primary" gutterBottom>
-              Available Uncommitted Balance
-            </Typography>
-            <Typography variant="h5">{chequebookBalance?.availableBalance.toFixedDecimal()} BZZ</Typography>
-          </div>
-          <div>
-            <Typography component="h2" variant="h6" color="primary" gutterBottom>
-              Total Sent / Received
-            </Typography>
-            <Typography variant="h5">
-              {totalsent?.toFixedDecimal()} / {totalreceived?.toFixedDecimal()} BZZ
-            </Typography>
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-  )
-}
-
-export default AccountCard
@@ -1,94 +0,0 @@
-import type { ReactElement } from 'react'
-import { makeStyles } from '@material-ui/core/styles'
-import { Table, TableBody, TableCell, TableContainer, TableRow, TableHead, Paper } from '@material-ui/core'
-
-import ClipboardCopy from '../../components/ClipboardCopy'
-import CashoutModal from '../../components/CashoutModal'
-import PeerDetailDrawer from '../../components/PeerDetail'
-import { Accounting } from '../../hooks/accounting'
-
-const useStyles = makeStyles({
-  table: {
-    minWidth: 650,
-  },
-  values: {
-    textAlign: 'right',
-    fontFamily: 'monospace, monospace',
-  },
-})
-interface Props {
-  isLoadingUncashed: boolean
-  accounting: Accounting[] | null
-}
-
-function BalancesTable({ accounting, isLoadingUncashed }: Props): ReactElement | null {
-  if (accounting === null) return null
-  const classes = useStyles()
-
-  return (
-    <TableContainer component={Paper}>
-      <Table className={classes.table} size="small" aria-label="Balances Table">
-        <TableHead>
-          <TableRow>
-            <TableCell>Peer</TableCell>
-            <TableCell align="right">Outstanding Balance</TableCell>
-            <TableCell align="right">Settlements Sent / Received</TableCell>
-            <TableCell align="right">Total</TableCell>
-            <TableCell align="right">Uncashed Amount</TableCell>
-            <TableCell />
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {accounting.map(({ peer, balance, received, sent, uncashedAmount, total }) => (
-            <TableRow key={peer}>
-              <TableCell>
-                <div style={{ display: 'flex' }}>
-                  <small>
-                    <PeerDetailDrawer peerId={peer} />
-                  </small>
-                  <ClipboardCopy value={peer} />
-                </div>
-              </TableCell>
-              <TableCell className={classes.values}>
-                <span
-                  style={{
-                    color: balance.toBigNumber.isPositive() ? '#32c48d' : '#c9201f',
-                  }}
-                >
-                  {balance.toFixedDecimal()}
-                </span>{' '}
-                BZZ
-              </TableCell>
-              <TableCell className={classes.values}>
-                -{sent.toFixedDecimal()} / {received.toFixedDecimal()} BZZ
-              </TableCell>
-              <TableCell className={classes.values}>
-                <span
-                  style={{
-                    color: total.toBigNumber.isPositive() ? '#32c48d' : '#c9201f',
-                  }}
-                >
-                  {total.toFixedDecimal()}
-                </span>{' '}
-                BZZ
-              </TableCell>
-              <TableCell className={classes.values}>
-                {isLoadingUncashed && 'loading...'}
-                {!isLoadingUncashed && (
-                  <>{uncashedAmount.toBigNumber.isGreaterThan('0') ? uncashedAmount.toFixedDecimal() : '0'} BZZ</>
-                )}
-              </TableCell>
-              <TableCell className={classes.values}>
-                {uncashedAmount.toBigNumber.isGreaterThan('0') && (
-                  <CashoutModal uncashedAmount={uncashedAmount.toFixedDecimal()} peerId={peer} />
-                )}
-              </TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </TableContainer>
-  )
-}
-
-export default BalancesTable
@@ -0,0 +1,52 @@
+import type { ReactElement } from 'react'
+
+import ExpandableList from '../../components/ExpandableList'
+import ExpandableListItem from '../../components/ExpandableListItem'
+import ExpandableListItemActions from '../../components/ExpandableListItemActions'
+import ExpandableListItemKey from '../../components/ExpandableListItemKey'
+
+import CashoutModal from '../../components/CashoutModal'
+import { Accounting } from '../../hooks/accounting'
+import type { Token } from '../../models/Token'
+
+interface Props {
+  isLoadingUncashed: boolean
+  totalUncashed: Token
+  accounting: Accounting[] | null
+}
+
+export default function PeerBalances({ accounting, isLoadingUncashed, totalUncashed }: Props): ReactElement | null {
+  return (
+    <ExpandableList
+      label={`Peers (${accounting?.length || 0})`}
+      info={`${totalUncashed.toFixedDecimal()} BZZ (uncashed)`}
+    >
+      <ExpandableListItem label="Uncashed Amount Total" value={`${totalUncashed.toFixedDecimal()} BZZ`} />
+      {accounting?.map(({ peer, balance, received, sent, uncashedAmount, total }) => (
+        <ExpandableList
+          key={peer}
+          label={`Peer ${peer.substr(0, 8)}[…]`}
+          level={1}
+          info={`${uncashedAmount.toFixedDecimal()} BZZ (uncashed)`}
+        >
+          <ExpandableListItemKey label="Peer ID" value={peer} />
+          <ExpandableListItem label="Outstanding Balance" value={`${balance.toFixedDecimal()} BZZ`} />
+          <ExpandableListItem
+            label="Settlements Sent / Received"
+            value={`-${sent.toFixedDecimal()} / ${received.toFixedDecimal()} BZZ`}
+          />
+          <ExpandableListItem label="Total" value={`${total.toFixedDecimal()} BZZ`} />
+          <ExpandableListItem
+            label="Uncashed Amount"
+            value={isLoadingUncashed ? 'loading…' : `${uncashedAmount.toFixedDecimal()} BZZ`}
+          />
+          {uncashedAmount.toBigNumber.isGreaterThan('0') && (
+            <ExpandableListItemActions>
+              <CashoutModal uncashedAmount={uncashedAmount.toFixedDecimal()} peerId={peer} />
+            </ExpandableListItemActions>
+          )}
+        </ExpandableList>
+      ))}
+    </ExpandableList>
+  )
+}
@@ -1,46 +1,52 @@
 import { ReactElement, useContext } from 'react'
-import { Theme, createStyles, makeStyles } from '@material-ui/core/styles'

-import AccountCard from '../accounting/AccountCard'
-import BalancesTable from './BalancesTable'
-import EthereumAddressCard from '../../components/EthereumAddressCard'
+import PeerBalances from './PeerBalances'
 import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
 import { Context as BeeContext } from '../../providers/Bee'
 import { Context as SettingsContext } from '../../providers/Settings'
 import { useAccounting } from '../../hooks/accounting'
-
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      width: '100%',
-      display: 'grid',
-      rowGap: theme.spacing(3),
-    },
-  }),
-)
+import ExpandableList from '../../components/ExpandableList'
+import ExpandableListItem from '../../components/ExpandableListItem'
+import ExpandableListItemActions from '../../components/ExpandableListItemActions'
+import ExpandableListItemKey from '../../components/ExpandableListItemKey'
+import WithdrawModal from '../../containers/WithdrawModal'
+import DepositModal from '../../containers/DepositModal'

 export default function Accounting(): ReactElement {
-  const classes = useStyles()
-
-  const { status, nodeAddresses, chequebookAddress, chequebookBalance, settlements, peerBalances } = useContext(
-    BeeContext,
-  )
+  const { status, nodeAddresses, chequebookAddress, chequebookBalance, settlements, peerBalances } =
+    useContext(BeeContext)
  const { beeDebugApi } = useContext(SettingsContext)

-  const { accounting, isLoadingUncashed } = useAccounting(beeDebugApi, settlements, peerBalances)
+  const { accounting, totalUncashed, isLoadingUncashed } = useAccounting(beeDebugApi, settlements, peerBalances)

  if (!status.all) return <TroubleshootConnectionCard />

  return (
-    <div className={classes.root}>
-      <AccountCard
-        chequebookAddress={chequebookAddress}
-        chequebookBalance={chequebookBalance}
-        totalsent={settlements?.totalSent}
-        totalreceived={settlements?.totalReceived}
-      />
-      <EthereumAddressCard nodeAddresses={nodeAddresses} chequebookAddress={chequebookAddress} />
-      <BalancesTable accounting={accounting} isLoadingUncashed={isLoadingUncashed} />
+    <div>
+      <ExpandableList label="Chequebook" defaultOpen>
+        <ExpandableListItem label="Total Balance" value={`${chequebookBalance?.totalBalance.toFixedDecimal()} BZZ`} />
+        <ExpandableListItem
+          label="Available Uncommitted Balance"
+          value={`${chequebookBalance?.availableBalance.toFixedDecimal()} BZZ`}
+        />
+        <ExpandableListItem
+          label="Total Cheques Amount Sent"
+          value={`${settlements?.totalSent.toFixedDecimal()} BZZ`}
+        />
+        <ExpandableListItem
+          label="Total Cheques Amount Received"
+          value={`${settlements?.totalReceived.toFixedDecimal()} BZZ`}
+        />
+        <ExpandableListItemActions>
+          <WithdrawModal />
+          <DepositModal />
+        </ExpandableListItemActions>
+      </ExpandableList>
+      <ExpandableList label="Blockchain" defaultOpen>
+        <ExpandableListItemKey label="Ethereum address" value={nodeAddresses?.ethereum || ''} />
+        <ExpandableListItemKey label="Chequebook contract address" value={chequebookAddress?.chequebookAddress || ''} />
+      </ExpandableList>
+      <PeerBalances accounting={accounting} isLoadingUncashed={isLoadingUncashed} totalUncashed={totalUncashed} />
    </div>
  )
 }
@@ -1,66 +1,28 @@
 import { ReactElement, useState, useContext } from 'react'
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
-import { Paper, InputBase, IconButton, FormHelperText } from '@material-ui/core'
-import { Search } from '@material-ui/icons'
 import { Context as SettingsContext } from '../../providers/Settings'
+import ExpandableListItemInput from '../../components/ExpandableListItemInput'
 import { Utils } from '@ethersphere/bee-js'

-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      padding: theme.spacing(0.25),
-      display: 'flex',
-      alignItems: 'center',
-    },
-    input: {
-      marginLeft: theme.spacing(1),
-      flex: 1,
-    },
-    iconButton: {
-      padding: 10,
-    },
-    divider: {
-      height: 28,
-      margin: 4,
-    },
-  }),
-)
-
 export default function Files(): ReactElement {
-  const classes = useStyles()
  const { apiUrl } = useContext(SettingsContext)

-  const [referenceInput, setReferenceInput] = useState('')
-  const [referenceError, setReferenceError] = useState<Error | null>(null)
+  const [referenceError, setReferenceError] = useState<string | undefined>(undefined)

-  const handleReferenceChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-    setReferenceInput(e.target.value)
-
-    if (Utils.Hex.isHexString(e.target.value, 64) || Utils.Hex.isHexString(e.target.value, 128)) setReferenceError(null)
-    else setReferenceError(new Error('Incorrect format of swarm hash'))
+  const validateChange = (value: string) => {
+    if (Utils.isHexString(value, 64) || Utils.isHexString(value, 128)) setReferenceError(undefined)
+    else setReferenceError('Incorrect format of swarm hash. Expected 64 or 128 hexstring characters.')
  }

  return (
-    <>
-      <Paper className={classes.root}>
-        <InputBase
-          className={classes.input}
-          placeholder="Enter swarm reference e.g. 0773a91efd6547c754fc1d95fb1c62c7d1b47f959c2caa685dfec8736da95c1c"
-          inputProps={{ 'aria-label': 'retrieve file from swarm' }}
-          value={referenceInput}
-          onChange={handleReferenceChange}
-        />
-        <IconButton
-          href={`${apiUrl}/bzz/${referenceInput}`}
-          target="_blank"
-          disabled={referenceError !== null || !referenceInput}
-          className={classes.iconButton}
-          aria-label="download"
-        >
-          <Search />
-        </IconButton>
-      </Paper>
-      {referenceError && <FormHelperText error>{referenceError.message}</FormHelperText>}
-    </>
+    <ExpandableListItemInput
+      label="Swarm Hash"
+      onConfirm={value => window.open(`${apiUrl}/bzz/${value}`, '_blank')}
+      onChange={validateChange}
+      helperText={referenceError}
+      confirmLabel={'Download'}
+      confirmLabelDisabled={Boolean(referenceError)}
+      placeholder="e.g. 31fb0362b1a42536134c86bc58b97ac0244e5c6630beec3e27c2d1cecb38c605"
+      expandedOnly
+    />
  )
 }
@@ -1,9 +1,5 @@
-import Button from '@material-ui/core/Button'
-import ListItemIcon from '@material-ui/core/ListItemIcon'
-import Menu from '@material-ui/core/Menu'
-import MenuItem from '@material-ui/core/MenuItem'
 import React, { ReactElement } from 'react'
-import PeerDetailDrawer from '../../components/PeerDetail'
+import { Button, ListItemIcon, Typography, Menu, MenuItem } from '@material-ui/core'
 import { EnrichedPostageBatch } from '../../providers/Stamps'

 interface Props {
@@ -25,10 +21,10 @@ export default function SimpleMenu({ stamps, selectedStamp, setSelected }: Props

  return (
    <div>
-      <Button aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}>
+      <Button variant="contained" aria-haspopup="true" onClick={handleClick}>
        Change
      </Button>
-      <Menu id="simple-menu" anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleClose}>
+      <Menu anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleClose}>
        {stamps.map(stamp => (
          <MenuItem
            key={stamp.batchID}
@@ -39,7 +35,7 @@ export default function SimpleMenu({ stamps, selectedStamp, setSelected }: Props
            selected={stamp.batchID === selectedStamp?.batchID}
          >
            <ListItemIcon>{stamp.usageText}</ListItemIcon>
-            <PeerDetailDrawer peerId={stamp.batchID} />
+            <Typography variant="body2">{stamp.batchID.substr(0, 8)}[…]</Typography>
          </MenuItem>
        ))}
      </Menu>
@@ -1,20 +1,31 @@
-import { Button, CircularProgress, Container } from '@material-ui/core'
-import Avatar from '@material-ui/core/Avatar'
-import Chip from '@material-ui/core/Chip'
+import { Button, CircularProgress, Container, Avatar, Chip, Typography } from '@material-ui/core'
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
 import { DropzoneArea } from 'material-ui-dropzone'
 import { useSnackbar } from 'notistack'
+import { RotateCcw, Check } from 'react-feather'
 import { ReactElement, useContext, useEffect, useState } from 'react'
 import UploadSizeAlert from '../../components/AlertUploadSize'
 import ClipboardCopy from '../../components/ClipboardCopy'
-import PeerDetailDrawer from '../../components/PeerDetail'
 import { Context, EnrichedPostageBatch } from '../../providers/Stamps'
 import { Context as SettingsContext } from '../../providers/Settings'
 import CreatePostageStamp from '../stamps/CreatePostageStampModal'
 import SelectStamp from './SelectStamp'
+import ExpandableListItem from '../../components/ExpandableListItem'
+import ExpandableListItemKey from '../../components/ExpandableListItemKey'
+import ExpandableListItemNote from '../../components/ExpandableListItemNote'
+import ExpandableListItemActions from '../../components/ExpandableListItemActions'
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    content: { marginTop: theme.spacing(2) },
+    loadingProgress: { textAlign: 'center', padding: '50px' },
+  }),
+)

 const MAX_FILE_SIZE = 1_000_000_000 // 1 gigabyte

 export default function Files(): ReactElement {
+  const classes = useStyles()
  const [dropzoneKey, setDropzoneKey] = useState(0)
  const [file, setFile] = useState<File | null>(null)
  const [uploadReference, setUploadReference] = useState('')
@@ -22,10 +33,14 @@ export default function Files(): ReactElement {

  const [selectedStamp, setSelectedStamp] = useState<EnrichedPostageBatch | null>(null)

-  const { isLoading, error, stamps } = useContext(Context)
+  const { isLoading, error, stamps, refresh } = useContext(Context)
  const { beeApi } = useContext(SettingsContext)
  const { enqueueSnackbar } = useSnackbar()

+  useEffect(() => {
+    refresh()
+  }, [])
+
  // Choose a postage stamp that has the lowest usage
  useEffect(() => {
    if (!selectedStamp && stamps && stamps.length > 0) {
@@ -47,68 +62,102 @@ export default function Files(): ReactElement {
    setIsUploadingFile(true)
    beeApi
      .uploadFile(selectedStamp.batchID, file)
-      .then(hash => {
-        window.setTimeout(() => {
-          setFile(null)
-          setUploadReference(hash)
-          setDropzoneKey(dropzoneKey + 1)
-        }, 0)
-      })
+      .then(hash => setUploadReference(hash.reference))
      .catch(e => enqueueSnackbar(`Error uploading: ${e.message}`, { variant: 'error' }))
-      .finally(() => {
-        setIsUploadingFile(false)
-      })
+      .finally(() => setIsUploadingFile(false))
+  }
+
+  const uploadNew = () => {
+    setTimeout(() => {
+      setFile(null)
+      setDropzoneKey(dropzoneKey + 1)
+      setUploadReference('')
+    }, 0)
  }

  const handleChange = (files?: File[]) => {
+    setUploadReference('')
+
    if (files) {
      setFile(files[0])
    }
  }

  return (
-    <div>
-      <div>
-        <DropzoneArea
-          key={'dropzone-' + dropzoneKey}
-          onChange={handleChange}
-          filesLimit={1}
-          maxFileSize={MAX_FILE_SIZE}
-        />
-        <div style={{ marginTop: '15px' }}>
-          {selectedStamp && (
-            <div style={{ display: 'flex' }}>
-              <small>
-                with Postage Stamp{' '}
-                <Chip
-                  avatar={<Avatar>{selectedStamp.usageText}</Avatar>}
-                  label={<PeerDetailDrawer peerId={selectedStamp.batchID} characterLength={6} />}
-                  deleteIcon={<ClipboardCopy value={selectedStamp.batchID} />}
-                  onDelete={() => {} /* eslint-disable-line*/}
-                  variant="outlined"
-                />
-              </small>
-              <SelectStamp stamps={stamps} selectedStamp={selectedStamp} setSelected={setSelectedStamp} />
-            </div>
-          )}
-          {!selectedStamp && <CreatePostageStamp />}
-          <Button disabled={!file && isUploadingFile && !selectedStamp} onClick={() => uploadFile()}>
-            Upload
-          </Button>
-          {file && <UploadSizeAlert file={file} />}
-          {isUploadingFile && (
-            <Container style={{ textAlign: 'center', padding: '50px' }}>
-              <CircularProgress />
-            </Container>
-          )}
-          {uploadReference && (
-            <div style={{ marginBottom: '15px', display: 'flex' }}>
-              <span>{uploadReference}</span>
-              <ClipboardCopy value={uploadReference} />
-            </div>
-          )}
-        </div>
+    <>
+      <DropzoneArea
+        key={'dropzone-' + dropzoneKey}
+        onChange={handleChange}
+        filesLimit={1}
+        maxFileSize={MAX_FILE_SIZE}
+      />
+      <div className={classes.content}>
+        {/* We have file and can upload display stamp selection */}
+        {file && !isUploadingFile && !uploadReference && (
+          <>
+            <ExpandableListItemNote>
+              To upload this file to your node, you need a postage stamp. You can buy a new one or you can use an
+              existing stamp (providing it’s sufficient for this file).
+            </ExpandableListItemNote>
+            {selectedStamp && (
+              <ExpandableListItem
+                label={
+                  <>
+                    Upload with Postage Stamp{' '}
+                    <Chip
+                      avatar={<Avatar>{selectedStamp.usageText}</Avatar>}
+                      label={<Typography variant="body2">{selectedStamp.batchID.substr(0, 8)}[…]</Typography>}
+                      deleteIcon={<ClipboardCopy value={selectedStamp.batchID} />}
+                      onDelete={() => {} /* eslint-disable-line*/}
+                      variant="outlined"
+                    />
+                  </>
+                }
+                value={<SelectStamp stamps={stamps} selectedStamp={selectedStamp} setSelected={setSelectedStamp} />}
+              />
+            )}
+            {!selectedStamp && (
+              <ExpandableListItemActions>
+                <CreatePostageStamp />
+              </ExpandableListItemActions>
+            )}
+          </>
+        )}
+
+        {/* We have file and can upload display upload button */}
+        {file && !uploadReference && (
+          <>
+            <ExpandableListItemActions>
+              <Button
+                variant="contained"
+                disabled={!file && isUploadingFile && !selectedStamp}
+                onClick={() => uploadFile()}
+                startIcon={<Check size="1rem" />}
+              >
+                Upload
+              </Button>
+              {isUploadingFile && (
+                <Container className={classes.loadingProgress}>
+                  <CircularProgress />
+                </Container>
+              )}
+            </ExpandableListItemActions>
+            <UploadSizeAlert file={file} />
+          </>
+        )}
+
+        {/* File has already been uploaded */}
+        {uploadReference && (
+          <>
+            <ExpandableListItemKey label="Swarm Reference" value={uploadReference} />
+            <ExpandableListItemActions>
+              <Button variant="contained" onClick={uploadNew} startIcon={<RotateCcw size="1rem" />}>
+                Upload New File
+              </Button>
+            </ExpandableListItemActions>
+          </>
+        )}
      </div>
-    </div>
+    </>
  )
 }
@@ -1,32 +1,28 @@
 import { ReactElement, useContext } from 'react'

-import { Container } from '@material-ui/core'
-
-import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
-import { Context } from '../../providers/Bee'
 import Download from './Download'
 import Upload from './Upload'
 import TabsContainer from '../../components/TabsContainer'
+import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
+import { Context as BeeContext } from '../../providers/Bee'

 export default function Files(): ReactElement {
-  const { status } = useContext(Context)
+  const { status } = useContext(BeeContext)

  if (!status.all) return <TroubleshootConnectionCard />

  return (
-    <Container maxWidth="sm">
-      <TabsContainer
-        values={[
-          {
-            label: 'download',
-            component: <Download />,
-          },
-          {
-            label: 'upload',
-            component: <Upload />,
-          },
-        ]}
-      />
-    </Container>
+    <TabsContainer
+      values={[
+        {
+          label: 'download',
+          component: <Download />,
+        },
+        {
+          label: 'upload',
+          component: <Upload />,
+        },
+      ]}
+    />
  )
 }
@@ -0,0 +1,60 @@
+import { ReactElement, useContext } from 'react'
+import { Button } from '@material-ui/core'
+
+import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
+import { Context as BeeContext } from '../../providers/Bee'
+import ExpandableList from '../../components/ExpandableList'
+import ExpandableListItem from '../../components/ExpandableListItem'
+import ExpandableListItemKey from '../../components/ExpandableListItemKey'
+import TopologyStats from '../../components/TopologyStats'
+
+export default function Status(): ReactElement {
+  const {
+    status,
+    latestUserVersion,
+    isLatestBeeVersion,
+    latestBeeVersionUrl,
+    topology,
+    nodeAddresses,
+    chequebookAddress,
+  } = useContext(BeeContext)
+
+  if (!status.all) return <TroubleshootConnectionCard />
+
+  return (
+    <div>
+      <ExpandableList label="Bee Node" defaultOpen>
+        <ExpandableListItem
+          label="Agent"
+          value={
+            <div>
+              <a href="https://github.com/ethersphere/bee" rel="noreferrer" target="_blank">
+                Bee
+              </a>
+              {` ${latestUserVersion || '-'} `}
+              <Button size="small" variant="outlined" href={latestBeeVersionUrl} target="_blank">
+                {isLatestBeeVersion ? 'latest' : 'update'}
+              </Button>
+            </div>
+          }
+        />
+        <ExpandableListItemKey label="Public key" value={nodeAddresses?.publicKey || ''} />
+        <ExpandableListItemKey label="PSS public key" value={nodeAddresses?.pssPublicKey || ''} />
+        <ExpandableListItemKey label="Overlay address (Peer ID)" value={nodeAddresses?.overlay || ''} />
+
+        <ExpandableList level={1} label="Underlay addresses">
+          {nodeAddresses?.underlay.map(addr => (
+            <ExpandableListItem key={addr} value={addr} />
+          ))}
+        </ExpandableList>
+      </ExpandableList>
+      <ExpandableList label="Blockchain" defaultOpen>
+        <ExpandableListItemKey label="Ethereum address" value={nodeAddresses?.ethereum || ''} />
+        <ExpandableListItemKey label="Chequebook contract address" value={chequebookAddress?.chequebookAddress || ''} />
+      </ExpandableList>
+      <ExpandableList label="Connectivity" defaultOpen>
+        <TopologyStats topology={topology} />
+      </ExpandableList>
+    </div>
+  )
+}
@@ -1,95 +0,0 @@
-import { ReactElement, useState, useContext } from 'react'
-import { makeStyles } from '@material-ui/core/styles'
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableRow,
-  TableHead,
-  Button,
-  Paper,
-  Tooltip,
-  CircularProgress,
-} from '@material-ui/core'
-import { Autorenew } from '@material-ui/icons'
-
-import { Context as SettingsContext } from '../../providers/Settings'
-import type { Peer } from '@ethersphere/bee-js'
-
-const useStyles = makeStyles({
-  table: {
-    minWidth: 650,
-  },
-})
-
-interface Props {
-  peers: Peer[] | null
-}
-
-interface PeerLatency {
-  rtt: string
-  loading: boolean
-}
-
-function getPingState(peerLatency: Record<string, PeerLatency>, peer: Peer): ReactElement {
-  if (peerLatency[peer.address]?.loading) return <CircularProgress size={20} />
-
-  if (peerLatency[peer.address]?.rtt) return <span>{peerLatency[peer.address]?.rtt}</span>
-
-  return <Autorenew />
-}
-
-function PeerTable(props: Props): ReactElement {
-  const classes = useStyles()
-  const { beeDebugApi } = useContext(SettingsContext)
-
-  const [peerLatency, setPeerLatency] = useState<Record<string, PeerLatency>>({})
-
-  const pingPeer = (peerId: string) => {
-    setPeerLatency(prevPeerLatency => ({ ...prevPeerLatency, [peerId]: { rtt: '', loading: true } }))
-    beeDebugApi
-      ?.pingPeer(peerId)
-      .then(res => {
-        setPeerLatency(prevPeerLatency => ({ ...prevPeerLatency, [peerId]: { rtt: res.rtt, loading: false } }))
-      })
-      .catch(() => {
-        setPeerLatency(prevPeerLatency => ({ ...prevPeerLatency, [peerId]: { rtt: 'error', loading: false } }))
-      })
-  }
-
-  return (
-    <div>
-      <TableContainer component={Paper}>
-        <Table className={classes.table}>
-          <TableHead>
-            <TableRow>
-              <TableCell>Index</TableCell>
-              <TableCell>Peer Id</TableCell>
-              <TableCell align="right">Actions</TableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {props.peers?.map((peer: Peer, idx: number) => (
-              <TableRow key={peer.address}>
-                <TableCell component="th" scope="row">
-                  {idx + 1}
-                </TableCell>
-                <TableCell>{peer.address}</TableCell>
-                <TableCell align="right">
-                  <Tooltip title="Ping node">
-                    <Button color="primary" onClick={() => pingPeer(peer.address)}>
-                      {getPingState(peerLatency, peer)}
-                    </Button>
-                  </Tooltip>
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </TableContainer>
-    </div>
-  )
-}
-
-export default PeerTable
@@ -1,21 +0,0 @@
-import PeerTable from './PeerTable'
-import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
-
-import { Context } from '../../providers/Bee'
-import TopologyStats from '../../components/TopologyStats'
-import { ReactElement, useContext } from 'react'
-
-export default function Peers(): ReactElement {
-  const { topology, peers, status } = useContext(Context)
-
-  if (!status.all) {
-    return <TroubleshootConnectionCard />
-  }
-
-  return (
-    <>
-      <TopologyStats topology={topology} />
-      <PeerTable peers={peers} />
-    </>
-  )
-}
@@ -1,70 +1,15 @@
-import React, { ReactElement, useState, useContext } from 'react'
-import { Paper, Container, TextField, Typography, Button } from '@material-ui/core'
+import { ReactElement, useContext } from 'react'
 import { Context as SettingsContext } from '../../providers/Settings'
+import ExpandableList from '../../components/ExpandableList'
+import ExpandableListItemInput from '../../components/ExpandableListItemInput'

 export default function Settings(): ReactElement {
  const { apiUrl, apiDebugUrl, setApiUrl, setDebugApiUrl } = useContext(SettingsContext)
-  const [host, setHost] = useState(apiUrl)
-  const [debugHost, setDebugHost] = useState(apiDebugUrl)
-
-  const submit = () => {
-    if (host !== apiUrl) setApiUrl(host)
-
-    if (debugHost !== apiDebugUrl) setDebugApiUrl(debugHost)
-  }
-
-  const touched = host !== apiUrl || debugHost !== apiDebugUrl

  return (
-    <div>
-      <Container>
-        <Typography variant="h4" gutterBottom>
-          Settings
-        </Typography>
-        <Paper>
-          <TextField
-            label="API Endpoint"
-            style={{ margin: 0 }}
-            placeholder="ex: 127.0.0.0.1:1633"
-            helperText="Enter node host override / port"
-            fullWidth
-            defaultValue={apiUrl}
-            margin="normal"
-            InputLabelProps={{
-              shrink: true,
-            }}
-            onChange={e => {
-              setHost(e.target.value)
-            }}
-            variant="filled"
-          />
-        </Paper>
-        <Paper style={{ marginTop: '20px' }}>
-          <TextField
-            label="Debug API Endpoint"
-            style={{ margin: 0 }}
-            placeholder="ex: 127.0.0.0.1:1635"
-            helperText="Enter node debug host override / port"
-            fullWidth
-            defaultValue={apiDebugUrl}
-            onChange={e => {
-              setDebugHost(e.target.value)
-            }}
-            margin="normal"
-            InputLabelProps={{
-              shrink: true,
-            }}
-            variant="filled"
-          />
-        </Paper>
-        {touched ? (
-          <div style={{ marginTop: '20px' }}>
-            <Button variant="outlined" color="primary" onClick={submit}>
-              Save
-            </Button>
-          </div>
-        ) : null}
-      </Container>
-    </div>
+    <ExpandableList label="API Settings" defaultOpen>
+      <ExpandableListItemInput label="Bee API" value={apiUrl} onConfirm={setApiUrl} />
+      <ExpandableListItemInput label="Bee Debug API" value={apiDebugUrl} onConfirm={setDebugApiUrl} />
+    </ExpandableList>
  )
 }
@@ -111,7 +111,7 @@ export default function FormDialog({ label }: Props): ReactElement {
    >
      {({ submitForm, isValid, isSubmitting, values }) => (
        <Form>
-          <Button variant="outlined" color="primary" onClick={handleClickOpen}>
+          <Button variant="contained" onClick={handleClickOpen}>
            {label || 'Buy Postage Stamp'}
            {isSubmitting && <CircularProgress size={24} className={classes.buttonProgress} />}
          </Button>
@@ -138,12 +138,11 @@ export default function FormDialog({ label }: Props): ReactElement {
              <Field component={TextField} name="label" label="Label" fullWidth className={classes.field} />
            </DialogContent>
            <DialogActions>
-              <Button onClick={handleClose} color="primary">
+              <Button onClick={handleClose} variant="contained">
                Cancel
              </Button>
              <div className={classes.wrapper}>
                <Button
-                  color="primary"
                  disabled={isSubmitting || !isValid || !values.amount || !values.depth}
                  type="submit"
                  variant="contained"
@@ -1,53 +1,25 @@
-import { Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@material-ui/core'
-import { makeStyles } from '@material-ui/core/styles'
 import type { ReactElement } from 'react'
-import ClipboardCopy from '../../components/ClipboardCopy'
-import PeerDetailDrawer from '../../components/PeerDetail'
 import { EnrichedPostageBatch } from '../../providers/Stamps'
+import ExpandableList from '../../components/ExpandableList'
+import ExpandableListItem from '../../components/ExpandableListItem'
+import ExpandableListItemKey from '../../components/ExpandableListItemKey'

-const useStyles = makeStyles({
-  table: {
-    minWidth: 650,
-  },
-  values: {
-    textAlign: 'right',
-    fontFamily: 'monospace, monospace',
-  },
-})
 interface Props {
  postageStamps: EnrichedPostageBatch[] | null
 }

 function StampsTable({ postageStamps }: Props): ReactElement | null {
  if (postageStamps === null) return null
-  const classes = useStyles()

  return (
-    <TableContainer component={Paper}>
-      <Table className={classes.table} size="small" aria-label="Balances Table">
-        <TableHead>
-          <TableRow>
-            <TableCell>Batch ID</TableCell>
-            <TableCell align="right">Usage</TableCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {postageStamps.map(({ batchID, usageText }) => (
-            <TableRow key={batchID}>
-              <TableCell>
-                <div style={{ display: 'flex' }}>
-                  <small>
-                    <PeerDetailDrawer peerId={batchID} />
-                  </small>
-                  <ClipboardCopy value={batchID} />
-                </div>
-              </TableCell>
-              <TableCell className={classes.values}>{usageText}</TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </TableContainer>
+    <ExpandableList label="Postage Stamps" defaultOpen>
+      {postageStamps.map(({ batchID, usageText }) => (
+        <ExpandableList key={batchID} label={`${batchID.substr(0, 8)}[…]`} level={1} info={`${usageText} used`}>
+          <ExpandableListItemKey label="Batch ID" value={batchID} />
+          <ExpandableListItem label="Usage" value={usageText} />
+        </ExpandableList>
+      ))}
+    </ExpandableList>
  )
 }

@@ -1,26 +1,23 @@
 import { ReactElement, useContext, useEffect } from 'react'
-import { Theme, createStyles, makeStyles } from '@material-ui/core/styles'
+import { createStyles, makeStyles } from '@material-ui/core/styles'
 import { Container, CircularProgress } from '@material-ui/core'

 import StampsTable from './StampsTable'
-import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
 import CreatePostageStampModal from './CreatePostageStampModal'

-import { Context } from '../../providers/Stamps'
+import { Context as StampsContext } from '../../providers/Stamps'
+import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
 import { Context as BeeContext } from '../../providers/Bee'

-const useStyles = makeStyles((theme: Theme) =>
+const useStyles = makeStyles(() =>
  createStyles({
    root: {
      width: '100%',
      display: 'grid',
-      rowGap: theme.spacing(2),
    },
    actions: {
      display: 'flex',
      width: '100%',
-      columnGap: theme.spacing(1),
-      rowGap: theme.spacing(1),
      flex: '0 1 auto',
      flexWrap: 'wrap',
      alignItems: 'center',
@@ -30,25 +27,17 @@ const useStyles = makeStyles((theme: Theme) =>

 export default function Accounting(): ReactElement {
  const classes = useStyles()
+  const { stamps, isLoading, error, start, stop } = useContext(StampsContext)
+  const { status } = useContext(BeeContext)
+
+  if (!status.all) return <TroubleshootConnectionCard />

-  const beeContext = useContext(BeeContext)
-  const { stamps, isLoading, error, start, stop } = useContext(Context)
  useEffect(() => {
    start()

    return () => stop()
  }, [])

-  if (beeContext.isLoading) {
-    return (
-      <Container style={{ textAlign: 'center', padding: '50px' }}>
-        <CircularProgress />
-      </Container>
-    )
-  }
-
-  if (!beeContext.status.all) return <TroubleshootConnectionCard />
-
  return (
    <div className={classes.root}>
      {error && (
@@ -1,170 +0,0 @@
-import { ReactElement, useEffect, useState, useContext } from 'react'
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
-import { Typography, Paper, Button, Step, StepLabel, StepContent, Stepper, StepButton } from '@material-ui/core/'
-import { CheckCircle, Error, ExpandLessSharp, ExpandMoreSharp, Autorenew } from '@material-ui/icons/'
-
-import DebugConnectionCheck from './SetupSteps/DebugConnectionCheck'
-import NodeConnectionCheck from './SetupSteps/NodeConnectionCheck'
-import VersionCheck from './SetupSteps/VersionCheck'
-import EthereumConnectionCheck from './SetupSteps/EthereumConnectionCheck'
-import ChequebookDeployFund from './SetupSteps/ChequebookDeployFund'
-import PeerConnection from './SetupSteps/PeerConnection'
-import { Context } from '../../providers/Bee'
-
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      padding: theme.spacing(2),
-      width: '100%',
-    },
-    button: {
-      marginTop: theme.spacing(1),
-      marginRight: theme.spacing(1),
-    },
-    actionsContainer: {
-      margin: theme.spacing(2),
-    },
-  }),
-)
-
-interface Step {
-  label: string
-  isOk: boolean
-  component: ReactElement
-}
-
-export default function NodeSetupWorkflow(): ReactElement {
-  const classes = useStyles()
-  const [activeStep, setActiveStep] = useState(-1)
-
-  const {
-    status,
-    isLoading,
-    latestUserVersion,
-    latestPublishedVersion,
-    isLatestBeeVersion,
-    latestBeeVersionUrl,
-    topology,
-    nodeAddresses,
-    chequebookAddress,
-  } = useContext(Context)
-
-  const steps: Step[] = [
-    {
-      label: 'Connected to Node DebugAPI',
-      isOk: status.debugApiConnection,
-      component: <DebugConnectionCheck isOk={status.debugApiConnection} />,
-    },
-    {
-      label: 'Running latest Bee version',
-      isOk: status.version,
-      component: (
-        <VersionCheck
-          isOk={status.version}
-          isLatestBeeVersion={isLatestBeeVersion}
-          userVersion={latestUserVersion}
-          latestVersion={latestPublishedVersion}
-          latestUrl={latestBeeVersionUrl}
-        />
-      ),
-    },
-    {
-      label: 'Connected to xDai Blockchain',
-      isOk: status.blockchainConnection,
-      component: <EthereumConnectionCheck isOk={status.blockchainConnection} nodeAddresses={nodeAddresses} />,
-    },
-    {
-      label: 'Deployed and Funded Chequebook',
-      isOk: status.chequebook,
-      component: (
-        <ChequebookDeployFund chequebookAddress={chequebookAddress?.chequebookAddress} isOk={status.chequebook} />
-      ),
-    },
-    {
-      label: 'Connected to Node API',
-      isOk: status.apiConnection,
-      component: <NodeConnectionCheck isOk={status.apiConnection} />,
-    },
-    {
-      label: 'Connected to Peers',
-      isOk: status.topology,
-      component: <PeerConnection isOk={status.topology} topology={topology} />,
-    },
-  ]
-
-  useEffect(() => {
-    // If the user already changed the active step we don't want to overwrite it
-    if (activeStep >= 0 && activeStep < steps.length) return
-
-    // If any step is not fully loaded yet return
-    if (!isLoading) return
-
-    // Select first step that is not OK
-    // This is deliberately a for loop (and not forEach) so that we can terminate the useEffect from within the cycle
-    for (let i = 0; i < steps.length; ++i) {
-      if (!steps[i].isOk) {
-        setActiveStep(i)
-
-        return
-      }
-    }
-  }, [steps])
-
-  const handleNext = () => {
-    setActiveStep(prevActiveStep => prevActiveStep + 1)
-  }
-
-  const handleBack = () => {
-    setActiveStep(prevActiveStep => prevActiveStep - 1)
-  }
-
-  return (
-    <Paper className={classes.root}>
-      <Typography variant="h5" gutterBottom>
-        Node Setup
-      </Typography>
-      <Stepper nonLinear activeStep={activeStep} orientation="vertical">
-        {steps.map(({ label, isOk, component }, index) => (
-          <Step key={label}>
-            <StepLabel
-              onClick={() => setActiveStep(index === activeStep ? steps.length : index)}
-              StepIconComponent={() => {
-                if (isLoading) return <Autorenew style={{ height: '25px', cursor: 'pointer' }} />
-
-                if (isOk) return <CheckCircle style={{ color: '#32c48d', height: '25px', cursor: 'pointer' }} />
-
-                return <Error style={{ color: '#c9201f', height: '25px', cursor: 'pointer' }} />
-              }}
-            >
-              <StepButton
-                disabled={isLoading}
-                onClick={() => setActiveStep(index === activeStep ? steps.length : index)}
-                style={{ justifyContent: 'space-between' }}
-              >
-                <div style={{ display: 'flex' }}>
-                  <div style={{ marginTop: '5px' }}>{label}</div>
-                  <div style={{ marginLeft: '12px' }}>
-                    {index === activeStep ? <ExpandLessSharp /> : <ExpandMoreSharp />}
-                  </div>
-                </div>
-              </StepButton>
-            </StepLabel>
-            <StepContent>
-              <Typography component="div">{component}</Typography>
-              <div className={classes.actionsContainer}>
-                <div>
-                  <Button disabled={activeStep === 0} onClick={handleBack} className={classes.button}>
-                    Back
-                  </Button>
-                  <Button variant="contained" color="primary" onClick={handleNext} className={classes.button}>
-                    {index < steps.length - 1 ? 'Next' : 'Finish'}
-                  </Button>
-                </div>
-              </div>
-            </StepContent>
-          </Step>
-        ))}
-      </Stepper>
-    </Paper>
-  )
-}
@@ -1,35 +1,48 @@
-import { Typography } from '@material-ui/core/'
-import EthereumAddress from '../../../components/EthereumAddress'
+import { useContext } from 'react'
 import DepositModal from '../../../containers/DepositModal'
 import type { ReactElement } from 'react'
+import ExpandableList from '../../../components/ExpandableList'
+import ExpandableListItemKey from '../../../components/ExpandableListItemKey'
+import ExpandableListItemActions from '../../../components/ExpandableListItemActions'
+import ExpandableListItemNote from '../../../components/ExpandableListItemNote'
+import StatusIcon from '../../../components/StatusIcon'
+import { Context } from '../../../providers/Bee'

-interface Props extends StatusHookCommon {
-  chequebookAddress?: string
-}
+const ChequebookDeployFund = (): ReactElement | null => {
+  const { status, isLoading, chequebookAddress } = useContext(Context)
+  const isOk = status.chequebook

-const ChequebookDeployFund = ({ chequebookAddress, isOk }: Props): ReactElement | null => {
  return (
-    <div>
-      <p style={{ marginBottom: '20px', display: 'flex' }}>{chequebookAddress && <DepositModal />}</p>
-      <div style={{ marginBottom: '10px' }}>
-        {!isOk && (
-          <div>
-            <span>
-              Your chequebook is either not deployed or funded. To run the node you will need xDAI and xBZZ on the xDai
-              network. You may need to aquire BZZ through (e.g. <a href="https://bzz.exchange/">bzz.exchange</a>) and
-              bridge it to the xDai network through the <a href="https://omni.xdaichain.com/bridge">omni bridge</a>. To
-              pay the transaction fees, you will also need xDAI token. You can purchase DAI on the network and bridge it
-              to xDai network through the <a href="https://bridge.xdaichain.com/">xDai Bridge</a>. See the{' '}
-              <a href="https://www.xdaichain.com/#xdai-stable-chain">official xDai website</a> for more information.
-            </span>
-          </div>
+    <ExpandableList
+      label={
+        <>
+          <StatusIcon isOk={isOk} isLoading={isLoading} /> Chequebook Deployment & Funding
+        </>
+      }
+    >
+      <ExpandableListItemNote>
+        {isOk ? (
+          'Your chequebook is deployed and funded'
+        ) : (
+          <>
+            Your chequebook is either not deployed or funded. To run the node you will need xDAI and xBZZ on the xDai
+            network. You may need to aquire BZZ (e.g. <a href="https://bzz.exchange/">bzz.exchange</a>) and bridge it to
+            the xDai network through the <a href="https://omni.xdaichain.com/bridge">omni bridge</a>. To pay the
+            transaction fees, you will also need xDAI token. You can purchase DAI on the network and bridge it to xDai
+            network through the <a href="https://bridge.xdaichain.com/">xDai Bridge</a>. See the{' '}
+            <a href="https://www.xdaichain.com/#xdai-stable-chain">official xDai website</a> for more information.
+          </>
        )}
-      </div>
-      <Typography variant="subtitle1" gutterBottom>
-        Chequebook Address
-      </Typography>
-      <EthereumAddress address={chequebookAddress} />
-    </div>
+      </ExpandableListItemNote>
+      {chequebookAddress && (
+        <>
+          <ExpandableListItemKey label="Chequebook Address" value={chequebookAddress.chequebookAddress} />
+          <ExpandableListItemActions>
+            <DepositModal />
+          </ExpandableListItemActions>
+        </>
+      )}
+    </ExpandableList>
  )
 }

@@ -1,99 +1,87 @@
 import { ReactElement, useContext } from 'react'
-import { Typography, Accordion, AccordionSummary, AccordionDetails } from '@material-ui/core/'
 import MuiAlert from '@material-ui/lab/Alert'
-import { ExpandMoreSharp } from '@material-ui/icons/'

-import ConnectToHost from '../../../components/ConnectToHost'
 import CodeBlockTabs from '../../../components/CodeBlockTabs'
+import ExpandableList from '../../../components/ExpandableList'
+import ExpandableListItem from '../../../components/ExpandableListItem'
+import ExpandableListItemInput from '../../../components/ExpandableListItemInput'
+import ExpandableListItemNote from '../../../components/ExpandableListItemNote'
+import StatusIcon from '../../../components/StatusIcon'
 import { Context as SettingsContext } from '../../../providers/Settings'
+import { Context } from '../../../providers/Bee'

-type Props = StatusHookCommon
-
-export default function NodeConnectionCheck({ isOk }: Props): ReactElement | null {
+export default function NodeConnectionCheck(): ReactElement | null {
+  const { status, isLoading } = useContext(Context)
  const { setDebugApiUrl, apiDebugUrl } = useContext(SettingsContext)
-
-  const changeDebugApiUrl = (
-    <div style={{ display: 'flex', marginTop: '25px', marginBottom: '25px' }}>
-      <span style={{ marginRight: '15px' }}>
-        Debug API (<Typography variant="button">{apiDebugUrl}</Typography>)
-      </span>
-      <ConnectToHost
-        setHost={(host: string) => {
-          console.log(host) // eslint-disable-line
-          setDebugApiUrl(host)
-        }}
-        defaultHost={apiDebugUrl}
-      />
-    </div>
-  )
-
-  if (isOk) {
-    return changeDebugApiUrl
-  }
+  const isOk = status.debugApiConnection

  return (
-    <div>
-      {changeDebugApiUrl}
+    <ExpandableList
+      label={
+        <>
+          <StatusIcon isOk={isOk} isLoading={isLoading} /> Connection to Bee Debug API
+        </>
+      }
+    >
+      <ExpandableListItemNote>
+        {isOk
+          ? 'The connection to the Bee nodes deug API has been successful'
+          : 'We cannot connect to your nodes debug API. Please check the following to troubleshoot your issue.'}
+      </ExpandableListItemNote>
+      <ExpandableListItemInput label="Bee Debug API" value={apiDebugUrl} onConfirm={setDebugApiUrl} />

-      <div>
-        <Typography component="div" variant="body2" gutterBottom style={{ margin: '15px' }}>
-          We cannot connect to your nodes debug API at <Typography variant="button">{apiDebugUrl}</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 1635 (or your custom
-                    specified port) is bound to localhost. If your node is not running try executing the below command
-                    to start your bee node
-                  </li>
-                  <MuiAlert
-                    style={{ marginTop: '10px', marginBottom: '10px' }}
-                    elevation={6}
-                    variant="filled"
-                    severity="error"
-                  >
-                    Your debug node API should never be completely open to the internet. If you want to connect
-                    remotely, make sure your firewall settings are set to only allow specific trusted IP addresses and
-                    block all other ports. A simple google search for &quot;what is my ip&quot; will show you your
-                    computers public IP address to allow.
-                  </MuiAlert>
-                  <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`}
-                  />
-                  <li>
-                    Lastly, check your nodes configuration settings to validate the debug API is enabled and the Cross
-                    Origin Resource Sharing (CORS) setting is configured to allow your host. Config parameter{' '}
-                    <strong>debug-api-enable</strong> must be set to <strong>true</strong> and{' '}
-                    <strong>cors-allowed-origins</strong> must be set to your host domain or IP (you can also use the
-                    wildcard <code>{"cors-allowed-origins: ['*']"}</code>). If edits are made to the configuration run
-                    the restart command below for changes to take effect.
-                  </li>
-                  <CodeBlockTabs
-                    showLineNumbers
-                    linux={`sudo vi /etc/bee/bee.yaml\nsudo systemctl restart bee`}
-                    mac={`sudo vi /usr/local/etc/swarm-bee/bee.yaml \nbrew services restart swarm-bee`}
-                  />
-                </ol>
-              </Typography>
-            </AccordionDetails>
-          </Accordion>
-        </Typography>
-      </div>
-    </div>
+      {!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 1635 (or your custom
+                  specified port) is bound to localhost. If your node is not running try executing the below command to
+                  start your bee node
+                </li>
+                <MuiAlert
+                  style={{ marginTop: '10px', marginBottom: '10px' }}
+                  elevation={6}
+                  variant="filled"
+                  severity="error"
+                >
+                  Your debug node API should never be completely open to the internet. If you want to connect remotely,
+                  make sure your firewall settings are set to only allow specific trusted IP addresses and block all
+                  other ports. A simple google search for &quot;what is my ip&quot; will show you your computers public
+                  IP address to allow.
+                </MuiAlert>
+                <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`}
+                />
+                <li>
+                  Lastly, check your nodes configuration settings to validate the debug API is enabled and the Cross
+                  Origin Resource Sharing (CORS) setting is configured to allow your host. Config parameter{' '}
+                  <strong>debug-api-enable</strong> must be set to <strong>true</strong> and{' '}
+                  <strong>cors-allowed-origins</strong> must be set to your host domain or IP (you can also use the
+                  wildcard <code>{"cors-allowed-origins: ['*']"}</code>). If edits are made to the configuration run the
+                  restart command below for changes to take effect.
+                </li>
+                <CodeBlockTabs
+                  showLineNumbers
+                  linux={`sudo vi /etc/bee/bee.yaml\nsudo systemctl restart bee`}
+                  mac={`sudo vi /usr/local/etc/swarm-bee/bee.yaml \nbrew services restart swarm-bee`}
+                />
+              </ol>
+            }
+          />
+        </ExpandableList>
+      )}
+    </ExpandableList>
  )
 }
@@ -1,34 +1,42 @@
-import type { ReactElement } from 'react'
-import { Typography } from '@material-ui/core/'
-import EthereumAddress from '../../../components/EthereumAddress'
+import { ReactElement, useContext } from 'react'
+import ExpandableList from '../../../components/ExpandableList'
+import ExpandableListItemKey from '../../../components/ExpandableListItemKey'
+import ExpandableListItemNote from '../../../components/ExpandableListItemNote'
+import StatusIcon from '../../../components/StatusIcon'
+import { Context } from '../../../providers/Bee'

-type Props = StatusEthereumConnectionHook
-
-export default function EthereumConnectionCheck({ isOk, nodeAddresses }: Props): ReactElement | null {
-  if (isOk) {
-    return (
-      <div>
-        <Typography variant="subtitle1" gutterBottom>
-          Node Address
-        </Typography>
-        <EthereumAddress address={nodeAddresses?.ethereum} />
-      </div>
-    )
-  }
+export default function EthereumConnectionCheck(): ReactElement | null {
+  const { status, isLoading, nodeAddresses } = useContext(Context)
+  const isOk = status.blockchainConnection

  return (
-    <p>
-      Your Bee node must have access to the xDai blockchain, so that it can interact and deploy your chequebook
-      contract. You can run{' '}
-      <a href="https://www.xdaichain.com/" rel="noreferrer" target="_blank">
-        your own xDai node
-      </a>
-      , or use a provider instead - we recommend{' '}
-      <a href="https://getblock.io/" rel="noreferrer" target="_blank">
-        Getblock
-      </a>
-      . By default, Bee expects a local node at http://localhost:8545. To use a provider instead, simply change the{' '}
-      <strong>swap-endpoint</strong> in your configuration file.
-    </p>
+    <ExpandableList
+      label={
+        <>
+          <StatusIcon isOk={isOk} isLoading={isLoading} /> Connection to Blockchain
+        </>
+      }
+    >
+      <ExpandableListItemNote>
+        {isOk ? (
+          'Your node is connected to the xDai blockchain'
+        ) : (
+          <>
+            Your Bee node must have access to the xDai blockchain, so that it can interact and deploy your chequebook
+            contract. You can run{' '}
+            <a href="https://www.xdaichain.com/" rel="noreferrer" target="_blank">
+              your own xDai node
+            </a>
+            , or use a provider instead - we recommend{' '}
+            <a href="https://getblock.io/" rel="noreferrer" target="_blank">
+              Getblock
+            </a>
+            . By default, Bee expects a local node at http://localhost:8545. To use a provider instead, simply change
+            the <strong>swap-endpoint</strong> in your configuration file.
+          </>
+        )}
+      </ExpandableListItemNote>
+      {nodeAddresses?.ethereum && <ExpandableListItemKey label="Ethereum Address" value={nodeAddresses?.ethereum} />}
+    </ExpandableList>
  )
 }
@@ -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>
  )
 }
@@ -1,43 +1,29 @@
-import type { ReactElement } from 'react'
-import { Typography } from '@material-ui/core/'
+import { ReactElement, useContext } from 'react'
+import ExpandableList from '../../../components/ExpandableList'
+import ExpandableListItemNote from '../../../components/ExpandableListItemNote'
+import TopologyStats from '../../../components/TopologyStats'
+import StatusIcon from '../../../components/StatusIcon'
+import { Context } from '../../../providers/Bee'

-type Props = StatusTopologyHook
-
-export default function PeerConnection({ isOk, topology }: Props): ReactElement | null {
-  const peers = (
-    <div style={{ display: 'flex', marginTop: '15px' }}>
-      <div style={{ marginRight: '30px' }}>
-        <Typography component="div" variant="subtitle1" gutterBottom color="textSecondary">
-          <span>Connected Peers</span>
-        </Typography>
-        <Typography component="h2" variant="h5">
-          {topology?.connected ? topology.connected : '-'}
-        </Typography>
-      </div>
-      <div>
-        <Typography component="div" variant="subtitle1" gutterBottom color="textSecondary">
-          <span>Discovered Nodes</span>
-        </Typography>
-        <Typography component="h2" variant="h5">
-          {topology?.population ? topology.population : '-'}
-        </Typography>
-      </div>
-    </div>
-  )
-
-  if (isOk) {
-    return (
-      <>
-        <span>You are connected to peers!</span>
-        {peers}
-      </>
-    )
-  }
+export default function PeerConnection(): ReactElement | null {
+  const { status, isLoading, topology } = useContext(Context)
+  const isOk = status.topology

  return (
-    <>
-      <span>Your node is not connected to any peers</span>
-      {peers}
-    </>
+    <ExpandableList
+      label={
+        <>
+          <StatusIcon isOk={isOk} isLoading={isLoading} /> Connection to Peers
+        </>
+      }
+    >
+      <ExpandableListItemNote>
+        {isOk
+          ? 'You are connected to other Bee nodes'
+          : 'Your node is not connected to any peers. Please wait a bit if you just started the node, otherwise review your configuration file.'}
+      </ExpandableListItemNote>
+
+      <TopologyStats topology={topology} />
+    </ExpandableList>
  )
 }
@@ -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>
  )
 }
@@ -1,129 +0,0 @@
-import { ReactElement, useState } from 'react'
-import { Link } from 'react-router-dom'
-
-import { createStyles, makeStyles } from '@material-ui/core/styles'
-import { Card, CardContent, Typography, Chip, Button } from '@material-ui/core/'
-import { CheckCircle, Error, ArrowRight, ArrowDropUp } from '@material-ui/icons/'
-import { NodeAddresses, Topology } from '@ethersphere/bee-js'
-
-const useStyles = makeStyles(() =>
-  createStyles({
-    root: {
-      display: 'flex',
-      flex: '1 1 auto',
-      flexDirection: 'column',
-    },
-    status: {
-      color: '#2145a0',
-      backgroundColor: '#e1effe',
-    },
-  }),
-)
-
-interface Props {
-  nodeAddresses: NodeAddresses | null
-  nodeTopology: Topology | null
-  userBeeVersion?: string
-  isLatestBeeVersion: boolean
-  isOk: boolean
-  latestUrl: string
-}
-
-function StatusCard({
-  userBeeVersion,
-  nodeAddresses,
-  nodeTopology,
-  isOk,
-  isLatestBeeVersion,
-  latestUrl,
-}: Props): ReactElement | null {
-  const classes = useStyles()
-
-  const [underlayAddressesVisible, setUnderlayAddresessVisible] = useState<boolean>(false)
-
-  return (
-    <Card>
-      <CardContent className={classes.root}>
-        <Typography component="h5" variant="h5" style={{ display: 'flex', justifyContent: 'space-between' }}>
-          {isOk && (
-            <div>
-              <CheckCircle style={{ color: '#32c48d', marginRight: '7px' }} />
-              <span>Your Bee node is running as expected</span>
-            </div>
-          )}
-          {!isOk && (
-            <div>
-              <Error style={{ color: '#c9201f', marginRight: '7px' }} />
-              <span>Could not connect to Bee Node</span>
-            </div>
-          )}
-        </Typography>
-        {isOk && (
-          <>
-            <div style={{ marginBottom: '20px' }}>
-              <span style={{ marginRight: '20px' }}>Discovered Nodes: {nodeTopology?.population}</span>
-              <span style={{ marginRight: '20px' }}>
-                <span>Connected Peers: </span>
-                <Link to="/peers/">{nodeTopology?.connected}</Link>
-              </span>
-            </div>
-            <div>
-              <Typography component="div" variant="subtitle2" gutterBottom>
-                <span>AGENT: </span>
-                <a href="https://github.com/ethersphere/bee" rel="noreferrer" target="_blank">
-                  Bee
-                </a>{' '}
-                <span>{userBeeVersion || '-'}</span>
-                {isLatestBeeVersion ? (
-                  <Chip
-                    style={{ marginLeft: '7px', color: '#2145a0' }}
-                    size="small"
-                    label="latest"
-                    className={classes.status}
-                  />
-                ) : (
-                  <Button size="small" variant="outlined" href={latestUrl}>
-                    update
-                  </Button>
-                )}
-              </Typography>
-              <Typography component="div" variant="subtitle2" gutterBottom>
-                <span>PUBLIC KEY: </span>
-                <span>{nodeAddresses?.publicKey ? nodeAddresses.publicKey : '-'}</span>
-              </Typography>
-              <Typography component="div" variant="subtitle2" gutterBottom>
-                <span>PSS PUBLIC KEY: </span>
-                <span>{nodeAddresses?.pssPublicKey ? nodeAddresses.pssPublicKey : '-'}</span>
-              </Typography>
-              <Typography component="div" variant="subtitle2" gutterBottom>
-                <span>OVERLAY ADDRESS (PEER ID): </span>
-                <span>{nodeAddresses?.overlay ? nodeAddresses.overlay : '-'}</span>
-              </Typography>
-              <Typography component="div" variant="subtitle2" gutterBottom>
-                <Typography component="div" onClick={() => setUnderlayAddresessVisible(!underlayAddressesVisible)}>
-                  <Button color="primary" style={{ padding: 0, marginTop: '6px' }}>
-                    {underlayAddressesVisible ? (
-                      <ArrowDropUp style={{ fontSize: '12px' }} />
-                    ) : (
-                      <ArrowRight style={{ fontSize: '12px' }} />
-                    )}
-                    <span>Underlay Addresses</span>
-                  </Button>
-                </Typography>
-                {underlayAddressesVisible && (
-                  <div>
-                    {nodeAddresses?.underlay.map(item => (
-                      <li key={item}>{item}</li>
-                    ))}
-                  </div>
-                )}
-              </Typography>
-            </div>
-          </>
-        )}
-      </CardContent>
-    </Card>
-  )
-}
-
-export default StatusCard
@@ -1,48 +1,21 @@
-import { ReactElement, useContext } from 'react'
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
+import type { ReactElement } from 'react'

-import NodeSetupWorkflow from './NodeSetupWorkflow'
-import StatusCard from './StatusCard'
-import EthereumAddressCard from '../../components/EthereumAddressCard'
-import { Context as BeeContext } from '../../providers/Bee'
-
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      width: '100%',
-      display: 'grid',
-      rowGap: theme.spacing(3),
-    },
-  }),
-)
-
-export default function Status(): ReactElement {
-  const classes = useStyles()
-
-  const {
-    status,
-    latestUserVersion,
-    isLatestBeeVersion,
-    latestBeeVersionUrl,
-    topology,
-    nodeAddresses,
-    chequebookAddress,
-  } = useContext(BeeContext)
+import DebugConnectionCheck from './SetupSteps/DebugConnectionCheck'
+import NodeConnectionCheck from './SetupSteps/NodeConnectionCheck'
+import VersionCheck from './SetupSteps/VersionCheck'
+import EthereumConnectionCheck from './SetupSteps/EthereumConnectionCheck'
+import ChequebookDeployFund from './SetupSteps/ChequebookDeployFund'
+import PeerConnection from './SetupSteps/PeerConnection'

+export default function NodeSetupWorkflow(): ReactElement {
  return (
-    <div className={classes.root}>
-      <StatusCard
-        userBeeVersion={latestUserVersion}
-        isLatestBeeVersion={isLatestBeeVersion}
-        isOk={status.all}
-        nodeTopology={topology}
-        latestUrl={latestBeeVersionUrl}
-        nodeAddresses={nodeAddresses}
-      />
-      {nodeAddresses && chequebookAddress && (
-        <EthereumAddressCard nodeAddresses={nodeAddresses} chequebookAddress={chequebookAddress} />
-      )}
-      <NodeSetupWorkflow />
+    <div>
+      <DebugConnectionCheck />
+      <VersionCheck />
+      <EthereumConnectionCheck />
+      <ChequebookDeployFund />
+      <NodeConnectionCheck />
+      <PeerConnection />
    </div>
  )
 }
@@ -0,0 +1,33 @@
+import type { ReactElement } from 'react'
+import { Switch } from 'react-router-dom'
+
+import { Route } from 'react-router-dom'
+
+import Info from './pages/info'
+import Status from './pages/status'
+import Files from './pages/files'
+import Accounting from './pages/accounting'
+import Settings from './pages/settings'
+import Stamps from './pages/stamps'
+
+export enum ROUTES {
+  INFO = '/',
+  FILES = '/files',
+  ACCOUNTING = '/accounting',
+  SETTINGS = '/settings',
+  STAMPS = '/stamps',
+  STATUS = '/status',
+}
+
+const BaseRouter = (): ReactElement => (
+  <Switch>
+    <Route exact path={ROUTES.FILES} component={Files} />
+    <Route exact path={ROUTES.ACCOUNTING} component={Accounting} />
+    <Route exact path={ROUTES.SETTINGS} component={Settings} />
+    <Route exact path={ROUTES.STAMPS} component={Stamps} />
+    <Route exact path={ROUTES.STATUS} component={Status} />
+    <Route path={ROUTES.INFO} component={Info} />
+  </Switch>
+)
+
+export default BaseRouter
@@ -1,23 +0,0 @@
-import type { JSXElementConstructor, ReactElement } from 'react'
-import { Route, RouteComponentProps } from 'react-router-dom'
-
-interface Props {
-  component: JSXElementConstructor<RouteComponentProps>
-  layout: JSXElementConstructor<RouteComponentProps>
-  exact?: boolean
-  path: string
-}
-
-const AppRoute = ({ component: Component, layout: Layout, exact, path }: Props): ReactElement => (
-  <Route
-    exact={exact}
-    path={path}
-    render={props => (
-      <Layout {...props}>
-        <Component {...props} />
-      </Layout>
-    )}
-  />
-)
-
-export default AppRoute
@@ -1,28 +0,0 @@
-import type { ReactElement } from 'react'
-import { Switch } from 'react-router-dom'
-
-import AppRoute from './AppRoute'
-
-// layouts
-import Dashboard from '../layout/Dashboard'
-
-// pages
-import Status from '../pages/status'
-import Files from '../pages/files'
-import Peers from '../pages/peers'
-import Accounting from '../pages/accounting'
-import Settings from '../pages/settings'
-import Stamps from '../pages/stamps'
-
-const BaseRouter = (): ReactElement => (
-  <Switch>
-    <AppRoute exact path="/" layout={Dashboard} component={Status} />
-    <AppRoute exact path="/files/" layout={Dashboard} component={Files} />
-    <AppRoute exact path="/peers/" layout={Dashboard} component={Peers} />
-    <AppRoute exact path="/accounting/" layout={Dashboard} component={Accounting} />
-    <AppRoute exact path="/settings/" layout={Dashboard} component={Settings} />
-    <AppRoute exact path="/stamps/" layout={Dashboard} component={Stamps} />
-  </Switch>
-)
-
-export default BaseRouter
@@ -9,34 +9,146 @@ declare module '@material-ui/core/styles/createPalette' {

 // Overwriting default components styles
 const componentsOverrides = (theme: Theme) => ({
+  MuiListItem: {
+    button: {
+      '&:hover': {
+        backgroundColor: '#fcf2e8',
+        color: theme.palette.primary.main,
+        // https://github.com/mui-org/material-ui/issues/22543
+        '@media (hover: none)': {
+          backgroundColor: '#fcf2e8',
+          color: theme.palette.primary.main,
+        },
+      },
+    },
+  },
+  MuiContainer: {
+    root: { padding: theme.spacing(8) },
+    maxWidthXs: { padding: theme.spacing(8) },
+    maxWidthSm: { padding: theme.spacing(8) },
+    maxWidthMd: { padding: theme.spacing(8) },
+    maxWidthLg: { padding: theme.spacing(8) },
+    maxWidthXl: { padding: theme.spacing(8) },
+  },
+  MuiButton: {
+    startIcon: { marginLeft: theme.spacing(1) },
+    endIcon: { marginRight: theme.spacing(1) },
+    outlined: {
+      border: 'none',
+      borderRadius: theme.spacing(10),
+      color: theme.palette.primary.main,
+      backgroundColor: '#fcf2e8',
+    },
+    outlinedSizeSmall: {
+      padding: theme.spacing(1),
+      paddingLeft: theme.spacing(2),
+      paddingRight: theme.spacing(2),
+      boxShadow: 'none',
+      '&:hover': {
+        backgroundColor: theme.palette.primary.main,
+        color: 'white',
+        boxShadow: 'none',
+        // https://github.com/mui-org/material-ui/issues/22543
+        '@media (hover: none)': {
+          backgroundColor: theme.palette.primary.main,
+          color: 'white',
+          boxShadow: 'none',
+        },
+      },
+    },
+    outlinedSizeLarge: {
+      padding: theme.spacing(4),
+      borderRadius: 0,
+      boxShadow: 'none',
+      '&:hover': {
+        backgroundColor: theme.palette.primary.main,
+        color: 'white',
+        boxShadow: 'none',
+        // https://github.com/mui-org/material-ui/issues/22543
+        '@media (hover: none)': {
+          backgroundColor: theme.palette.primary.main,
+          color: 'white',
+          boxShadow: 'none',
+        },
+      },
+    },
+    containedSizeLarge: {
+      padding: theme.spacing(4),
+      borderRadius: 0,
+      boxShadow: 'none',
+      '&:hover': {
+        backgroundColor: theme.palette.primary.main,
+        color: 'white',
+        boxShadow: 'none',
+        // https://github.com/mui-org/material-ui/issues/22543
+        '@media (hover: none)': {
+          backgroundColor: theme.palette.primary.main,
+          color: 'white',
+          boxShadow: 'none',
+        },
+      },
+    },
+    containedSizeSmall: {
+      padding: theme.spacing(1),
+      paddingLeft: theme.spacing(2),
+      paddingRight: theme.spacing(2),
+      borderRadius: 0,
+      boxShadow: 'none',
+      '&:hover': {
+        backgroundColor: theme.palette.primary.main,
+        color: 'white',
+        boxShadow: 'none',
+        // https://github.com/mui-org/material-ui/issues/22543
+        '@media (hover: none)': {
+          backgroundColor: theme.palette.primary.main,
+          color: 'white',
+          boxShadow: 'none',
+        },
+      },
+    },
+    contained: {
+      padding: theme.spacing(2),
+      backgroundColor: 'white',
+      boxShadow: 'none',
+      borderRadius: 0,
+      '&:hover': {
+        backgroundColor: theme.palette.primary.main,
+        color: 'white',
+        boxShadow: 'none',
+        // https://github.com/mui-org/material-ui/issues/22543
+        '@media (hover: none)': {
+          backgroundColor: theme.palette.primary.main,
+          color: 'white',
+          boxShadow: 'none',
+        },
+      },
+      '&:focus': {
+        backgroundColor: theme.palette.primary.main,
+        color: 'white',
+      },
+      '&:active': {
+        backgroundColor: theme.palette.primary.main,
+        color: 'white',
+      },
+      '&:disabled': {
+        backgroundColor: 'white',
+      },
+    },
+  },
  MuiTab: {
    root: {
-      backgroundColor: 'transparent',
-      fontWeight: theme.typography.fontWeightRegular,
-      marginRight: theme.spacing(4),
-      fontFamily: [
-        '-apple-system',
-        'BlinkMacSystemFont',
-        '"Segoe UI"',
-        'Roboto',
-        '"Helvetica Neue"',
-        'Arial',
-        'sans-serif',
-        '"Apple Color Emoji"',
-        '"Segoe UI Emoji"',
-        '"Segoe UI Symbol"',
-      ].join(','),
+      backgroundColor: theme.palette.background.paper,
      '&:hover': {
-        color: theme.palette.secondary,
+        backgroundColor: '#fcf2e8',
+        color: theme.palette.primary.main,
        opacity: 1,
      },
      '&$selected': {
-        color: theme.palette.secondary,
        fontWeight: theme.typography.fontWeightMedium,
      },
-      '&:focus': {
-        color: theme.palette.secondary,
-      },
+    },
+    textColorInherit: {
+      opacity: 0.5,
    },
  },
  MuiTabs: {
@@ -44,7 +156,7 @@ const componentsOverrides = (theme: Theme) => ({
      borderBottom: 'none',
    },
    indicator: {
-      backgroundColor: theme.palette.primary.main,
+      backgroundColor: 'transparent',
    },
  },
 })
@@ -53,16 +165,19 @@ const propsOverrides = {
  MuiTab: {
    disableRipple: true,
  },
+  MuiButtonBase: {
+    disableRipple: true,
+  },
 }

-export const lightTheme = createMuiTheme({
+export const theme = createMuiTheme({
  palette: {
    type: 'light',
    background: {
-      default: '#fafafa',
+      default: '#efefef',
    },
    primary: {
-      light: orange.A200,
+      light: '#fcf2e8',
      main: '#dd7700',
      dark: orange[800],
    },
@@ -72,31 +187,25 @@ export const lightTheme = createMuiTheme({
  },
  typography: {
    fontFamily: ['Work Sans', 'Montserrat', 'Nunito', 'Roboto', '"Helvetica Neue"', 'Arial', 'sans-serif'].join(','),
+    h1: {
+      fontSize: '1.3rem',
+      fontWeight: 500,
+    },
+    h2: {
+      fontSize: '1rem',
+      fontWeight: 500,
+    },
+    h3: {
+      fontSize: '0.8rem',
+      fontWeight: 500,
+    },
+    body2: {
+      fontFamily: '"IBM Plex Mono", monospace',
+      fontWeight: 500,
+      fontSize: '1rem',
+    },
  },
 })

-export const darkTheme = createMuiTheme({
-  palette: {
-    type: 'dark',
-    background: {
-      default: '#0d1117',
-      paper: '#161b22',
-    },
-    primary: {
-      light: orange.A200,
-      main: '#dd7700',
-      dark: orange[800],
-    },
-    secondary: {
-      main: '#1f2937',
-    },
-  },
-  typography: {
-    fontFamily: ['Work Sans', 'Montserrat', 'Nunito', 'Roboto', '"Helvetica Neue"', 'Arial', 'sans-serif'].join(','),
-  },
-})
-
-darkTheme.overrides = componentsOverrides(darkTheme)
-darkTheme.props = propsOverrides
-lightTheme.overrides = componentsOverrides(lightTheme)
-lightTheme.props = propsOverrides
+theme.overrides = componentsOverrides(theme)
+theme.props = propsOverrides
@@ -53,7 +53,7 @@ describe('utils', () => {
    wrongValues.forEach(v => {
      test(`testing ${v}`, () => {
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        expect(() => makeBigNumber((v as unknown) as any)).toThrow()
+        expect(() => makeBigNumber(v as unknown as any)).toThrow()
      })
    })
  })
Author	SHA1	Message	Date
bee-worker	643f3b24db	chore: release 0.8.0 (#205 ) * chore: release 0.8.0 * chore: update changelog Co-authored-by: Vojtech Simetka <vojtech@simetka.cz>	2021-10-20 19:43:39 +02:00
Vojtech Simetka	605054895d	feat: updated readme to new bee version and UI examples with new design (#230 )	2021-10-20 16:24:43 +02:00
Vojtech Simetka	d5649dc8c6	chore(deps): update to bee-js 2.1.0 to support 2.0.0 (#229 )	2021-10-14 15:59:25 +02:00
Vojtech Simetka	cc5e778f89	fix: typo in population text (#228 )	2021-10-13 13:20:06 +02:00
Vojtech Simetka	f11bbd5008	fix: unknown routes should point to info page (#227 )	2021-10-13 11:38:09 +02:00
Vojtech Simetka	b4c9d9e018	fix: size of the troubleshoot component button (#226 )	2021-10-13 11:37:59 +02:00
Vojtech Simetka	6c3f6c1019	fix: hover state style of ListItems which are clickable to be in line with other buttons (#223 ) * fix: hover state style of ListItems which are clickable to be in line with other buttons * fix: hover state of the SideBarStatus button	2021-10-11 10:07:31 +02:00
Vojtech Simetka	83c6d13417	fix: style of the update bee version button (#222 ) * fix: style of the update bee version button * chore: remove unused import	2021-10-11 10:07:06 +02:00
Vojtech Simetka	93af7f35a3	feat: files page updated to latest design (#218 ) * feat: altered the design of the tabs and redid the download tab * feat: redesign the upload file * fix: styles of tabs on hover * fix: display troubleshoot component when the status of the node is not OK * fix: when removing the file, remove the reference upload reference as well * fix: on inputs the label should not be selectable * feat: add placeholder to inputs and make the label non-selectable * refactor: improved the readability of the upload file component * chore: removed PeerDetail component * fix: replaced "batch" with (postage) "stamp" for clarity * refactor: address PR review comments * feat: disable the download button if there is no value	2021-10-08 13:34:55 +02:00
Attila Gazso	03265687ad	fix: used label in postage stamp list (#220 )	2021-10-08 08:38:12 +02:00
Vojtech Simetka	f241b2fc5f	feat: updated the postage stamps page design (#217 ) * feat: updated the settings page design * chore: removed unused dependencies	2021-10-07 12:22:46 +02:00
Vojtech Simetka	32e5ea9e56	feat: updated the settings page design (#215 )	2021-10-07 10:47:51 +02:00
Vojtech Simetka	b666cd2657	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	2021-10-06 18:38:54 +02:00
Vojtech Simetka	ecbc116475	feat: update design of the accounting page (#209 ) * feat: update design of the accounting page, fixed the worsed graphical offenders * chore: button alignment * chore: removed unused dependency * chore: buttons are underneath the action * feat: refactored the peers table to be in line with the new design * feat: add total uncashed amount and sorting for the peers * feat: action buttons are now properly aligned * chore: typo in comment	2021-10-05 12:59:08 +02:00
Attila Gazso	e7188f4a35	fix: wording in chequebook setup (#211 ) * fix: wording in chequebook setup * fix: code linting Co-authored-by: Vojtech Simetka <vojtech@simetka.cz>	2021-10-04 17:06:53 +02:00
Vojtech Simetka	b69e368f69	feat: updated the settings page to be a bit more consistent with the rest of the design (#208 )	2021-10-04 12:26:34 +02:00
Vojtech Simetka	57f5a73f3a	feat: info page redesign (#207 ) * feat: info page redesign * style: headers and nesting for expandable lists * style: body typography * chore: bee version check * feat: key list item component * style: hover state for the key displaying component * style: left border on expanded items * fix: word break and splitting for hexstrings divisible by 6 * chore: moved the styles to classes * style: tooltips now have arrow * feat: indicate value has been copied * feat: removed the connectivity table in favor of info page * feat: added health tooltips for connectivity * refactor: simplified the topology into single component * fix: spacing between the bee version and the update button/chip * fix: spacing on devices not supporting rowGap	2021-10-04 12:26:13 +02:00
Vojtech Simetka	c4c7d9619d	chore(deps): update bee-js to 2.0.0 (#210 )	2021-10-04 12:25:41 +02:00
Vojtech Simetka	c4c1573263	feat: troubleshooting component (#204 ) * feat: troubleshooting component and general layout improvements * style: background color, links and button * chore: disable ripples and rounded corners on buttons * fix: spacing on the troubleshooting card	2021-09-13 12:25:01 +02:00
bee-worker	cda1d4bbb1	chore: release 0.7.0 (#189 ) * chore: release 0.7.0 * chore: update the changelog Co-authored-by: Vojtech Simetka <vojtech@simetka.cz>	2021-08-31 14:12:36 +02:00
Vojtech Simetka	e8e707a9c4	chore(deps): update to bee-js 1.2.1 (#197 )	2021-08-31 12:44:18 +02:00
Vojtech Simetka	28bbdfb2f6	style: sidebar styling (#194 ) * style: sidebar styling * style: hover and selected colors * chore: split the sidebar items into separate component * style: pretty much finished except for status button * feat: sidebar status button as a separate component * chore: spacing definition * style: size of the status text * fix: hiden navigation on small height screens	2021-08-31 11:27:38 +02:00
Cafe137	630791cd75	docs: add intended version section (#195 )	2021-08-30 17:43:49 +02:00
Vojtech Simetka	f316a5caf4	chore(deps): fix dependencies version (#192 ) * chore(deps): fix dependencies version * chore: use styles through core	2021-08-30 11:17:46 +02:00
Vojtech Simetka	929f44f206	refactor: routes as constants (#191 )	2021-08-26 12:57:44 +02:00
Vojtech Simetka	d1720e243c	feat: removed dark theme and theme switching (#190 )	2021-08-26 09:40:13 +02:00
Vojtech Simetka	3ce83d987d	refactor: move the router and layout directly to app.tsx (#188 )	2021-08-26 07:25:04 +02:00
Vojtech Simetka	02a7bff733	feat: separate info and status page (#183 ) * feat: separate info and status page * chore: remove the detection of step to expand	2021-08-25 17:41:17 +02:00
Vojtech Simetka	766fe96d1c	ci: enable code lint check (#186 ) * ci: enable code lint check * chore(deps): update and fix eslint & prettier versions	2021-08-25 16:14:09 +02:00
				`@@ -1 +0,0 @@`
				<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 468 142" xml:space="preserve"><style>.st1,.st2,.st3,.st4{opacity:.45;enable-background:new}.st2,.st3,.st4{opacity:.6}.st3,.st4{opacity:.3}.st4{opacity:.8}</style><g id="XMLID_41_"><g id="XMLID_1_"><g id="Swarm_typeface"><g id="XMLID_42_" opacity=".8"><path id="XMLID_31_" d="M193.7 90c0 9.1-9.5 13.4-17.4 13.4-8.5 0-17.8-3.3-17.8-13.2 0-1.7.1-3 2.2-3 1 0 1.4 1.3 1.4 2.1 0 8.5 6.8 10.6 14.2 10.6 5.8 0 13.8-2.8 13.8-9.8 0-13-31-5.3-31-20.3 0-8.6 9.6-10.8 16.5-10.8 8.1 0 17.1 3 17.1 12.6 0 1-1 1.7-1.9 1.7-1.1 0-1.7-1-1.7-1.9-.3-2.1-.6-3.5-2.1-5.2-2.6-3-7.7-3.6-11.5-3.6-4.5 0-12.9 1-12.9 7.1.1 10.9 31.1 3.5 31.1 20.3z"/><path id="XMLID_30_" d="M264.4 60.9c0 .8-13.2 37.6-14.5 40.9-.3 1-1 1.1-1.9 1.1-.9 0-1.6-.1-1.9-1.1l-12.9-36-12.9 36c-.3 1-1 1.1-1.9 1.1-.9 0-1.7-.1-1.9-1.1-1.3-3.3-14.5-40.1-14.5-40.9 0-1 .8-1.8 1.8-1.8.8 0 1.4.4 1.7 1.1l13 36.4 13-36.4c.3-.9 1-1.1 1.8-1.1.9 0 1.6.3 1.9 1.1l12.9 36.4 13-36.4c.3-.8.9-1.1 1.7-1.1.8 0 1.6.8 1.6 1.8z"/><path id="XMLID_45_" d="M315.3 60.9v39.2c0 1-.8 1.8-1.8 1.8s-1.8-.8-1.8-1.8v-8.2c-3.6 6.6-10.3 11.2-18 11.2-12.1 0-20.7-10.8-20.7-22.4s8.6-22.4 20.7-22.4c7.7 0 14.4 4.6 18 11.2v-8.6c0-.9.8-1.8 1.8-1.8s1.8.9 1.8 1.8zm-4.5 19.8c0-9.6-6.9-18.8-17.1-18.8-10 0-17.1 9.1-17.1 18.8s7.1 18.8 17.1 18.8c10.2 0 17.1-9.2 17.1-18.8z"/><path id="XMLID_27_" d="M352.4 61.3c0 1.1-.6 1.8-1.7 1.9-10.5 1.6-15.3 10.2-15.3 20.2v17.2c0 1-.8 1.8-1.8 1.8-1.1 0-1.8-.8-1.8-1.8V61.4c0-1 .8-1.8 1.8-1.8 1.1 0 1.8.8 1.8 1.8v8c3-5 8.9-9.8 15.1-9.8.8 0 1.9.6 1.9 1.7z"/><path id="XMLID_2_" d="M430.6 77.7v23c0 1-.9 1.8-1.8 1.8-1 0-1.8-.8-1.8-1.8v-23c0-7.7-4.4-15.3-13-15.3-10.9 0-15 11.6-15 20.6v17.8c0 1-.9 1.8-1.8 1.8-1 0-1.8-.8-1.8-1.8v-23c0-7.7-4.4-15.3-13-15.3-10.9 0-15.4 8.6-15.1 20.1 0 .3.1.8 0 .9v17.4c0 1-.8 1.8-1.8 1.8s-1.8-.8-1.8-1.8V61.4c0-1 .8-1.8 1.8-1.8s1.8.8 1.8 1.8V68c3.1-5.5 8.6-9.1 15.1-9.1 7.3 0 13 4.6 15.3 11.5 3-6.7 8.8-11.5 16.2-11.5 10.6-.1 16.7 9.1 16.7 18.8z"/></g></g></g><g id="Swarm_Icon"><path id="XMLID_26_" class="st1" d="M121.3 27v12.4l-11.1-6.2V20.7z"/><path id="XMLID_25_" class="st2" d="M110.2 33.2v12.4l11.1-6.2V27z"/><path id="XMLID_24_" class="st3" d="M37.4 102.7l22.1 12.4 22.1-12.4-22.1-12.5z"/><path id="XMLID_23_" class="st1" d="M59.5 90.2v24.9l-22.1-12.4V77.8z"/><path id="XMLID_22_" class="st1" d="M81.6 77.8v24.9L59.5 90.2V65.4z"/><path id="XMLID_21_" class="st2" d="M59.5 90.2v24.9l22.1-12.4V77.8z"/><path id="XMLID_20_" class="st2" d="M37.4 77.8v24.9l22.1-12.5V65.4z"/><path id="XMLID_19_" class="st4" d="M84 48.4l11 6.2 11.1-6.2L95 42.2z"/><path id="XMLID_18_" class="st4" d="M37.4 77.8l22.1 12.4 22.1-12.4-22.1-12.4z"/><path id="XMLID_17_" class="st3" d="M86.9 102.7l22.1 12.4 22.1-12.4L109 90.2z"/><path id="XMLID_16_" class="st1" d="M109 90.2v24.9l-22.1-12.4V77.8z"/><path id="XMLID_15_" class="st1" d="M131.1 77.8v24.9L109 90.2V65.4z"/><path id="XMLID_14_" class="st2" d="M109 90.2v24.9l22.1-12.4V77.8z"/><path id="XMLID_13_" class="st2" d="M86.9 77.8v24.9L109 90.2V65.4z"/><path id="XMLID_12_" class="st4" d="M86.9 77.8L109 90.2l22.1-12.4L109 65.4z"/><path id="XMLID_11_" class="st2" d="M84 35.9v12.5l11-6.2V29.7z"/><path id="XMLID_10_" class="st3" d="M61.9 60.8L84 73.2l22.1-12.4L84 48.4z"/><path id="XMLID_9_" class="st1" d="M84 48.4v24.8L61.9 60.8V35.9z"/><path id="XMLID_8_" class="st2" d="M61.9 35.9v24.9L84 48.4V23.5z"/><path id="XMLID_7_" class="st2" d="M95 54.6V42.2l-11 6.2v24.8L95 67l11.1-6.2V48.4z"/><g id="XMLID_5_"><path id="XMLID_6_" class="st1" d="M95 29.7l-11-6.2v24.9l22.1 12.4V48.4L95 42.2z"/></g><path id="XMLID_4_" class="st4" d="M84 23.5l11 6.2-11 6.2v12.5L61.9 35.9z"/><path id="XMLID_3_" class="st4" d="M99.2 27l11 6.2 11.1-6.2-11.1-6.3z"/></g></g></svg>