Merge pull request #1608 from lbryio/css-fixes

More css fixes

package.json

@@ -61,6 +61,7 @@
     "react-paginate": "^5.2.1",
     "react-redux": "^5.0.3",
     "react-simplemde-editor": "^3.6.15",
+    "react-toggle": "^4.0.2",
     "react-transition-group": "1.x",
     "redux": "^3.6.0",
     "redux-logger": "^3.0.1",

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

@@ -5,6 +5,7 @@ import classnames from 'classnames';
 import MarkdownPreview from 'component/common/markdown-preview';
 import SimpleMDE from 'react-simplemde-editor';
 import 'simplemde/dist/simplemde.min.css';
+import Toggle from 'react-toggle';
 
 type Props = {
   name: string,
@@ -21,6 +22,7 @@ type Props = {
   children?: React.Node,
   stretch?: boolean,
   affixClass?: string, // class applied to prefix/postfix label
+  useToggle?: boolean,
 };
 
 export class FormField extends React.PureComponent<Props> {
@@ -37,6 +39,7 @@ export class FormField extends React.PureComponent<Props> {
       children,
       stretch,
       affixClass,
+      useToggle,
       ...inputProps
     } = this.props;
 
@@ -68,6 +71,8 @@ export class FormField extends React.PureComponent<Props> {
         );
       } else if (type === 'textarea') {
         input = <textarea type={type} id={name} {...inputProps} />;
+      } else if (type === 'checkbox' && useToggle) {
+        input = <Toggle id={name} {...inputProps} />;
       } else {
         input = <input type={type} id={name} {...inputProps} />;
       }

src/renderer/component/common/tooltip.jsx

@@ -8,6 +8,7 @@ type Props = {
   children: ?React.Node,
   icon: ?boolean,
   direction: string,
+  onFormField?: boolean,
 };
 
 class ToolTip extends React.PureComponent<Props> {
@@ -16,7 +17,7 @@ class ToolTip extends React.PureComponent<Props> {
   };
 
   render() {
-    const { children, label, body, icon, direction } = this.props;
+    const { children, label, body, icon, direction, onFormField } = this.props;
 
     const tooltipContent = children || label;
 
@@ -29,6 +30,7 @@ class ToolTip extends React.PureComponent<Props> {
           'tooltip--right': direction === 'right',
           'tooltip--bottom': direction === 'bottom',
           'tooltip--left': direction === 'left',
+          'tooltip--on-formfield': onFormField,
         })}
       >
         {tooltipContent}

src/renderer/page/file/view.jsx

@@ -7,7 +7,6 @@ import FilePrice from 'component/filePrice';
 import FileDetails from 'component/fileDetails';
 import FileActions from 'component/fileActions';
 import UriIndicator from 'component/uriIndicator';
-import { FormField, FormRow } from 'component/common/form';
 import Icon from 'component/common/icon';
 import DateTime from 'component/dateTime';
 import * as icons from 'constants/icons';
@@ -21,6 +20,8 @@ import type { Claim } from 'types/claim';
 import type { Subscription } from 'types/subscription';
 import FileDownloadLink from 'component/fileDownloadLink';
 import classnames from 'classnames';
+import { FormField, FormRow } from 'component/common/form';
+import ToolTip from 'component/common/tooltip';
 
 type Props = {
   claim: Claim,
@@ -195,8 +196,7 @@ class FilePage extends React.Component<Props> {
                   )}
                 </div>
               </div>
-              {!claimIsMine ||
-                (speechSharable && (
+              {(!claimIsMine || speechSharable) && (
                 <div className="card__actions card__actions--end">
                   {!claimIsMine && (
                     <Button
@@ -210,14 +210,21 @@ class FilePage extends React.Component<Props> {
                     <ViewOnWebButton claimId={claim.claim_id} claimName={claim.name} />
                   )}
                 </div>
-                ))}
-              <FormRow alignRight>
+              )}
+              <FormRow alignRight padded>
                 <FormField
-                  type="checkbox"
+                  useToggle
                   name="autoplay"
-                  onChange={this.onAutoplayChange}
+                  type="checkbox"
                   checked={autoplay}
-                  postfix={__('Autoplay')}
+                  onChange={this.onAutoplayChange}
+                  postfix={
+                    <ToolTip
+                      onFormField
+                      label={__('Autoplay')}
+                      body={__('Automatically download and play free content.')}
+                    />
+                  }
                 />
               </FormRow>
             </div>

src/renderer/scss/_vars.scss

@@ -78,6 +78,7 @@ $large-breakpoint: 1760px;
   --input-copyable-border: var(--color-grey);
   --input-select-bg-color: var(--color-grey);
   --input-select-color: var(--text-color);
+  --input-switch-color: var(--color-teal);
 
   /* input:disabled */
   --input-disabled-border-color: rgba(0, 0, 0, 0.42);

src/renderer/scss/all.scss

@@ -24,3 +24,4 @@
 @import 'component/_nav.scss';
 @import 'component/_file-list.scss';
 @import 'component/_search.scss';
+@import 'component/_toggle.scss';

src/renderer/scss/component/_card.scss

@@ -27,17 +27,17 @@
     padding-top: var(--video-aspect-ratio);
   }
 
-  .channel-name {
-    font-size: 12px;
-  }
-}
-
   .card__media-text {
     // for the weird padding required for dynamic height
     // this lets the text sit in the middle instead of the bottom
     margin-top: calc(var(--video-aspect-ratio) * -1);
   }
 
+  .channel-name {
+    font-size: 12px;
+  }
+}
+
 .card--link {
   cursor: pointer;
 }

src/renderer/scss/component/_content.scss

@@ -90,6 +90,10 @@
   &.content__empty--nsfw {
     background-color: var(--color-nsfw);
   }
+
+  .card__media-text {
+    margin-top: calc(var(--video-aspect-ratio) * -1);
+  }
 }
 
 img {

src/renderer/scss/component/_toggle.scss

@@ -0,0 +1,112 @@
+// Taken from react-toggle/style.css
+// Edited to add the teal color, nothing else
+.react-toggle {
+  display: inline-block;
+  position: relative;
+  cursor: pointer;
+  background-color: transparent;
+  border: 0;
+  padding: 0;
+  user-select: none;
+}
+
+.react-toggle-screenreader-only {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.react-toggle--disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+  -webkit-transition: opacity 0.25s;
+  transition: opacity 0.25s;
+}
+
+.react-toggle-track {
+  width: 50px;
+  height: 24px;
+  padding: 0;
+  border-radius: 30px;
+  background-color: #4d4d4d;
+  -webkit-transition: all 0.2s ease;
+  -moz-transition: all 0.2s ease;
+  transition: all 0.2s ease;
+}
+
+.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
+  background-color: #000000;
+}
+
+.react-toggle--checked .react-toggle-track {
+  background-color: var(--input-switch-color);
+}
+
+.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
+  background-color: #158a88;
+}
+
+.react-toggle-track-check {
+  position: absolute;
+  width: 14px;
+  height: 10px;
+  top: 0px;
+  bottom: 0px;
+  margin-top: auto;
+  margin-bottom: auto;
+  line-height: 0;
+  left: 8px;
+  opacity: 0;
+  -webkit-transition: opacity 0.25s ease;
+  -moz-transition: opacity 0.25s ease;
+  transition: opacity 0.25s ease;
+}
+
+.react-toggle--checked .react-toggle-track-check {
+  opacity: 1;
+  -webkit-transition: opacity 0.25s ease;
+  -moz-transition: opacity 0.25s ease;
+  transition: opacity 0.25s ease;
+}
+
+.react-toggle-track-x {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  top: 0px;
+  bottom: 0px;
+  margin-top: auto;
+  margin-bottom: auto;
+  line-height: 0;
+  right: 10px;
+  opacity: 1;
+  transition: opacity 0.25s ease;
+}
+
+.react-toggle--checked .react-toggle-track-x {
+  opacity: 0;
+}
+
+.react-toggle-thumb {
+  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
+  position: absolute;
+  top: 1px;
+  left: 1px;
+  width: 22px;
+  height: 22px;
+  border: 1px solid #4d4d4d;
+  border-radius: 50%;
+  background-color: #fafafa;
+  box-sizing: border-box;
+  transition: all 0.25s ease;
+}
+
+.react-toggle--checked .react-toggle-thumb {
+  left: 27px;
+  border-color: var(--input-switch-color);
+}

src/renderer/scss/component/_tooltip.scss

@@ -4,8 +4,8 @@
 }
 
 // When there is a label for the tooltip and not just using a button or icon
-.tooltip.tooltip--label {
-  font-size: 12px;
+.tooltip--label {
+  font-size: 14px;
   padding-left: $spacing-vertical * 1/3;
 
   .tooltip__body {
@@ -13,7 +13,11 @@
   }
 }
 
-.tooltip.tooltip--icon {
+.tooltip--on-formfield {
+  padding: 0;
+}
+
+.tooltip--icon {
   margin-top: 5px;
 }
 
@@ -42,7 +46,7 @@
   border-style: solid;
 }
 
-.tooltip.tooltip--top .tooltip__body {
+.tooltip--top .tooltip__body {
   bottom: 100%;
   left: 50%;
   margin-left: -100px;
@@ -55,7 +59,7 @@
   }
 }
 
-.tooltip.tooltip--right .tooltip__body {
+.tooltip--right .tooltip__body {
   margin-top: -5px;
   margin-left: 10px;
 
@@ -67,7 +71,7 @@
   }
 }
 
-.tooltip.tooltip--bottom .tooltip__body {
+.tooltip--bottom .tooltip__body {
   top: 90%;
   left: 50%;
   margin-left: -100px;
@@ -80,7 +84,7 @@
   }
 }
 
-.tooltip.tooltip--left .tooltip__body {
+.tooltip--left .tooltip__body {
   top: -5px;
   right: 105%;
 

yarn.lock

@@ -7632,6 +7632,12 @@ react-simplemde-editor@^3.6.15:
   dependencies:
     simplemde "^1.11.2"
 
+react-toggle@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/react-toggle/-/react-toggle-4.0.2.tgz#77f487860efb87fafd197672a2db8c885be1440f"
+  dependencies:
+    classnames "^2.2.5"
+
 react-transition-group@1.x:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-1.2.1.tgz#e11f72b257f921b213229a774df46612346c7ca6"