feat: add connection page

src/App.css

@@ -8,7 +8,23 @@
   }
 }
 
-span {
+/* 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;
 }

src/App.tsx

@@ -2,14 +2,15 @@ import { TamaguiProvider } from 'tamagui'
 import './App.css'
 import { Provider as StatusProvider } from '@status-im/components'
 import config from '../tamagui.config'
-import LandingPage from './components/LayoutComponent/LandingPage'
+import ConnectionPage from './components/ConnectionPage/ConnectionPage'
-
+// import LandingPage from './components/LayoutComponent/LandingPage'
 
 function App() {
   return (
     <TamaguiProvider config={config}>
       <StatusProvider>
-        <LandingPage />
+        <ConnectionPage />
+        {/* <LandingPage /> */}
       </StatusProvider>
     </TamaguiProvider>
   )

src/components/ConnectionPage/ConnectIcon.tsx

@@ -0,0 +1,18 @@
+function ConnectIcon() {
+  return (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g id="20/connection">
+        <path
+          id="body"
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M9.99978 1.8999C8.21669 1.8999 6.48343 2.48826 5.06881 3.57374C3.6542 4.65921 2.63728 6.18114 2.17578 7.90347L3.33489 8.21405C3.72802 6.74688 4.59428 5.45043 5.79933 4.52576C7.00437 3.6011 8.48086 3.0999 9.99978 3.0999C11.5187 3.0999 12.9952 3.6011 14.2002 4.52577C15.4053 5.45043 16.2715 6.74688 16.6647 8.21405L17.8238 7.90347C17.3623 6.18114 16.3454 4.65922 14.9307 3.57374C13.5161 2.48827 11.7829 1.8999 9.99978 1.8999ZM9.99988 4.9C8.87719 4.9 7.78588 5.27045 6.8952 5.9539C6.00451 6.63734 5.36423 7.59559 5.07366 8.68002L6.23277 8.9906C6.45497 8.16133 6.9446 7.42856 7.62571 6.90592C8.30682 6.38329 9.14136 6.1 9.99988 6.1C10.8584 6.1 11.6929 6.38329 12.374 6.90592C13.0552 7.42856 13.5448 8.16134 13.767 8.99061L14.9261 8.68002C14.6355 7.59559 13.9952 6.63735 13.1046 5.9539C12.2139 5.27045 11.1226 4.9 9.99988 4.9ZM9.99988 10.1C8.95054 10.1 8.09988 10.9507 8.09988 12C8.09988 13.0493 8.95054 13.9 9.99988 13.9C11.0492 13.9 11.8999 13.0493 11.8999 12C11.8999 10.9507 11.0492 10.1 9.99988 10.1ZM6.89988 12C6.89988 10.2879 8.2878 8.9 9.99988 8.9C11.712 8.9 13.0999 10.2879 13.0999 12C13.0999 13.5068 12.0248 14.7625 10.5999 15.042V17.5H9.39988V15.042C7.97494 14.7625 6.89988 13.5068 6.89988 12Z"
+          fill="#1B273D"
+          fillOpacity="0.7"
+        />
+      </g>
+    </svg>
+  )
+}
+
+export default ConnectIcon

src/components/ConnectionPage/ConnectionPage.tsx

@@ -0,0 +1,112 @@
+import { useState } from 'react'
+import BreadcrumbBar from '../BreadcrumbBar/BreadcrumbBar'
+import { Button as StatusButton, Tag, Text, Avatar, Checkbox } from '@status-im/components'
+import { Label, Separator, XStack, YStack } from 'tamagui'
+import LayoutComponent from '../LayoutComponent/LayoutComponent'
+import Logo from '../Logo'
+import Titles from '../Titles'
+import NodeIcon from './NodeIcon'
+import ConnectIcon from './ConnectIcon'
+import PairIcon from './PairIcon'
+import CreateIcon from './CreateIcon'
+import LabelInputField from './LabelInputField'
+
+function ContentPage() {
+  return <LayoutComponent breadcrumbBar={<BreadcrumbBar />} content={<Content />} />
+}
+
+function Content() {
+  const [autoConnectChecked, setAutoConnectChecked] = useState(false)
+  const [portChecked, setPortChecked] = useState(false)
+  return (
+    <div className="container-inner connection-page">
+      <header>
+        <Logo />
+        <XStack space={'$2'} alignItems="center">
+          <Tag icon={ConnectIcon} label="Connect" size={32} selected />
+          <Tag icon={PairIcon} label="Pair" size={32} />
+          <Tag icon={CreateIcon} label="Create" size={32} />
+        </XStack>
+      </header>
+      <article className="content">
+        <section className="mb-1">
+          <Titles
+            title="Connect Device"
+            subtitle="Configure your device to connect to the Nimbus Node Manager"
+          />
+        </section>
+        <section className="mb-1">
+          <XStack
+            width={'100%'}
+            alignItems="center"
+            justifyContent="space-between"
+            // media query
+            $lg={{
+              flexDirection: 'column',
+              flexWrap: 'nowrap',
+            }}
+          >
+            <XStack width={'40%'}>
+              <LabelInputField labelText="Beacon Address" placeholderText="something" />
+            </XStack>
+            <XStack width={'25%'}>
+              <LabelInputField labelText="Beacon Node Port" placeholderText="5052" />
+            </XStack>
+            <XStack width={'25%'}>
+              <LabelInputField labelText="Client Validator Port" placeholderText="5052" />
+            </XStack>
+            <YStack width={20}>
+              <Checkbox
+                id="port-checkbox"
+                variant="outline"
+                selected={portChecked}
+                onCheckedChange={v => setPortChecked(v)}
+              />
+            </YStack>
+          </XStack>
+          <XStack width={'100%'} alignItems="center">
+            <LabelInputField labelText="API Token" placeholderText="****_*****_*****" />
+          </XStack>
+        </section>
+        <section className="mb-1">
+          <YStack>
+            <Text size={13} weight="regular" color={'#647084'}>
+              Device Avatar
+            </Text>
+            <XStack my={10}>
+              <Avatar type="user" size={80} name="Device Avatar" />
+            </XStack>
+            <XStack space>
+              <LabelInputField labelText="Device Name" placeholderText="Stake and chips" />
+              <LabelInputField labelText="Device Color" placeholderText="#011892" />
+            </XStack>
+          </YStack>
+        </section>
+        <Separator alignSelf="stretch" borderColor={'#F0F2F5'} />
+        <section className="my-1">
+          <YStack>
+            <Text size={19} weight="semibold">
+              Settings
+            </Text>
+          </YStack>
+          <XStack my={8} space={'$2'}>
+            <Checkbox
+              id="auto-connect"
+              selected={autoConnectChecked}
+              onCheckedChange={v => setAutoConnectChecked(v)}
+              variant="outline"
+            />
+            <Label htmlFor="auto-connect">
+              <Text size={15} weight="regular">
+                Auto Connect Device
+              </Text>
+            </Label>
+          </XStack>
+          <Separator alignSelf="stretch" borderColor={'#F0F2F5'} />
+        </section>
+        <StatusButton icon={<NodeIcon />}>Connect Device</StatusButton>
+      </article>
+    </div>
+  )
+}
+export default ContentPage

src/components/ConnectionPage/CreateIcon.tsx

@@ -0,0 +1,16 @@
+function CreateIcon() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+      <circle cx="10" cy="10" r="7.5" stroke="#1B273D" strokeOpacity="0.7" strokeWidth="1.2" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10.6 9.4V6.5H9.4V9.4L6.5 9.4V10.6L9.4 10.6V13.5H10.6V10.6L13.5 10.6L13.5 9.4L10.6 9.4Z"
+        fill="#1B273D"
+        fillOpacity="0.7"
+      />
+    </svg>
+  )
+}
+
+export default CreateIcon

src/components/ConnectionPage/LabelInputField.tsx

@@ -0,0 +1,20 @@
+import { Input as StatusInput, Text } from '@status-im/components'
+import { Label } from 'tamagui'
+
+type LabelInputProps = {
+  labelText: string
+  placeholderText: string
+}
+
+function LabelInputField({ labelText, placeholderText }: LabelInputProps) {
+  return (
+    <Label flexDirection="column" alignItems="flex-start" my={10} width={'100%'}>
+      <Text size={13} weight="regular" color={'#647084'}>
+        {labelText}
+      </Text>
+      <StatusInput placeholder={placeholderText} width={'100%'} />
+    </Label>
+  )
+}
+
+export default LabelInputField

src/components/ConnectionPage/NodeIcon.tsx

@@ -0,0 +1,34 @@
+function NodeIcon() {
+  return (
+    <span>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        fill="none"
+      >
+        <g clipPath="url(#clip0_760_1602)">
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M4.9999 2.60002C3.67442 2.60002 2.5999 3.67454 2.5999 5.00002C2.5999 6.32551 3.67442 7.40002 4.9999 7.40002C6.32539 7.40002 7.3999 6.32551 7.3999 5.00002C7.3999 3.67454 6.32539 2.60002 4.9999 2.60002ZM1.3999 5.00002C1.3999 3.0118 3.01168 1.40002 4.9999 1.40002C6.98813 1.40002 8.5999 3.0118 8.5999 5.00002C8.5999 5.77749 8.35345 6.4974 7.9344 7.08587L9.48712 8.63859C10.4478 7.86383 11.6697 7.4 13 7.4C16.0928 7.4 18.6 9.90721 18.6 13C18.6 16.0928 16.0928 18.6 13 18.6C9.9072 18.6 7.4 16.0928 7.4 13C7.4 11.6697 7.86383 10.4478 8.63859 9.48712L7.08589 7.93442C6.49739 8.35353 5.77743 8.60002 4.9999 8.60002C3.01168 8.60002 1.3999 6.98825 1.3999 5.00002ZM8.6 13C8.6 10.5699 10.5699 8.6 13 8.6C15.4301 8.6 17.4 10.5699 17.4 13C17.4 15.4301 15.4301 17.4 13 17.4C10.5699 17.4 8.6 15.4301 8.6 13Z"
+            fill="white"
+            fillOpacity="0.7"
+          />
+          <path
+            d="M7.9344 7.08587L7.52711 6.79585C7.3855 6.99472 7.40821 7.26679 7.58085 7.43943L7.9344 7.08587ZM9.48712 8.63859L9.13357 8.99215C9.31425 9.17283 9.6021 9.18821 9.801 9.0278L9.48712 8.63859ZM8.63859 9.48712L9.0278 9.801C9.18821 9.6021 9.17283 9.31425 8.99215 9.13357L8.63859 9.48712ZM7.08589 7.93442L7.43945 7.58087C7.26681 7.40823 6.99472 7.38552 6.79585 7.52715L7.08589 7.93442ZM3.0999 5.00002C3.0999 3.95068 3.95056 3.10002 4.9999 3.10002V2.10002C3.39828 2.10002 2.0999 3.3984 2.0999 5.00002H3.0999ZM4.9999 6.90002C3.95056 6.90002 3.0999 6.04937 3.0999 5.00002H2.0999C2.0999 6.60165 3.39828 7.90002 4.9999 7.90002V6.90002ZM6.8999 5.00002C6.8999 6.04937 6.04924 6.90002 4.9999 6.90002V7.90002C6.60153 7.90002 7.8999 6.60165 7.8999 5.00002H6.8999ZM4.9999 3.10002C6.04924 3.10002 6.8999 3.95068 6.8999 5.00002H7.8999C7.8999 3.3984 6.60153 2.10002 4.9999 2.10002V3.10002ZM4.9999 0.900024C2.73553 0.900024 0.899902 2.73566 0.899902 5.00002H1.8999C1.8999 3.28794 3.28782 1.90002 4.9999 1.90002V0.900024ZM9.0999 5.00002C9.0999 2.73566 7.26427 0.900024 4.9999 0.900024V1.90002C6.71198 1.90002 8.0999 3.28794 8.0999 5.00002H9.0999ZM8.34169 7.3759C8.81905 6.70553 9.0999 5.88483 9.0999 5.00002H8.0999C8.0999 5.67015 7.88784 6.28926 7.52711 6.79585L8.34169 7.3759ZM9.84068 8.28504L8.28795 6.73232L7.58085 7.43943L9.13357 8.99215L9.84068 8.28504ZM9.801 9.0278C10.676 8.32213 11.788 7.9 13 7.9V6.9C11.5514 6.9 10.2196 7.40554 9.17324 8.24939L9.801 9.0278ZM13 7.9C15.8167 7.9 18.1 10.1833 18.1 13H19.1C19.1 9.63106 16.3689 6.9 13 6.9V7.9ZM18.1 13C18.1 15.8167 15.8167 18.1 13 18.1V19.1C16.3689 19.1 19.1 16.3689 19.1 13H18.1ZM13 18.1C10.1833 18.1 7.9 15.8167 7.9 13H6.9C6.9 16.3689 9.63106 19.1 13 19.1V18.1ZM7.9 13C7.9 11.788 8.32213 10.676 9.0278 9.801L8.24939 9.17324C7.40554 10.2196 6.9 11.5514 6.9 13H7.9ZM6.73234 8.28798L8.28504 9.84068L8.99215 9.13357L7.43945 7.58087L6.73234 8.28798ZM4.9999 9.10002C5.88478 9.10002 6.70554 8.81913 7.37594 8.3417L6.79585 7.52715C6.28924 7.88793 5.67008 8.10002 4.9999 8.10002V9.10002ZM0.899902 5.00002C0.899902 7.26439 2.73553 9.10002 4.9999 9.10002V8.10002C3.28782 8.10002 1.8999 6.71211 1.8999 5.00002H0.899902ZM13 8.1C10.2938 8.1 8.1 10.2938 8.1 13H9.1C9.1 10.8461 10.8461 9.1 13 9.1V8.1ZM17.9 13C17.9 10.2938 15.7062 8.1 13 8.1V9.1C15.1539 9.1 16.9 10.8461 16.9 13H17.9ZM13 17.9C15.7062 17.9 17.9 15.7062 17.9 13H16.9C16.9 15.1539 15.1539 16.9 13 16.9V17.9ZM8.1 13C8.1 15.7062 10.2938 17.9 13 17.9V16.9C10.8461 16.9 9.1 15.1539 9.1 13H8.1Z"
+            fill="white"
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_760_1602">
+            <rect width="20" height="20" fill="white" />
+          </clipPath>
+        </defs>
+      </svg>
+    </span>
+  )
+}
+
+export default NodeIcon

src/components/ConnectionPage/PairIcon.tsx

@@ -0,0 +1,81 @@
+function PairIcon() {
+  return (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M13.4517 10.8951L16.952 6.89508L17.2978 6.49996L16.952 6.10484L13.4517 2.10489L12.5486 2.89514L15.7032 6.49997L12.5486 10.1049L13.4517 10.8951ZM6.5487 9.10488L3.0484 13.1049L2.70264 13.5001L3.0484 13.8952L6.5487 17.8951L7.45176 17.1049L4.29722 13.5L7.45176 9.89512L6.5487 9.10488Z"
+        fill="#1B273D"
+        fillOpacity="0.7"
+      />
+      {/* <mask
+        id="mask0_760_2959"
+        style="mask-type:alpha"
+        maskUnits="userSpaceOnUse"
+        x="4"
+        y="5"
+        width="12"
+        height="3"
+      >
+      </mask> */}
+      <rect
+        x="4"
+        y="7.5"
+        width="2"
+        height="12"
+        transform="rotate(-90 4 7.5)"
+        fill="url(#paint0_linear_760_2959)"
+      />
+      <g mask="url(#mask0_760_2959)">
+        <path d="M4.5 6.50006L16 6.50006" stroke="#1B273D" strokeOpacity="0.7" strokeWidth="1.2" />
+      </g>
+      {/* <mask
+        id="mask1_760_2959"
+        style="mask-type:alpha"
+        maskUnits="userSpaceOnUse"
+        x="4"
+        y="12"
+        width="12"
+        height="3"
+      >
+      </mask> */}
+      <rect
+        x="16"
+        y="12.5"
+        width="2"
+        height="12"
+        transform="rotate(90 16 12.5)"
+        fill="url(#paint1_linear_760_2959)"
+      />
+      <g mask="url(#mask1_760_2959)">
+        <path d="M15.5 13.4999L4 13.4999" stroke="#1B273D" strokeOpacity="0.7" strokeWidth="1.2" />
+      </g>
+      <defs>
+        <linearGradient
+          id="paint0_linear_760_2959"
+          x1="5"
+          y1="8"
+          x2="5"
+          y2="13.5"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#09101C" stopOpacity="0" />
+          <stop offset="1" stopColor="#09101C" />
+        </linearGradient>
+        <linearGradient
+          id="paint1_linear_760_2959"
+          x1="17"
+          y1="13"
+          x2="17"
+          y2="18.5"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#09101C" stopOpacity="0" />
+          <stop offset="1" stopColor="#09101C" />
+        </linearGradient>
+      </defs>
+    </svg>
+  )
+}
+
+export default PairIcon

src/components/LayoutComponent/LayoutComponent.tsx

@@ -21,8 +21,8 @@ function LayoutRight() {
   return (
     <section className="layout-right">
       <div className="image-container">
-        <img src="src/assets/bg-img/landing-page-bg.png" alt="" />
+        {/* <img src="src/assets/bg-img/landing-page-bg.png" alt="" /> */}
-        {/* <img src="src/assets/bg-img/day-night-bg.png" alt="" /> */}
+        <img src="src/assets/bg-img/day-night-bg.png" alt="" />
         {/* <img src="src/assets/bg-img/key-lock-bg.png" alt="" /> */}
       </div>
     </section>

src/components/LayoutComponent/layout.css

@@ -9,6 +9,7 @@
 .layout-left {
     flex: 0 0 55%;
     max-width: 55%;
+    z-index: 2;
 }
 .container {
     display: flex;
@@ -21,13 +22,14 @@
     max-width: 70%;
     flex: 1 0 70%;
     display: flex;
-    flex-wrap: wrap;
+    /* flex-wrap: wrap; */
+    flex-direction: column; 
 }
 header {
     width: 100%;
     display: flex;
     justify-content: space-between;
-    align-items: center;
+    padding: 1.5rem 0;
 }
 header > div {
     display: flex;
@@ -49,8 +51,12 @@ header > div {
     padding: 4px 6px;
     margin-left: 10px;
 }
+.content {
+    flex-grow: 1;
+}
 .content .title {
     font-size: 27px;
+    font-weight: 600;
     margin-bottom: 0.25em;
 }
 .content .subtitle {
@@ -75,6 +81,7 @@ header > div {
     .layout-right {
         flex: 0 0 45%;
         max-width: 45%;
+        z-index: 0;
     }
     
     .image-container {

src/components/Logo.tsx

@@ -4,12 +4,7 @@ import Tag from './Tag'
 
 const Logo = () => {
   return (
-    <XStack
+    <XStack alignItems="center" space={'$2'}>
-      style={{
-        alignItems: 'center',
-      }}
-      space={'$2'}
-    >
       <Icon source={'/icons/marks.png'} width={45} height={50} />
       <Icon source={'/icons/nimbus.png'} width={80} height={16} />
       <Tag bc="#2A4AF5" text="BETA" />

src/components/Titles.tsx

@@ -1,32 +1,38 @@
 import { XStack, YStack } from 'tamagui'
-import Title from './Title'
-import SubTitle from './SubTitle'
 import IconButton from './IconButton'
+import { Text } from '@status-im/components'
 
 type TitlesProps = {
   title: string
   subtitle: string
+  button?: boolean
 }
 
-const Titles = ({ title, subtitle }: TitlesProps) => {
+const Titles = ({ title, subtitle, button }: TitlesProps) => {
   return (
     <YStack>
       <XStack justifyContent="space-between">
-        <Title color={'#09101C'}>{title}</Title>
+        <Text size={27} weight="semibold">
-        <IconButton
+          {title}
-          style={{
+        </Text>
-            backgroundColor: 'transparent',
+        {button ? (
-            border: '1px solid #DCE0E5',
+          <IconButton
-            color: '#09101C',
+            style={{
-          }}
+              backgroundColor: 'transparent',
-          size={'$3'}
+              border: '1px solid #DCE0E5',
-          icon={'/icons/reveal.png'}
+              color: '#09101C',
-          fontSize={'$5'}
+            }}
-        >
+            size={'$3'}
-          Advanced Settings
+            icon={'/icons/reveal.png'}
-        </IconButton>
+            fontSize={'$5'}
+          >
+            Advanced Settings
+          </IconButton>
+        ) : null}
       </XStack>
-      <SubTitle color={'#09101C'}>{subtitle}</SubTitle>
+      <Text size={15} weight="regular">
+        {subtitle}
+      </Text>
     </YStack>
   )
 }

src/index.css

@@ -42,7 +42,7 @@ a:hover {
 button {
   border-radius: 12px;
   border: 1px solid transparent;
-  padding: 0.6em 1.2em;
+  /* padding: 0.6em 1.2em; */
   font-size: 15px;
   font-weight: 500;
   font-family: inherit;