status-im/nimbus-gui
2
0
Fork 0
mirror of https://github.com/status-im/nimbus-gui.git synced 2025-02-27 18:40:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Fix connect device responsive #85
This commit is contained in:
Hristo Nedelkov 2024-01-05 14:54:48 +02:00 committed by GitHub
commit 9db4e35425
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 47 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/General/CreateAvatar/CreateAvatar.tsx
View File

@ -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>

2
src/components/General/LabelInputField.css
View File

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

9
src/components/General/LabelInputField.tsx
View File

@ -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>
)

71
src/pages/ConnectDevicePage/ConnectDevicePage.tsx
View File

@ -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, 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 = () => {
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 ? '1rem' : '0',
marginBottom: windowWidth <= breakpoint ? '0.5rem' : '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}>
<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,23 +85,16 @@ 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}>
<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>
<CreateAvatar></CreateAvatar>
</YStack>
<Separator alignSelf="stretch" borderColor={'#F0F2F5'} />
<YStack my={16}>
@ -111,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>