status-im/nimbus-gui
2
0
Fork 0
mirror of https://github.com/status-im/nimbus-gui.git synced 2025-02-03 23:24:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: create separate color picker component

Browse Source
This commit is contained in:
Ivana Andersson 2023-08-18 11:25:20 +03:00
parent a3b128053a
commit faad444ed4
2 changed files with 35 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/General/ColorPicker.tsx Normal file
View File

@ -0,0 +1,33 @@
import { useState } from 'react'
import { CirclePicker } from 'react-color'
import { XStack } from 'tamagui'
const ColorPicker = () => {
const [chosenColor, setChosenColor] = useState('#FFFFFF')
return (
<XStack my={10}>
<CirclePicker
width="80%"
circleSize={40}
circleSpacing={12}
colors={[
'#2A4AF5',
'#F6B03C',
'#7140FD',
'#2A799B',
'#EC266C',
'#1992D7',
'#FF7D46',
'#216266',
'#F66F8F',
'#C78F67',
'#CB6256',
]}
color={chosenColor}
onChange={color => setChosenColor(color.hex)}
/>
</XStack>
)
}
export default ColorPicker

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

@ -1,7 +1,6 @@
import { useState } from 'react'
import { Button as StatusButton, Tag, Text, Avatar, Checkbox } from '@status-im/components'
import { Label, Separator, XStack, YStack } from 'tamagui'
import { CirclePicker } from 'react-color'
import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow'
import NimbusLogo from '../../components/Logos/NimbusLogo'
import Titles from '../../components/General/Titles'
@ -10,10 +9,10 @@ import PairIcon from '../../components/Icons/PairIcon'
import CreateIcon from '../../components/Icons/CreateIcon'
import LabelInputField from '../../components/General/LabelInputField'
import ReactionIcon from '../../components/Icons/ReactionIcon'
import ColorPicker from '../../components/General/ColorPicker'
const CreateLocalNodePage = () => {
const [autoConnectChecked, setAutoConnectChecked] = useState(false)
const [chosenColor, setChosenColor] = useState('#FFFFFF')
return (
<PageWrapperShadow rightImageSrc="/background-images/day-night-bg.png">
@ -48,26 +47,7 @@ const CreateLocalNodePage = () => {
<Text size={13} weight="regular" color={'#647084'}>
Highlight Color
</Text>
<CirclePicker
width="80%"
circleSize={40}
circleSpacing={12}
colors={[
'#2A4AF5',
'#F6B03C',
'#7140FD',
'#2A799B',
'#EC266C',
'#1992D7',
'#FF7D46',
'#216266',
'#F66F8F',
'#C78F67',
'#CB6256',
]}
color={chosenColor}
onChange={color => setChosenColor(color.hex)}
/>
<ColorPicker />
</YStack>
</XStack>
</YStack>