From d73b1d22200432d7c7828d44a755cbb8c2d93097 Mon Sep 17 00:00:00 2001
From: swtmply <delosreyesjohnallen@gmail.com>
Date: Thu, 1 Jun 2023 02:34:18 +0800
Subject: [PATCH] IO-2281 Added striped table colors

---
 client/src/App/App.styles.scss                     |  8 ++++++++
 .../production-list-table.component.jsx            | 14 ++++++++++++--
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/client/src/App/App.styles.scss b/client/src/App/App.styles.scss
index 2ed11cbc6..b57e94677 100644
--- a/client/src/App/App.styles.scss
+++ b/client/src/App/App.styles.scss
@@ -156,3 +156,11 @@
 td.ant-table-column-sort {
   background-color: transparent;
 }
+
+.ant-table-tbody > tr.ant-table-row:nth-child(2n) > td {
+  background-color: #f4f4f4;
+}
+
+.rowWithColor > td {
+  background-color: var(--bgColor) !important;
+}
diff --git a/client/src/components/production-list-table/production-list-table.component.jsx b/client/src/components/production-list-table/production-list-table.component.jsx
index 746d956ab..1585c6480 100644
--- a/client/src/components/production-list-table/production-list-table.component.jsx
+++ b/client/src/components/production-list-table/production-list-table.component.jsx
@@ -246,11 +246,21 @@ export function ProductionListTable({
                 (x) => x.status === record.status
               );
 
-              if (!color) return null;
+              if (!color) {
+                if (index % 2 === 0)
+                  return {
+                    style: {
+                      backgroundColor: `rgb(236, 236, 236)`,
+                    },
+                  };
+
+                return null;
+              }
 
               return {
+                className: "rowWithColor",
                 style: {
-                  backgroundColor: `rgb(${color.color.r},${color.color.g},${color.color.b},${color.color.a})`,
+                  "--bgColor": `rgb(${color.color.r},${color.color.g},${color.color.b},${color.color.a})`,
                 },
               };
             },