From 969e7e2fe67dd0a970479c51187c4917d16e3461 Mon Sep 17 00:00:00 2001
From: NGPixel <github@ngpixel.com>
Date: Mon, 22 Jun 2020 23:56:18 -0400
Subject: [PATCH] fix: table styles dark mode

---
 client/components/editor/editor-ckeditor.vue | 11 ++++++
 client/themes/default/scss/app.scss          | 35 ++++++++++++++++++--
 2 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/client/components/editor/editor-ckeditor.vue b/client/components/editor/editor-ckeditor.vue
index e3908826..e9af534a 100644
--- a/client/components/editor/editor-ckeditor.vue
+++ b/client/components/editor/editor-ckeditor.vue
@@ -68,6 +68,17 @@ export default {
       language: this.locale,
       placeholder: 'Type the page content here',
       disableNativeSpellChecker: false,
+      // TODO: Mention autocomplete
+      //
+      // mention: {
+      //   feeds: [
+      //     {
+      //       marker: '@',
+      //       feed: [ '@Barney', '@Lily', '@Marshall', '@Robin', '@Ted' ],
+      //       minimumCharacters: 1
+      //     }
+      //   ]
+      // },
       wordCount: {
         onUpdate: stats => {
           this.stats = {
diff --git a/client/themes/default/scss/app.scss b/client/themes/default/scss/app.scss
index 61d4a3cf..b5fb298d 100644
--- a/client/themes/default/scss/app.scss
+++ b/client/themes/default/scss/app.scss
@@ -662,24 +662,46 @@
       border-collapse: collapse;
       box-shadow: 0 0 5px 0 rgba(0, 0, 0, .07);
 
+      @at-root .theme--dark & {
+        background-color: darken(mc('grey', '900'), 3%);
+      }
+
       td, th {
         border: 1px solid mc('blue-grey', '100');
         box-shadow: inset -1px -1px 0 0 #FFF, inset 1px 0 0 #FFF;
         padding: .5rem .75rem;
+
+        @at-root .theme--dark & {
+          border-color: mc('grey', '700');
+          box-shadow: inset -1px -1px 0 0 rgba(0,0,0, .5);
+        }
       }
 
       th {
-        background-color: lighten(mc('blue-grey', '50'), 1%);;
+        background-color: lighten(mc('blue-grey', '50'), 1%);
         font-weight: 700;
-        color: mc('grey', '800');
+        color: mc('blue-grey', '700');
+
+        @at-root .theme--dark & {
+          background-color: mc('grey', '800');
+          color: mc('grey', '400');
+        }
       }
 
       thead th {
         border-bottom: 2px solid mc('blue-grey', '100');
+
+        @at-root .theme--dark & {
+          border-bottom: none;
+        }
       }
 
       tbody th {
         background-color: lighten(mc('blue-grey', '50'), 4%);
+
+        @at-root .theme--dark & {
+          background-color: darken(mc('grey', '800'), 8%);
+        }
       }
     }
   }
@@ -842,6 +864,15 @@
     }
   }
 
+  .mention {
+    background-color: rgba(153, 0, 48, .1);
+    color: #990030;
+
+    @at-root .theme--dark & {
+      color: mc('pink', '500');
+    }
+  }
+
 }
 
 // ---------------------------------