Working on #603

- Created a personalised palette and the ability to save the palettes.
Lemoncode · Dec 14, 2024 · cc9576a · cc9576a
1 parent 2a871c2
commit cc9576a
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 0 deletions.
diff --git a/src/pods/properties/components/color-picker/color-picker.component.module.css b/src/pods/properties/components/color-picker/color-picker.component.module.css
@@ -69,6 +69,7 @@
   justify-content: center;
   width: 229px;
   gap: var(--space-xs);
+  margin-top: 8px;
 }
 
 .colorBox:first-child {
@@ -90,3 +91,34 @@
     transparent 53%
   );
 }
+
+.personalizedColorBox {
+  border: 1px solid var(--primary-100);
+  color: var(--text-color);
+  background-color: inherit;
+  width: var(--space-lg);
+  height: var(--space-lg);
+  border-radius: var(--border-radius-s);
+  font-size: var(--fs-xs);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-s);
+  transition: all 0.2s ease-in-out;
+  cursor: pointer;
+  padding: 0;
+}
+
+.addButton {
+  padding: 4px 8px;
+  font-size: 14px;
+  border: black;
+  background-color: #8f8f8f;
+  color: black;
+  cursor: pointer;
+}
+
+.addButton:hover {
+  background-color: #ababab;
+}
diff --git a/src/pods/properties/components/color-picker/color-picker.component.tsx b/src/pods/properties/components/color-picker/color-picker.component.tsx
@@ -20,6 +20,7 @@ export const ColorPicker: React.FC<Props> = props => {
   const { label, color, onChange } = props;
   const [picker, setPicker] = useState<boolean>(false);
   const [hsva, setHsva] = useState<HsvaColor>(() => hexToHsva(color));
+  const [personalizedColors, setPersonalizedColors] = useState<string[]>([]);
 
   const togglePicker = () => {
     setPicker(!picker);
@@ -37,6 +38,18 @@ export const ColorPicker: React.FC<Props> = props => {
     onChange(newColor);
   };
 
+  const addPersonalizedColor = () => {
+    if (!personalizedColors.includes(color)) {
+      setPersonalizedColors([...personalizedColors, color]);
+    }
+  };
+
+  const handlePersonalizedColors = (newColor: string) => {
+    const hsvaColor = hexToHsva(newColor);
+    setHsva(hsvaColor);
+    onChange(newColor);
+  };
+
   return (
     <>
       <div className={classes.container}>
@@ -68,6 +81,24 @@ export const ColorPicker: React.FC<Props> = props => {
                 ></div>
               ))}
             </div>
+            <div className={classes.colorPalette}>
+              {personalizedColors.map(personalizedColor => (
+                <div
+                  key={personalizedColor}
+                  className={classes.personalizedColorBox}
+                  style={{ backgroundColor: personalizedColor }}
+                  onClick={() => handlePersonalizedColors(personalizedColor)}
+                ></div>
+              ))}
+              <div className={classes.colorPalette}>
+                <button
+                  className={classes.addButton}
+                  onClick={addPersonalizedColor}
+                >
+                  Add Current Color
+                </button>
+              </div>
+            </div>
           </div>
         </div>
       )}