From d21ec9d72746145a2e0e8f228bb7323b1e3fccc2 Mon Sep 17 00:00:00 2001
From: Mo Tarbin <mhed.t91@gmail.com>
Date: Sun, 12 Jul 2026 23:34:47 -0400
Subject: [PATCH] make choosing color match advance filter color selector

---
 src/views/Modals/Inputs/LabelModal.jsx   | 65 +++++++++---------------
 src/views/Modals/Inputs/ProjectModal.jsx | 57 +++++++++------------
 2 files changed, 47 insertions(+), 75 deletions(-)

diff --git a/src/views/Modals/Inputs/LabelModal.jsx b/src/views/Modals/Inputs/LabelModal.jsx
index 8080190..20509b0 100644
--- a/src/views/Modals/Inputs/LabelModal.jsx
+++ b/src/views/Modals/Inputs/LabelModal.jsx
@@ -1,12 +1,4 @@
-import {
-  Box,
-  Button,
-  FormControl,
-  Input,
-  Option,
-  Select,
-  Typography,
-} from '@mui/joy'
+import { Box, Button, FormControl, Input, Typography } from '@mui/joy'
 import { useEffect, useState } from 'react'
 
 import { useQueryClient } from '@tanstack/react-query'
@@ -125,39 +117,30 @@ function LabelModal({ isOpen, onClose, label }) {
           <Typography gutterBottom level='body-sm' alignSelf='start'>
             Color
           </Typography>
-          <Select
-            value={color}
-            onChange={(e, value) => value && setColor(value)}
-            renderValue={selected => (
-              <Typography
-                startDecorator={
-                  <Box
-                    className='size-4'
-                    borderRadius={10}
-                    sx={{ background: selected.value }}
-                  />
-                }
-              >
-                {selected.label}
-              </Typography>
-            )}
-          >
-            {LABEL_COLORS.map(val => (
-              <Option key={val.value} value={val.value}>
-                <Box className='flex items-center justify-between'>
-                  <Box
-                    width={20}
-                    height={20}
-                    borderRadius={10}
-                    sx={{ background: val.value }}
-                  />
-                  <Typography sx={{ ml: 1 }} variant='caption'>
-                    {val.name}
-                  </Typography>
-                </Box>
-              </Option>
+          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
+            {LABEL_COLORS.map(colorOption => (
+              <Box
+                key={colorOption.value}
+                title={colorOption.name}
+                onClick={() => setColor(colorOption.value)}
+                sx={{
+                  width: 26,
+                  height: 26,
+                  borderRadius: '50%',
+                  background: colorOption.value,
+                  cursor: 'pointer',
+                  outline:
+                    color === colorOption.value
+                      ? '3px solid var(--joy-palette-primary-500)'
+                      : '2px solid transparent',
+                  outlineOffset: '2px',
+                  transition: 'all 0.15s ease',
+                  flexShrink: 0,
+                  '&:hover': { transform: 'scale(1.2)' },
+                }}
+              />
             ))}
-          </Select>
+          </Box>
         </FormControl>
 
         {error && (
diff --git a/src/views/Modals/Inputs/ProjectModal.jsx b/src/views/Modals/Inputs/ProjectModal.jsx
index b3bc503..0b97feb 100644
--- a/src/views/Modals/Inputs/ProjectModal.jsx
+++ b/src/views/Modals/Inputs/ProjectModal.jsx
@@ -5,8 +5,6 @@ import {
   FormControl,
   FormLabel,
   Input,
-  Option,
-  Select,
   Stack,
   Textarea,
   Typography,
@@ -223,39 +221,30 @@ const ProjectModal = ({ isOpen, onClose, onSave, project }) => {
           {/* Color Selection */}
           <FormControl>
             <FormLabel>Project Color</FormLabel>
-            <Select
-              value={projectColor}
-              onChange={(e, value) => value && setProjectColor(value)}
-              renderValue={selected => (
-                <Typography
-                  startDecorator={
-                    <Box
-                      className='size-4'
-                      borderRadius={10}
-                      sx={{ background: selected.value }}
-                    />
-                  }
-                >
-                  {selected.label}
-                </Typography>
-              )}
-            >
-              {PROJECT_COLORS.map(color => (
-                <Option key={color.value} value={color.value}>
-                  <Box className='flex items-center justify-between'>
-                    <Box
-                      width={20}
-                      height={20}
-                      borderRadius={10}
-                      sx={{ background: color.value }}
-                    />
-                    <Typography sx={{ ml: 1 }} variant='caption'>
-                      {color.name}
-                    </Typography>
-                  </Box>
-                </Option>
+            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
+              {PROJECT_COLORS.map(colorOption => (
+                <Box
+                  key={colorOption.value}
+                  title={colorOption.name}
+                  onClick={() => setProjectColor(colorOption.value)}
+                  sx={{
+                    width: 26,
+                    height: 26,
+                    borderRadius: '50%',
+                    background: colorOption.value,
+                    cursor: 'pointer',
+                    outline:
+                      projectColor === colorOption.value
+                        ? '3px solid var(--joy-palette-primary-500)'
+                        : '2px solid transparent',
+                    outlineOffset: '2px',
+                    transition: 'all 0.15s ease',
+                    flexShrink: 0,
+                    '&:hover': { transform: 'scale(1.2)' },
+                  }}
+                />
               ))}
-            </Select>
+            </Box>
           </FormControl>
 
           {/* Error Message */}