diff --git a/components/ColorSelector.tsx b/components/ColorSelector.tsx
deleted file mode 100644
index b850e23..0000000
--- a/components/ColorSelector.tsx
+++ /dev/null
@@ -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 (
- className="flex items-center flex-wrap" value={color}
- onChange={function (value) {
- setColor(value);
- props.onChange(value);
- }}>
-
-
-
-
-
-
-
-
-
- )
-}
-
-export default ColorSelector
\ No newline at end of file
diff --git a/components/Colors.tsx b/components/Colors.tsx
new file mode 100644
index 0000000..8fd1e1a
--- /dev/null
+++ b/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 (
+
+ className="flex flex-wrap" value={color}
+ onChange={function (value) {
+ setColor(value);
+ props.onChange(value);
+ }
+ }>
+ {Object.values(COLORS).map((color) => {
+ return (
+
+ {({checked}) => (
+
+ {checked &&
+
+ }
+
+ )}
+
+ )
+ })}
+
+ )
+}
+
+export default Colors;
\ No newline at end of file
diff --git a/components/Form.tsx b/components/Form.tsx
index 7f6a104..5d80bc5 100644
--- a/components/Form.tsx
+++ b/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 {
{t('index:pickColorDescription')}
-
+
}/>
@@ -235,7 +235,7 @@ function Form(): JSX.Element {
-