From eebd109d7c718c29b8f75ac14683740713c9be32 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Tue, 19 Dec 2023 13:34:44 +0200
Subject: [PATCH 1/3] fix-connect to stay on row

---
 src/components/General/LabelInputField.css    |  2 +-
 src/components/General/LabelInputField.tsx    |  9 +--
 .../ConnectDevicePage/ConnectDevicePage.tsx   | 64 +++++++++++++------
 3 files changed, 52 insertions(+), 23 deletions(-)

diff --git a/src/components/General/LabelInputField.css b/src/components/General/LabelInputField.css
index ea10cda9..77e4504e 100644
--- a/src/components/General/LabelInputField.css
+++ b/src/components/General/LabelInputField.css
@@ -2,5 +2,5 @@
   background-color: #fff;
   border-radius: 12px;
   margin-top: 8px;
-  width: 100%;
+ 
 }
diff --git a/src/components/General/LabelInputField.tsx b/src/components/General/LabelInputField.tsx
index f0c4619e..44e1f76c 100644
--- a/src/components/General/LabelInputField.tsx
+++ b/src/components/General/LabelInputField.tsx
@@ -5,16 +5,17 @@ import './LabelInputField.css'
 type LabelInputProps = {
   labelText: string
   placeholderText: string
+  width?: string
 }
 
-const LabelInputField = ({ labelText, placeholderText }: LabelInputProps) => {
+const LabelInputField = ({ labelText, placeholderText, width }: LabelInputProps) => {
   return (
-    <Label flexDirection="column" alignItems="flex-start" my={10} width={'100%'}>
+    <Label flexDirection="column" alignItems="flex-start" my={10} style={{ width: width }}>
       <Text size={13} weight="semibold" color={'#647084'}>
         {labelText}
       </Text>
-      <div className="input-container">
-        <StatusInput placeholder={placeholderText} width={'100%'} />
+      <div className="input-container" style={{ width: width }}>
+        <StatusInput placeholder={placeholderText} />
       </div>
     </Label>
   )
diff --git a/src/pages/ConnectDevicePage/ConnectDevicePage.tsx b/src/pages/ConnectDevicePage/ConnectDevicePage.tsx
index a882aaed..3802e78a 100644
--- a/src/pages/ConnectDevicePage/ConnectDevicePage.tsx
+++ b/src/pages/ConnectDevicePage/ConnectDevicePage.tsx
@@ -21,19 +21,23 @@ const ConnectDevicePage = () => {
     return () => window.removeEventListener('resize', handleResize)
   }, [])
 
-  const breakpoint = 768
+  const breakpoint = 268
 
   const responsiveXStackStyle = {
-    width: '100%',
+    space: '$4',
     alignItems: 'center',
-    justifyContent: 'space-between',
     flexDirection: windowWidth <= breakpoint ? 'column' : 'row',
-    flexWrap: windowWidth <= breakpoint ? 'wrap' : 'nowrap',
+    width: '55%',
+  }
+  const checkboxStackStyle = {
+    marginTop: '20px',
+    height: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
   }
-
   const responsiveInputStyle = {
-    width: windowWidth <= breakpoint ? '100%' : '40%',
-    marginBottom: windowWidth <= breakpoint ? '1rem' : '0',
+    marginBottom: windowWidth <= breakpoint ? '0.5rem' : '0',
+    width: '100%',
   }
 
   return (
@@ -50,19 +54,27 @@ const ConnectDevicePage = () => {
             title="Connect Device"
             subtitle="Configure your device to connect to the Nimbus Node Manager"
           />
-          <YStack my={16}>
-            <XStack style={responsiveXStackStyle}>
+          <YStack my={16} width={'50%'}>
+            <XStack style={responsiveXStackStyle} space={'$3'}>
               <Stack style={responsiveInputStyle}>
-                <LabelInputField labelText="Beacon Address" placeholderText="something" />
+                <LabelInputField
+                  labelText="Beacon Address"
+                  placeholderText="something"
+                  width="100%"
+                />
               </Stack>
               <Stack style={responsiveInputStyle}>
-                <LabelInputField labelText="Beacon Node Port" placeholderText="5052" />
+                <LabelInputField labelText="Beacon Node Port" placeholderText="5052" width="100%" />
               </Stack>
               <Stack style={responsiveInputStyle}>
-                <LabelInputField labelText="Client Validator Port" placeholderText="5052" />
+                <LabelInputField
+                  labelText="Client Validator Port"
+                  placeholderText="5052"
+                  width="100%"
+                />
               </Stack>
 
-              <YStack width={20}>
+              <YStack width={20} style={checkboxStackStyle}>
                 <Checkbox
                   id="port-checkbox"
                   variant="outline"
@@ -71,8 +83,12 @@ const ConnectDevicePage = () => {
                 />
               </YStack>
             </XStack>
-            <XStack width={'100%'} alignItems="center">
-              <LabelInputField labelText="API Token" placeholderText="****_*****_*****" />
+            <XStack alignItems="center" width="100%">
+              <LabelInputField
+                labelText="API Token"
+                placeholderText="****_*****_*****"
+                width="180%"
+              />
             </XStack>
           </YStack>
           <YStack my={16}>
@@ -83,9 +99,21 @@ const ConnectDevicePage = () => {
               <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 space style={{ justifyContent: 'space-between' }}>
+                <Stack width={'50%'}>
+                  <LabelInputField
+                    labelText="Device Name"
+                    placeholderText="Stake and chips"
+                    width="100%"
+                  />
+                </Stack>
+                <Stack width={'50%'}>
+                  <LabelInputField
+                    labelText="Device Color"
+                    placeholderText="#011892"
+                    width="100%"
+                  />
+                </Stack>
               </XStack>
             </YStack>
           </YStack>

From f249ff9ffa73205f30d31fb25c9f7741c45bb3b4 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Tue, 19 Dec 2023 13:50:51 +0200
Subject: [PATCH 2/3] Add device avatar

---
 .../General/CreateAvatar/CreateAvatar.tsx     |  2 +-
 .../ConnectDevicePage/ConnectDevicePage.tsx   | 26 ++-----------------
 2 files changed, 3 insertions(+), 25 deletions(-)

diff --git a/src/components/General/CreateAvatar/CreateAvatar.tsx b/src/components/General/CreateAvatar/CreateAvatar.tsx
index 4d32f865..0abf524e 100644
--- a/src/components/General/CreateAvatar/CreateAvatar.tsx
+++ b/src/components/General/CreateAvatar/CreateAvatar.tsx
@@ -33,7 +33,7 @@ const CreateAvatar = () => {
   return (
     <YStack>
       <XStack>
-        <LabelInputField labelText="Device Name" placeholderText="Stake and chips" />
+        <LabelInputField labelText="Device Name" placeholderText="Stake and chips" width="95%" />
       </XStack>
       <XStack space={'$3'} justifyContent={'space-between'}>
         <YStack>
diff --git a/src/pages/ConnectDevicePage/ConnectDevicePage.tsx b/src/pages/ConnectDevicePage/ConnectDevicePage.tsx
index 3802e78a..ef84bde7 100644
--- a/src/pages/ConnectDevicePage/ConnectDevicePage.tsx
+++ b/src/pages/ConnectDevicePage/ConnectDevicePage.tsx
@@ -7,6 +7,7 @@ import Titles from '../../components/General/Titles'
 import LabelInputField from '../../components/General/LabelInputField'
 import Header from '../../components/General/Header'
 import { NodeIcon } from '@status-im/icons'
+import CreateAvatar from '../../components/General/CreateAvatar/CreateAvatar'
 
 const ConnectDevicePage = () => {
   const [autoConnectChecked, setAutoConnectChecked] = useState(false)
@@ -92,30 +93,7 @@ const ConnectDevicePage = () => {
             </XStack>
           </YStack>
           <YStack my={16}>
-            <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 style={{ justifyContent: 'space-between' }}>
-                <Stack width={'50%'}>
-                  <LabelInputField
-                    labelText="Device Name"
-                    placeholderText="Stake and chips"
-                    width="100%"
-                  />
-                </Stack>
-                <Stack width={'50%'}>
-                  <LabelInputField
-                    labelText="Device Color"
-                    placeholderText="#011892"
-                    width="100%"
-                  />
-                </Stack>
-              </XStack>
-            </YStack>
+            <CreateAvatar></CreateAvatar>
           </YStack>
           <Separator alignSelf="stretch" borderColor={'#F0F2F5'} />
           <YStack my={16}>

From 1f505db9ec081b639477930e30d5306171ea4a13 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Wed, 20 Dec 2023 12:12:45 +0200
Subject: [PATCH 3/3] fix: button width and imports

---
 src/pages/ConnectDevicePage/ConnectDevicePage.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/pages/ConnectDevicePage/ConnectDevicePage.tsx b/src/pages/ConnectDevicePage/ConnectDevicePage.tsx
index ef84bde7..ec036f66 100644
--- a/src/pages/ConnectDevicePage/ConnectDevicePage.tsx
+++ b/src/pages/ConnectDevicePage/ConnectDevicePage.tsx
@@ -1,12 +1,13 @@
+import { NodeIcon } from '@status-im/icons'
 import { useEffect, useState } from 'react'
-import BreadcrumbBar from '../../components/General/BreadcrumbBar/BreadcrumbBar'
-import { Button as StatusButton, Text, Avatar, Checkbox } from '@status-im/components'
+import { Button as StatusButton, Text, Checkbox } from '@status-im/components'
 import { Article, Label, Separator, Stack, XStack, YStack } from 'tamagui'
+
+import BreadcrumbBar from '../../components/General/BreadcrumbBar/BreadcrumbBar'
 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'
 import CreateAvatar from '../../components/General/CreateAvatar/CreateAvatar'
 
 const ConnectDevicePage = () => {
@@ -117,7 +118,9 @@ const ConnectDevicePage = () => {
             </XStack>
             <Separator alignSelf="stretch" borderColor={'#F0F2F5'} />
           </YStack>
-          <StatusButton icon={<NodeIcon size={20} />}>Connect Device</StatusButton>
+          <div>
+            <StatusButton icon={<NodeIcon size={20} />}>Connect Device</StatusButton>
+          </div>
         </Article>
       </YStack>
     </PageWrapperShadow>