From 98046e91fcfe6b15140d886a894b2e1aaba74d7e Mon Sep 17 00:00:00 2001
From: Konrad Jamrozik <kojamroz@microsoft.com>
Date: Wed, 12 Jun 2024 01:30:57 -0700
Subject: [PATCH] EventsDataGrid: add row and cell styling

---
 .../EventsDataGrid/EventsDataGrid.tsx         | 32 ++++++++++++++-----
 web/src/theme.tsx                             |  6 ++--
 2 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/web/src/components/EventsDataGrid/EventsDataGrid.tsx b/web/src/components/EventsDataGrid/EventsDataGrid.tsx
index 22f52c9c..92082377 100644
--- a/web/src/components/EventsDataGrid/EventsDataGrid.tsx
+++ b/web/src/components/EventsDataGrid/EventsDataGrid.tsx
@@ -38,13 +38,17 @@ export function EventsDataGrid(): React.JSX.Element {
 
   return (
     <Box
-      sx={{
+      sx={(theme) => ({
         height: defaultComponentHeight,
         minWidth: defaultComponentMinWidth,
         maxWidth: 960,
         width: '100%',
+        // future work: refactor
         [`& .${gridClasses.row}.odd`]: { backgroundColor: '#202020' },
-      }}
+        [`& .world-event`]: { color: theme.palette.secondary.dark },
+        [`& .advance-time`]: { color: theme.palette.info.main },
+        [`& .mission-site-expired`]: { color: theme.palette.error.main },
+      })}
     >
       <DataGrid
         rows={rows}
@@ -87,24 +91,36 @@ const columns: GridColDef<GameEventRow>[] = [
     headerName: 'Turn',
     width: 80,
     disableColumnMenu: true,
-    cellClassName: (
-      params: GridCellParams<GridValidRowModel, number>,
-    ): string => {
-      const turnValue: number = params.value!
-      return turnValue % 2 === 0 ? 'UNUSED-even' : 'UNUSED-odd'
-    },
   },
   {
     field: 'kind',
     headerName: 'Kind',
     width: 110,
     disableColumnMenu: true,
+    cellClassName: (
+      params: GridCellParams<GridValidRowModel, string>,
+    ): string => {
+      const kindValue: string = params.value!
+      // future work: refactor to use inverted map of playerActionNameToDisplayMap. See renderAssets for code to adapt.
+      return kindValue === 'World Event' ? 'world-event' : ''
+    },
   },
   {
     field: 'type',
     headerName: 'Type',
     width: 190,
     disableColumnMenu: true,
+    cellClassName: (
+      params: GridCellParams<GridValidRowModel, string>,
+    ): string => {
+      const typeValue: string = params.value!
+      // future work: refactor to use inverted map of playerActionNameToDisplayMap. See renderAssets for code to adapt.
+      return typeValue === 'Advance time'
+        ? 'advance-time'
+        : typeValue === 'Mission site expired'
+          ? 'mission-site-expired'
+          : ''
+    },
   },
   {
     field: 'details',
diff --git a/web/src/theme.tsx b/web/src/theme.tsx
index 1202013f..2385d767 100644
--- a/web/src/theme.tsx
+++ b/web/src/theme.tsx
@@ -7,9 +7,9 @@ const theme = createTheme({
     primary: {
       main: '#556cd6',
     },
-    secondary: {
-      main: '#19857b',
-    },
+    // secondary: {
+    //   main: '#19857b',
+    // },
     error: {
       main: red.A400,
     },