From 4297c72dd0c0e24dc520172b42401ca48333e9e4 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Thu, 21 Mar 2019 11:22:23 -0400
Subject: [PATCH] fix: minor style issues

---
 package.json                                  |  2 +-
 .../common/form-components/form-field.jsx     | 15 ++++++------
 src/ui/scss/component/_markdown-editor.scss   | 24 +++++++++++++++----
 src/ui/scss/component/_markdown-preview.scss  |  1 -
 src/ui/scss/component/_table.scss             |  1 +
 yarn.lock                                     |  8 +++----
 6 files changed, 33 insertions(+), 18 deletions(-)

diff --git a/package.json b/package.json
index d814e379b..264659080 100644
--- a/package.json
+++ b/package.json
@@ -58,7 +58,7 @@
     "@babel/register": "^7.0.0",
     "@hot-loader/react-dom": "16.8",
     "@lbry/color": "^1.0.2",
-    "@lbry/components": "^2.2.4",
+    "@lbry/components": "^2.3.3",
     "@types/three": "^0.93.1",
     "async-exit-hook": "^2.0.1",
     "babel-eslint": "^10.0.1",
diff --git a/src/ui/component/common/form-components/form-field.jsx b/src/ui/component/common/form-components/form-field.jsx
index c74cbea7a..806fcc39c 100644
--- a/src/ui/component/common/form-components/form-field.jsx
+++ b/src/ui/component/common/form-components/form-field.jsx
@@ -3,6 +3,7 @@ import * as React from 'react';
 import ReactDOMServer from 'react-dom/server';
 import MarkdownPreview from 'component/common/markdown-preview';
 import SimpleMDE from 'react-simplemde-editor';
+// For now I just added them in the markdown-editor scss file
 import 'easymde/dist/easymde.min.css';
 import Toggle from 'react-toggle';
 import { openEditorMenu, stopContextMenu } from 'util/context-menu';
@@ -85,7 +86,7 @@ export class FormField extends React.PureComponent<Props> {
         input = (
           <Wrapper>
             <radio-element>
-              <input id={name} type='radio' {...inputProps} />
+              <input id={name} type="radio" {...inputProps} />
               <label htmlFor={name}>{label}</label>
               <radio-toggle onClick={inputProps.onChange} />
             </radio-element>
@@ -99,7 +100,7 @@ export class FormField extends React.PureComponent<Props> {
         input = (
           <Wrapper>
             <checkbox-element {...elementProps}>
-              <input id={name} type='checkbox' {...inputProps} />
+              <input id={name} type="checkbox" {...inputProps} />
               <label htmlFor={name}>{label}</label>
               <checkbox-toggle onClick={inputProps.onChange} />
             </checkbox-element>
@@ -129,13 +130,13 @@ export class FormField extends React.PureComponent<Props> {
         };
 
         input = (
-          <div className='form-field--SimpleMDE' onContextMenu={stopContextMenu}>
+          <div className="form-field--SimpleMDE" onContextMenu={stopContextMenu}>
             <fieldset-section>
               <label htmlFor={name}>{label}</label>
               <SimpleMDE
                 {...inputProps}
                 id={name}
-                type='textarea'
+                type="textarea"
                 events={handleEvents}
                 options={{
                   hideIcons: ['heading', 'image', 'fullscreen', 'side-by-side'],
@@ -169,10 +170,10 @@ export class FormField extends React.PureComponent<Props> {
           <React.Fragment>
             <fieldset-section>
               <label htmlFor={name}>
-                {errorMessage ? <span className='error-text'>{errorMessage}</span> : label}
+                {errorMessage ? <span className="error-text">{errorMessage}</span> : label}
               </label>
               {prefix && (
-                <label className='form-field--inline-prefix' htmlFor={name}>
+                <label className="form-field--inline-prefix" htmlFor={name}>
                   {prefix}
                 </label>
               )}
@@ -187,7 +188,7 @@ export class FormField extends React.PureComponent<Props> {
       <React.Fragment>
         {input}
 
-        {helper && <div className='form-field__help'>{helper}</div>}
+        {helper && <div className="form-field__help">{helper}</div>}
       </React.Fragment>
     );
   }
diff --git a/src/ui/scss/component/_markdown-editor.scss b/src/ui/scss/component/_markdown-editor.scss
index 4a1f93d67..dace0250f 100644
--- a/src/ui/scss/component/_markdown-editor.scss
+++ b/src/ui/scss/component/_markdown-editor.scss
@@ -71,8 +71,9 @@
     }
   }
 
-  a {
+  button {
     color: $lbry-black;
+    border-color: transparent;
     transition: opacity 0.3s ease;
 
     &:not(.active),
@@ -82,7 +83,6 @@
 
     &.active,
     &:hover {
-      border-color: transparent;
       opacity: 1;
     }
   }
@@ -94,7 +94,7 @@
   html[data-mode='dark'] & {
     background-color: rgba($lbry-white, 0.2);
 
-    a {
+    button {
       color: $lbry-white !important; // We need to use !important to override the CodeMirror styles
 
       &.active {
@@ -107,12 +107,12 @@
     }
 
     &.disabled-for-preview {
-      a:not(.no-disable) {
+      button:not(.no-disable) {
         background-color: transparent;
       }
 
       // The markdown preview button is highlighted during preview when the other buttons are disabled
-      a.no-disable {
+      button.no-disable {
         background-color: rgba($lbry-white, 0.3);
       }
     }
@@ -131,4 +131,18 @@
 
 .form-field--SimpleMDE {
   margin-top: var(--spacing-vertical-large);
+
+  // Overriding the lbry/components form styling
+  .editor-toolbar {
+    button:not(.button) {
+      padding-right: 0;
+      padding-left: 0;
+      background-color: transparent !important;
+      border: transparent;
+
+      &:hover {
+        background-color: $lbry-white !important;
+      }
+    }
+  }
 }
diff --git a/src/ui/scss/component/_markdown-preview.scss b/src/ui/scss/component/_markdown-preview.scss
index 801ceba9f..a66d4ab1d 100644
--- a/src/ui/scss/component/_markdown-preview.scss
+++ b/src/ui/scss/component/_markdown-preview.scss
@@ -37,7 +37,6 @@
   table {
     margin-bottom: 1.2rem;
     padding: var(--spacing-vertical-medium);
-    background-color: $lbry-white;
 
     tr {
       td,
diff --git a/src/ui/scss/component/_table.scss b/src/ui/scss/component/_table.scss
index 90d5a2406..d095be09b 100644
--- a/src/ui/scss/component/_table.scss
+++ b/src/ui/scss/component/_table.scss
@@ -1,5 +1,6 @@
 @import '~@lbry/components/sass/table/_index.scss';
 
+table,
 .table {
   [data-mode='dark'] & {
     background-color: transparent;
diff --git a/yarn.lock b/yarn.lock
index 523566379..a781ced3a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -803,10 +803,10 @@
   resolved "https://registry.yarnpkg.com/@lbry/color/-/color-1.1.0.tgz#00d9474de64bafa507d07f137dbe5754ee65c4e6"
   integrity sha512-wtFrKk3wWLcqbbjVMU87yEXsiRkUWHNzsZPspFI0dNX5uzprES1L3ONLwBwtrIkEYDHtszs8+eFDQZdJC6whfw==
 
-"@lbry/components@^2.2.4":
-  version "2.2.5"
-  resolved "https://registry.yarnpkg.com/@lbry/components/-/components-2.2.5.tgz#61d27e99fef18cd494a2daafb7d522880e02cf60"
-  integrity sha512-RPGJvY9HuaK0YtIBompHr67RquCXwqi1QKt1gqSqUGnv+vaMS2S0Vj5Jw4Tf9U2cLEfYt9j9GGiRpBXWEsYjIw==
+"@lbry/components@^2.3.3":
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/@lbry/components/-/components-2.3.3.tgz#c9804703a5db9a23b5185cbc9849a287cb47bea6"
+  integrity sha512-AaR0lYxNG/UlWr6UMl5bylwoGNaqV/NhzomVBtuDmQH3tJ9WbUNrDHFC86F5N/ZyejnhdA+aGyb4KyLmwrzkBg==
 
 "@mapbox/hast-util-table-cell-style@^0.1.3":
   version "0.1.3"