Improve color selector

components/Colors.tsx

@@ -0,0 +1,45 @@
+import React, {useState} from 'react'
+import {RadioGroup} from '@headlessui/react'
+import {COLORS, rgbToHex} from "../src/colors";
+
+interface ColorsProps {
+    initialValue: COLORS,
+    onChange(value: COLORS): void;
+}
+
+function Colors(props: ColorsProps): JSX.Element {
+    let [color, setColor] = useState(props.initialValue)
+
+    return (
+        <RadioGroup<"div", COLORS> 
+            className="flex flex-wrap" value={color}
+            onChange={function (value) {
+                setColor(value);
+                props.onChange(value);
+            }
+        }>
+            {Object.values(COLORS).map((color) => {
+                return (
+                    <RadioGroup.Option value={color} key={color} className="outline-none">
+                        {({checked}) => (
+                            <div
+                                key={color}
+                                className={`${color !== COLORS.WHITE ? 'ring-white' : 'ring-black'} ring-2 shadow-xl cursor-pointer rounded-md w-10 h-10 flex items-center justify-center m-2`}
+                                style={{backgroundColor: rgbToHex(color), WebkitAppearance: 'none'}}
+                            >
+                                {checked &&
+                                    <svg className={`${color !== COLORS.WHITE ? 'text-white' : 'text-black'} h-6 w-6`} fill="none"
+                                        viewBox="0 0 24 24" stroke="currentColor">
+                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M5 13l4 4L19 7"/>
+                                    </svg>
+                                }
+                            </div>
+                        )}
+                    </RadioGroup.Option>
+                )
+            })}
+        </RadioGroup>
+    )
+}
+
+export default Colors;

components/Form.tsx

@@ -11,8 +11,8 @@ import Check from './Check';
 import {PayloadBody} from "../src/payload";
 import {getPayloadBodyFromFile, getPayloadBodyFromQR} from "../src/process";
 import {PassData} from "../src/pass";
-import ColorSelector from "./ColorSelector";
 import {COLORS} from "../src/colors";
+import Colors from './Colors';
 
 function Form(): JSX.Element {
     const {t} = useTranslation(['index', 'errors', 'common']);
@@ -213,7 +213,7 @@ function Form(): JSX.Element {
                     <div className="space-y-5">
                         <p>{t('index:pickColorDescription')}</p>
                         <div className="relative inline-block w-full">
-                            <ColorSelector onChange={setSelectedColor} initialValue={selectedColor}/>
+                            <Colors onChange={setSelectedColor} initialValue={selectedColor}/>
                         </div>
                     </div>
                 }/>
@@ -235,7 +235,7 @@ function Form(): JSX.Element {
                             </ul>
                         </div>
                         <label htmlFor="privacy" className="flex flex-row space-x-4 items-center">
-                            <input type="checkbox" id="privacy" value="privacy" required className="h-4 w-4"/>
+                            <input type="checkbox" id="privacy" value="privacy" required className="h-5 w-5 outline-none"/>
                             <p>
                                 {t('index:iAcceptThe')}&nbsp;
                                 <Link href="/privacy">
@@ -247,11 +247,11 @@ function Form(): JSX.Element {
                         </label>
                         <div className="flex flex-row items-center justify-start">
                             <button id="download" type="submit"
-                                    className="focus:outline-none bg-green-600 py-2 px-3 text-white font-semibold rounded-md disabled:bg-gray-400">
+                                    className="focus:outline-none bg-green-600 py-2 px-3 mt-2 text-white font-semibold rounded-md disabled:bg-gray-400">
                                 {t('index:addToWallet')}
                             </button>
                             <div id="spin" className={loading ? undefined : "hidden"}>
-                                <svg className="animate-spin h-5 w-5 ml-3" viewBox="0 0 24 24">
+                                <svg className="animate-spin h-5 w-5 ml-4" viewBox="0 0 24 24">
                                     <circle className="opacity-0" cx="12" cy="12" r="10" stroke="currentColor"
                                             strokeWidth="4"/>
                                     <path className="opacity-75" fill="currentColor"

src/colors.ts

@@ -1,12 +1,21 @@
+// Accessible colors from https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color
+
 export enum COLORS {
     WHITE = 'rgb(255, 255, 255)',
     BLACK = 'rgb(0, 0, 0)',
-    GREY = 'rgb(33, 33, 33)',
-    GREEN = 'rgb(27, 94, 32)',
-    INDIGO = 'rgb(26, 35, 126)',
-    BLUE = 'rgb(1, 87, 155)',
-    PURPLE = 'rgb(74, 20, 140)',
-    TEAL = 'rgb(0, 77, 64)',
+    GREY = 'rgb(36, 36, 38)',
+    BLUE = 'rgb(0, 64, 221)',
+    BROWN = 'rgb(127, 101, 69)',
+    CYAN = 'rgb(0, 113, 164)',
+    GREEN = 'rgb(36, 138, 61)',
+    INDIGO = 'rgb(54, 52, 163)',
+    MINT = 'rgb(12, 129, 123)',
+    ORANGE = 'rgb(201, 52, 0)',
+    PINK = 'rgb(211, 15, 69)',
+    PURPLE = 'rgb(137, 68, 171)',
+    RED = 'rgb(215, 0, 21)',
+    TEAL = 'rgb(0, 130, 153)',
+    YELLOW = 'rgb(178, 80, 0)'
 }
 
 export function rgbToHex(rgbString: string) {

src/payload.ts

@@ -3,9 +3,9 @@ import {Constants} from "./constants";
 import {COLORS} from "./colors";
 
 enum CertificateType {
-    Vaccine = 'Vaccine',
-    Test = 'Test',
-    Recovery = 'Recovery',
+    Vaccination = 'Vaccination Card',
+    Test = 'Test Certificate',
+    Recovery = 'Recovery Certificate',
 }
 
 enum TextAlignment {
@@ -90,7 +90,7 @@ export class Payload {
 
         // Set certificate type and properties
         if (covidCertificate['v'] !== undefined) {
-            this.certificateType = CertificateType.Vaccine;
+            this.certificateType = CertificateType.Vaccination;
             properties = covidCertificate['v'][0];
         }
         if (covidCertificate['t'] !== undefined) {
@@ -121,7 +121,7 @@ export class Payload {
                 {
                     key: "type",
                     label: "EU Digital COVID",
-                    value: this.certificateType + " Certificate"
+                    value: this.certificateType
                 }
             ],
             primaryFields: [
@@ -162,7 +162,7 @@ export class Payload {
 
     static fillPassData(type: CertificateType, data: PassDictionary, properties: Object, valueSets: ValueSets, country: string, dateOfBirth: string): PassDictionary {
         switch (type) {
-            case CertificateType.Vaccine:
+            case CertificateType.Vaccination:
                 const dose = `${properties['dn']}/${properties['sd']}`;
                 const dateOfVaccination = properties['dt'];
                 const medialProductKey = properties['mp'];