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",
@@ -107,7 +107,7 @@
     "json-loader": "^0.5.4",
     "lbry-format": "https://github.com/lbryio/lbry-format.git",
     "lbry-redux": "lbryio/lbry-redux#2a7e05940f892f104428eeb37bd1f178da811a09",
-    "lbryinc": "lbryio/lbryinc#351d0a08806b0f770b50066b61a806171f6424d4",
+    "lbryinc": "lbryio/lbryinc#437260f3dad2321e892388b68749ee6af01aff2b",
     "lint-staged": "^7.0.2",
     "localforage": "^1.7.1",
     "make-runnable": "^1.3.6",

src/ui/component/common/form-components/form-field.jsx

@@ -85,7 +85,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 +99,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 +129,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 +169,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 +187,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/component/socialShare/view.jsx

@@ -40,19 +40,27 @@ class SocialShare extends React.PureComponent<Props> {
     let lbryURL;
     if (isChannel) {
       // For channel claims, the channel name (@something) is in `claim.name`
-      speechURL = `${speechPrefix}${claimName}:${claimId}`;
-      lbryURL = `${lbryPrefix}${claimName}#${claimId}`;
+      speechURL = `${claimName}:${claimId}`;
+      lbryURL = `${claimName}#${claimId}`;
     } else {
       // If it's for a regular claim, check if it has an associated channel
       speechURL =
         channelName && channelClaimId
-          ? `${speechPrefix}${channelName}:${channelClaimId}/${claimName}`
-          : `${speechPrefix}${claimId}/${claimName}`;
+          ? `${channelName}:${channelClaimId}/${claimName}`
+          : `${claimId}/${claimName}`;
 
       lbryURL =
         channelName && channelClaimId
-          ? `${lbryPrefix}${channelName}#${channelClaimId}/${claimName}`
-          : `${lbryPrefix}${claimName}#${claimId}`;
+          ? `${channelName}#${channelClaimId}/${claimName}`
+          : `${claimName}#${claimId}`;
+    }
+
+    if (lbryURL) {
+      lbryURL = `${lbryPrefix}${encodeURIComponent(lbryURL)}`;
+    }
+
+    if (speechURL) {
+      speechURL = `${speechPrefix}${encodeURIComponent(speechURL)}`;
     }
 
     return (

src/ui/scss/component/_form-field.scss

@@ -115,7 +115,7 @@ fieldset-group {
     fieldset-section:first-child {
       .form-field__prefix {
         white-space: nowrap;
-        padding: 0.15em var(--spacing-s);
+        padding: 0.2rem var(--spacing-s);
         padding-right: 0;
         border: 1px solid;
         border-right: 0;

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"
@@ -6074,9 +6074,9 @@ lbry-redux@lbryio/lbry-redux#2a7e05940f892f104428eeb37bd1f178da811a09:
     reselect "^3.0.0"
     uuid "^3.3.2"
 
-lbryinc@lbryio/lbryinc#351d0a08806b0f770b50066b61a806171f6424d4:
+lbryinc@lbryio/lbryinc#437260f3dad2321e892388b68749ee6af01aff2b:
   version "0.0.1"
-  resolved "https://codeload.github.com/lbryio/lbryinc/tar.gz/351d0a08806b0f770b50066b61a806171f6424d4"
+  resolved "https://codeload.github.com/lbryio/lbryinc/tar.gz/437260f3dad2321e892388b68749ee6af01aff2b"
   dependencies:
     bluebird "^3.5.1"
     reselect "^3.0.0"