From 934a7b7deaf32c6e2efb0d17e7673c7159d8df36 Mon Sep 17 00:00:00 2001
From: "krzysztof.grudzinski" <krzysztof.grudzinski@melfore.com>
Date: Wed, 15 Nov 2023 11:42:02 +0100
Subject: [PATCH] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20changed=20konva=20co?=
 =?UTF-8?q?lor=20with=20dark=20mode?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✅ Closes: #147
---
 src/grid/Cell/index.tsx                   | 9 ++++++++-
 src/grid/CellGroup/index.tsx              | 8 +++++++-
 src/grid/Row/index.tsx                    | 7 ++++++-
 src/resources/components/Header/index.tsx | 7 ++++++-
 4 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/src/grid/Cell/index.tsx b/src/grid/Cell/index.tsx
index a22a2a3..cf28094 100644
--- 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
index a080fdc..f14bce9 100644
--- 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
index 02638e3..60c6fee 100644
--- 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
index 302d100..b9a16fe 100644
--- 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}>