From bba2b207c451e23a983e49c4b01b69d9b2ff34d7 Mon Sep 17 00:00:00 2001
From: Philip Molares <philip.molares@udo.edu>
Date: Thu, 22 Apr 2021 12:55:51 +0200
Subject: [PATCH] TablePicker: Change table cells in picker (#1202)

- Fix error that the border of table cells was invisible in dark mode
- Add margin to table cells
- Add full border to table cells
- Change border-color while hovering over table cells

Signed-off-by: Philip Molares <philip.molares@udo.edu>
---
 .../tool-bar/table-picker/table-picker.scss   | 24 +++----------------
 .../tool-bar/table-picker/table-picker.tsx    |  2 +-
 2 files changed, 4 insertions(+), 22 deletions(-)

diff --git a/src/components/editor-page/editor-pane/tool-bar/table-picker/table-picker.scss b/src/components/editor-page/editor-pane/tool-bar/table-picker/table-picker.scss
index 9a511f0c3..16811cf3c 100644
--- a/src/components/editor-page/editor-pane/tool-bar/table-picker/table-picker.scss
+++ b/src/components/editor-page/editor-pane/tool-bar/table-picker/table-picker.scss
@@ -11,33 +11,15 @@
   @import "../../../../../style/variables.light";
 
   .table-cell {
-    border-top: 1px solid $dark;
-    border-left: 1px solid $dark;
+    border: 1px solid $gray-700;
+    margin: 1px;
+    border-radius: 2px;
   }
 
   .table-container {
-    border-bottom: 1px solid $dark;
-    border-right: 1px solid $dark;
     display: grid;
     grid-template-columns: repeat(10, 15px [col-start]);
     grid-template-rows: repeat(8, 15px [row-start]);
   }
-
-  body.dark {
-    @import "../../../../../style/variables.dark";
-
-    .table-cell {
-      border-top: 1px solid $dark;
-      border-left: 1px solid $dark;
-    }
-
-    .table-container {
-      border-bottom: 1px solid $dark;
-      border-right: 1px solid $dark;
-      display: grid;
-      grid-template-columns: repeat(10, 15px [col-start]);
-      grid-template-rows: repeat(8, 15px [row-start]);
-    }
-  }
 }
 
diff --git a/src/components/editor-page/editor-pane/tool-bar/table-picker/table-picker.tsx b/src/components/editor-page/editor-pane/tool-bar/table-picker/table-picker.tsx
index 7ebd59523..f25c8a687 100644
--- a/src/components/editor-page/editor-pane/tool-bar/table-picker/table-picker.tsx
+++ b/src/components/editor-page/editor-pane/tool-bar/table-picker/table-picker.tsx
@@ -60,7 +60,7 @@ export const TablePicker: React.FC<TablePickerProps> = ({ show, onDismiss, onTab
               .map((col: number) => (
                   <div
                     key={ `${ row }_${ col }` }
-                    className={ `table-cell ${ tableSize && row < tableSize.rows && col < tableSize.columns ? 'bg-primary' : '' }` }
+                    className={ `table-cell ${ tableSize && row < tableSize.rows && col < tableSize.columns ? 'bg-primary border-primary' : '' }` }
                     onMouseEnter={ () => {
                       setTableSize({
                         rows: row + 1,