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

Add color picker functionality

.github/workflows/ui-tests.yaml

@@ -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({

src/components/General/ColorPicker.tsx

@@ -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

src/components/General/ColorPicker/ColorPicker.css

@@ -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;
+}

src/components/General/ColorPicker/ColorPicker.tsx

@@ -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)

src/components/General/CreateAvatar/CreateAvatar.css

@@ -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;
+}

src/components/General/CreateAvatar/CreateAvatar.tsx

@@ -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

src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx

@@ -1,17 +1,14 @@
 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 PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow'
 import Header from '../../components/General/Header'
 import Titles from '../../components/General/Titles'
-import LabelInputField from '../../components/General/LabelInputField'
+import CreateAvatar from '../../components/General/CreateAvatar/CreateAvatar'
-import ColorPicker from '../../components/General/ColorPicker'
-import EmojiPickerDialog from '../../components/General/EmojiPickerDialog'
 
 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>
+          <CreateAvatar />
-              <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}>
             <Text size={19} weight="semibold">
               Settings

src/pages/PairDevice/CreateAvatar.tsx

@@ -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

src/pages/PairDevice/PairDevice.tsx

@@ -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'