From c75779e677078ef8e5a4f002eb05e17c839a6f1d Mon Sep 17 00:00:00 2001
From: Fredrik Strand Oseberg <fredrik.no@gmail.com>
Date: Tue, 1 Apr 2025 12:32:13 +0200
Subject: [PATCH] refactor: colorpicker (#9668)

This PR refactors the color picker so we stick to one set of colors
instead of changing available colors when theme changes. Colors picked
also work in dark theme and is aligned with UX.
---
 .../tags/TagTypeForm/TagTypeColorPicker.tsx   | 21 ++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/frontend/src/component/tags/TagTypeForm/TagTypeColorPicker.tsx b/frontend/src/component/tags/TagTypeForm/TagTypeColorPicker.tsx
index 277a6594bd..99812f9327 100644
--- a/frontend/src/component/tags/TagTypeForm/TagTypeColorPicker.tsx
+++ b/frontend/src/component/tags/TagTypeForm/TagTypeColorPicker.tsx
@@ -1,5 +1,6 @@
 import type { FC } from 'react';
 import { styled, Box, useTheme } from '@mui/material';
+import { lightTheme } from 'themes/theme';
 
 interface ITagTypeColorPickerProps {
     selectedColor: string;
@@ -55,27 +56,33 @@ export const TagTypeColorPicker: FC<ITagTypeColorPickerProps> = ({
         color || '#FFFFFF';
 
     const colorOptions: IColorOption[] = [
-        { name: 'White', value: theme.palette.common.white },
+        {
+            name: 'White',
+            value: getColorWithFallback(lightTheme.palette.common.white),
+        },
         {
             name: 'Green',
-            value: getColorWithFallback(theme.palette.success.border),
+            value: getColorWithFallback(lightTheme.palette.success.main),
         },
         {
             name: 'Yellow',
-            value: getColorWithFallback(theme.palette.warning.border),
+            value: getColorWithFallback(lightTheme.palette.warning.main),
+        },
+        {
+            name: 'Red',
+            value: getColorWithFallback(lightTheme.palette.error.main),
         },
-        { name: 'Red', value: theme.palette.error.main },
         {
             name: 'Blue',
-            value: getColorWithFallback(theme.palette.info.border),
+            value: getColorWithFallback(lightTheme.palette.info.main),
         },
         {
             name: 'Purple',
-            value: getColorWithFallback(theme.palette.secondary.border),
+            value: getColorWithFallback(lightTheme.palette.secondary.main),
         },
         {
             name: 'Gray',
-            value: getColorWithFallback(theme.palette.neutral.border),
+            value: getColorWithFallback(lightTheme.palette.neutral.main),
         },
     ];