From c7b8d78c98482a0fc7abf426d5fccb602e733ae1 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 1 Mar 2023 19:19:22 +0000
Subject: [PATCH] Improve styles

---
 .../src/components/sheet/HeaderRow.svelte            |  6 +++++-
 .../frontend-core/src/components/sheet/Sheet.svelte  |  1 +
 .../src/components/sheet/SheetCell.svelte            | 12 ++++--------
 .../src/components/sheet/StickyColumn.svelte         |  5 ++++-
 4 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/packages/frontend-core/src/components/sheet/HeaderRow.svelte b/packages/frontend-core/src/components/sheet/HeaderRow.svelte
index c5ff8e73f1..66807a0f65 100644
--- a/packages/frontend-core/src/components/sheet/HeaderRow.svelte
+++ b/packages/frontend-core/src/components/sheet/HeaderRow.svelte
@@ -8,7 +8,7 @@
   const { visibleColumns, reorder } = getContext("spreadsheet")
 </script>
 
-<div>
+<div class="header">
   <SheetScrollWrapper scrollVertically={false} wheelInteractive={false}>
     <div class="row">
       {#each $visibleColumns as column}
@@ -35,6 +35,10 @@
 </div>
 
 <style>
+  .header {
+    background: var(--background);
+    border-bottom: var(--cell-border);
+  }
   .row {
     display: flex;
   }
diff --git a/packages/frontend-core/src/components/sheet/Sheet.svelte b/packages/frontend-core/src/components/sheet/Sheet.svelte
index 2c337dc22c..678405f8f8 100644
--- a/packages/frontend-core/src/components/sheet/Sheet.svelte
+++ b/packages/frontend-core/src/components/sheet/Sheet.svelte
@@ -105,6 +105,7 @@
     --cell-spacing: 4px;
     --cell-font-size: 14px;
     --controls-height: 50px;
+    --cell-border: 1px solid var(--spectrum-global-color-gray-200);
   }
   .sheet,
   .sheet :global(*) {
diff --git a/packages/frontend-core/src/components/sheet/SheetCell.svelte b/packages/frontend-core/src/components/sheet/SheetCell.svelte
index e6b2b0d7fa..f3b3a9af39 100644
--- a/packages/frontend-core/src/components/sheet/SheetCell.svelte
+++ b/packages/frontend-core/src/components/sheet/SheetCell.svelte
@@ -32,11 +32,8 @@
   /* Cells */
   .cell {
     height: var(--cell-height);
-    border-style: solid;
-    border-color: var(--spectrum-global-color-gray-200);
-    border-width: 0;
-    border-bottom-width: 1px;
-    border-right-width: 1px;
+    border-bottom: var(--cell-border);
+    border-right: var(--cell-border);
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
@@ -45,7 +42,6 @@
     font-size: var(--cell-font-size);
     gap: var(--cell-spacing);
     background: var(--cell-background);
-    transition: border-color 130ms ease-out;
     flex: 0 0 var(--width);
     position: relative;
     width: 0;
@@ -71,9 +67,9 @@
   .cell.header {
     background: var(--background);
     padding: 0 var(--cell-padding);
-    border-color: var(--spectrum-global-color-gray-200);
     gap: calc(2 * var(--cell-spacing));
     z-index: 10;
+    border-bottom: none;
   }
   .cell.header :global(> span) {
     flex: 1 1 auto;
@@ -106,7 +102,7 @@
   .cell.label {
     padding: var(--cell-padding);
     flex: 0 0 40px;
-    border-right-width: 0;
+    border-right: none;
     position: sticky;
     left: 0;
     z-index: 5;
diff --git a/packages/frontend-core/src/components/sheet/StickyColumn.svelte b/packages/frontend-core/src/components/sheet/StickyColumn.svelte
index 62094408b8..02d35720a3 100644
--- a/packages/frontend-core/src/components/sheet/StickyColumn.svelte
+++ b/packages/frontend-core/src/components/sheet/StickyColumn.svelte
@@ -54,7 +54,7 @@
   style="--width:{width}px;"
   class:scrolled={scrollLeft > 0}
 >
-  <div class="row">
+  <div class="header row">
     <!-- Field headers -->
     <SheetCell header label on:click={selectAll} width="40" left="0">
       <Checkbox value={rowCount && selectedRowCount === rowCount} />
@@ -160,6 +160,9 @@
     border-right-width: 0;
   }
 
+  .header {
+    border-bottom: var(--cell-border);
+  }
   .row {
     display: flex;
     flex-direction: row;