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 react-color for the color picker component

This commit is contained in:
Ivana Andersson 2023-08-16 17:24:38 +03:00
parent 897515da60
commit 4679bea9b1
3 changed files with 101 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -28,6 +28,7 @@
"@types/react-dom": "18",
"expo-modules-core": "^1.5.9",
"react": "18",
"react-color": "^2.19.3",
"react-dom": "18",
"react-native": "^0.72.3",
"react-native-svg": "^13.10.0",
@ -46,6 +47,7 @@
"@storybook/react-vite": "^7.2.0",
"@storybook/test-runner": "^0.12.0",
"@storybook/testing-library": "^0.2.0",
"@types/react-color": "^3.0.6",
"@typescript-eslint/eslint-plugin": "^6.0.0",
"@typescript-eslint/parser": "^6.0.0",
"@vitejs/plugin-react": "^4.0.3",

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

@ -1,6 +1,7 @@
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'
@ -33,7 +34,7 @@ const CreateLocalNodePage = () => {
<LabelInputField labelText="Device Name" placeholderText="Stake and chips" />
</XStack>
<XStack my={10} justifyContent={'space-between'}>
<YStack>
<YStack mr={30}>
<Text size={13} weight="regular" color={'#647084'}>
Device Avatar
</Text>
@ -46,6 +47,24 @@ 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',
]}
/>
</YStack>
</XStack>
</YStack>

81
yarn.lock
View File

@ -2158,6 +2158,15 @@ __metadata:
languageName: node
linkType: hard
"@icons/material@npm:^0.2.4":
version: 0.2.4
resolution: "@icons/material@npm:0.2.4"
peerDependencies:
react: "*"
checksum: 24baa360cb83f7e1a9e6784ac11185d57eb895b0efd3070ec915693378330f35ff9feb248f650b9649fa3e1045601286585dc05795a4c734d4849b33900351ee
languageName: node
linkType: hard
"@isaacs/cliui@npm:^8.0.2":
version: 8.0.2
resolution: "@isaacs/cliui@npm:8.0.2"
@ -7033,6 +7042,16 @@ __metadata:
languageName: node
linkType: hard
"@types/react-color@npm:^3.0.6":
version: 3.0.6
resolution: "@types/react-color@npm:3.0.6"
dependencies:
"@types/react": "*"
"@types/reactcss": "*"
checksum: 8cd881d6eb725190be942c1d71f7917d3dd1b418417740f64fa6c03ae3ba16cb91d07c4b3b348cf5bae20071c8ca5d4aaf514c9a5318077d5e50bd782a5e8da2
languageName: node
linkType: hard
"@types/react-dom@npm:18":
version: 18.2.7
resolution: "@types/react-dom@npm:18.2.7"
@ -7062,6 +7081,15 @@ __metadata:
languageName: node
linkType: hard
"@types/reactcss@npm:*":
version: 1.2.6
resolution: "@types/reactcss@npm:1.2.6"
dependencies:
"@types/react": "*"
checksum: f4711d707a1af653178c8941080e989a945feb0c529d848fed36687ee5e8a462cda183383caadf8848497b5c03bec16e6cdf22fc70462913d8d706cabb597130
languageName: node
linkType: hard
"@types/resolve@npm:1.20.2":
version: 1.20.2
resolution: "@types/resolve@npm:1.20.2"
@ -12820,6 +12848,13 @@ __metadata:
languageName: node
linkType: hard
"lodash-es@npm:^4.17.15":
version: 4.17.21
resolution: "lodash-es@npm:4.17.21"
checksum: 05cbffad6e2adbb331a4e16fbd826e7faee403a1a04873b82b42c0f22090f280839f85b95393f487c1303c8a3d2a010048bf06151a6cbe03eee4d388fb0a12d2
languageName: node
linkType: hard
"lodash.debounce@npm:^4.0.8":
version: 4.0.8
resolution: "lodash.debounce@npm:4.0.8"
@ -12848,7 +12883,7 @@ __metadata:
languageName: node
linkType: hard
"lodash@npm:^4.17.15, lodash@npm:^4.17.21":
"lodash@npm:^4.0.1, lodash@npm:^4.17.15, lodash@npm:^4.17.21":
version: 4.17.21
resolution: "lodash@npm:4.17.21"
checksum: eb835a2e51d381e561e508ce932ea50a8e5a68f4ebdd771ea240d3048244a8d13658acbd502cd4829768c56f2e16bdd4340b9ea141297d472517b83868e677f7
@ -13024,6 +13059,13 @@ __metadata:
languageName: node
linkType: hard
"material-colors@npm:^1.2.1":
version: 1.2.6
resolution: "material-colors@npm:1.2.6"
checksum: 72d005ccccb82bab68eef3cd757e802668634fc86976dedb9fc564ce994f2d3258273766b7efecb7404a0031969e2d72201a1b74169763f0a53c0dd8d649209f
languageName: node
linkType: hard
"mdast-util-definitions@npm:^4.0.0":
version: 4.0.0
resolution: "mdast-util-definitions@npm:4.0.0"
@ -13717,6 +13759,7 @@ __metadata:
"@tamagui/react-17-patch": 1.36.4
"@tamagui/vite-plugin": 1.36.4
"@types/react": 18
"@types/react-color": ^3.0.6
"@types/react-dom": 18
"@typescript-eslint/eslint-plugin": ^6.0.0
"@typescript-eslint/parser": ^6.0.0
@ -13728,6 +13771,7 @@ __metadata:
expo-modules-core: ^1.5.9
prettier: ^3.0.1
react: 18
react-color: ^2.19.3
react-dom: 18
react-native: ^0.72.3
react-native-svg: ^13.10.0
@ -14585,7 +14629,7 @@ __metadata:
languageName: node
linkType: hard
"prop-types@npm:*, prop-types@npm:^15.7.2":
"prop-types@npm:*, prop-types@npm:^15.5.10, prop-types@npm:^15.7.2":
version: 15.8.1
resolution: "prop-types@npm:15.8.1"
dependencies:
@ -14729,6 +14773,23 @@ __metadata:
languageName: node
linkType: hard
"react-color@npm:^2.19.3":
version: 2.19.3
resolution: "react-color@npm:2.19.3"
dependencies:
"@icons/material": ^0.2.4
lodash: ^4.17.15
lodash-es: ^4.17.15
material-colors: ^1.2.1
prop-types: ^15.5.10
reactcss: ^1.2.0
tinycolor2: ^1.4.1
peerDependencies:
react: "*"
checksum: 40b49e1aa2ab27a099cc37a3fa2d5bb906b8def4dbe2d922c0e42365e386d82b03f9b06a2b29a44a51f1e114cef72e61c0ba0740581a128d951936ea4617429b
languageName: node
linkType: hard
"react-colorful@npm:^5.1.2":
version: 5.6.1
resolution: "react-colorful@npm:5.6.1"
@ -15109,6 +15170,15 @@ __metadata:
languageName: node
linkType: hard
"reactcss@npm:^1.2.0":
version: 1.2.3
resolution: "reactcss@npm:1.2.3"
dependencies:
lodash: ^4.0.1
checksum: c53e386a0881f1477e1cff661f6a6ad4c662230941f3827862193ac30f9b75cdf7bc7b4c7e5ca543d3e4e80fee1a3e9fa0056c206b1c0423726c41773ab3fe45
languageName: node
linkType: hard
"read-pkg-up@npm:^7.0.1":
version: 7.0.1
resolution: "read-pkg-up@npm:7.0.1"
@ -16391,6 +16461,13 @@ __metadata:
languageName: node
linkType: hard
"tinycolor2@npm:^1.4.1":
version: 1.6.0
resolution: "tinycolor2@npm:1.6.0"
checksum: 6df4d07fceeedc0a878d7bac47e2cd47c1ceeb1078340a9eb8a295bc0651e17c750f73d47b3028d829f30b85c15e0572c0fd4142083e4c21a30a597e47f47230
languageName: node
linkType: hard
"tmpl@npm:1.0.5":
version: 1.0.5
resolution: "tmpl@npm:1.0.5"