From aa5e4c00296ebe6dc41746c8fe5eeb22c27238b6 Mon Sep 17 00:00:00 2001
From: Emmanuel Watila <ei.watila@gmail.com>
Date: Mon, 13 Mar 2023 02:41:40 +0100
Subject: [PATCH] Made UI fixes on the color select context menu; Grid issue

---
 src/components/SelectColors/index.tsx | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/SelectColors/index.tsx b/src/components/SelectColors/index.tsx
index 4adbc67b..1c225901 100644
--- a/src/components/SelectColors/index.tsx
+++ b/src/components/SelectColors/index.tsx
@@ -20,7 +20,7 @@ interface IColorSelect {
 }
 
 const ColorSelect: FC<IColorSelect> = ({ handleChange, initialValue }) => {
-  /* Get current */
+  /* Get current theme */
   const theme = useTheme();
   const mode = theme.palette.mode;
 
@@ -38,6 +38,8 @@ const ColorSelect: FC<IColorSelect> = ({ handleChange, initialValue }) => {
     cyan: palette.cyan,
     amber: palette.amber,
     lightGreen: palette.lightGreen,
+    lightBlue: palette.lightBlue,
+    violet: palette.violet,
   });
 
   /* Hold the current state of a given option defaults to `gray` from the color palette */
@@ -117,9 +119,17 @@ const ColorSelect: FC<IColorSelect> = ({ handleChange, initialValue }) => {
           COLOURS
         </Typography>
 
-        <Grid container py={1} px={2} columns={6} rowGap={2}>
+        <Grid
+          container
+          py={1}
+          px={2}
+          rowGap={2}
+          columnGap={2}
+          display="grid"
+          gridTemplateColumns="repeat(7, auto)"
+        >
           {Object.keys(palettes).map((key: string, index: number) => (
-            <Grid item xs={1}>
+            <Grid item xs sx={{ maxWidth: "fit-content" }}>
               <Button
                 sx={{
                   minWidth: "25px",