status-im
/
nimbus-gui
mirror of https://github.com/status-im/nimbus-gui.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

style: format

This commit is contained in:
Rickard Andersson 2023-09-26 13:01:02 +03:00
parent 481113a8f3
commit fb94ca76d5
6 changed files with 246 additions and 188 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/pages/ConnectExistingInstance/BeaconAddress.tsx
View File

@ -1,6 +1,6 @@
import { Checkbox, Input, Text } from "@status-im/components"
import { useState } from "react"
import { Stack, Switch, XStack, YStack } from "tamagui"
import { Checkbox, Input, Text } from '@status-im/components'
import { useState } from 'react'
import { Stack, Switch, XStack, YStack } from 'tamagui'
const BeaconAddress = () => {
const [isBeaconSwitchOn, setIsBeaconSwitchOn] = useState(false)
@ -13,12 +13,31 @@ const BeaconAddress = () => {
<XStack justifyContent={'space-between'}>
<YStack space={'$2'}>
<YStack>
<Text size={13} color={'#647084'} weight={'semibold'}> Protocol </Text>
<Text size={11} color={'#647084'} weight={'regular'}> (HTTP/HTTPS)</Text>
<Text size={13} color={'#647084'} weight={'semibold'}>
{' '}
Protocol{' '}
</Text>
<Text size={11} color={'#647084'} weight={'regular'}>
{' '}
(HTTP/HTTPS)
</Text>
</YStack>
<Switch size="$1" style={isBeaconSwitchOn ? { backgroundColor: '#2A4AF5' } : { backgroundColor: 'grey' }} checked={isBeaconSwitchOn} onCheckedChange={() => setIsBeaconSwitchOn(prev => !prev)}>
<Switch.Thumb style={{ right: 7, bottom: 3, backgroundColor: '#fff', height: '16px', width: '16px' }} />
<Switch
size="$1"
style={isBeaconSwitchOn ? { backgroundColor: '#2A4AF5' } : { backgroundColor: 'grey' }}
checked={isBeaconSwitchOn}
onCheckedChange={() => setIsBeaconSwitchOn(prev => !prev)}
>
<Switch.Thumb
style={{
right: 7,
bottom: 3,
backgroundColor: '#fff',
height: '16px',
width: '16px',
}}
/>
</Switch>
</YStack>
<YStack space={'$2'}>
@ -28,7 +47,9 @@ const BeaconAddress = () => {
<Input
placeholder={''}
value={inputAdress}
onChangeText={(e) => { setInputAdress(e) }}
onChangeText={e => {
setInputAdress(e)
}}
/>
</YStack>
@ -39,12 +60,19 @@ const BeaconAddress = () => {
<Input
placeholder={''}
value={vcPort}
onChangeText={(e) => { setVcPort(e) }}
onChangeText={e => {
setVcPort(e)
}}
/>
</YStack>
<Stack style={{ alignItems: 'center', justifyContent: 'center' }} height={'100%'} marginTop={'10px'} width={'fit-content'} >
<Stack
style={{ alignItems: 'center', justifyContent: 'center' }}
height={'100%'}
marginTop={'10px'}
width={'fit-content'}
>
<Checkbox
id='checkforaddress'
id="checkforaddress"
variant="outline"
selected={isClientAddressChecked}
onCheckedChange={() => setIsClientAddressChecked(prev => !prev)}

51
src/pages/ConnectExistingInstance/ClientAddressRow.tsx
View File

@ -1,6 +1,6 @@
import { Checkbox, Input, Text } from "@status-im/components"
import { useState } from "react"
import { Stack, Switch, XStack, YStack } from "tamagui"
import { Checkbox, Input, Text } from '@status-im/components'
import { useState } from 'react'
import { Stack, Switch, XStack, YStack } from 'tamagui'
const ClientAddressRow = () => {
const [isBeaconSwitchOn, setIsBeaconSwitchOn] = useState(false)
@ -13,11 +13,30 @@ const ClientAddressRow = () => {
<XStack justifyContent={'space-between'}>
<YStack space={'$2'}>
<YStack>
<Text size={13} color={'#647084'} weight={'semibold'}> Protocol </Text>
<Text size={11} color={'#647084'} weight={'regular'}> (HTTP/HTTPS)</Text>
<Text size={13} color={'#647084'} weight={'semibold'}>
{' '}
Protocol{' '}
</Text>
<Text size={11} color={'#647084'} weight={'regular'}>
{' '}
(HTTP/HTTPS)
</Text>
</YStack>
<Switch size="$1" style={isBeaconSwitchOn ? { backgroundColor: '#2A4AF5' } : { backgroundColor: 'grey' }} checked={isBeaconSwitchOn} onCheckedChange={() => setIsBeaconSwitchOn(prev => !prev)}>
<Switch.Thumb style={{ right: 7, bottom: 3, backgroundColor: '#fff', height: '16px', width: '16px' }} />
<Switch
size="$1"
style={isBeaconSwitchOn ? { backgroundColor: '#2A4AF5' } : { backgroundColor: 'grey' }}
checked={isBeaconSwitchOn}
onCheckedChange={() => setIsBeaconSwitchOn(prev => !prev)}
>
<Switch.Thumb
style={{
right: 7,
bottom: 3,
backgroundColor: '#fff',
height: '16px',
width: '16px',
}}
/>
</Switch>
</YStack>
<YStack space={'$2'}>
@ -27,7 +46,9 @@ const ClientAddressRow = () => {
<Input
placeholder={''}
value={inputAdress}
onChangeText={(e) => { setInputAdress(e) }}
onChangeText={e => {
setInputAdress(e)
}}
/>
</YStack>
@ -38,17 +59,23 @@ const ClientAddressRow = () => {
<Input
placeholder={''}
value={vcPort}
onChangeText={(e) => { setVcPort(e) }}
onChangeText={e => {
setVcPort(e)
}}
/>
</YStack>
<Stack style={{ alignItems: 'center', justifyContent: 'center' }} height={'100%'} marginTop={'10px'} width={'fit-content'} >
<Stack
style={{ alignItems: 'center', justifyContent: 'center' }}
height={'100%'}
marginTop={'10px'}
width={'fit-content'}
>
<Checkbox
id='checkforaddress'
id="checkforaddress"
variant="outline"
selected={isClientAddressChecked}
onCheckedChange={() => setIsClientAddressChecked(prev => !prev)}
size={20}
/>
</Stack>
</XStack>

18
src/pages/ConnectExistingInstance/ConnectExistingInstance.tsx
View File

@ -27,17 +27,15 @@ const ConnectExistingInstance = () => {
}}
>
<Header selectedTag="pair" />
<Titles title="Connect to existing Nimbus Instance" subtitle="Pair your existing device to the Nimbus Node Manager " />
<Titles
title="Connect to existing Nimbus Instance"
subtitle="Pair your existing device to the Nimbus Node Manager "
/>
<XStack style={{ justifyContent: 'space-between' }}>
<Text size={19} weight={'semibold'} color="#09101C">
Connect via IP
</Text>
<Button
variant="grey"
size={24}
icon={<SettingsIcon size={20} />}
>
<Button variant="grey" size={24} icon={<SettingsIcon size={20} />}>
Advanced
</Button>
</XStack>
@ -67,11 +65,13 @@ const ConnectExistingInstance = () => {
Advanced Settings
</Text>
<XStack space={'$4'}>
<Button icon={<CompleteIdIcon size={20} color='#2A4AF5' />} variant='outline' >Pair with ID </Button>
<Button icon={<CompleteIdIcon size={20} color="#2A4AF5" />} variant="outline">
Pair with ID{' '}
</Button>
</XStack>
<Separator borderColor={'#e3e3e3'} />
<XStack>
<Button icon={<NodeIcon size={20} />} variant='blue' >
<Button icon={<NodeIcon size={20} />} variant="blue">
Continue
</Button>
</XStack>

5
src/pages/PairDevice/PairDevice.tsx
View File

@ -44,7 +44,10 @@ const PairDevice = () => {
Advanced Settings
</Text>
<XStack space={'$4'}>
<Button icon={<Icon src='/icons/connection-blue.svg' width={20} />} variant='outline' > Connect via IP </Button>
<Button icon={<Icon src="/icons/connection-blue.svg" width={20} />} variant="outline">
{' '}
Connect via IP{' '}
</Button>
</XStack>
{isPaired && <CreateAvatar />}
<Separator borderColor={'#e3e3e3'} />