From bf454250feb673b6839b15ee38fd998c6c45d2f0 Mon Sep 17 00:00:00 2001
From: Keegan George <kgeorge13@gmail.com>
Date: Thu, 14 Jul 2022 10:04:50 -0700
Subject: [PATCH] UX: Update cell styles

---
 scss/vendor/jspreadsheet-theme.scss | 78 ++++++++++++++++++++---------
 1 file changed, 54 insertions(+), 24 deletions(-)

diff --git a/scss/vendor/jspreadsheet-theme.scss b/scss/vendor/jspreadsheet-theme.scss
index 7bdd490..d8f4835 100644
--- a/scss/vendor/jspreadsheet-theme.scss
+++ b/scss/vendor/jspreadsheet-theme.scss
@@ -1,19 +1,23 @@
 :root {
-  --jexcel_header_color: var(--primary);
-  --jexcel_header_color_highlighted: var(--tertiary);
-  --jexcel_header_background: var(--primary-low);
-  --jexcel_header_background_highlighted: var(--tertiary);
+  --jexcel_header_color: var(--primary-high);
+  --jexcel_header_color_highlighted: var(--primary-high);
+  --jexcel_header_background: var(--primary-very-low);
+  --jexcel_header_background_highlighted: var(--primary-low);
+
   --jexcel_content_color: var(--primary);
-  --jexcel_content_color_highlighted: #333;
+  --jexcel_content_color_highlighted: var(--primary-high);
   --jexcel_content_background: var(--secondary);
-  --jexcel_content_background_highlighted: var(--highlight-low);
-  --jexcel_menu_background: #7e7e7e;
-  --jexcel_menu_background_highlighted: #ebebeb;
-  --jexcel_menu_color: #ddd;
-  --jexcel_menu_color_highlighted: #222;
-  --jexcel_border_color: var(--primary-medium);
-  --jexcel_border_color_highlighted: var(--highlight-high);
-  --active_color: #eee;
+  --jexcel_content_background_highlighted: var(--tertiary-very-low);
+
+  --jexcel_menu_background: var(--secondary);
+  --jexcel_menu_background_highlighted: var(--secondary-very-high);
+  --jexcel_menu_color: var(--primary-medium);
+  --jexcel_menu_color_highlighted: var(--primary);
+
+  --jexcel_border_color: var(--primary-low-mid);
+  --jexcel_border_color_highlighted: var(--tertiary-high);
+
+  --active_color: var(--primary-very-low);
   --active-color: var(--active_color);
 }
 
@@ -22,6 +26,10 @@
   border-right: 1px solid var(--jexcel_border_color);
 }
 
+.jexcel_corner {
+  background-color: var(--tertiary);
+}
+
 .jexcel > tbody > tr > td,
 .jexcel > thead > tr > td {
   border-top: 1px solid var(--jexcel_border_color);
@@ -60,24 +68,22 @@
   border: 1px solid var(--jexcel_border_color);
 }
 
-.jexcel_contextmenu {
+.jexcel_contextmenu.jcontextmenu {
   border: 1px solid var(--jexcel_border_color);
   background: var(--jexcel_menu_background);
   color: var(--jexcel_menu_color);
-  box-shadow: var(--jexcel_menu_box_shadow);
-  -webkit-box-shadow: var(--jexcel_menu_box_shadow);
-  -moz-box-shadow: var(--jexcel_menu_box_shadow);
+  box-shadow: 0 12px 12px rgba(0, 0, 0, 0.15);
 }
 
-.jexcel_contextmenu > div a {
+.jcontextmenu > div a {
   color: var(--jexcel_menu_color);
 }
 
-.jexcel_contextmenu > div:not(.contextmenu-line):hover a {
+.jcontextmenu > div:not(.contextmenu-line):hover a {
   color: var(--jexcel_menu_color_highlighted);
 }
 
-.jexcel_contextmenu > div:not(.contextmenu-line):hover {
+.jcontextmenu > div:not(.contextmenu-line):hover {
   background: var(--jexcel_menu_background_highlighted);
 }
 
@@ -153,16 +159,16 @@
 }
 
 .jexcel .highlight-bottom {
-  border-bottom: 1px solid var(--jexcel_border_color_highlighted);
+  border-bottom: 1.5px solid var(--jexcel_border_color_highlighted);
 }
 .jexcel .highlight-right {
-  border-right: 1px solid var(--jexcel_border_color_highlighted);
+  border-right: 1.5px solid var(--jexcel_border_color_highlighted);
 }
 .jexcel .highlight-left {
-  border-left: 1px solid var(--jexcel_border_color_highlighted);
+  border-left: 1.5px solid var(--jexcel_border_color_highlighted);
 }
 .jexcel .highlight-top {
-  border-top: 1px solid var(--jexcel_border_color_highlighted);
+  border-top: 1.5px solid var(--jexcel_border_color_highlighted);
 }
 .jexcel .copying-top {
   border-top-color: var(--jexcel_border_color_highlighted);
@@ -183,3 +189,27 @@
   -webkit-box-shadow: unset;
   box-shadow: unset;
 }
+
+table.jexcel > thead > tr > td {
+  border-top: 1px solid var(--jexcel_border_color);
+  border-right: 1px solid var(--jexcel_border_color);
+  border-bottom: none;
+  background-color: var(--jexcel_header_background);
+
+  &:first-child {
+    border-left: 1px solid var(--jexcel_border_color);
+  }
+}
+
+table.jexcel > thead > tr > td.selected {
+  background-color: var(--jexcel_header_background_highlighted);
+  color: var(--jexcel_header_color_highlighted);
+}
+
+table.jexcel > tbody > tr > td {
+  border-right: 1px solid var(--jexcel_border_color);
+
+  &:first-child {
+    border-left: 1px solid var(--jexcel_border_color);
+  }
+}