Merge pull request #2370 from lbryio/css-fixes

Minor ux fixes
2019-03-21 14:01:00 -04:00 · 2019-03-21 14:01:00 -04:00 · faf5e21e0c
commit faf5e21e0c
parent d2a77bc61e 15e6009bd9
8 changed files with 50 additions and 28 deletions
--- 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",
@ -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",
--- a/src/ui/component/common/form-components/form-field.jsx
+++ b/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>
    );
  }
--- a/src/ui/component/socialShare/view.jsx
+++ b/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 (
--- a/src/ui/scss/component/_form-field.scss
+++ b/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;
--- 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;
+      }
+    }
+  }
 }
--- 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,
--- 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;
--- 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"
@ -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"