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>

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: 1px solid $gray-700;
-    border-left: 1px solid $dark;
+    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]);
-    }
-  }
 }
 

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,