From 3abc2ddbd1918da4e31071eb475706e326127ffa Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 21 Feb 2023 11:51:52 +0000
Subject: [PATCH] Support empty dates and use CSS variables for easier styling

---
 .../src/components/app/spreadsheet/DateCell.svelte    |  4 +++-
 .../src/components/app/spreadsheet/OptionsCell.svelte |  2 +-
 .../src/components/app/spreadsheet/Spreadsheet.svelte | 11 ++++++++---
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/client/src/components/app/spreadsheet/DateCell.svelte b/packages/client/src/components/app/spreadsheet/DateCell.svelte
index a57ee4e10a..5f0c0cdfa1 100644
--- a/packages/client/src/components/app/spreadsheet/DateCell.svelte
+++ b/packages/client/src/components/app/spreadsheet/DateCell.svelte
@@ -23,7 +23,9 @@
 
 <div class="container">
   <div class="value">
-    {dayjs(timeOnly ? time : value).format(format)}
+    {#if value}
+      {dayjs(timeOnly ? time : value).format(format)}
+    {/if}
   </div>
   {#if editable}
     <Icon name="Calendar" />
diff --git a/packages/client/src/components/app/spreadsheet/OptionsCell.svelte b/packages/client/src/components/app/spreadsheet/OptionsCell.svelte
index 0494f951bc..46d3552ad2 100644
--- a/packages/client/src/components/app/spreadsheet/OptionsCell.svelte
+++ b/packages/client/src/components/app/spreadsheet/OptionsCell.svelte
@@ -150,7 +150,7 @@
     background: linear-gradient(
       to right,
       transparent 0%,
-      var(--background) 40%
+      var(--cell-background) 40%
     );
   }
   .options {
diff --git a/packages/client/src/components/app/spreadsheet/Spreadsheet.svelte b/packages/client/src/components/app/spreadsheet/Spreadsheet.svelte
index 0474d784f1..60eeda6898 100644
--- a/packages/client/src/components/app/spreadsheet/Spreadsheet.svelte
+++ b/packages/client/src/components/app/spreadsheet/Spreadsheet.svelte
@@ -365,6 +365,10 @@
     align-items: stretch;
     border: 1px solid var(--spectrum-global-color-gray-400);
     border-radius: 4px;
+
+    /* Variables */
+    --cell-background: var(--spectrum-global-color-gray-50);
+    --cell-background-hover: var(--spectrum-global-color-gray-100);
   }
   .spreadsheet {
     display: grid;
@@ -382,7 +386,7 @@
   }
 
   .wrapper ::-webkit-scrollbar-track {
-    background: var(--spectrum-global-color-gray-50);
+    background: var(--cell-background);
   }
 
   .controls {
@@ -430,11 +434,12 @@
     color: var(--spectrum-global-color-gray-900);
     font-size: 14px;
     gap: 4px;
-    background: var(--spectrum-global-color-gray-50);
+    background: var(--cell-background);
     position: relative;
   }
   .cell.hovered {
-    background: var(--spectrum-global-color-gray-100);
+    background: var(--cell-background-hover);
+    --cell-background: var(--cell-background-hover);
   }
   .cell.selected {
     box-shadow: inset 0 0 0 2px var(--spectrum-global-color-blue-400);