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

feat: add create avatar component to create local node page

This commit is contained in:
Ivana Andersson 2023-08-25 11:08:04 +03:00
parent 29f6260eab
commit b63279a931
1 changed files with 5 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx
View File

@ -1,17 +1,15 @@
import { useState } from 'react' import { useState } from 'react'
import { Button as StatusButton, Text, Avatar, Checkbox } from '@status-im/components' import { Button as StatusButton, Text, Checkbox } from '@status-im/components'
import { NodeIcon, ReactionIcon } from '@status-im/icons' import { NodeIcon } from '@status-im/icons'
import { Label, Separator, XStack, YStack } from 'tamagui' import { Label, Separator, XStack, YStack } from 'tamagui'
import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow' import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow'
import Header from '../../components/General/Header' import Header from '../../components/General/Header'
import Titles from '../../components/General/Titles' import Titles from '../../components/General/Titles'
import LabelInputField from '../../components/General/LabelInputField' // import LabelInputField from '../../components/General/LabelInputField'
import ColorPicker from '../../components/General/ColorPicker/ColorPicker' import CreateAvatar from '../../components/General/CreateAvatar/CreateAvatar'
import EmojiPickerDialog from '../../components/General/EmojiPickerDialog'
const CreateLocalNodePage = () => { const CreateLocalNodePage = () => {
const [autoConnectChecked, setAutoConnectChecked] = useState(false) const [autoConnectChecked, setAutoConnectChecked] = useState(false)
const [isEmojiDialogOpen, setIsEmojiDialogOpen] = useState(false)
return ( return (
<PageWrapperShadow rightImageSrc="./background-images/day-night-bg.png" rightImageLogo={true}> <PageWrapperShadow rightImageSrc="./background-images/day-night-bg.png" rightImageLogo={true}>
@ -22,39 +20,7 @@ const CreateLocalNodePage = () => {
title="Create Local Node" title="Create Local Node"
subtitle="Configure your device to start Staking on Nimbus" subtitle="Configure your device to start Staking on Nimbus"
/> />
<YStack my={16}> <CreateAvatar />
<XStack space>
<LabelInputField labelText="Device Name" placeholderText="Stake and chips" />
</XStack>
<XStack my={10} justifyContent={'space-between'}>
<YStack mr={30}>
<Text size={13} weight="regular" color={'#647084'}>
Device Avatar
</Text>
<XStack my={10}>
<Avatar type="account" size={80} name="Device Avatar" />
<Avatar
type="icon"
size={32}
icon={
<ReactionIcon
size={20}
onClick={() => setIsEmojiDialogOpen(prev => !prev)}
style={{ cursor: 'pointer' }}
/>
}
/>
{isEmojiDialogOpen && <EmojiPickerDialog emojiStyle="TWITTER" />}
</XStack>
</YStack>
<YStack>
<Text size={13} weight="regular" color={'#647084'}>
Highlight Color
</Text>
<ColorPicker />
</YStack>
</XStack>
</YStack>
<YStack my={16}> <YStack my={16}>
<Text size={19} weight="semibold"> <Text size={19} weight="semibold">
Settings Settings