From 43823559da3744f5501364b0f9187d7c3191e240 Mon Sep 17 00:00:00 2001 From: Ivana Andersson Date: Wed, 16 Aug 2023 14:32:34 +0300 Subject: [PATCH 01/32] feat: add new create local node page --- .../CreateLocalNodePage.tsx | 82 +++++++++++++++++++ 1 file changed, 82 insertions(+) create mode 100644 src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx diff --git a/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx b/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx new file mode 100644 index 00000000..3a1e70df --- /dev/null +++ b/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx @@ -0,0 +1,82 @@ +import { useState } from 'react' +import { Button as StatusButton, Tag, Text, Avatar, Checkbox } from '@status-im/components' +import { Label, Separator, XStack, YStack } from 'tamagui' +import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow' +import NimbusLogo from '../../components/Logos/NimbusLogo' +import Titles from '../../components/General/Titles' +import NodeIcon from '../../components/Icons/NodeIcon' +import PairIcon from '../../components/Icons/PairIcon' +import CreateIcon from '../../components/Icons/CreateIcon' +import LabelInputField from '../../components/General/LabelInputField' + +const CreateLocalNodePage = () => { + const [autoConnectChecked, setAutoConnectChecked] = useState(false) + + return ( + +
+ + + + + + + +
+
+ +
+ +
+ + + + + + + + Device Avatar + + + + + + Highlight Color + + {/* */} + + + +
+
+ + + Settings + + + + setAutoConnectChecked(v)} + variant="outline" + /> + + + +
+ }>Continue +
+
+ + ) +} + +export default CreateLocalNodePage From cc90bc4d324376d25f1bd147b4237a0d21fe07ea Mon Sep 17 00:00:00 2001 From: Ivana Andersson Date: Wed, 16 Aug 2023 14:32:53 +0300 Subject: [PATCH 02/32] feat: add route in `App` for the create local node page --- src/App.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 10f7de4d..8a1b315e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -7,6 +7,7 @@ import LandingPage from './pages/LandingPage/LandingPage' import DeviceHealthCheck from './pages/DeviceHealthCheck/DeviceHealthCheck' import ConnectDevicePage from './pages/ConnectDevicePage/ConnectDevicePage' import DeviceSyncStatus from './pages/DeviceSyncStatus/DeviceSyncStatus' +import CreateLocalNodePage from './pages/CreateLocalNodePage/CreateLocalNodePage' const router = createBrowserRouter([ { @@ -20,12 +21,15 @@ const router = createBrowserRouter([ { path: '/connect-device', element: , - }, { path: '/device-sync-status', element: , - } + }, + { + path: '/create-local-node', + element: , + }, ]) function App() { From 1f5ff18605da23380ad9c9be0da8f2016adac821 Mon Sep 17 00:00:00 2001 From: Ivana Andersson Date: Wed, 16 Aug 2023 14:39:05 +0300 Subject: [PATCH 03/32] fix: changed font weight of page title --- src/components/General/Title.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/General/Title.tsx b/src/components/General/Title.tsx index b5a02796..925e590b 100644 --- a/src/components/General/Title.tsx +++ b/src/components/General/Title.tsx @@ -7,7 +7,7 @@ type TitleProps = { const Title = ({ color, children }: TitleProps) => { return ( - + {children} ) From 78cf706e69031ddb2cb3097bb9a0bd6153ebfb6a Mon Sep 17 00:00:00 2001 From: Ivana Andersson Date: Wed, 16 Aug 2023 14:39:21 +0300 Subject: [PATCH 04/32] feat: add story for `CreateLocalNode` page --- .../CreateLocalNodePage.stories.ts | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 src/pages/CreateLocalNodePage/CreateLocalNodePage.stories.ts diff --git a/src/pages/CreateLocalNodePage/CreateLocalNodePage.stories.ts b/src/pages/CreateLocalNodePage/CreateLocalNodePage.stories.ts new file mode 100644 index 00000000..99c8bae0 --- /dev/null +++ b/src/pages/CreateLocalNodePage/CreateLocalNodePage.stories.ts @@ -0,0 +1,20 @@ +import type { Meta, StoryObj } from '@storybook/react' + +import CreateLocalNodePage from './CreateLocalNodePage' + +const meta = { + title: 'Pages/CreateLocalNodePage', + component: CreateLocalNodePage, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], + argTypes: {}, +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Page: Story = { + args: {}, +} From 77891787728a76c89e65f00f9952116d86d586fd Mon Sep 17 00:00:00 2001 From: Ivana Andersson Date: Wed, 16 Aug 2023 15:12:42 +0300 Subject: [PATCH 05/32] feat: add margin bottom to the titles component --- src/components/General/Titles.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/General/Titles.tsx b/src/components/General/Titles.tsx index 29aaae53..fb24683a 100644 --- a/src/components/General/Titles.tsx +++ b/src/components/General/Titles.tsx @@ -11,7 +11,7 @@ type TitlesProps = { const Titles = ({ title, subtitle, isAdvancedSettings }: TitlesProps) => { return ( - + {title} {isAdvancedSettings && ( From e7a4b88f63cf417824b13f0a30239f982c36f83c Mon Sep 17 00:00:00 2001 From: Ivana Andersson Date: Wed, 16 Aug 2023 15:54:13 +0300 Subject: [PATCH 06/32] cleanup: remove css styles that are not used or needed --- src/App.css | 33 +++++-------------- .../General/BreadcrumbBar/BreadcrumbBar.tsx | 2 +- .../General/BreadcrumbBar/breadcrumbbar.css | 14 ++------ .../General/QuickStartBar/QuickStartBar.css | 12 +------ .../General/QuickStartBar/QuickStartBar.tsx | 1 - src/index.css | 27 --------------- 6 files changed, 13 insertions(+), 76 deletions(-) diff --git a/src/App.css b/src/App.css index 55e6bd98..74f6bd5f 100644 --- a/src/App.css +++ b/src/App.css @@ -1,30 +1,13 @@ #root { width: 100%; } - -@media (prefers-reduced-motion: no-preference) { - a:nth-of-type(2) .logo { - animation: logo-spin infinite 20s linear; - } +ul{ + list-style-type: none; + padding: 0; + margin: 0; + display: flex; } - -/* span { - display: inline-block; - vertical-align: middle; - line-height: 1; -} */ - -.mb-1 { - margin-bottom: 1em; -} -.mt-1 { - margin-top: 1em; -} -.my-1 { - margin-top: 1em; - margin-bottom: 1em; -} -.py-05 { - padding-top: 0.5em; - padding-bottom: 0.5em; +ul li { + padding: 0 1rem; + font-size: 15px; } \ No newline at end of file diff --git a/src/components/General/BreadcrumbBar/BreadcrumbBar.tsx b/src/components/General/BreadcrumbBar/BreadcrumbBar.tsx index 9034efbb..44199c1a 100644 --- a/src/components/General/BreadcrumbBar/BreadcrumbBar.tsx +++ b/src/components/General/BreadcrumbBar/BreadcrumbBar.tsx @@ -1,4 +1,4 @@ -import './breadcrumbbar.css' +import './BreadcrumbBar.css' type BreadcrumbBarProps = { breadcrumbList: string[] diff --git a/src/components/General/BreadcrumbBar/breadcrumbbar.css b/src/components/General/BreadcrumbBar/breadcrumbbar.css index b63bec69..43e0479e 100644 --- a/src/components/General/BreadcrumbBar/breadcrumbbar.css +++ b/src/components/General/BreadcrumbBar/breadcrumbbar.css @@ -4,19 +4,14 @@ padding: 1rem 2rem; margin: 0.5rem; } -.breadcrumb-bar-ul { - list-style-type: none; - display: flex; - padding: 0; - margin: 0; -} .breadcrumb-bar-li { - padding: 0 1em; color: #647084; - font-size: 15px; font-weight: 500; position: relative; } +.breadcrumb-bar-li:last-child { + color: #09101C; +} .breadcrumb-bar-li::after { display: inline-block; content: url("/icons/chevron.svg"); @@ -26,10 +21,7 @@ left: 100%; transform: translateX(-50%); } -.breadcrumb-bar-li:last-child { - color: #09101C; -} .breadcrumb-bar-li:last-child::after { display: none; } \ No newline at end of file diff --git a/src/components/General/QuickStartBar/QuickStartBar.css b/src/components/General/QuickStartBar/QuickStartBar.css index 334c8d90..90d344f3 100644 --- a/src/components/General/QuickStartBar/QuickStartBar.css +++ b/src/components/General/QuickStartBar/QuickStartBar.css @@ -14,22 +14,12 @@ } .quick-start-bar > div { width: 100%; - display: flex; - justify-content: space-between; - align-items: center; border-radius: 24px; background: rgba(100, 112, 132, 0.05); margin-left: 1rem; + padding: 1rem 0.5rem; } -.quick-start-bar ul { - list-style-type: none; - display: flex; - padding: 0; - margin: 0; -} - .quick-start-bar ul li { - padding: 0 1rem; color: #0D1625; font-size: 13px; } diff --git a/src/components/General/QuickStartBar/QuickStartBar.tsx b/src/components/General/QuickStartBar/QuickStartBar.tsx index 66560c6c..da93872a 100644 --- a/src/components/General/QuickStartBar/QuickStartBar.tsx +++ b/src/components/General/QuickStartBar/QuickStartBar.tsx @@ -38,7 +38,6 @@ const QuickStartBar = () => {
  • Nodes Community
  • Documentation
    • - ) diff --git a/src/index.css b/src/index.css index bd360c1c..226835dc 100644 --- a/src/index.css +++ b/src/index.css @@ -24,51 +24,24 @@ body { min-width: 320px; min-height: 100vh; } - h1, h2, h3, h4, h5, h6 { line-height: 1.2; font-weight: 700; } - -h1 { - font-size: 3.2em; - -} - a { font-weight: 500; text-decoration: inherit; cursor: pointer; } -a:hover { - color: #535bf2; -} button { border-radius: 12px; border: 1px solid transparent; - padding: 0.6em 1.2em; font-size: 15px; font-weight: 500; font-family: inherit; - background-color: #2A4AF5; - cursor: pointer; - transition: border-color 0.25s; -} -button.inversed { - border-radius: 12px; - border: 1px solid #2A4AF5; - color: #2A4AF5; - padding: 0.75em 1.2em; - font-size: 15px; - background-color:transparent; - font-weight: 500; - font-family: inherit; cursor: pointer; transition: border-color 0.25s; } -button:hover { - border-color: #646cff; -} button:focus, button:focus-visible { outline: 4px auto -webkit-focus-ring-color; From b6a22043192d2fe3d047588eb679dbe465f9b980 Mon Sep 17 00:00:00 2001 From: Ivana Andersson Date: Wed, 16 Aug 2023 15:56:57 +0300 Subject: [PATCH 07/32] cleanup: remove most html from landing page --- src/components/PageWrappers/layout.css | 7 +- src/pages/LandingPage/LandingPage.css | 7 +- src/pages/LandingPage/LandingPage.tsx | 93 +++++--------------------- 3 files changed, 18 insertions(+), 89 deletions(-) diff --git a/src/components/PageWrappers/layout.css b/src/components/PageWrappers/layout.css index 7de68989..1a58f303 100644 --- a/src/components/PageWrappers/layout.css +++ b/src/components/PageWrappers/layout.css @@ -25,8 +25,7 @@ display: flex; flex-wrap: wrap; justify-content: end; - height: 100%; - margin: 0 auto; + height: 100%; } .container-inner { max-width: 70%; @@ -40,10 +39,6 @@ header { justify-content: space-between; padding: 1.5rem 0; } -header > div { - display: flex; - align-items: center; -} .logo-title { font-size: 27px; font-weight: 700; diff --git a/src/pages/LandingPage/LandingPage.css b/src/pages/LandingPage/LandingPage.css index 39012d51..e021e88e 100644 --- a/src/pages/LandingPage/LandingPage.css +++ b/src/pages/LandingPage/LandingPage.css @@ -1,7 +1,4 @@ -.landing-page header div img { - margin-right: 0.5rem; +.landing-page { + height: 100%; } -.landing-page .content .subtitle { - margin-bottom: 3em; -} \ No newline at end of file diff --git a/src/pages/LandingPage/LandingPage.tsx b/src/pages/LandingPage/LandingPage.tsx index 801a7006..3292a64a 100644 --- a/src/pages/LandingPage/LandingPage.tsx +++ b/src/pages/LandingPage/LandingPage.tsx @@ -1,7 +1,11 @@ import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow' import './LandingPage.css' import QuickStartBar from '../../components/General/QuickStartBar/QuickStartBar' -import NodesLogo from '../../components/Logos/NodesLogo' +import Titles from '../../components/General/Titles' +import { Button as StatusButton } from '@status-im/components' +import NodeIcon from '../../components/Icons/NodeIcon' +import NimbusLogo from '../../components/Logos/NimbusLogo' +import { XStack, YStack } from 'tamagui' function LandingPage() { return ( @@ -9,84 +13,17 @@ function LandingPage() {
    - +
    -
    -
    - - - - - - - - - -
    -

    - Welcome, John. This is your complete access to a truly decentralized Web 3.0 -

    -

    - Status Nodes allows you to finally take control and ownership of the - services you wish to run in a completely trustless and decentralized manner. -

    - -
    + + + + }>Get Started + +
    From 60f9649333276c181f801afeda4d8eeb7edcfe6e Mon Sep 17 00:00:00 2001 From: Ivana Andersson Date: Wed, 16 Aug 2023 15:57:19 +0300 Subject: [PATCH 08/32] claenup: remove html tags from create node page --- .../CreateLocalNodePage.tsx | 65 +++++++++---------- 1 file changed, 29 insertions(+), 36 deletions(-) diff --git a/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx b/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx index 3a1e70df..15177af9 100644 --- a/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx +++ b/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx @@ -19,44 +19,37 @@ const CreateLocalNodePage = () => { - +
    -
    - -
    - -
    - - - - - - - - Device Avatar - - - - - - Highlight Color - - {/* */} - - - -
    -
    - - - Settings - - + + + + + + + + + Device Avatar + + + + + + Highlight Color + + {/* */} + + + + + + Settings + { -
    + }>Continue
    From f1b8d76841d9b280f82a21e31fe03223f675a33a Mon Sep 17 00:00:00 2001 From: Ivana Andersson <48491521+IvanaAndersson@users.noreply.github.com> Date: Wed, 16 Aug 2023 16:11:08 +0300 Subject: [PATCH 09/32] Rename breadcrumbbar.css to BreadcrumbBar.css --- .../BreadcrumbBar/{breadcrumbbar.css => BreadcrumbBar.css} | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename src/components/General/BreadcrumbBar/{breadcrumbbar.css => BreadcrumbBar.css} (99%) diff --git a/src/components/General/BreadcrumbBar/breadcrumbbar.css b/src/components/General/BreadcrumbBar/BreadcrumbBar.css similarity index 99% rename from src/components/General/BreadcrumbBar/breadcrumbbar.css rename to src/components/General/BreadcrumbBar/BreadcrumbBar.css index 43e0479e..e4dbdae6 100644 --- a/src/components/General/BreadcrumbBar/breadcrumbbar.css +++ b/src/components/General/BreadcrumbBar/BreadcrumbBar.css @@ -24,4 +24,4 @@ .breadcrumb-bar-li:last-child::after { display: none; -} \ No newline at end of file +} From 443fc23e4118236e45cb1115385f5f0caa171f5f Mon Sep 17 00:00:00 2001 From: Ivana Andersson Date: Wed, 16 Aug 2023 16:23:18 +0300 Subject: [PATCH 10/32] cleanup: some more css and html tags --- src/App.css | 4 + src/components/PageWrappers/layout.css | 110 ++++++++----------------- src/index.css | 4 - src/pages/LandingPage/LandingPage.tsx | 4 +- 4 files changed, 40 insertions(+), 82 deletions(-) diff --git a/src/App.css b/src/App.css index 74f6bd5f..b3825e1a 100644 --- a/src/App.css +++ b/src/App.css @@ -1,6 +1,10 @@ #root { width: 100%; } +.nimbus-logomark{ + width: auto; + height: 30%; +} ul{ list-style-type: none; padding: 0; diff --git a/src/components/PageWrappers/layout.css b/src/components/PageWrappers/layout.css index 1a58f303..45a7c438 100644 --- a/src/components/PageWrappers/layout.css +++ b/src/components/PageWrappers/layout.css @@ -33,84 +33,42 @@ display: flex; flex-direction: column; } -header { - width: 100%; - display: flex; - justify-content: space-between; - padding: 1.5rem 0; -} -.logo-title { - font-size: 27px; - font-weight: 700; - display: flex; - align-items: center; - -} -.logo-title .beta{ - color: #FFF; - font-size: 10px; - font-weight: 600; - border-radius: 66.667px; - background-color: #2A4AF5; - padding: 4px 6px; - margin-left: 10px; -} .content { flex-grow: 1; } -.content .title { - font-size: 27px; - font-weight: 600; - margin-bottom: 0.25em; -} -.content .subtitle { - font-size: 15px; - margin: 0.1em; -} -.content .subtitle span{ - font-weight: 700; -} -.content button { - display: flex; - align-items: center; -} -.content button span { - padding-right: 10px; + +/* LAYOUT RIGHT ELEMENT WITH IMAGE TAKING UP THE WHOLE HIGHT OF THE VIEWPORT */ +.layout-right { + flex: 0 0 45%; + max-width: 45%; + z-index: 0; } - - /* LAYOUT RIGHT ELEMENT WITH IMAGE TAKING UP THE WHOLE HIGHT OF THE VIEWPORT */ - .layout-right { - flex: 0 0 45%; - max-width: 45%; - z-index: 0; - } - - .image-container { - height: 100%; - position: relative; - overflow: hidden; - } - .image-container::before { - display: block; - content: ""; - padding-bottom: 100%; - } - .image-container::after { - display: block; - content: ""; - position: absolute; - top: 0; - left: -1%; - width: 50%; - height: 100%; - background: linear-gradient(to right, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 0.0)); - } - .image-container img { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - height: 140%; - width: auto; - } +.image-container { + height: 100%; + position: relative; + overflow: hidden; +} +.image-container::before { + display: block; + content: ""; + padding-bottom: 100%; +} +.image-container::after { + display: block; + content: ""; + position: absolute; + top: 0; + left: -1%; + width: 50%; + height: 100%; + background: linear-gradient(to right, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 0.0)); +} +.image-container img { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + height: 140%; + width: auto; +} diff --git a/src/index.css b/src/index.css index 226835dc..f1e5f216 100644 --- a/src/index.css +++ b/src/index.css @@ -46,10 +46,6 @@ button:focus, button:focus-visible { outline: 4px auto -webkit-focus-ring-color; } -.nimbus-logomark{ - width: auto; - height: 30%; -} @media (prefers-color-scheme: light) { :root { color: #09101C; diff --git a/src/pages/LandingPage/LandingPage.tsx b/src/pages/LandingPage/LandingPage.tsx index 3292a64a..733fe697 100644 --- a/src/pages/LandingPage/LandingPage.tsx +++ b/src/pages/LandingPage/LandingPage.tsx @@ -12,9 +12,9 @@ function LandingPage() { <>
    -
    + -
    + Date: Wed, 16 Aug 2023 16:38:09 +0300 Subject: [PATCH 11/32] fix: move styles from `App.css` to `index.css` --- src/App.css | 14 -------------- src/index.css | 14 +++++++++++--- 2 files changed, 11 insertions(+), 17 deletions(-) diff --git a/src/App.css b/src/App.css index b3825e1a..29d4f3ac 100644 --- a/src/App.css +++ b/src/App.css @@ -1,17 +1,3 @@ #root { width: 100%; -} -.nimbus-logomark{ - width: auto; - height: 30%; -} -ul{ - list-style-type: none; - padding: 0; - margin: 0; - display: flex; -} -ul li { - padding: 0 1rem; - font-size: 15px; } \ No newline at end of file diff --git a/src/index.css b/src/index.css index f1e5f216..54b88a93 100644 --- a/src/index.css +++ b/src/index.css @@ -13,11 +13,9 @@ -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; } - #storybook-root { - width: 100%; + width: 100%; } - body { margin: 0; display: flex; @@ -46,6 +44,16 @@ button:focus, button:focus-visible { outline: 4px auto -webkit-focus-ring-color; } +ul{ + list-style-type: none; + padding: 0; + margin: 0; + display: flex; +} +ul li { + padding: 0 1rem; + font-size: 15px; +} @media (prefers-color-scheme: light) { :root { color: #09101C; From 442fd2456a82f1aea2b722b65bb2a2cf085caad7 Mon Sep 17 00:00:00 2001 From: Ivana Andersson Date: Wed, 16 Aug 2023 16:38:43 +0300 Subject: [PATCH 12/32] feat: put nimbus logomark styles into its own file --- src/components/Logos/NimbusLogo.css | 5 +++++ src/components/Logos/NimbusLogo.tsx | 1 + 2 files changed, 6 insertions(+) create mode 100644 src/components/Logos/NimbusLogo.css diff --git a/src/components/Logos/NimbusLogo.css b/src/components/Logos/NimbusLogo.css new file mode 100644 index 00000000..52c7136e --- /dev/null +++ b/src/components/Logos/NimbusLogo.css @@ -0,0 +1,5 @@ + +.nimbus-logomark{ + width: auto; + height: 30%; +} \ No newline at end of file diff --git a/src/components/Logos/NimbusLogo.tsx b/src/components/Logos/NimbusLogo.tsx index e955012e..729c7c16 100644 --- a/src/components/Logos/NimbusLogo.tsx +++ b/src/components/Logos/NimbusLogo.tsx @@ -1,5 +1,6 @@ import { XStack } from 'tamagui' import BetaTag from './BetaTag' +import './NimbusLogo.css' const NimbusLogo = () => { return ( From b6a1c40be29d034335985243bc13bbe94909e4f0 Mon Sep 17 00:00:00 2001 From: Ivana Andersson Date: Wed, 16 Aug 2023 16:57:35 +0300 Subject: [PATCH 13/32] feat: add padding on top of the layout container --- src/components/PageWrappers/layout.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/PageWrappers/layout.css b/src/components/PageWrappers/layout.css index 45a7c438..a2911318 100644 --- a/src/components/PageWrappers/layout.css +++ b/src/components/PageWrappers/layout.css @@ -26,6 +26,7 @@ flex-wrap: wrap; justify-content: end; height: 100%; + padding: 70px 0 0; } .container-inner { max-width: 70%; From 897515da6009c978e60c155dd654d5d31ebe4107 Mon Sep 17 00:00:00 2001 From: Ivana Andersson Date: Wed, 16 Aug 2023 17:06:56 +0300 Subject: [PATCH 14/32] feat: add icon button next to the device avatar --- src/components/Icons/ReactionIcon.tsx | 16 ++++++++++++++++ .../CreateLocalNodePage/CreateLocalNodePage.tsx | 9 ++++++--- 2 files changed, 22 insertions(+), 3 deletions(-) create mode 100644 src/components/Icons/ReactionIcon.tsx diff --git a/src/components/Icons/ReactionIcon.tsx b/src/components/Icons/ReactionIcon.tsx new file mode 100644 index 00000000..d13a8622 --- /dev/null +++ b/src/components/Icons/ReactionIcon.tsx @@ -0,0 +1,16 @@ +function ReactionIcon() { + return ( + + + + + + ) +} +export default ReactionIcon diff --git a/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx b/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx index 15177af9..1c5fafc0 100644 --- a/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx +++ b/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx @@ -8,6 +8,7 @@ import NodeIcon from '../../components/Icons/NodeIcon' import PairIcon from '../../components/Icons/PairIcon' import CreateIcon from '../../components/Icons/CreateIcon' import LabelInputField from '../../components/General/LabelInputField' +import ReactionIcon from '../../components/Icons/ReactionIcon' const CreateLocalNodePage = () => { const [autoConnectChecked, setAutoConnectChecked] = useState(false) @@ -36,13 +37,15 @@ const CreateLocalNodePage = () => { Device Avatar - + + + } backgroundColor={'white'} /> + Highlight Color - {/* */} @@ -50,7 +53,7 @@ const CreateLocalNodePage = () => { Settings - + Date: Wed, 16 Aug 2023 17:24:38 +0300 Subject: [PATCH 15/32] feat: add react-color for the color picker component --- package.json | 2 + .../CreateLocalNodePage.tsx | 21 ++++- yarn.lock | 81 ++++++++++++++++++- 3 files changed, 101 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 6e51e07f..62e2efad 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "@types/react-dom": "18", "expo-modules-core": "^1.5.9", "react": "18", + "react-color": "^2.19.3", "react-dom": "18", "react-native": "^0.72.3", "react-native-svg": "^13.10.0", @@ -46,6 +47,7 @@ "@storybook/react-vite": "^7.2.0", "@storybook/test-runner": "^0.12.0", "@storybook/testing-library": "^0.2.0", + "@types/react-color": "^3.0.6", "@typescript-eslint/eslint-plugin": "^6.0.0", "@typescript-eslint/parser": "^6.0.0", "@vitejs/plugin-react": "^4.0.3", diff --git a/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx b/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx index 1c5fafc0..f4774dd0 100644 --- a/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx +++ b/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx @@ -1,6 +1,7 @@ import { useState } from 'react' import { Button as StatusButton, Tag, Text, Avatar, Checkbox } from '@status-im/components' import { Label, Separator, XStack, YStack } from 'tamagui' +import { CirclePicker } from 'react-color' import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow' import NimbusLogo from '../../components/Logos/NimbusLogo' import Titles from '../../components/General/Titles' @@ -33,7 +34,7 @@ const CreateLocalNodePage = () => { - + Device Avatar @@ -46,6 +47,24 @@ const CreateLocalNodePage = () => { Highlight Color + diff --git a/yarn.lock b/yarn.lock index 68528b38..e44d2a5d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2158,6 +2158,15 @@ __metadata: languageName: node linkType: hard +"@icons/material@npm:^0.2.4": + version: 0.2.4 + resolution: "@icons/material@npm:0.2.4" + peerDependencies: + react: "*" + checksum: 24baa360cb83f7e1a9e6784ac11185d57eb895b0efd3070ec915693378330f35ff9feb248f650b9649fa3e1045601286585dc05795a4c734d4849b33900351ee + languageName: node + linkType: hard + "@isaacs/cliui@npm:^8.0.2": version: 8.0.2 resolution: "@isaacs/cliui@npm:8.0.2" @@ -7033,6 +7042,16 @@ __metadata: languageName: node linkType: hard +"@types/react-color@npm:^3.0.6": + version: 3.0.6 + resolution: "@types/react-color@npm:3.0.6" + dependencies: + "@types/react": "*" + "@types/reactcss": "*" + checksum: 8cd881d6eb725190be942c1d71f7917d3dd1b418417740f64fa6c03ae3ba16cb91d07c4b3b348cf5bae20071c8ca5d4aaf514c9a5318077d5e50bd782a5e8da2 + languageName: node + linkType: hard + "@types/react-dom@npm:18": version: 18.2.7 resolution: "@types/react-dom@npm:18.2.7" @@ -7062,6 +7081,15 @@ __metadata: languageName: node linkType: hard +"@types/reactcss@npm:*": + version: 1.2.6 + resolution: "@types/reactcss@npm:1.2.6" + dependencies: + "@types/react": "*" + checksum: f4711d707a1af653178c8941080e989a945feb0c529d848fed36687ee5e8a462cda183383caadf8848497b5c03bec16e6cdf22fc70462913d8d706cabb597130 + languageName: node + linkType: hard + "@types/resolve@npm:1.20.2": version: 1.20.2 resolution: "@types/resolve@npm:1.20.2" @@ -12820,6 +12848,13 @@ __metadata: languageName: node linkType: hard +"lodash-es@npm:^4.17.15": + version: 4.17.21 + resolution: "lodash-es@npm:4.17.21" + checksum: 05cbffad6e2adbb331a4e16fbd826e7faee403a1a04873b82b42c0f22090f280839f85b95393f487c1303c8a3d2a010048bf06151a6cbe03eee4d388fb0a12d2 + languageName: node + linkType: hard + "lodash.debounce@npm:^4.0.8": version: 4.0.8 resolution: "lodash.debounce@npm:4.0.8" @@ -12848,7 +12883,7 @@ __metadata: languageName: node linkType: hard -"lodash@npm:^4.17.15, lodash@npm:^4.17.21": +"lodash@npm:^4.0.1, lodash@npm:^4.17.15, lodash@npm:^4.17.21": version: 4.17.21 resolution: "lodash@npm:4.17.21" checksum: eb835a2e51d381e561e508ce932ea50a8e5a68f4ebdd771ea240d3048244a8d13658acbd502cd4829768c56f2e16bdd4340b9ea141297d472517b83868e677f7 @@ -13024,6 +13059,13 @@ __metadata: languageName: node linkType: hard +"material-colors@npm:^1.2.1": + version: 1.2.6 + resolution: "material-colors@npm:1.2.6" + checksum: 72d005ccccb82bab68eef3cd757e802668634fc86976dedb9fc564ce994f2d3258273766b7efecb7404a0031969e2d72201a1b74169763f0a53c0dd8d649209f + languageName: node + linkType: hard + "mdast-util-definitions@npm:^4.0.0": version: 4.0.0 resolution: "mdast-util-definitions@npm:4.0.0" @@ -13717,6 +13759,7 @@ __metadata: "@tamagui/react-17-patch": 1.36.4 "@tamagui/vite-plugin": 1.36.4 "@types/react": 18 + "@types/react-color": ^3.0.6 "@types/react-dom": 18 "@typescript-eslint/eslint-plugin": ^6.0.0 "@typescript-eslint/parser": ^6.0.0 @@ -13728,6 +13771,7 @@ __metadata: expo-modules-core: ^1.5.9 prettier: ^3.0.1 react: 18 + react-color: ^2.19.3 react-dom: 18 react-native: ^0.72.3 react-native-svg: ^13.10.0 @@ -14585,7 +14629,7 @@ __metadata: languageName: node linkType: hard -"prop-types@npm:*, prop-types@npm:^15.7.2": +"prop-types@npm:*, prop-types@npm:^15.5.10, prop-types@npm:^15.7.2": version: 15.8.1 resolution: "prop-types@npm:15.8.1" dependencies: @@ -14729,6 +14773,23 @@ __metadata: languageName: node linkType: hard +"react-color@npm:^2.19.3": + version: 2.19.3 + resolution: "react-color@npm:2.19.3" + dependencies: + "@icons/material": ^0.2.4 + lodash: ^4.17.15 + lodash-es: ^4.17.15 + material-colors: ^1.2.1 + prop-types: ^15.5.10 + reactcss: ^1.2.0 + tinycolor2: ^1.4.1 + peerDependencies: + react: "*" + checksum: 40b49e1aa2ab27a099cc37a3fa2d5bb906b8def4dbe2d922c0e42365e386d82b03f9b06a2b29a44a51f1e114cef72e61c0ba0740581a128d951936ea4617429b + languageName: node + linkType: hard + "react-colorful@npm:^5.1.2": version: 5.6.1 resolution: "react-colorful@npm:5.6.1" @@ -15109,6 +15170,15 @@ __metadata: languageName: node linkType: hard +"reactcss@npm:^1.2.0": + version: 1.2.3 + resolution: "reactcss@npm:1.2.3" + dependencies: + lodash: ^4.0.1 + checksum: c53e386a0881f1477e1cff661f6a6ad4c662230941f3827862193ac30f9b75cdf7bc7b4c7e5ca543d3e4e80fee1a3e9fa0056c206b1c0423726c41773ab3fe45 + languageName: node + linkType: hard + "read-pkg-up@npm:^7.0.1": version: 7.0.1 resolution: "read-pkg-up@npm:7.0.1" @@ -16391,6 +16461,13 @@ __metadata: languageName: node linkType: hard +"tinycolor2@npm:^1.4.1": + version: 1.6.0 + resolution: "tinycolor2@npm:1.6.0" + checksum: 6df4d07fceeedc0a878d7bac47e2cd47c1ceeb1078340a9eb8a295bc0651e17c750f73d47b3028d829f30b85c15e0572c0fd4142083e4c21a30a597e47f47230 + languageName: node + linkType: hard + "tmpl@npm:1.0.5": version: 1.0.5 resolution: "tmpl@npm:1.0.5" From e9eda5237e462c5f65f7be3a0e44a0d713f71c40 Mon Sep 17 00:00:00 2001 From: Ivana Andersson Date: Wed, 16 Aug 2023 17:37:36 +0300 Subject: [PATCH 16/32] fix: all inputs should have white background --- src/components/General/LabelInputField.css | 4 ++++ src/components/General/LabelInputField.tsx | 5 ++++- 2 files changed, 8 insertions(+), 1 deletion(-) create mode 100644 src/components/General/LabelInputField.css diff --git a/src/components/General/LabelInputField.css b/src/components/General/LabelInputField.css new file mode 100644 index 00000000..77559ac7 --- /dev/null +++ b/src/components/General/LabelInputField.css @@ -0,0 +1,4 @@ +.input-container { + background-color: #fff; + border-radius: 12px; +} \ No newline at end of file diff --git a/src/components/General/LabelInputField.tsx b/src/components/General/LabelInputField.tsx index 298fabee..fb71d95e 100644 --- a/src/components/General/LabelInputField.tsx +++ b/src/components/General/LabelInputField.tsx @@ -1,5 +1,6 @@ import { Input as StatusInput, Text } from '@status-im/components' import { Label } from 'tamagui' +import './LabelInputField.css' type LabelInputProps = { labelText: string @@ -12,7 +13,9 @@ function LabelInputField({ labelText, placeholderText }: LabelInputProps) { {labelText} - +
    + +
    ) } From 10bee2f66acfb16bf81ce8ffa91d91fd029bcaab Mon Sep 17 00:00:00 2001 From: Ivana Andersson Date: Wed, 16 Aug 2023 18:01:53 +0300 Subject: [PATCH 17/32] fix: svg rules changed to match jsx --- src/components/Icons/ReactionIcon.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Icons/ReactionIcon.tsx b/src/components/Icons/ReactionIcon.tsx index d13a8622..74a71de2 100644 --- a/src/components/Icons/ReactionIcon.tsx +++ b/src/components/Icons/ReactionIcon.tsx @@ -4,8 +4,8 @@ function ReactionIcon() { From a3b128053a3da4b7e7fda385a363dfc2648516f8 Mon Sep 17 00:00:00 2001 From: Ivana Andersson Date: Wed, 16 Aug 2023 18:25:43 +0300 Subject: [PATCH 18/32] feat: add setting color functionality --- src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx b/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx index f4774dd0..b7818708 100644 --- a/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx +++ b/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx @@ -13,6 +13,7 @@ import ReactionIcon from '../../components/Icons/ReactionIcon' const CreateLocalNodePage = () => { const [autoConnectChecked, setAutoConnectChecked] = useState(false) + const [chosenColor, setChosenColor] = useState('#FFFFFF') return ( @@ -64,6 +65,8 @@ const CreateLocalNodePage = () => { '#C78F67', '#CB6256', ]} + color={chosenColor} + onChange={color => setChosenColor(color.hex)} />     From bcba97a1997a2decfe0e35fc1cf7008b4d735e04 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Thu, 17 Aug 2023 11:29:45 +0300 Subject: [PATCH 19/32] Create redux folder --- package.json | 2 + src/redux/store.tsx | 12 ++++ yarn.lock | 130 +++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 143 insertions(+), 1 deletion(-) create mode 100644 src/redux/store.tsx diff --git a/package.json b/package.json index 6e51e07f..e7138bd8 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "dependencies": { "@nivo/line": "^0.83.0", "@nivo/pie": "^0.83.0", + "@reduxjs/toolkit": "^1.9.5", "@status-im/colors": "*", "@status-im/components": "^0.2.6", "@tamagui/config": "1.36.4", @@ -31,6 +32,7 @@ "react-dom": "18", "react-native": "^0.72.3", "react-native-svg": "^13.10.0", + "react-redux": "^8.1.2", "react-router-dom": "^6.14.2", "tamagui": "1.36.4" }, diff --git a/src/redux/store.tsx b/src/redux/store.tsx new file mode 100644 index 00000000..7ad16676 --- /dev/null +++ b/src/redux/store.tsx @@ -0,0 +1,12 @@ +import { configureStore } from '@reduxjs/toolkit' +import deviceHealthReducer from './deviceHealthCheck/slice' + +const store = configureStore({ + reducer: { + deviceHealth: deviceHealthReducer, + }, +}) + +export type RootState = ReturnType +export type AppDispatch = typeof store.dispatch +export default store diff --git a/yarn.lock b/yarn.lock index 68528b38..22b8040f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1590,6 +1590,15 @@ __metadata: languageName: node linkType: hard +"@babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.9.2": + version: 7.22.10 + resolution: "@babel/runtime@npm:7.22.10" + dependencies: + regenerator-runtime: ^0.14.0 + checksum: 524d41517e68953dbc73a4f3616b8475e5813f64e28ba89ff5fca2c044d535c2ea1a3f310df1e5bb06162e1f0b401b5c4af73fe6e2519ca2450d9d8c44cf268d + languageName: node + linkType: hard + "@babel/template@npm:^7.0.0, @babel/template@npm:^7.22.5, @babel/template@npm:^7.3.3": version: 7.22.5 resolution: "@babel/template@npm:7.22.5" @@ -4050,6 +4059,26 @@ __metadata: languageName: node linkType: hard +"@reduxjs/toolkit@npm:^1.9.5": + version: 1.9.5 + resolution: "@reduxjs/toolkit@npm:1.9.5" + dependencies: + immer: ^9.0.21 + redux: ^4.2.1 + redux-thunk: ^2.4.2 + reselect: ^4.1.8 + peerDependencies: + react: ^16.9.0 || ^17.0.0 || ^18 + react-redux: ^7.2.1 || ^8.0.2 + peerDependenciesMeta: + react: + optional: true + react-redux: + optional: true + checksum: 54672c5593d05208af577e948a338f23128d3aa01ef056ab0d40bcfa14400cf6566be99e11715388f12c1d7655cdf7c5c6b63cb92eb0fecf996c454a46a3914c + languageName: node + linkType: hard + "@remix-run/router@npm:1.7.2": version: 1.7.2 resolution: "@remix-run/router@npm:1.7.2" @@ -6886,6 +6915,16 @@ __metadata: languageName: node linkType: hard +"@types/hoist-non-react-statics@npm:^3.3.1": + version: 3.3.1 + resolution: "@types/hoist-non-react-statics@npm:3.3.1" + dependencies: + "@types/react": "*" + hoist-non-react-statics: ^3.3.0 + checksum: 2c0778570d9a01d05afabc781b32163f28409bb98f7245c38d5eaf082416fdb73034003f5825eb5e21313044e8d2d9e1f3fe2831e345d3d1b1d20bcd12270719 + languageName: node + linkType: hard + "@types/http-errors@npm:*": version: 2.0.1 resolution: "@types/http-errors@npm:2.0.1" @@ -7118,6 +7157,13 @@ __metadata: languageName: node linkType: hard +"@types/use-sync-external-store@npm:^0.0.3": + version: 0.0.3 + resolution: "@types/use-sync-external-store@npm:0.0.3" + checksum: 161ddb8eec5dbe7279ac971531217e9af6b99f7783213566d2b502e2e2378ea19cf5e5ea4595039d730aa79d3d35c6567d48599f69773a02ffcff1776ec2a44e + languageName: node + linkType: hard + "@types/wait-on@npm:^5.2.0": version: 5.3.1 resolution: "@types/wait-on@npm:5.3.1" @@ -11059,6 +11105,15 @@ __metadata: languageName: node linkType: hard +"hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.2": + version: 3.3.2 + resolution: "hoist-non-react-statics@npm:3.3.2" + dependencies: + react-is: ^16.7.0 + checksum: b1538270429b13901ee586aa44f4cc3ecd8831c061d06cb8322e50ea17b3f5ce4d0e2e66394761e6c8e152cd8c34fb3b4b690116c6ce2bd45b18c746516cb9e8 + languageName: node + linkType: hard + "homedir-polyfill@npm:^1.0.0": version: 1.0.3 resolution: "homedir-polyfill@npm:1.0.3" @@ -11220,6 +11275,13 @@ __metadata: languageName: node linkType: hard +"immer@npm:^9.0.21": + version: 9.0.21 + resolution: "immer@npm:9.0.21" + checksum: 70e3c274165995352f6936695f0ef4723c52c92c92dd0e9afdfe008175af39fa28e76aafb3a2ca9d57d1fb8f796efc4dd1e1cc36f18d33fa5b74f3dfb0375432 + languageName: node + linkType: hard + "import-fresh@npm:^2.0.0": version: 2.0.0 resolution: "import-fresh@npm:2.0.0" @@ -13701,6 +13763,7 @@ __metadata: "@fsouza/prettierd": ^0.24.2 "@nivo/line": ^0.83.0 "@nivo/pie": ^0.83.0 + "@reduxjs/toolkit": ^1.9.5 "@status-im/colors": "*" "@status-im/components": ^0.2.6 "@storybook/addon-essentials": ^7.2.0 @@ -13731,6 +13794,7 @@ __metadata: react-dom: 18 react-native: ^0.72.3 react-native-svg: ^13.10.0 + react-redux: ^8.1.2 react-router-dom: ^6.14.2 storybook: ^7.2.0 tamagui: 1.36.4 @@ -14848,7 +14912,7 @@ __metadata: languageName: node linkType: hard -"react-is@npm:^16.13.1": +"react-is@npm:^16.13.1, react-is@npm:^16.7.0": version: 16.13.1 resolution: "react-is@npm:16.13.1" checksum: f7a19ac3496de32ca9ae12aa030f00f14a3d45374f1ceca0af707c831b2a6098ef0d6bdae51bd437b0a306d7f01d4677fcc8de7c0d331eb47ad0f46130e53c5f @@ -14979,6 +15043,38 @@ __metadata: languageName: node linkType: hard +"react-redux@npm:^8.1.2": + version: 8.1.2 + resolution: "react-redux@npm:8.1.2" + dependencies: + "@babel/runtime": ^7.12.1 + "@types/hoist-non-react-statics": ^3.3.1 + "@types/use-sync-external-store": ^0.0.3 + hoist-non-react-statics: ^3.3.2 + react-is: ^18.0.0 + use-sync-external-store: ^1.0.0 + peerDependencies: + "@types/react": ^16.8 || ^17.0 || ^18.0 + "@types/react-dom": ^16.8 || ^17.0 || ^18.0 + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + react-native: ">=0.59" + redux: ^4 || ^5.0.0-beta.0 + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + react-dom: + optional: true + react-native: + optional: true + redux: + optional: true + checksum: 4d5976b0f721e4148475871fcabce2fee875cc7f70f9a292f3370d63b38aa1dd474eb303c073c5555f3e69fc732f3bac05303def60304775deb28361e3f4b7cc + languageName: node + linkType: hard + "react-refresh@npm:^0.14.0": version: 0.14.0 resolution: "react-refresh@npm:0.14.0" @@ -15199,6 +15295,24 @@ __metadata: languageName: node linkType: hard +"redux-thunk@npm:^2.4.2": + version: 2.4.2 + resolution: "redux-thunk@npm:2.4.2" + peerDependencies: + redux: ^4 + checksum: c7f757f6c383b8ec26152c113e20087818d18ed3edf438aaad43539e9a6b77b427ade755c9595c4a163b6ad3063adf3497e5fe6a36c68884eb1f1cfb6f049a5c + languageName: node + linkType: hard + +"redux@npm:^4.2.1": + version: 4.2.1 + resolution: "redux@npm:4.2.1" + dependencies: + "@babel/runtime": ^7.9.2 + checksum: f63b9060c3a1d930ae775252bb6e579b42415aee7a23c4114e21a0b4ba7ec12f0ec76936c00f546893f06e139819f0e2855e0d55ebfce34ca9c026241a6950dd + languageName: node + linkType: hard + "reforest@npm:^0.12.1": version: 0.12.3 resolution: "reforest@npm:0.12.3" @@ -15234,6 +15348,13 @@ __metadata: languageName: node linkType: hard +"regenerator-runtime@npm:^0.14.0": + version: 0.14.0 + resolution: "regenerator-runtime@npm:0.14.0" + checksum: 1c977ad82a82a4412e4f639d65d22be376d3ebdd30da2c003eeafdaaacd03fc00c2320f18120007ee700900979284fc78a9f00da7fb593f6e6eeebc673fba9a3 + languageName: node + linkType: hard + "regenerator-transform@npm:^0.15.1": version: 0.15.2 resolution: "regenerator-transform@npm:0.15.2" @@ -15333,6 +15454,13 @@ __metadata: languageName: node linkType: hard +"reselect@npm:^4.1.8": + version: 4.1.8 + resolution: "reselect@npm:4.1.8" + checksum: a4ac87cedab198769a29be92bc221c32da76cfdad6911eda67b4d3e7136dca86208c3b210e31632eae31ebd2cded18596f0dd230d3ccc9e978df22f233b5583e + languageName: node + linkType: hard + "resolve-cwd@npm:^3.0.0": version: 3.0.0 resolution: "resolve-cwd@npm:3.0.0" From fb21d8d49970aa2cb5b5c224fa26b4377a4a79b1 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Thu, 17 Aug 2023 11:30:00 +0300 Subject: [PATCH 20/32] Add DeviceHealthState into redux --- src/redux/deviceHealthCheck/slice.tsx | 76 +++++++++++++++++++++++++++ 1 file changed, 76 insertions(+) create mode 100644 src/redux/deviceHealthCheck/slice.tsx diff --git a/src/redux/deviceHealthCheck/slice.tsx b/src/redux/deviceHealthCheck/slice.tsx new file mode 100644 index 00000000..3603a840 --- /dev/null +++ b/src/redux/deviceHealthCheck/slice.tsx @@ -0,0 +1,76 @@ +import { createSlice, PayloadAction } from '@reduxjs/toolkit'; + +interface DeviceHealthState { + storage: number; + maxStorage: number; + cpuLoad: number[]; + memory: number[]; + maxMemory: number; + uploadRate: number[]; + downloadRate: number[]; + usedStorage: number; + maxRamMemory: number; + usedRamMemory: number; + cpuClockRate: number; + networkLatency: number; +} + +const initialState: DeviceHealthState = { + storage: 0, + maxStorage: 0, + cpuLoad: [], + memory: [], + maxMemory: 0, + uploadRate: [], + downloadRate: [], + usedStorage: 0, + maxRamMemory: 0, + usedRamMemory: 0, + cpuClockRate: 0, + networkLatency: 0, +}; + +const deviceHealthSlice = createSlice({ + name: 'deviceHealth', + initialState, + reducers: { + setStorage: (state, action: PayloadAction<{ storage: number; maxStorage: number }>) => { + state.storage = action.payload.storage; + state.maxStorage = action.payload.maxStorage; + }, + setCpuLoad: (state, action: PayloadAction) => { + state.cpuLoad = action.payload; + }, + setMemory: (state, action: PayloadAction<{ memory: number[]; maxMemory: number }>) => { + state.memory = action.payload.memory; + state.maxMemory = action.payload.maxMemory; + }, + setNetworkHealth: (state, action: PayloadAction<{ uploadRate: number[]; downloadRate: number[] }>) => { + state.uploadRate = action.payload.uploadRate; + state.downloadRate = action.payload.downloadRate; + }, + setHealthInfo: (state, action: PayloadAction<{ + usedStorage: number; + maxRamMemory: number; + usedRamMemory: number; + cpuClockRate: number; + networkLatency: number; + }>) => { + state.usedStorage = action.payload.usedStorage; + state.maxRamMemory = action.payload.maxRamMemory; + state.usedRamMemory = action.payload.usedRamMemory; + state.cpuClockRate = action.payload.cpuClockRate; + state.networkLatency = action.payload.networkLatency; + }, + } +}); + +export const { + setStorage, + setCpuLoad, + setMemory, + setNetworkHealth, + setHealthInfo +} = deviceHealthSlice.actions; + +export default deviceHealthSlice.reducer; From ec90dfb13aa9b811f4bec52bf5df6f9a739711d5 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Thu, 17 Aug 2023 12:01:11 +0300 Subject: [PATCH 21/32] Implement redux in device health check --- src/App.tsx | 13 +-- .../DeviceHealthCheck/DeviceHealthCheck.tsx | 22 ++++- src/redux/deviceHealthCheck/slice.tsx | 89 +++++++------------ 3 files changed, 58 insertions(+), 66 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 10f7de4d..ccba5342 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -7,6 +7,8 @@ import LandingPage from './pages/LandingPage/LandingPage' import DeviceHealthCheck from './pages/DeviceHealthCheck/DeviceHealthCheck' import ConnectDevicePage from './pages/ConnectDevicePage/ConnectDevicePage' import DeviceSyncStatus from './pages/DeviceSyncStatus/DeviceSyncStatus' +import { Provider as ReduxProvider } from 'react-redux' +import store from './redux/store' const router = createBrowserRouter([ { @@ -20,20 +22,21 @@ const router = createBrowserRouter([ { path: '/connect-device', element: , - }, { path: '/device-sync-status', element: , - } + }, ]) function App() { return ( - - - + + + + + ) } diff --git a/src/pages/DeviceHealthCheck/DeviceHealthCheck.tsx b/src/pages/DeviceHealthCheck/DeviceHealthCheck.tsx index 4bb9d649..2f0bcd13 100644 --- a/src/pages/DeviceHealthCheck/DeviceHealthCheck.tsx +++ b/src/pages/DeviceHealthCheck/DeviceHealthCheck.tsx @@ -9,8 +9,13 @@ import { Button, InformationBox } from '@status-im/components' import Icon from '../../components/General/Icon' import DeviceMemory from '../../components/Charts/DeviceMemoryHealth' import DeviceNetworkHealth from '../../components/Charts/DeviceNetworkHealth' +import { useSelector } from 'react-redux' +import { RootState } from '../../redux/store' const DeviceHealthCheck = () => { + // Extract state from Redux store + const deviceHealthState = useSelector((state: RootState) => state.deviceHealth) + console.log(deviceHealthState) return ( { isAdvancedSettings={true} /> - - + + - - + + ) => { - state.storage = action.payload.storage; - state.maxStorage = action.payload.maxStorage; + state.storage = action.payload.storage + state.maxStorage = action.payload.maxStorage }, setCpuLoad: (state, action: PayloadAction) => { - state.cpuLoad = action.payload; + state.cpuLoad = action.payload }, setMemory: (state, action: PayloadAction<{ memory: number[]; maxMemory: number }>) => { - state.memory = action.payload.memory; - state.maxMemory = action.payload.maxMemory; + state.memory = action.payload.memory + state.maxMemory = action.payload.maxMemory }, - setNetworkHealth: (state, action: PayloadAction<{ uploadRate: number[]; downloadRate: number[] }>) => { - state.uploadRate = action.payload.uploadRate; - state.downloadRate = action.payload.downloadRate; + setNetworkHealth: ( + state, + action: PayloadAction<{ uploadRate: number[]; downloadRate: number[] }>, + ) => { + state.uploadRate = action.payload.uploadRate + state.downloadRate = action.payload.downloadRate }, - setHealthInfo: (state, action: PayloadAction<{ - usedStorage: number; - maxRamMemory: number; - usedRamMemory: number; - cpuClockRate: number; - networkLatency: number; - }>) => { - state.usedStorage = action.payload.usedStorage; - state.maxRamMemory = action.payload.maxRamMemory; - state.usedRamMemory = action.payload.usedRamMemory; - state.cpuClockRate = action.payload.cpuClockRate; - state.networkLatency = action.payload.networkLatency; - }, - } -}); + }, +}) -export const { - setStorage, - setCpuLoad, - setMemory, - setNetworkHealth, - setHealthInfo -} = deviceHealthSlice.actions; +export const { setStorage, setCpuLoad, setMemory, setNetworkHealth} = + deviceHealthSlice.actions -export default deviceHealthSlice.reducer; +export default deviceHealthSlice.reducer From 02b043167be045a8aeb6260e3690ad2ac19d5567 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Thu, 17 Aug 2023 13:06:27 +0300 Subject: [PATCH 22/32] Fix: Make storybook work with redux --- src/App.tsx | 8 ++++---- .../DeviceHealthCheck.stories.tsx | 18 ++++++++++++++---- 2 files changed, 18 insertions(+), 8 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index ccba5342..8eb8b977 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -31,13 +31,13 @@ const router = createBrowserRouter([ function App() { return ( - - + + - - + + ) } diff --git a/src/pages/DeviceHealthCheck/DeviceHealthCheck.stories.tsx b/src/pages/DeviceHealthCheck/DeviceHealthCheck.stories.tsx index 30828e76..c1bb862f 100644 --- a/src/pages/DeviceHealthCheck/DeviceHealthCheck.stories.tsx +++ b/src/pages/DeviceHealthCheck/DeviceHealthCheck.stories.tsx @@ -1,16 +1,26 @@ import type { Meta, StoryObj } from '@storybook/react' +import { Provider as ReduxProvider } from 'react-redux' +import store from '../../redux/store' // Adjust` the path to your store accordingly import DeviceHealthCheck from './DeviceHealthCheck' -const meta = { +const meta: Meta = { title: 'Pages/DeviceHealthCheck', component: DeviceHealthCheck, + decorators: [ + StoryObj => ( + + + + ), + ], tags: ['autodocs'], -} satisfies Meta +} export default meta -type Story = StoryObj -export const Page: Story = { +type DeviceHealthCheckStory = StoryObj + +export const Page: DeviceHealthCheckStory = { args: {}, } From faad444ed43a463353dcb7b048c2f6b8b3c4bf7e Mon Sep 17 00:00:00 2001 From: Ivana Andersson Date: Fri, 18 Aug 2023 11:25:20 +0300 Subject: [PATCH 23/32] feat: create separate color picker component --- src/components/General/ColorPicker.tsx | 33 +++++++++++++++++++ .../CreateLocalNodePage.tsx | 24 ++------------ 2 files changed, 35 insertions(+), 22 deletions(-) create mode 100644 src/components/General/ColorPicker.tsx diff --git a/src/components/General/ColorPicker.tsx b/src/components/General/ColorPicker.tsx new file mode 100644 index 00000000..80d5afed --- /dev/null +++ b/src/components/General/ColorPicker.tsx @@ -0,0 +1,33 @@ +import { useState } from 'react' +import { CirclePicker } from 'react-color' +import { XStack } from 'tamagui' + +const ColorPicker = () => { + const [chosenColor, setChosenColor] = useState('#FFFFFF') + return ( + + setChosenColor(color.hex)} + /> + + ) +} + +export default ColorPicker diff --git a/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx b/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx index b7818708..4c658f43 100644 --- a/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx +++ b/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx @@ -1,7 +1,6 @@ import { useState } from 'react' import { Button as StatusButton, Tag, Text, Avatar, Checkbox } from '@status-im/components' import { Label, Separator, XStack, YStack } from 'tamagui' -import { CirclePicker } from 'react-color' import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow' import NimbusLogo from '../../components/Logos/NimbusLogo' import Titles from '../../components/General/Titles' @@ -10,10 +9,10 @@ import PairIcon from '../../components/Icons/PairIcon' import CreateIcon from '../../components/Icons/CreateIcon' import LabelInputField from '../../components/General/LabelInputField' import ReactionIcon from '../../components/Icons/ReactionIcon' +import ColorPicker from '../../components/General/ColorPicker' const CreateLocalNodePage = () => { const [autoConnectChecked, setAutoConnectChecked] = useState(false) - const [chosenColor, setChosenColor] = useState('#FFFFFF') return ( @@ -48,26 +47,7 @@ const CreateLocalNodePage = () => { Highlight Color - setChosenColor(color.hex)} - /> + From 4c622e51ab62e163a5186851f212487bd2c6123b Mon Sep 17 00:00:00 2001 From: Ivana Andersson Date: Fri, 18 Aug 2023 11:27:18 +0300 Subject: [PATCH 24/32] fix: add some white space between label and component --- src/components/General/LabelInputField.css | 1 + src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/General/LabelInputField.css b/src/components/General/LabelInputField.css index 77559ac7..d5d2343a 100644 --- a/src/components/General/LabelInputField.css +++ b/src/components/General/LabelInputField.css @@ -1,4 +1,5 @@ .input-container { background-color: #fff; border-radius: 12px; + margin-top: 8px; } \ No newline at end of file diff --git a/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx b/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx index 4c658f43..38d4054d 100644 --- a/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx +++ b/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx @@ -38,7 +38,7 @@ const CreateLocalNodePage = () => { Device Avatar - + } backgroundColor={'white'} /> From 634710b0b19f7209ba96ee728faa3468ed3d145a Mon Sep 17 00:00:00 2001 From: Ivana Andersson Date: Fri, 18 Aug 2023 11:31:41 +0300 Subject: [PATCH 25/32] feat: add color picker story --- .../General/ColorPicker.stories.tsx | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 src/components/General/ColorPicker.stories.tsx diff --git a/src/components/General/ColorPicker.stories.tsx b/src/components/General/ColorPicker.stories.tsx new file mode 100644 index 00000000..371a3309 --- /dev/null +++ b/src/components/General/ColorPicker.stories.tsx @@ -0,0 +1,19 @@ +import type { Meta, StoryObj } from '@storybook/react' + +import ColorPicker from './ColorPicker' + +const meta = { + title: 'General/ColorPicker', + component: ColorPicker, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], +} satisfies Meta + +export default meta +type Story = StoryObj + +export const DefaultColors: Story = { + args: {}, +} From b239139b017c7e260ac9e75baa57f573c9e6568f Mon Sep 17 00:00:00 2001 From: Ivana Andersson Date: Fri, 18 Aug 2023 12:17:07 +0300 Subject: [PATCH 26/32] fix: input field takes up whole width --- src/components/General/LabelInputField.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/General/LabelInputField.css b/src/components/General/LabelInputField.css index d5d2343a..a1859b9a 100644 --- a/src/components/General/LabelInputField.css +++ b/src/components/General/LabelInputField.css @@ -2,4 +2,5 @@ background-color: #fff; border-radius: 12px; margin-top: 8px; + width: 100%; } \ No newline at end of file From d4b3fff1704b59b53be8bf22caf15f738fa6eac2 Mon Sep 17 00:00:00 2001 From: Ivana Andersson Date: Fri, 18 Aug 2023 12:24:20 +0300 Subject: [PATCH 27/32] feat: create TagContainer component for header --- src/components/General/TagContainer.css | 4 ++++ src/components/General/TagContainer.tsx | 15 +++++++++++++++ .../CreateLocalNodePage/CreateLocalNodePage.tsx | 8 ++------ 3 files changed, 21 insertions(+), 6 deletions(-) create mode 100644 src/components/General/TagContainer.css create mode 100644 src/components/General/TagContainer.tsx diff --git a/src/components/General/TagContainer.css b/src/components/General/TagContainer.css new file mode 100644 index 00000000..d02ec351 --- /dev/null +++ b/src/components/General/TagContainer.css @@ -0,0 +1,4 @@ + +.tag-container div:nth-child(1) { + background:transparent; + } \ No newline at end of file diff --git a/src/components/General/TagContainer.tsx b/src/components/General/TagContainer.tsx new file mode 100644 index 00000000..4f6d117c --- /dev/null +++ b/src/components/General/TagContainer.tsx @@ -0,0 +1,15 @@ +import { Tag } from '@status-im/components' +import { XStack } from 'tamagui' +import PairIcon from '../Icons/PairIcon' +import CreateIcon from '../Icons/CreateIcon' + +const TagContainer = () => { + return ( + + + + + ) +} + +export default TagContainer diff --git a/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx b/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx index 38d4054d..d0809acc 100644 --- a/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx +++ b/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx @@ -3,10 +3,9 @@ import { Button as StatusButton, Tag, Text, Avatar, Checkbox } from '@status-im/ import { Label, Separator, XStack, YStack } from 'tamagui' import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow' import NimbusLogo from '../../components/Logos/NimbusLogo' +import TagContainer from '../../components/General/TagContainer' import Titles from '../../components/General/Titles' import NodeIcon from '../../components/Icons/NodeIcon' -import PairIcon from '../../components/Icons/PairIcon' -import CreateIcon from '../../components/Icons/CreateIcon' import LabelInputField from '../../components/General/LabelInputField' import ReactionIcon from '../../components/Icons/ReactionIcon' import ColorPicker from '../../components/General/ColorPicker' @@ -19,10 +18,7 @@ const CreateLocalNodePage = () => {
    - - - - +
    Date: Fri, 18 Aug 2023 12:34:15 +0300 Subject: [PATCH 28/32] import css for tag container --- src/components/General/TagContainer.tsx | 1 + src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/General/TagContainer.tsx b/src/components/General/TagContainer.tsx index 4f6d117c..42dbfd0d 100644 --- a/src/components/General/TagContainer.tsx +++ b/src/components/General/TagContainer.tsx @@ -2,6 +2,7 @@ import { Tag } from '@status-im/components' import { XStack } from 'tamagui' import PairIcon from '../Icons/PairIcon' import CreateIcon from '../Icons/CreateIcon' +import './TagContainer.css' const TagContainer = () => { return ( diff --git a/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx b/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx index d0809acc..dcc4b61f 100644 --- a/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx +++ b/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx @@ -1,5 +1,5 @@ import { useState } from 'react' -import { Button as StatusButton, Tag, Text, Avatar, Checkbox } from '@status-im/components' +import { Button as StatusButton, Text, Avatar, Checkbox } from '@status-im/components' import { Label, Separator, XStack, YStack } from 'tamagui' import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow' import NimbusLogo from '../../components/Logos/NimbusLogo' From 61e33a9f08b6de7cb6c3ea9d4662062568a31338 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Fri, 18 Aug 2023 13:31:19 +0300 Subject: [PATCH 29/32] Fix: warning --- src/redux/deviceHealthCheck/slice.tsx | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/src/redux/deviceHealthCheck/slice.tsx b/src/redux/deviceHealthCheck/slice.tsx index 6808ab05..53e60cc0 100644 --- a/src/redux/deviceHealthCheck/slice.tsx +++ b/src/redux/deviceHealthCheck/slice.tsx @@ -24,19 +24,25 @@ const deviceHealthSlice = createSlice({ name: 'deviceHealth', initialState, reducers: { - setStorage: (state, action: PayloadAction<{ storage: number; maxStorage: number }>) => { + setStorage: ( + state: DeviceHealthState, + action: PayloadAction<{ storage: number; maxStorage: number }>, + ) => { state.storage = action.payload.storage state.maxStorage = action.payload.maxStorage }, - setCpuLoad: (state, action: PayloadAction) => { + setCpuLoad: (state: DeviceHealthState, action: PayloadAction) => { state.cpuLoad = action.payload }, - setMemory: (state, action: PayloadAction<{ memory: number[]; maxMemory: number }>) => { + setMemory: ( + state: DeviceHealthState, + action: PayloadAction<{ memory: number[]; maxMemory: number }>, + ) => { state.memory = action.payload.memory state.maxMemory = action.payload.maxMemory }, setNetworkHealth: ( - state, + state: DeviceHealthState, action: PayloadAction<{ uploadRate: number[]; downloadRate: number[] }>, ) => { state.uploadRate = action.payload.uploadRate @@ -45,7 +51,6 @@ const deviceHealthSlice = createSlice({ }, }) -export const { setStorage, setCpuLoad, setMemory, setNetworkHealth} = - deviceHealthSlice.actions +export const { setStorage, setCpuLoad, setMemory, setNetworkHealth } = deviceHealthSlice.actions export default deviceHealthSlice.reducer From 65ee87e999f541cba4a9e95ff16796b3b91cea01 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Fri, 18 Aug 2023 14:58:26 +0300 Subject: [PATCH 30/32] Add Pinned Message to redux --- src/App.tsx | 3 +- .../General/PinnedNottification.tsx | 26 ++++++++++++++ .../DeviceSyncStatus/DeviceSyncStatus.tsx | 32 ++++++++--------- src/redux/PinnedMessage/slice.tsx | 34 +++++++++++++++++++ src/redux/store.tsx | 2 ++ 5 files changed, 79 insertions(+), 18 deletions(-) create mode 100644 src/components/General/PinnedNottification.tsx create mode 100644 src/redux/PinnedMessage/slice.tsx diff --git a/src/App.tsx b/src/App.tsx index 8eb8b977..3b14deeb 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -8,6 +8,7 @@ import DeviceHealthCheck from './pages/DeviceHealthCheck/DeviceHealthCheck' import ConnectDevicePage from './pages/ConnectDevicePage/ConnectDevicePage' import DeviceSyncStatus from './pages/DeviceSyncStatus/DeviceSyncStatus' import { Provider as ReduxProvider } from 'react-redux' +import PinnedNotification from './components/General/PinnedNottification' import store from './redux/store' const router = createBrowserRouter([ @@ -28,12 +29,12 @@ const router = createBrowserRouter([ element: , }, ]) - function App() { return ( + diff --git a/src/components/General/PinnedNottification.tsx b/src/components/General/PinnedNottification.tsx new file mode 100644 index 00000000..b4146d15 --- /dev/null +++ b/src/components/General/PinnedNottification.tsx @@ -0,0 +1,26 @@ +import { PinnedMessage } from '@status-im/components' +import { useSelector } from 'react-redux' +import { RootState } from '../../redux/store' + +function PinnedNotification() { + const pinnedMessage = useSelector((state: RootState) => state.pinnedMessage.pinnedMessage) + console.log(pinnedMessage) + return ( + <> + {pinnedMessage && pinnedMessage.pinned && ( + + )} + + ) +} + +export default PinnedNotification diff --git a/src/pages/DeviceSyncStatus/DeviceSyncStatus.tsx b/src/pages/DeviceSyncStatus/DeviceSyncStatus.tsx index a9eb56d1..dfffb384 100644 --- a/src/pages/DeviceSyncStatus/DeviceSyncStatus.tsx +++ b/src/pages/DeviceSyncStatus/DeviceSyncStatus.tsx @@ -1,32 +1,30 @@ import { Stack, YStack } from 'tamagui' -import { Button, PinnedMessage } from '@status-im/components' +import { Button } from '@status-im/components' import Titles from '../../components/General/Titles' import NimbusLogo from '../../components/Logos/NimbusLogo' import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow' import SyncStatusCardConsensus from './SyncStatusCardConsensus' import SyncStatusCardExecution from './SyncStatusCardExecution' +import { setPinnedMessage } from '../../redux/PinnedMessage/slice' +import { useDispatch } from 'react-redux' +import { useEffect } from 'react' const DeviceSyncStatus = () => { + const dispatch = useDispatch() + useEffect(() => { + dispatch( + setPinnedMessage({ + id: '123', + text: 'You are currently syncing to the Nimbus Validator Client and Beacon node. This may take a while... Please stay put until you can access the Node Manager.', + pinned: true, + }), + ) + }, [dispatch]) return ( - - - +
    + reply?: boolean + pinned: boolean +} + +interface PinnedMessageState { + pinnedMessage?: PinnedMessage +} + +const initialState: PinnedMessageState = {} + +const pinnedMessageSlice = createSlice({ + name: 'pinnedMessage', + initialState, + reducers: { + setPinnedMessage: (state, action: PayloadAction) => { + state.pinnedMessage = action.payload + }, + clearPinnedMessage: state => { + state.pinnedMessage = undefined + }, + }, +}) + +export const { setPinnedMessage, clearPinnedMessage } = pinnedMessageSlice.actions + +export default pinnedMessageSlice.reducer diff --git a/src/redux/store.tsx b/src/redux/store.tsx index 7ad16676..70d352db 100644 --- a/src/redux/store.tsx +++ b/src/redux/store.tsx @@ -1,9 +1,11 @@ import { configureStore } from '@reduxjs/toolkit' import deviceHealthReducer from './deviceHealthCheck/slice' +import pinnedMessageReducer from './PinnedMessage/slice' const store = configureStore({ reducer: { deviceHealth: deviceHealthReducer, + pinnedMessage: pinnedMessageReducer, }, }) From 68770357fb5236cb50dadbeee463a2bb93eff96a Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Fri, 18 Aug 2023 15:15:40 +0300 Subject: [PATCH 31/32] fix: Fix storybook of device sync page --- src/pages/DeviceSyncStatus/DeviceSync.stories.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/pages/DeviceSyncStatus/DeviceSync.stories.tsx b/src/pages/DeviceSyncStatus/DeviceSync.stories.tsx index 63e10986..caec6f09 100644 --- a/src/pages/DeviceSyncStatus/DeviceSync.stories.tsx +++ b/src/pages/DeviceSyncStatus/DeviceSync.stories.tsx @@ -1,4 +1,6 @@ import type { Meta, StoryObj } from '@storybook/react' +import { Provider as ReduxProvider } from 'react-redux' +import store from '../../redux/store' // Adjust` the path to your store accordingly import DeviceSyncStatus from './DeviceSyncStatus' @@ -11,9 +13,11 @@ const meta = { tags: ['autodocs'], decorators: [ Story => ( -
    - -
    + +
    + +
    +     ), ], } satisfies Meta From 8b659a5b8bb473a8fe7c6daa166b917626622de3 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Fri, 18 Aug 2023 15:21:34 +0300 Subject: [PATCH 32/32] Clear comments --- src/components/Charts/DeviceCPULoad.tsx | 2 +- src/components/Charts/DeviceNetworkHealth.tsx | 2 +- src/pages/DeviceHealthCheck/DeviceHealthCheck.stories.tsx | 3 +-- src/pages/DeviceHealthCheck/DeviceHealthCheck.tsx | 2 +- src/pages/DeviceSyncStatus/DeviceSync.stories.tsx | 2 +- 5 files changed, 5 insertions(+), 6 deletions(-) diff --git a/src/components/Charts/DeviceCPULoad.tsx b/src/components/Charts/DeviceCPULoad.tsx index e481b904..518bf92b 100644 --- a/src/components/Charts/DeviceCPULoad.tsx +++ b/src/components/Charts/DeviceCPULoad.tsx @@ -49,7 +49,7 @@ const DeviceCPULoad: React.FC = ({ load }) => { justifyContent="space-between" style={{ padding: '8px 16px', - position: 'relative', // Make XStack a positioning context + position: 'relative', }} >
    diff --git a/src/components/Charts/DeviceNetworkHealth.tsx b/src/components/Charts/DeviceNetworkHealth.tsx index 2dbfdb51..c74fc9c7 100644 --- a/src/components/Charts/DeviceNetworkHealth.tsx +++ b/src/components/Charts/DeviceNetworkHealth.tsx @@ -58,7 +58,7 @@ const DeviceNetworkHealth = ({ uploadRate, downloadRate }: DeviceNetworkHealthPr justifyContent="space-between" style={{ padding: '8px 16px', - position: 'relative', // Make XStack a positioning context + position: 'relative', }} >
    diff --git a/src/pages/DeviceHealthCheck/DeviceHealthCheck.stories.tsx b/src/pages/DeviceHealthCheck/DeviceHealthCheck.stories.tsx index c1bb862f..29d09abc 100644 --- a/src/pages/DeviceHealthCheck/DeviceHealthCheck.stories.tsx +++ b/src/pages/DeviceHealthCheck/DeviceHealthCheck.stories.tsx @@ -1,7 +1,6 @@ import type { Meta, StoryObj } from '@storybook/react' import { Provider as ReduxProvider } from 'react-redux' -import store from '../../redux/store' // Adjust` the path to your store accordingly - +import store from '../../redux/store' import DeviceHealthCheck from './DeviceHealthCheck' const meta: Meta = { diff --git a/src/pages/DeviceHealthCheck/DeviceHealthCheck.tsx b/src/pages/DeviceHealthCheck/DeviceHealthCheck.tsx index 2f0bcd13..72e90471 100644 --- a/src/pages/DeviceHealthCheck/DeviceHealthCheck.tsx +++ b/src/pages/DeviceHealthCheck/DeviceHealthCheck.tsx @@ -13,7 +13,7 @@ import { useSelector } from 'react-redux' import { RootState } from '../../redux/store' const DeviceHealthCheck = () => { - // Extract state from Redux store + const deviceHealthState = useSelector((state: RootState) => state.deviceHealth) console.log(deviceHealthState) return ( diff --git a/src/pages/DeviceSyncStatus/DeviceSync.stories.tsx b/src/pages/DeviceSyncStatus/DeviceSync.stories.tsx index caec6f09..2be8f0c1 100644 --- a/src/pages/DeviceSyncStatus/DeviceSync.stories.tsx +++ b/src/pages/DeviceSyncStatus/DeviceSync.stories.tsx @@ -1,6 +1,6 @@ import type { Meta, StoryObj } from '@storybook/react' import { Provider as ReduxProvider } from 'react-redux' -import store from '../../redux/store' // Adjust` the path to your store accordingly +import store from '../../redux/store' import DeviceSyncStatus from './DeviceSyncStatus'