filippodb
/
covidpass-greenpass-su-iphone-ios-android-wallet
mirror of https://github.com/covidpass-org/covidpass.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Improve color selector

This commit is contained in:
Marvin Sextro 2021-07-29 00:02:51 +02:00
parent 11d739b473
commit 4b65d82f74
6 changed files with 71 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
components/ColorSelector.tsx
View File

@ -1,34 +0,0 @@
import React, {useState} from 'react'
import {RadioGroup} from '@headlessui/react'
import ColorOption from "./color_selector/ColorOption";
import {COLORS} from "../src/colors";
interface ColorSelectorProps {
initialValue: COLORS,
onChange(value: COLORS): void;
}
function ColorSelector(props: ColorSelectorProps): JSX.Element {
let [color, setColor] = useState(props.initialValue)
return (
<RadioGroup<"div", COLORS> className="flex items-center flex-wrap" value={color}
onChange={function (value) {
setColor(value);
props.onChange(value);
}}>
<ColorOption color={COLORS.WHITE}/>
<ColorOption color={COLORS.BLACK}/>
<ColorOption color={COLORS.GREY}/>
<ColorOption color={COLORS.GREEN}/>
<ColorOption color={COLORS.INDIGO}/>
<ColorOption color={COLORS.BLUE}/>
<ColorOption color={COLORS.PURPLE}/>
<ColorOption color={COLORS.TEAL}/>
</RadioGroup>
)
}
export default ColorSelector

45
components/Colors.tsx Normal file
View File

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

10
components/Form.tsx
View File

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

31
components/color_selector/ColorOption.tsx
View File

@ -1,31 +0,0 @@
import {RadioGroup} from '@headlessui/react'
import {COLORS, rgbToHex} from "../../src/colors";
interface ColorOptionProps {
color: COLORS,
}
function ColorOption(props: ColorOptionProps): JSX.Element {
let colorIsDark = props.color != COLORS.WHITE;
return (
<RadioGroup.Option
value={props.color}>
{({checked}) => (
<div
className={`${colorIsDark ? 'border-white' : 'border-black'} border-2 cursor-pointer rounded-full w-9 h-9 flex items-center justify-center m-1`}
style={{backgroundColor: rgbToHex(props.color)}}>
{checked &&
<svg className={`${colorIsDark ? 'text-white' : 'text-black'} h-5 w-5`} fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"/>
</svg>
}
</div>
)}
</RadioGroup.Option>
)
}
export default ColorOption

21
src/colors.ts
View File

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

12
src/payload.ts
View File

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