fix: minor style issues

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",

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>
     );
   }

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;
+      }
+    }
+  }
 }

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,

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;

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"