From f6ecba8c8b2ed752c4f73af4e0eb0a7488801a9e Mon Sep 17 00:00:00 2001 From: Ivana Andersson Date: Mon, 21 Aug 2023 15:57:23 +0300 Subject: [PATCH 01/11] feat: create `NimbusLogoMark` component and add it to pages --- src/components/Logos/NimbusLogo.tsx | 3 ++- src/components/Logos/NimbusLogoMark.tsx | 20 +++++++++++++++++++ .../PageWrappers/PageWrapperShadow.tsx | 12 +++++++++-- 3 files changed, 32 insertions(+), 3 deletions(-) create mode 100644 src/components/Logos/NimbusLogoMark.tsx diff --git a/src/components/Logos/NimbusLogo.tsx b/src/components/Logos/NimbusLogo.tsx index 729c7c16..5ea1fc94 100644 --- a/src/components/Logos/NimbusLogo.tsx +++ b/src/components/Logos/NimbusLogo.tsx @@ -1,6 +1,7 @@ import { XStack } from 'tamagui' import BetaTag from './BetaTag' import './NimbusLogo.css' +import NimbusLogoMark from './NimbusLogoMark' const NimbusLogo = () => { return ( @@ -11,7 +12,7 @@ const NimbusLogo = () => { }} space={'$3'} > - marks + marks diff --git a/src/components/Logos/NimbusLogoMark.tsx b/src/components/Logos/NimbusLogoMark.tsx new file mode 100644 index 00000000..c86820bd --- /dev/null +++ b/src/components/Logos/NimbusLogoMark.tsx @@ -0,0 +1,20 @@ +const NimbusLogoMark = () => { + return ( +
+ + + +
+ ) +} + +export default NimbusLogoMark diff --git a/src/components/PageWrappers/PageWrapperShadow.tsx b/src/components/PageWrappers/PageWrapperShadow.tsx index 73c89bcd..c0e0f2b3 100644 --- a/src/components/PageWrappers/PageWrapperShadow.tsx +++ b/src/components/PageWrappers/PageWrapperShadow.tsx @@ -1,13 +1,20 @@ import { ReactNode } from 'react' import './layout.css' +import NimbusLogoMark from '../Logos/NimbusLogoMark' type PageWrapperShadowProps = { breadcrumbBar?: ReactNode rightImageSrc?: string + rightImageLogo?: boolean children: ReactNode } -const PageWrapperShadow = ({ breadcrumbBar, rightImageSrc, children }: PageWrapperShadowProps) => { +const PageWrapperShadow = ({ + breadcrumbBar, + rightImageSrc, + rightImageLogo, + children, +}: PageWrapperShadowProps) => { return (
@@ -18,7 +25,8 @@ const PageWrapperShadow = ({ breadcrumbBar, rightImageSrc, children }: PageWrapp
- background + background + {rightImageLogo ? : null}
From 52e6922abade56269ac35835528e7c094f9aadd9 Mon Sep 17 00:00:00 2001 From: Ivana Andersson Date: Mon, 21 Aug 2023 15:57:39 +0300 Subject: [PATCH 02/11] fix: add appropriate nimbus logomark styles --- src/components/Logos/NimbusLogo.css | 7 ++++++- src/components/PageWrappers/layout.css | 14 ++++++++++++-- 2 files changed, 18 insertions(+), 3 deletions(-) diff --git a/src/components/Logos/NimbusLogo.css b/src/components/Logos/NimbusLogo.css index 52c7136e..524a710b 100644 --- a/src/components/Logos/NimbusLogo.css +++ b/src/components/Logos/NimbusLogo.css @@ -1,5 +1,10 @@ .nimbus-logomark{ + display: flex; + justify-content: center; + align-items: center; +} +.nimbus-logomark svg { width: auto; - height: 30%; + height: 24px; } \ No newline at end of file diff --git a/src/components/PageWrappers/layout.css b/src/components/PageWrappers/layout.css index a2911318..d1676b63 100644 --- a/src/components/PageWrappers/layout.css +++ b/src/components/PageWrappers/layout.css @@ -26,7 +26,7 @@ flex-wrap: wrap; justify-content: end; height: 100%; - padding: 70px 0 0; + /* padding: 70px 0 0; */ } .container-inner { max-width: 70%; @@ -49,6 +49,7 @@ height: 100%; position: relative; overflow: hidden; + color: #FFF; } .image-container::before { display: block; @@ -65,7 +66,7 @@ height: 100%; background: linear-gradient(to right, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 0.0)); } -.image-container img { +.image-container .background-img { position: absolute; top: 50%; left: 50%; @@ -73,3 +74,12 @@ height: 140%; width: auto; } +.image-container .nimbus-logomark { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} +.image-container .nimbus-logomark svg { + height: 73px; +} From ad7f4a9fa31c4a02578bd6928795e4df6d948da6 Mon Sep 17 00:00:00 2001 From: Ivana Andersson Date: Mon, 21 Aug 2023 16:02:38 +0300 Subject: [PATCH 03/11] fix: add prop for nimbus logomark on appropriate pages --- src/pages/ConnectDevicePage/ConnectDevicePage.tsx | 1 + src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx | 2 +- src/pages/PairDevice/PairDevice.tsx | 2 +- 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/pages/ConnectDevicePage/ConnectDevicePage.tsx b/src/pages/ConnectDevicePage/ConnectDevicePage.tsx index e9b22cc1..dacac9e6 100644 --- a/src/pages/ConnectDevicePage/ConnectDevicePage.tsx +++ b/src/pages/ConnectDevicePage/ConnectDevicePage.tsx @@ -19,6 +19,7 @@ const ConnectDevicePage = () => { } rightImageSrc="/background-images/day-night-bg.png" + rightImageLogo={true} >
diff --git a/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx b/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx index dcc4b61f..d0a8596d 100644 --- a/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx +++ b/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx @@ -14,7 +14,7 @@ const CreateLocalNodePage = () => { const [autoConnectChecked, setAutoConnectChecked] = useState(false) return ( - +
diff --git a/src/pages/PairDevice/PairDevice.tsx b/src/pages/PairDevice/PairDevice.tsx index 21696fee..2075fd48 100644 --- a/src/pages/PairDevice/PairDevice.tsx +++ b/src/pages/PairDevice/PairDevice.tsx @@ -24,7 +24,7 @@ const PairDevice = () => { } return ( - + Date: Mon, 21 Aug 2023 16:03:40 +0300 Subject: [PATCH 04/11] feat: add layout changes to landing page to match design --- src/pages/LandingPage/LandingPage.tsx | 36 ++++++++++++++++----------- 1 file changed, 21 insertions(+), 15 deletions(-) diff --git a/src/pages/LandingPage/LandingPage.tsx b/src/pages/LandingPage/LandingPage.tsx index 733fe697..65870331 100644 --- a/src/pages/LandingPage/LandingPage.tsx +++ b/src/pages/LandingPage/LandingPage.tsx @@ -1,30 +1,36 @@ import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow' import './LandingPage.css' import QuickStartBar from '../../components/General/QuickStartBar/QuickStartBar' -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 Titles from '../../components/General/Titles' import { XStack, YStack } from 'tamagui' +import Title from '../../components/General/Title' +import NimbusLogo from '../../components/Logos/NimbusLogo' +import NodeIcon from '../../components/Icons/NodeIcon' +import { Button as StatusButton, Text } from '@status-im/components' function LandingPage() { return ( <> -
- + + - - - - }>Get Started - + + + + Light and performant clients, for all Ethereum validators. + + + Nimbus Nodes allows you to take control and ownership of the services + you wish to run in a completely trustless and decentralized manner. + -
+ + + }>Get Started + + From a5372f226b1969e10c91dea22d882fd73533ae1a Mon Sep 17 00:00:00 2001 From: Ivana Andersson Date: Mon, 21 Aug 2023 16:47:54 +0300 Subject: [PATCH 05/11] feat: create `Header` component and add it to pages --- src/components/General/Header.tsx | 14 ++++++++++++++ .../CreateLocalNodePage/CreateLocalNodePage.tsx | 8 ++------ src/pages/PairDevice/PairDevice.tsx | 14 +++----------- 3 files changed, 19 insertions(+), 17 deletions(-) create mode 100644 src/components/General/Header.tsx diff --git a/src/components/General/Header.tsx b/src/components/General/Header.tsx new file mode 100644 index 00000000..ede00809 --- /dev/null +++ b/src/components/General/Header.tsx @@ -0,0 +1,14 @@ +import { XStack } from 'tamagui' +import NimbusLogo from '../Logos/NimbusLogo' +import TagContainer from './TagContainer' + +const Header = () => { + return ( + + + + + ) +} + +export default Header diff --git a/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx b/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx index d0a8596d..cd9252f2 100644 --- a/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx +++ b/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx @@ -2,13 +2,12 @@ import { useState } from 'react' 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' -import TagContainer from '../../components/General/TagContainer' import Titles from '../../components/General/Titles' import NodeIcon from '../../components/Icons/NodeIcon' import LabelInputField from '../../components/General/LabelInputField' import ReactionIcon from '../../components/Icons/ReactionIcon' import ColorPicker from '../../components/General/ColorPicker' +import Header from '../../components/General/Header' const CreateLocalNodePage = () => { const [autoConnectChecked, setAutoConnectChecked] = useState(false) @@ -16,10 +15,7 @@ const CreateLocalNodePage = () => { return (
- - - - +
{ const [autoChecked, setAutoChecked] = useState(false) @@ -31,13 +29,7 @@ const PairDevice = () => { maxWidth: '100%', }} > - - - - - - - +
{isPaired ? : } {!isPaired && ( From 3e4831e74dfe262afa71982efb21063657e57162 Mon Sep 17 00:00:00 2001 From: Ivana Andersson Date: Mon, 21 Aug 2023 16:50:54 +0300 Subject: [PATCH 06/11] fix: add key prop to breadcrumb bar --- src/components/General/BreadcrumbBar/BreadcrumbBar.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/General/BreadcrumbBar/BreadcrumbBar.tsx b/src/components/General/BreadcrumbBar/BreadcrumbBar.tsx index 44199c1a..151b7a78 100644 --- a/src/components/General/BreadcrumbBar/BreadcrumbBar.tsx +++ b/src/components/General/BreadcrumbBar/BreadcrumbBar.tsx @@ -8,8 +8,10 @@ const BreadcrumbBar = ({ breadcrumbList }: BreadcrumbBarProps) => { return ( From c8fec26f6ded63b84d10c0a274dda4b93527f20c Mon Sep 17 00:00:00 2001 From: Ivana Andersson Date: Mon, 21 Aug 2023 17:02:47 +0300 Subject: [PATCH 07/11] feat: add TagContainer and Header props for selected tag --- src/components/General/Header.tsx | 10 +++++++--- src/components/General/TagContainer.css | 5 ++--- src/components/General/TagContainer.tsx | 12 +++++++++--- .../ConnectDevicePage/ConnectDevicePage.tsx | 17 ++++------------- .../CreateLocalNodePage/CreateLocalNodePage.tsx | 2 +- src/pages/PairDevice/PairDevice.tsx | 2 +- 6 files changed, 24 insertions(+), 24 deletions(-) diff --git a/src/components/General/Header.tsx b/src/components/General/Header.tsx index ede00809..b5f86797 100644 --- a/src/components/General/Header.tsx +++ b/src/components/General/Header.tsx @@ -2,11 +2,15 @@ import { XStack } from 'tamagui' import NimbusLogo from '../Logos/NimbusLogo' import TagContainer from './TagContainer' -const Header = () => { +type HeaderProps = { + selectedTag: 'pair' | 'create' | 'connect' +} + +const Header = ({ selectedTag }: HeaderProps) => { return ( - + - + ) } diff --git a/src/components/General/TagContainer.css b/src/components/General/TagContainer.css index d02ec351..7113f3cf 100644 --- a/src/components/General/TagContainer.css +++ b/src/components/General/TagContainer.css @@ -1,4 +1,3 @@ - -.tag-container div:nth-child(1) { +/* .tag-container div:nth-child(1) { background:transparent; - } \ No newline at end of file + } */ \ No newline at end of file diff --git a/src/components/General/TagContainer.tsx b/src/components/General/TagContainer.tsx index 42dbfd0d..094e8812 100644 --- a/src/components/General/TagContainer.tsx +++ b/src/components/General/TagContainer.tsx @@ -3,12 +3,18 @@ import { XStack } from 'tamagui' import PairIcon from '../Icons/PairIcon' import CreateIcon from '../Icons/CreateIcon' import './TagContainer.css' +import ConnectIcon from '../Icons/ConnectIcon' -const TagContainer = () => { +type TagContainerProps = { + selectedTag: 'pair' | 'create' | 'connect' +} + +const TagContainer = ({ selectedTag }: TagContainerProps) => { return ( - - + + + ) } diff --git a/src/pages/ConnectDevicePage/ConnectDevicePage.tsx b/src/pages/ConnectDevicePage/ConnectDevicePage.tsx index dacac9e6..e7e35d79 100644 --- a/src/pages/ConnectDevicePage/ConnectDevicePage.tsx +++ b/src/pages/ConnectDevicePage/ConnectDevicePage.tsx @@ -1,15 +1,12 @@ import { useState } from 'react' import BreadcrumbBar from '../../components/General/BreadcrumbBar/BreadcrumbBar' -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' import Titles from '../../components/General/Titles' import NodeIcon from '../../components/Icons/NodeIcon' -import ConnectIcon from '../../components/Icons/ConnectIcon' -import PairIcon from '../../components/Icons/PairIcon' -import CreateIcon from '../../components/Icons/CreateIcon' import LabelInputField from '../../components/General/LabelInputField' +import Header from '../../components/General/Header' const ConnectDevicePage = () => { const [autoConnectChecked, setAutoConnectChecked] = useState(false) @@ -22,14 +19,8 @@ const ConnectDevicePage = () => { rightImageLogo={true} >
- - - - - - - - +
+
{ return (
-
+
{ maxWidth: '100%', }} > -
+
{isPaired ? : } {!isPaired && ( From 8f2d8670fcdaf7e94b22bbc0e24275a1f73e7aad Mon Sep 17 00:00:00 2001 From: Ivana Andersson Date: Mon, 21 Aug 2023 17:09:17 +0300 Subject: [PATCH 08/11] fix: add a bit of white space vertically between components --- src/components/General/Header.tsx | 2 +- .../ConnectDevicePage/ConnectDevicePage.tsx | 26 +++++++++---------- .../CreateLocalNodePage.tsx | 4 +-- 3 files changed, 15 insertions(+), 17 deletions(-) diff --git a/src/components/General/Header.tsx b/src/components/General/Header.tsx index b5f86797..b3130193 100644 --- a/src/components/General/Header.tsx +++ b/src/components/General/Header.tsx @@ -8,7 +8,7 @@ type HeaderProps = { const Header = ({ selectedTag }: HeaderProps) => { return ( - + diff --git a/src/pages/ConnectDevicePage/ConnectDevicePage.tsx b/src/pages/ConnectDevicePage/ConnectDevicePage.tsx index e7e35d79..f5506f00 100644 --- a/src/pages/ConnectDevicePage/ConnectDevicePage.tsx +++ b/src/pages/ConnectDevicePage/ConnectDevicePage.tsx @@ -18,17 +18,15 @@ const ConnectDevicePage = () => { rightImageSrc="/background-images/day-night-bg.png" rightImageLogo={true} > -
+
-
- -
-
+ + { -
-
+ + Device Avatar @@ -74,9 +72,9 @@ const ConnectDevicePage = () => { -
+ -
+ Settings @@ -96,10 +94,10 @@ const ConnectDevicePage = () => { -
+ }>Connect Device
-
+ ) } diff --git a/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx b/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx index 8b15d4ac..6f656184 100644 --- a/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx +++ b/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx @@ -14,7 +14,7 @@ const CreateLocalNodePage = () => { return ( -
+
{ }>Continue
-
+ ) } From 86771e6ab7c17b444958d3827b0bb4ddde1cb829 Mon Sep 17 00:00:00 2001 From: Ivana Andersson Date: Mon, 21 Aug 2023 17:22:46 +0300 Subject: [PATCH 09/11] fix: change margins on landing page to vh --- .../General/QuickStartBar/QuickStartBar.css | 2 +- src/pages/LandingPage/LandingPage.tsx | 11 ++++------- 2 files changed, 5 insertions(+), 8 deletions(-) diff --git a/src/components/General/QuickStartBar/QuickStartBar.css b/src/components/General/QuickStartBar/QuickStartBar.css index 90d344f3..be0a2f7d 100644 --- a/src/components/General/QuickStartBar/QuickStartBar.css +++ b/src/components/General/QuickStartBar/QuickStartBar.css @@ -10,7 +10,7 @@ margin: 0 auto; padding: 12px 1rem; position: relative; - top: -120px; + top: -18vh; } .quick-start-bar > div { width: 100%; diff --git a/src/pages/LandingPage/LandingPage.tsx b/src/pages/LandingPage/LandingPage.tsx index 65870331..f4c0186b 100644 --- a/src/pages/LandingPage/LandingPage.tsx +++ b/src/pages/LandingPage/LandingPage.tsx @@ -1,12 +1,11 @@ -import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow' import './LandingPage.css' -import QuickStartBar from '../../components/General/QuickStartBar/QuickStartBar' -// import Titles from '../../components/General/Titles' import { XStack, YStack } from 'tamagui' +import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow' import Title from '../../components/General/Title' import NimbusLogo from '../../components/Logos/NimbusLogo' import NodeIcon from '../../components/Icons/NodeIcon' import { Button as StatusButton, Text } from '@status-im/components' +import QuickStartBar from '../../components/General/QuickStartBar/QuickStartBar' function LandingPage() { return ( @@ -17,10 +16,8 @@ function LandingPage() { - - - Light and performant clients, for all Ethereum validators. - + + Light and performant clients, for all Ethereum validators. Nimbus Nodes allows you to take control and ownership of the services you wish to run in a completely trustless and decentralized manner. From 3acdd84cf119dca9a9f4e4e296d8592f80513bc6 Mon Sep 17 00:00:00 2001 From: Ivana Andersson Date: Tue, 22 Aug 2023 09:27:56 +0300 Subject: [PATCH 10/11] add condition for showing connect tag --- src/components/General/TagContainer.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/General/TagContainer.tsx b/src/components/General/TagContainer.tsx index 094e8812..8613d84f 100644 --- a/src/components/General/TagContainer.tsx +++ b/src/components/General/TagContainer.tsx @@ -12,7 +12,9 @@ type TagContainerProps = { const TagContainer = ({ selectedTag }: TagContainerProps) => { return ( - + {selectedTag === 'connect' ? ( + + ) : null} From 24e458aa6f1dea1e593b4f3cc8e673c89d80b36f Mon Sep 17 00:00:00 2001 From: Ivana Andersson Date: Tue, 22 Aug 2023 11:17:42 +0300 Subject: [PATCH 11/11] fix: changes after merge --- src/pages/ConnectDevicePage/ConnectDevicePage.tsx | 1 - src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx | 11 +++-------- 2 files changed, 3 insertions(+), 9 deletions(-) diff --git a/src/pages/ConnectDevicePage/ConnectDevicePage.tsx b/src/pages/ConnectDevicePage/ConnectDevicePage.tsx index a1d1851f..b90737ef 100644 --- a/src/pages/ConnectDevicePage/ConnectDevicePage.tsx +++ b/src/pages/ConnectDevicePage/ConnectDevicePage.tsx @@ -4,7 +4,6 @@ import { Button as StatusButton, Text, Avatar, Checkbox } from '@status-im/compo import { Label, Separator, XStack, YStack } from 'tamagui' import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow' import Titles from '../../components/General/Titles' - import LabelInputField from '../../components/General/LabelInputField' import Header from '../../components/General/Header' import { NodeIcon } from '@status-im/icons' diff --git a/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx b/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx index 42771b22..0db1b774 100644 --- a/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx +++ b/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx @@ -1,12 +1,12 @@ import { useState } from 'react' import { Button as StatusButton, Text, Avatar, Checkbox } from '@status-im/components' +import { NodeIcon, ReactionIcon } from '@status-im/icons' import { Label, Separator, XStack, YStack } from 'tamagui' import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow' +import Header from '../../components/General/Header' import Titles from '../../components/General/Titles' import LabelInputField from '../../components/General/LabelInputField' import ColorPicker from '../../components/General/ColorPicker' -import Header from '../../components/General/Header' -import { NodeIcon, ReactionIcon } from '@status-im/icons' const CreateLocalNodePage = () => { const [autoConnectChecked, setAutoConnectChecked] = useState(false) @@ -31,12 +31,7 @@ const CreateLocalNodePage = () => { - } - backgroundColor={'white'} - /> + } />