From 43823559da3744f5501364b0f9187d7c3191e240 Mon Sep 17 00:00:00 2001 From: Ivana Andersson Date: Wed, 16 Aug 2023 14:32:34 +0300 Subject: [PATCH 01/24] 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/24] 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/24] 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/24] 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/24] 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/24] 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/24] 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/24] 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/24] 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/24] 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/24] 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/24] 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/24] 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/24] 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/24] 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/24] 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/24] 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/24] 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 faad444ed43a463353dcb7b048c2f6b8b3c4bf7e Mon Sep 17 00:00:00 2001 From: Ivana Andersson Date: Fri, 18 Aug 2023 11:25:20 +0300 Subject: [PATCH 19/24] 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 20/24] 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 21/24] 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 22/24] 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 23/24] 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 24/24] 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'