From bd4c6e0c3a3a07305cffd15f7caa71614337aa5b Mon Sep 17 00:00:00 2001
From: Joshua Ryder <ryderjj89@outlook.com>
Date: Mon, 8 Dec 2025 15:52:00 -0500
Subject: [PATCH] Color simplification and reordering save refresh

---
 frontend/src/components/SectionsManager.tsx | 34 ++++++++++-----------
 1 file changed, 16 insertions(+), 18 deletions(-)

diff --git a/frontend/src/components/SectionsManager.tsx b/frontend/src/components/SectionsManager.tsx
index a7c2c499..8f3ee5ca 100644
--- a/frontend/src/components/SectionsManager.tsx
+++ b/frontend/src/components/SectionsManager.tsx
@@ -172,9 +172,8 @@ const SectionsManager: React.FC<SectionsManagerProps> = ({
   };
 
   const ColorPicker = ({ selectedColor, onSelect }: { selectedColor: string; onSelect: (color: string) => void }) => (
-    <div className="absolute z-10 mt-2 p-3 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-xl min-w-[280px]">
-      <p className="text-xs text-gray-500 dark:text-gray-400 mb-2 font-medium">Choose a color</p>
-      <div className="grid grid-cols-3 gap-2">
+    <div className="absolute z-10 mt-2 p-3 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-xl">
+      <div className="grid grid-cols-6 gap-2">
         {SECTION_COLORS.map(color => (
           <button
             key={color.value}
@@ -182,25 +181,24 @@ const SectionsManager: React.FC<SectionsManagerProps> = ({
               onSelect(color.value);
               setShowColorPicker(null);
             }}
-            className={`flex items-center gap-2 px-2 py-1.5 rounded-lg transition-colors ${
+            className={`w-8 h-8 rounded-full transition-all ${
               selectedColor === color.value
-                ? 'bg-gray-100 dark:bg-gray-700 ring-2 ring-blue-500'
-                : 'hover:bg-gray-50 dark:hover:bg-gray-700'
+                ? 'ring-2 ring-blue-500 ring-offset-2 dark:ring-offset-gray-800'
+                : 'hover:scale-110'
             }`}
-          >
-            <div
-              className="w-6 h-6 rounded-full flex-shrink-0 border border-gray-200 dark:border-gray-600"
-              style={{ backgroundColor: color.value }}
-            />
-            <span className="text-xs text-gray-700 dark:text-gray-300 truncate">
-              {color.name}
-            </span>
-          </button>
+            style={{ backgroundColor: color.value }}
+            title={color.name}
+          />
         ))}
       </div>
     </div>
   );
 
+  const handleSaveAndClose = () => {
+    onSectionChange(); // Refresh parent state from server
+    onClose();
+  };
+
   return (
     <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
       <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full max-h-[80vh] overflow-hidden">
@@ -208,10 +206,10 @@ const SectionsManager: React.FC<SectionsManagerProps> = ({
         <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
           <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">Manage Sections</h2>
           <button
-            onClick={onClose}
-            className="p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded"
+            onClick={handleSaveAndClose}
+            className="px-3 py-1 text-sm bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
           >
-            <X className="h-5 w-5 text-gray-500" />
+            Done
           </button>
         </div>