Merge pull request #33 from nimbus-gui/hn.Fix-connect-device-responsive

Fix connect device responsive #85

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>

src/components/General/LabelInputField.css

@@ -2,5 +2,5 @@
   background-color: #fff;
   border-radius: 12px;
   margin-top: 8px;
-  width: 100%;
+ 
 }

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">
+      <div className="input-container" style={{ width: width }}>
-        <StatusInput placeholder={placeholderText} width={'100%'} />
+        <StatusInput placeholder={placeholderText} />
       </div>
     </Label>
   )

src/pages/ConnectDevicePage/ConnectDevicePage.tsx

@@ -1,12 +1,14 @@
+import { NodeIcon } from '@status-im/icons'
 import { useEffect, useState } from 'react'
-import BreadcrumbBar from '../../components/General/BreadcrumbBar/BreadcrumbBar'
+import { Button as StatusButton, Text, Checkbox } from '@status-im/components'
-import { Button as StatusButton, Text, Avatar, 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 = () => {
   const [autoConnectChecked, setAutoConnectChecked] = useState(false)
@@ -21,19 +23,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 ? '0.5rem' : '0',
-    marginBottom: windowWidth <= breakpoint ? '1rem' : '0',
+    width: '100%',
   }
 
   return (
@@ -50,19 +56,27 @@ const ConnectDevicePage = () => {
             title="Connect Device"
             subtitle="Configure your device to connect to the Nimbus Node Manager"
           />
-          <YStack my={16}>
+          <YStack my={16} width={'50%'}>
-            <XStack style={responsiveXStackStyle}>
+            <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,23 +85,16 @@ const ConnectDevicePage = () => {
                 />
               </YStack>
             </XStack>
-            <XStack width={'100%'} alignItems="center">
+            <XStack alignItems="center" width="100%">
-              <LabelInputField labelText="API Token" placeholderText="****_*****_*****" />
+              <LabelInputField
+                labelText="API Token"
+                placeholderText="****_*****_*****"
+                width="180%"
+              />
             </XStack>
           </YStack>
           <YStack my={16}>
-            <YStack>
+            <CreateAvatar></CreateAvatar>
-              <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>
           </YStack>
           <Separator alignSelf="stretch" borderColor={'#F0F2F5'} />
           <YStack my={16}>
@@ -111,7 +118,9 @@ const ConnectDevicePage = () => {
             </XStack>
             <Separator alignSelf="stretch" borderColor={'#F0F2F5'} />
           </YStack>
+          <div>
             <StatusButton icon={<NodeIcon size={20} />}>Connect Device</StatusButton>
+          </div>
         </Article>
       </YStack>
     </PageWrapperShadow>