refactor: 💡 changed konva color with dark mode

✅ Closes: #147
melfore · Nov 15, 2023 · 934a7b7 · 934a7b7
1 parent cb03c45
commit 934a7b7
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 4 deletions.
diff --git a/src/grid/Cell/index.tsx b/src/grid/Cell/index.tsx
@@ -51,9 +51,16 @@ const GridCell = ({ column, height, index, hourInfo: visibleDayInfo }: GridCellP
 
   const yPos = useMemo(() => rowHeight * 0.8, [rowHeight]);
 
+  const stroke = useMemo(() => {
+    if (themeColor === "black") {
+      return "grey";
+    }
+    return "white";
+  }, [themeColor]);
+
   return (
     <KonvaGroup key={`timeslot-${index}`}>
-      <KonvaLine x={xPos} y={yPos} points={[0, 0, 0, height]} stroke="gray" strokeWidth={1} />
+      <KonvaLine x={xPos} y={yPos} points={[0, 0, 0, height]} stroke={stroke} strokeWidth={1} />
       <KonvaRect fill="transparent" x={xPos - 15} y={yPos - 10} height={15} width={30} />
       <KonvaText fill={themeColor} x={xPos - 15} y={yPos - 8} text={cellLabel} />
     </KonvaGroup>

diff --git a/src/grid/CellGroup/index.tsx b/src/grid/CellGroup/index.tsx
@@ -102,10 +102,16 @@ const GridCellGroup = ({ column, index, dayInfo, hourInfo }: GridCellGroupProps)
     }
     return index * unitAboveSpanInPx;
   }, [xPos, unitAboveSpanInPx, unitAbove, index, columnWidth, sizeInUnits, hourInfo]);
+  const stroke = useMemo(() => {
+    if (themeColor === "black") {
+      return "grey";
+    }
+    return "white";
+  }, [themeColor]);
 
   return (
     <KonvaGroup key={`timeslot-${index}`}>
-      <KonvaLine x={xPos} y={0} points={points} stroke="gray" strokeWidth={1} />
+      <KonvaLine x={xPos} y={0} points={points} stroke={stroke} strokeWidth={1} />
       <KonvaRect fill="transparent" x={xPos} y={yPos - 10} height={15} width={unitAboveSpanInPx} />
       <KonvaText
         align="center"

diff --git a/src/grid/Row/index.tsx b/src/grid/Row/index.tsx
@@ -16,7 +16,12 @@ const GridRow = ({ index }: GridRowProps) => {
 
   const yPos = useMemo(() => rowHeight * (index + 1), [index, rowHeight]);
 
-  const fill = useMemo(() => (index % 2 === 0 ? "#F0F0F0" : "rgb(255,255,255)"), [index]);
+  const fill = useMemo(() => {
+    if (themeColor === "black") {
+      return index % 2 === 0 ? "#F0F0F0" : "rgb(255,255,255)";
+    }
+    return index % 2 === 0 ? "#A8A8A8" : "transparent";
+  }, [index, themeColor]);
 
   return (
     <KonvaGroup>

diff --git a/src/resources/components/Header/index.tsx b/src/resources/components/Header/index.tsx
@@ -33,7 +33,12 @@ const ResourceHeader = ({ index, isLast = false, resource }: ResourceHeaderProps
 
   const yCoordinate = useMemo(() => rowHeight * index, [index, rowHeight]);
 
-  const fill = useMemo(() => (index % 2 === 0 ? "#F0F0F0" : "rgb(255,255,255)"), [index]);
+  const fill = useMemo(() => {
+    if (themeColor === "black") {
+      return index % 2 === 0 ? "#F0F0F0" : "rgb(255,255,255)";
+    }
+    return index % 2 === 0 ? "#A8A8A8" : "transparent";
+  }, [index, themeColor]);
 
   return (
     <KonvaGroup y={yCoordinate}>