From cd11f0437bd9a4bb55b757b9465bf6826795e8fe Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Mon, 13 Jul 2026 02:14:41 +0100
Subject: [PATCH] Enhance ColorSelector component with custom panel rendering
 and presets for improved color selection experience. Update App.css to style
 color picker elements for better UI consistency.

---
 assets/stylesheets/App.css                    | 37 +++++++++
 .../Dashboard/common/ColorSelector.jsx        | 78 ++++++++++++++++++-
 2 files changed, 114 insertions(+), 1 deletion(-)

diff --git a/assets/stylesheets/App.css b/assets/stylesheets/App.css
index 4afbd1e..542c9b4 100644
--- a/assets/stylesheets/App.css
+++ b/assets/stylesheets/App.css
@@ -39,6 +39,8 @@
 .ant-splitter,
 .ant-steps-item-title,
 .ant-steps-icon,
+.ant-color-picker-presets-label,
+.ant-select-selection-item,
 [class*=' ant-radio'] {
   font-family: 'DM Sans';
 }
@@ -658,3 +660,38 @@ span.ant-skeleton-input.ant-skeleton-input-sm.text-skeleton {
   left: 4px;
   right: 4px;
 }
+
+.ant-color-picker
+  .ant-color-picker-inner
+  .ant-color-picker-panel
+  .ant-color-picker-select
+  .ant-color-picker-palette {
+  border-radius: 8px;
+}
+
+.ant-color-picker
+  .ant-collapse
+  .ant-collapse-item:last-child
+  .ant-collapse-content-box {
+  padding-bottom: 0 !important;
+}
+
+.ant-color-picker .ant-collapse .ant-collapse-expand-icon {
+  height: 12px !important;
+  padding-inline-end: 8px !important;
+}
+
+.ant-color-picker .ant-color-picker-inner .ant-color-picker-presets-label {
+  line-height: 1 !important;
+}
+
+.ant-color-picker
+  .ant-collapse
+  .ant-collapse-item:first-child
+  .ant-collapse-header {
+  margin: 0 0 5.5px 0;
+}
+
+.ant-color-picker .ant-collapse .ant-collapse-item .ant-collapse-header {
+  margin: 5.5px 0;
+}
diff --git a/src/components/Dashboard/common/ColorSelector.jsx b/src/components/Dashboard/common/ColorSelector.jsx
index 26c5269..fab7d86 100644
--- a/src/components/Dashboard/common/ColorSelector.jsx
+++ b/src/components/Dashboard/common/ColorSelector.jsx
@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react'
-import { ColorPicker, Checkbox, Flex } from 'antd'
+import { ColorPicker, Checkbox, Flex, Row, Col, Divider } from 'antd'
 import PropTypes from 'prop-types'
 
 const ColorSelector = ({ value, onChange, disabled, required = false }) => {
@@ -24,6 +24,78 @@ const ColorSelector = ({ value, onChange, disabled, required = false }) => {
     onChange('#' + color.toHex())
   }
 
+  const customPanelRender = (_, { components: { Picker, Presets } }) => (
+    <Row
+      justify='space-between'
+      wrap={false}
+      style={{ width: '420px' }}
+      gap={8}
+    >
+      <Col span={12}>
+        <Presets />
+      </Col>
+      <Divider type='vertical' style={{ height: 'auto', margin: '0 12px' }} />
+      <Col flex='auto'>
+        <Picker />
+      </Col>
+    </Row>
+  )
+
+  const presets = [
+    {
+      label: 'Flat',
+      colors: [
+        '#1ABC9C',
+        '#16A085',
+        '#2ECC71',
+        '#27AE60',
+        '#3498DB',
+        '#2980B9',
+        '#9B59B6',
+        '#8E44AD',
+        '#34495E',
+        '#2C3E50',
+        '#F1C40F',
+        '#F39C12',
+        '#E67E22',
+        '#D35400',
+        '#E74C3C',
+        '#C0392B',
+        '#ECF0F1',
+        '#BDC3C7',
+        '#95A5A6',
+        '#7F8C8D',
+        '#535a5b'
+      ]
+    },
+    {
+      label: 'Metro',
+      colors: [
+        '#A4C400',
+        '#60A917',
+        '#008A00',
+        '#00ABA9',
+        '#1BA1E2',
+        '#0050EF',
+        '#6A00FF',
+        '#AA00FF',
+        '#F472D0',
+        '#D80073',
+        '#A20025',
+        '#E51400',
+        '#FA6800',
+        '#F0A30A',
+        '#E3C800',
+        '#825A2C',
+        '#6D8764',
+        '#647687',
+        '#76608A',
+        '#A0522D',
+        '#1d2121'
+      ]
+    }
+  ]
+
   return (
     <Flex gap={'middle'}>
       <ColorPicker
@@ -33,6 +105,10 @@ const ColorSelector = ({ value, onChange, disabled, required = false }) => {
         disabled={(!colorEnabled && !required) || disabled}
         value={value || '#000000'}
         onChange={handleColorChange}
+        presets={presets}
+        panelRender={customPanelRender}
+        arrow={false}
+        className='ant-input-outlined'
       />
       {!required && (
         <Checkbox