From a7c2fdad1ba41b60f7c2030063e781492bd54f27 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Wed, 31 Oct 2018 14:51:48 -0400
Subject: [PATCH] fix markdown editor styles on dark mode

---
 .../scss/component/_markdown-editor.scss      | 12 +-----
 src/renderer/scss/themes/_dark.scss           | 43 +++++++++++++++++++
 2 files changed, 45 insertions(+), 10 deletions(-)

diff --git a/src/renderer/scss/component/_markdown-editor.scss b/src/renderer/scss/component/_markdown-editor.scss
index b6132a137..f2b9f9c61 100644
--- a/src/renderer/scss/component/_markdown-editor.scss
+++ b/src/renderer/scss/component/_markdown-editor.scss
@@ -16,16 +16,14 @@
   }
 
   .CodeMirror-selected {
-    background-color: transparent;
+    // background-color: transparent;
   }
 
   .CodeMirror-selectedtext {
-    background-color: $lbry-teal-5;
     color: $lbry-white;
   }
 
   .cm-spell-error:not(.cm-url):not(.cm-comment):not(.cm-tag):not(.cm-word) {
-    background: none;
     text-decoration: underline;
     text-decoration-color: $lbry-red-3;
     text-decoration-style: dotted;
@@ -65,7 +63,7 @@
   }
 
   a {
-    color: $lbry-black !important;
+    color: $lbry-black;
     transition: opacity 0.3s ease;
 
     &:not(.active),
@@ -85,12 +83,6 @@
   }
 }
 
-.editor-preview {
-  background-color: rgba($lbry-gray-1, 0.5);
-  border: none;
-  font-size: calc(var(--font-size-subtext-multiple) * 1em);
-}
-
 .editor-statusbar {
   color: rgba($lbry-black, 0.5);
 }
diff --git a/src/renderer/scss/themes/_dark.scss b/src/renderer/scss/themes/_dark.scss
index 4eb043ec1..41b62c0b0 100644
--- a/src/renderer/scss/themes/_dark.scss
+++ b/src/renderer/scss/themes/_dark.scss
@@ -130,4 +130,47 @@ html[data-theme='dark'] {
     border: 1px solid rgba($lbry-gray-1, 0.1);
     color: $lbry-gray-3;
   }
+
+  // Markdown editor on publish page
+  .form-field--SimpleMDE {
+    .editor-toolbar {
+      background-color: rgba($lbry-white, 0.2);
+
+      a {
+        color: $lbry-white !important; // We need to use !important to override the CodeMirror styles
+
+        &:hover {
+          color: $lbry-black !important;
+        }
+      }
+
+      &.disabled-for-preview {
+        a:not(.no-disable) {
+          background-color: transparent;
+        }
+
+        // The markdown preview button is highlighted during preview when the other buttons are disabled
+        a.no-disable {
+          background-color: rgba($lbry-white, 0.3);
+        }
+      }
+    }
+
+    .CodeMirror {
+      border-left: 1px solid rgba($lbry-white, 0.2);
+      border-right: 1px solid rgba($lbry-white, 0.2);
+      border-bottom: 1px solid rgba($lbry-white, 0.2);
+      background-color: rgba($lbry-white, 0.1);
+      color: $lbry-white;
+
+      .CodeMirror-selectedtext {
+        color: $lbry-black;
+      }
+
+      .editor-preview.editor-preview-active {
+        background-color: $lbry-gray-5;
+        color: $lbry-black;
+      }
+    }
+  }
 }