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

Merge pull request #12 from nimbus-gui/ia.color-picker-functionality 

Add color picker functionality
This commit is contained in:
Ivana Andersson 2023-08-28 09:14:23 +03:00 committed by GitHub
parent e8d7229f76 3d0eea506a
commit 831cdc8fa1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 155 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.github/workflows/ui-tests.yaml vendored
View File

@ -37,7 +37,7 @@ jobs:
- uses: actions/checkout@v2
- name: Get PR number
id: pull_request
run: echo "::set-output name=number::$(gh pr view --json number -q .number || echo "")"
run: echo "::set-output name=number::$(gh pr view --json number -q .number || echo "null")"
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
- uses: actions/setup-node@v2
@ -66,6 +66,10 @@ jobs:
with:
github-token: ${{ secrets.GITHUB_TOKEN }}
script: |
const pullRequestNumber = ${{ steps.pull_request.outputs.number }};
if (pullRequestNumber === null) {
return;
}
const fs = require('fs');
const deploymentUrl = fs.readFileSync('_vercel-deployment-url', 'utf8');
await github.rest.issues.createComment({

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

@ -1,33 +0,0 @@
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

40
src/components/General/ColorPicker/ColorPicker.css Normal file
View File

@ -0,0 +1,40 @@
.color-picker-button {
width: 40px;
height: 40px;
border-radius: 50%;
margin-bottom: 10px;
margin-right: 10px;
position: relative;
outline: none;
border: none;
}
.color-picker-button::before ,
.color-picker-button::after {
display: block;
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
transform-origin: center;
opacity: 0;
transition: 120ms opacity ease-in-out;
}
.color-picker-button::before {
content: "\2713";
font-size: 25px;
color: white;
}
.color-picker-button::after {
width: 40px;
height: 40px;
border-radius: 50%;
border: 3px solid currentColor;
}
.color-picker-button:focus::before,
.color-picker-button:focus::after,
.color-picker-button:hover::after {
opacity: 1;
}

0
src/components/General/ColorPicker.stories.tsx → src/components/General/ColorPicker/ColorPicker.stories.tsx
View File

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

@ -0,0 +1,41 @@
import { XStack } from 'tamagui'
import { CustomPicker } from 'react-color'
import './ColorPicker.css'
type ColorPickerProps = {
setChosenColor: (a: string) => void
}
const ColorPicker = ({ setChosenColor }: ColorPickerProps) => {
const colors = [
'#2A4AF5',
'#F6B03C',
'#7140FD',
'#2A799B',
'#EC266C',
'#1992D7',
'#FF7D46',
'#216266',
'#F66F8F',
'#C78F67',
'#CB6256',
]
return (
<>
<XStack my={10} flexWrap="wrap">
{colors.map((color, i) => (
<button
key={i}
type="button"
className="color-picker-button"
onClick={() => setChosenColor(color)}
style={{ background: color, color: color }}
></button>
))}
</XStack>
</>
)
}
export default CustomPicker(ColorPicker)

10
src/components/General/CreateAvatar/CreateAvatar.css Normal file
View File

@ -0,0 +1,10 @@
.device-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
margin-right: -30px;
}

52
src/components/General/CreateAvatar/CreateAvatar.tsx Normal file
View File

@ -0,0 +1,52 @@
import { useState } from 'react'
import { XStack, YStack } from 'tamagui'
import { Avatar, Text } from '@status-im/components'
import { ReactionIcon } from '@status-im/icons'
import './CreateAvatar.css'
import LabelInputField from '../LabelInputField'
import ColorPicker from '../ColorPicker/ColorPicker'
import EmojiPickerDialog from '../EmojiPickerDialog'
const CreateAvatar = () => {
const [chosenColor, setChosenColor] = useState('#2A4AF5')
const [isEmojiDialogOpen, setIsEmojiDialogOpen] = useState(false)
return (
<YStack my={16}>
<XStack space>
<LabelInputField labelText="Device Name" placeholderText="Stake and chips" />
</XStack>
<XStack my={10} justifyContent={'space-between'}>
<YStack mr={60}>
<Text size={13} weight="regular" color={'#647084'}>
Device Avatar
</Text>
<XStack my={10} alignItems={'end'}>
<div className="device-avatar" style={{ background: chosenColor }}>
<img src="./icons/nodes-app-icon.png" alt="" />
</div>
<Avatar
type="icon"
size={32}
icon={
<ReactionIcon
size={20}
onClick={() => setIsEmojiDialogOpen(prev => !prev)}
style={{ cursor: 'pointer' }}
/>
}
/>
{isEmojiDialogOpen && <EmojiPickerDialog emojiStyle="TWITTER" />}
</XStack>
</YStack>
<YStack flexWrap="wrap" width="80%">
<Text size={13} weight="regular" color={'#647084'}>
Highlight Color
</Text>
<ColorPicker setChosenColor={setChosenColor} />
</YStack>
</XStack>
</YStack>
)
}
export default CreateAvatar

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

@ -1,17 +1,14 @@
import { useState } from 'react'
import { Button as StatusButton, Text, Avatar, Checkbox } from '@status-im/components'
import { NodeIcon, ReactionIcon } from '@status-im/icons'
import { Button as StatusButton, Text, Checkbox } from '@status-im/components'
import { NodeIcon } from '@status-im/icons'
import { Label, Separator, XStack, YStack } from 'tamagui'
import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow'
import Header from '../../components/General/Header'
import Titles from '../../components/General/Titles'
import LabelInputField from '../../components/General/LabelInputField'
import ColorPicker from '../../components/General/ColorPicker'
import EmojiPickerDialog from '../../components/General/EmojiPickerDialog'
import CreateAvatar from '../../components/General/CreateAvatar/CreateAvatar'
const CreateLocalNodePage = () => {
const [autoConnectChecked, setAutoConnectChecked] = useState(false)
const [isEmojiDialogOpen, setIsEmojiDialogOpen] = useState(false)
return (
<PageWrapperShadow rightImageSrc="./background-images/day-night-bg.png" rightImageLogo={true}>
@ -22,39 +19,9 @@ const CreateLocalNodePage = () => {
title="Create Local Node"
subtitle="Configure your device to start Staking on Nimbus"
/>
<YStack my={16}>
<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>
<CreateAvatar />
<YStack my={16}>
<Text size={19} weight="semibold">
Settings

34
src/pages/PairDevice/CreateAvatar.tsx
View File

@ -1,34 +0,0 @@
import { XStack, YStack } from 'tamagui'
import LabelInputField from '../../components/General/LabelInputField'
import { Avatar, Text } from '@status-im/components'
import ColorPicker from '../../components/General/ColorPicker'
import { ReactionIcon } from '@status-im/icons'
const CreateAvatar = () => {
return (
<YStack my={16}>
<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" />
<ReactionIcon size={20} />
</XStack>
</YStack>
<YStack>
<Text size={13} weight="regular" color={'#647084'}>
Highlight Color
</Text>
<ColorPicker />
</YStack>
</XStack>
</YStack>
)
}
export default CreateAvatar

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

@ -6,7 +6,7 @@ import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow'
import SyncStatus from './SyncStatus'
import Titles from '../../components/General/Titles'
import PairedSuccessfully from './PairedSuccessfully'
import CreateAvatar from './CreateAvatar'
import CreateAvatar from '../../components/General/CreateAvatar/CreateAvatar'
import GenerateId from './GenerateId'
import { NodeIcon } from '@status-im/icons'
import Header from '../../components/General/Header'