status-im/nimbus-gui
2
0
Fork 0
mirror of https://github.com/status-im/nimbus-gui.git synced 2025-02-01 14:15:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add device avatar

Browse Source
This commit is contained in:
Hristo Nedelkov 2023-12-19 13:50:51 +02:00
parent eebd109d7c
commit f249ff9ffa
2 changed files with 3 additions and 25 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 ( return (
<YStack> <YStack>
<XStack> <XStack>
<LabelInputField labelText="Device Name" placeholderText="Stake and chips" /> <LabelInputField labelText="Device Name" placeholderText="Stake and chips" width="95%" />
</XStack> </XStack>
<XStack space={'$3'} justifyContent={'space-between'}> <XStack space={'$3'} justifyContent={'space-between'}>
<YStack> <YStack>

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

@ -7,6 +7,7 @@ import Titles from '../../components/General/Titles'
import LabelInputField from '../../components/General/LabelInputField' import LabelInputField from '../../components/General/LabelInputField'
import Header from '../../components/General/Header' import Header from '../../components/General/Header'
import { NodeIcon } from '@status-im/icons' import { NodeIcon } from '@status-im/icons'
import CreateAvatar from '../../components/General/CreateAvatar/CreateAvatar'
const ConnectDevicePage = () => { const ConnectDevicePage = () => {
const [autoConnectChecked, setAutoConnectChecked] = useState(false) const [autoConnectChecked, setAutoConnectChecked] = useState(false)
@ -92,30 +93,7 @@ const ConnectDevicePage = () => {
</XStack> </XStack>
</YStack> </YStack>
<YStack my={16}> <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 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> </YStack>
<Separator alignSelf="stretch" borderColor={'#F0F2F5'} /> <Separator alignSelf="stretch" borderColor={'#F0F2F5'} />
<YStack my={16}> <YStack my={16}>