Merge branch 'main' into hn.emoji-picker

src/components/General/BreadcrumbBar/BreadcrumbBar.tsx

@@ -8,8 +8,10 @@ const BreadcrumbBar = ({ breadcrumbList }: BreadcrumbBarProps) => {
   return (
     <nav className="breadcrumb-bar-nav">
       <ul className="breadcrumb-bar-ul">
-        {breadcrumbList.map(item => (
+        {breadcrumbList.map((item, index) => (
-          <li className="breadcrumb-bar-li">{item}</li>
+          <li className="breadcrumb-bar-li" key={index}>
+            {item}
+          </li>
         ))}
       </ul>
     </nav>

src/components/General/Header.tsx

@@ -0,0 +1,18 @@
+import { XStack } from 'tamagui'
+import NimbusLogo from '../Logos/NimbusLogo'
+import TagContainer from './TagContainer'
+
+type HeaderProps = {
+  selectedTag: 'pair' | 'create' | 'connect'
+}
+
+const Header = ({ selectedTag }: HeaderProps) => {
+  return (
+    <XStack justifyContent="space-between" py={'25px'} mt={'70px'}>
+      <NimbusLogo />
+      <TagContainer selectedTag={selectedTag} />
+    </XStack>
+  )
+}
+
+export default Header

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%;

src/components/General/TagContainer.css

@@ -1,4 +1,3 @@
-
+/* .tag-container div:nth-child(1) {
-.tag-container div:nth-child(1) {
     background:transparent;
-  }
+  } */

src/components/General/TagContainer.tsx

@@ -1,13 +1,20 @@
 import { Tag } from '@status-im/components'
 import { XStack } from 'tamagui'
 import './TagContainer.css'
-import { AddSmallIcon, SwapIcon } from '@status-im/icons'
+import { ConnectionIcon, AddSmallIcon, SwapIcon } from '@status-im/icons'
 
-const TagContainer = () => {
+type TagContainerProps = {
+  selectedTag: 'pair' | 'create' | 'connect'
+}
+
+const TagContainer = ({ selectedTag }: TagContainerProps) => {
   return (
     <XStack space={'$2'} alignItems="center" className="tag-container">
-      <Tag icon={SwapIcon} label="Pair" size={32} />
+      {selectedTag === 'connect' ? (
-      <Tag selected icon={AddSmallIcon} label="Create" size={32} />
+        <Tag selected={selectedTag === 'connect'} icon={ConnectionIcon} label="Connect" size={32} />
+      ) : null}
+      <Tag selected={selectedTag === 'pair'} icon={SwapIcon} label="Pair" size={32} />
+      <Tag selected={selectedTag === 'create'} icon={AddSmallIcon} label="Create" size={32} />
     </XStack>
   )
 }

src/components/Logos/NimbusLogo.css

@@ -1,5 +1,10 @@
 
 .nimbus-logomark{
-    width: auto;
+    display: flex;
-    height: 30%;
+    justify-content: center;
+    align-items: center;
+}
+.nimbus-logomark svg {
+    width: auto;
+    height: 24px;
 }

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'}
     >
-      <img src={'./icons/marks.svg'} alt="marks" className="nimbus-logomark" />
+      <NimbusLogoMark />
       <img src={'./icons/nimbus.svg'} alt="marks" />
       <BetaTag />
     </XStack>

src/components/Logos/NimbusLogoMark.tsx

@@ -0,0 +1,20 @@
+const NimbusLogoMark = () => {
+  return (
+    <div className="nimbus-logomark">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="147"
+        height="73"
+        viewBox="0 0 147 73"
+        fill="none"
+      >
+        <path
+          d="M110.25 36.5002V73C90.0427 73 79.625 71.1754 67.375 54.7503C55.125 38.3252 47.2108 36.4998 36.75 36.4998V73H0V36.4998H36.75V1.4385e-08C55.6049 -2.9897e-08 67.375 2.43335 79.625 18.2501C91.875 34.0669 98.3343 36.5002 110.25 36.5002V0H147V36.5002H110.25Z"
+          fill="currentColor"
+        />
+      </svg>
+    </div>
+  )
+}
+
+export default NimbusLogoMark

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 (
     <div className="layout">
       <section className="layout-left">
@@ -18,7 +25,8 @@ const PageWrapperShadow = ({ breadcrumbBar, rightImageSrc, children }: PageWrapp
       </section>
       <section className="layout-right">
         <div className="image-container">
-          <img src={rightImageSrc} alt="background" />
+          <img src={rightImageSrc} alt="background" className="background-img" />
+          {rightImageLogo ? <NimbusLogoMark /> : null}
         </div>
       </section>
     </div>

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;
+}

src/pages/ConnectDevicePage/ConnectDevicePage.tsx

@@ -1,12 +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 LabelInputField from '../../components/General/LabelInputField'
-import { AddSmallIcon, ConnectionIcon, NodeIcon, SwapIcon } from '@status-im/icons'
+import Header from '../../components/General/Header'
+import { NodeIcon } from '@status-im/icons'
 
 const ConnectDevicePage = () => {
   const [autoConnectChecked, setAutoConnectChecked] = useState(false)
@@ -16,24 +16,17 @@ const ConnectDevicePage = () => {
     <PageWrapperShadow
       breadcrumbBar={<BreadcrumbBar breadcrumbList={['Nodes', 'Nimbus', 'Connect Device']} />}
       rightImageSrc="./background-images/day-night-bg.png"
+      rightImageLogo={true}
     >
-      <div className="connection-page">
+      <YStack space={'$3'}>
-        <XStack justifyContent={'space-between'}>
+        <Header selectedTag="connect" />
-          <NimbusLogo />
+
-          <XStack space={'$2'} alignItems="center">
-            <Tag icon={ConnectionIcon} label="Connect" size={32} selected />
-            <Tag icon={SwapIcon} label="Pair" size={32} />
-            <Tag icon={AddSmallIcon} label="Create" size={32} />
-          </XStack>
-        </XStack>
         <article className="content">
-          <section className="mb-1">
+          <Titles
-            <Titles
+            title="Connect Device"
-              title="Connect Device"
+            subtitle="Configure your device to connect to the Nimbus Node Manager"
-              subtitle="Configure your device to connect to the Nimbus Node Manager"
+          />
-            />
+          <YStack my={16}>
-          </section>
-          <section className="mb-1">
             <XStack
               width={'100%'}
               alignItems="center"
@@ -65,8 +58,8 @@ const ConnectDevicePage = () => {
             <XStack width={'100%'} alignItems="center">
               <LabelInputField labelText="API Token" placeholderText="****_*****_*****" />
             </XStack>
-          </section>
+          </YStack>
-          <section className="mb-1">
+          <YStack my={16}>
             <YStack>
               <Text size={13} weight="regular" color={'#647084'}>
                 Device Avatar
@@ -79,9 +72,9 @@ const ConnectDevicePage = () => {
                 <LabelInputField labelText="Device Color" placeholderText="#011892" />
               </XStack>
             </YStack>
-          </section>
+          </YStack>
           <Separator alignSelf="stretch" borderColor={'#F0F2F5'} />
-          <section className="my-1">
+          <YStack my={16}>
             <YStack>
               <Text size={19} weight="semibold">
                 Settings
@@ -101,10 +94,10 @@ const ConnectDevicePage = () => {
               </Label>
             </XStack>
             <Separator alignSelf="stretch" borderColor={'#F0F2F5'} />
-          </section>
+          </YStack>
           <StatusButton icon={<NodeIcon size={20} />}>Connect Device</StatusButton>
         </article>
-      </div>
+      </YStack>
     </PageWrapperShadow>
   )
 }

src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx

@@ -1,24 +1,20 @@
 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 NimbusLogo from '../../components/Logos/NimbusLogo'
+import Header from '../../components/General/Header'
-import TagContainer from '../../components/General/TagContainer'
 import Titles from '../../components/General/Titles'
 import LabelInputField from '../../components/General/LabelInputField'
 import ColorPicker from '../../components/General/ColorPicker'
-import { NodeIcon, ReactionIcon } from '@status-im/icons'
 
 const CreateLocalNodePage = () => {
   const [autoConnectChecked, setAutoConnectChecked] = useState(false)
 
   return (
-    <PageWrapperShadow rightImageSrc="./background-images/day-night-bg.png">
+    <PageWrapperShadow rightImageSrc="./background-images/day-night-bg.png" rightImageLogo={true}>
-      <div className="connection-page">
+      <YStack space={'$3'}>
-        <XStack justifyContent={'space-between'}>
+        <Header selectedTag="create" />
-          <NimbusLogo />
-          <TagContainer />
-        </XStack>
         <article className="content">
           <Titles
             title="Create Local Node"
@@ -35,7 +31,7 @@ const CreateLocalNodePage = () => {
                 </Text>
                 <XStack my={10}>
                   <Avatar type="account" size={80} name="Device Avatar" />
-                  <ReactionIcon size={20} />
+                  <Avatar type="icon" size={32} icon={<ReactionIcon size={20} />} />
                 </XStack>
               </YStack>
               <YStack>
@@ -65,9 +61,9 @@ const CreateLocalNodePage = () => {
             </XStack>
             <Separator alignSelf="stretch" borderColor={'#F0F2F5'} />
           </YStack>
-          <StatusButton icon={<NodeIcon size={16} />}>Continue</StatusButton>
+          <StatusButton icon={<NodeIcon size={20} />}>Continue</StatusButton>
         </article>
-      </div>
+      </YStack>
     </PageWrapperShadow>
   )
 }

src/pages/LandingPage/LandingPage.tsx

@@ -1,32 +1,35 @@
-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 NimbusLogo from '../../components/Logos/NimbusLogo'
 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 '@status-im/icons'
 import EmojiPickerDialog from '../../components/General/EmojiPickerDialog'
+import { Button as StatusButton, Text } from '@status-im/components'
+import QuickStartBar from '../../components/General/QuickStartBar/QuickStartBar'
 
 function LandingPage() {
   return (
     <>
       <PageWrapperShadow rightImageSrc="./background-images/landing-page-bg.png">
-        <div className="landing-page">
+        <YStack className="landing-page">
-          <XStack>
+          <XStack pt={'70px'}>
             <NimbusLogo />
           </XStack>
-          <YStack>
+
-            <Titles
+          <YStack style={{ width: '100%', margin: '30vh 0 4vh' }}>
-              title="Light and performant clients, for all Ethereum validators."
+            <Title>Light and performant clients, for all Ethereum validators.</Title>
-              subtitle="Nimbus Nodes allows you to take control and ownership of the services you wish to run in a completely trustless and decentralized manner."
+            <Text size={15} weight="regular">
-            />
+              <strong>Nimbus Nodes</strong> allows you to take control and ownership of the services
-            <XStack>
+              you wish to run in a completely trustless and decentralized manner.
-              <StatusButton icon={<NodeIcon size={20} />}>Get Started</StatusButton>
+            </Text>
-            </XStack>
           </YStack>
-          <EmojiPickerDialog emojiStyle={'FACEBOOK'} />
+
-        </div>
+          <XStack>
+            <StatusButton icon={<NodeIcon size={20} />}>Get Started</StatusButton>
+          </XStack>
+        </YStack>
+        <EmojiPickerDialog emojiStyle='TWITTER'/>
       </PageWrapperShadow>
       <QuickStartBar />
     </>

src/pages/PairDevice/PairDevice.tsx

@@ -1,15 +1,15 @@
 import { Separator, XStack, YStack } from 'tamagui'
 import { useState } from 'react'
-import { Button, Checkbox, Tag, Text } from '@status-im/components'
+import { Button, Checkbox, Text } from '@status-im/components'
 
 import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow'
 import SyncStatus from './SyncStatus'
-import NimbusLogo from '../../components/Logos/NimbusLogo'
 import Titles from '../../components/General/Titles'
 import PairedSuccessfully from './PairedSuccessfully'
 import CreateAvatar from './CreateAvatar'
 import GenerateId from './GenerateId'
-import { AddSmallIcon, NodeIcon, SwapIcon } from '@status-im/icons'
+import { NodeIcon } from '@status-im/icons'
+import Header from '../../components/General/Header'
 
 const PairDevice = () => {
   const [autoChecked, setAutoChecked] = useState(false)
@@ -22,20 +22,14 @@ const PairDevice = () => {
   }
 
   return (
-    <PageWrapperShadow rightImageSrc="./background-images/day-night-bg.png">
+    <PageWrapperShadow rightImageSrc="./background-images/day-night-bg.png" rightImageLogo={true}>
       <YStack
         space={'$3'}
         style={{
           maxWidth: '100%',
         }}
       >
-        <XStack style={{ justifyContent: 'space-between' }}>
+        <Header selectedTag="pair" />
-          <NimbusLogo />
-          <XStack space={'$2'} style={{ alignItems: 'center' }}>
-            <Tag icon={SwapIcon} label="Pair" size={32} selected />
-            <Tag icon={AddSmallIcon} label="Create" size={32} />
-          </XStack>
-        </XStack>
         <Titles title="Pair Device" subtitle="Pair your device to the Nimbus Node Manager" />
         {isPaired ? <PairedSuccessfully /> : <GenerateId isAwaitingPairing={isAwaitingPairing} />}
         {!isPaired && (