From 8d09b03064ecadf0884a2a3b815a064660ee978a Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Fri, 15 Jun 2018 13:06:40 -0400
Subject: [PATCH 1/4] fix: show tip/speech links on videos

---
 src/renderer/page/file/view.jsx | 31 +++++++++++++++----------------
 1 file changed, 15 insertions(+), 16 deletions(-)

diff --git a/src/renderer/page/file/view.jsx b/src/renderer/page/file/view.jsx
index 83d30fb84..5cfe94cee 100644
--- a/src/renderer/page/file/view.jsx
+++ b/src/renderer/page/file/view.jsx
@@ -195,22 +195,21 @@ class FilePage extends React.Component<Props> {
                   )}
                 </div>
               </div>
-              {!claimIsMine ||
-                (speechSharable && (
-                  <div className="card__actions card__actions--end">
-                    {!claimIsMine && (
-                      <Button
-                        button="alt"
-                        icon="Send"
-                        label={__('Enjoy this? Send a tip')}
-                        onClick={() => openModal({ id: MODALS.SEND_TIP }, { uri })}
-                      />
-                    )}
-                    {speechSharable && (
-                      <ViewOnWebButton claimId={claim.claim_id} claimName={claim.name} />
-                    )}
-                  </div>
-                ))}
+              {(!claimIsMine || speechSharable) && (
+                <div className="card__actions card__actions--end">
+                  {!claimIsMine && (
+                    <Button
+                      button="alt"
+                      icon="Send"
+                      label={__('Enjoy this? Send a tip')}
+                      onClick={() => openModal({ id: MODALS.SEND_TIP }, { uri })}
+                    />
+                  )}
+                  {speechSharable && (
+                    <ViewOnWebButton claimId={claim.claim_id} claimName={claim.name} />
+                  )}
+                </div>
+              )}
               <FormRow alignRight>
                 <FormField
                   type="checkbox"

From e4a7b85d02209436a59b9f51fcc8e90cec8689a0 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Fri, 15 Jun 2018 13:18:15 -0400
Subject: [PATCH 2/4] fix no thumbnail style on search page

---
 src/renderer/scss/component/_card.scss    | 12 ++++++------
 src/renderer/scss/component/_content.scss |  4 ++++
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/renderer/scss/component/_card.scss b/src/renderer/scss/component/_card.scss
index b2c964fc5..a504fc232 100644
--- a/src/renderer/scss/component/_card.scss
+++ b/src/renderer/scss/component/_card.scss
@@ -27,17 +27,17 @@
     padding-top: var(--video-aspect-ratio);
   }
 
+  .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__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);
-}
-
 .card--link {
   cursor: pointer;
 }
diff --git a/src/renderer/scss/component/_content.scss b/src/renderer/scss/component/_content.scss
index 6fe2194ee..4a245129a 100644
--- a/src/renderer/scss/component/_content.scss
+++ b/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 {

From 1d8d338629890637a972ec83d7cf2158a407bf47 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Fri, 15 Jun 2018 16:11:02 -0400
Subject: [PATCH 3/4] add toggle style for autoplay

---
 package.json                                  |   1 +
 .../common/form-components/form-field.jsx     |   5 +
 src/renderer/component/common/tooltip.jsx     |   4 +-
 src/renderer/page/file/view.jsx               |  18 ++-
 src/renderer/scss/_vars.scss                  |   1 +
 src/renderer/scss/all.scss                    |   1 +
 src/renderer/scss/component/_toggle.scss      | 112 ++++++++++++++++++
 src/renderer/scss/component/_tooltip.scss     |   6 +-
 yarn.lock                                     |   6 +
 9 files changed, 147 insertions(+), 7 deletions(-)
 create mode 100644 src/renderer/scss/component/_toggle.scss

diff --git a/package.json b/package.json
index 70dc93f75..59deb6a5c 100644
--- a/package.json
+++ b/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",
diff --git a/src/renderer/component/common/form-components/form-field.jsx b/src/renderer/component/common/form-components/form-field.jsx
index 4029cbd1e..3a530ea64 100644
--- a/src/renderer/component/common/form-components/form-field.jsx
+++ b/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} />;
       }
diff --git a/src/renderer/component/common/tooltip.jsx b/src/renderer/component/common/tooltip.jsx
index 4bd264516..ec6fa4f46 100644
--- a/src/renderer/component/common/tooltip.jsx
+++ b/src/renderer/component/common/tooltip.jsx
@@ -8,6 +8,7 @@ type Props = {
   children: ?React.Node,
   icon: ?boolean,
   direction: string,
+  noPadding?: 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, noPadding } = 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--no-padding': noPadding
         })}
       >
         {tooltipContent}
diff --git a/src/renderer/page/file/view.jsx b/src/renderer/page/file/view.jsx
index 5cfe94cee..d1c359e81 100644
--- a/src/renderer/page/file/view.jsx
+++ b/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,
@@ -210,13 +211,20 @@ class FilePage extends React.Component<Props> {
                   )}
                 </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
+                      noPadding
+                      label={__('Autoplay')}
+                      body={__('Automatically download and play free content.')}
+                    />
+                  }
                 />
               </FormRow>
             </div>
diff --git a/src/renderer/scss/_vars.scss b/src/renderer/scss/_vars.scss
index fc2b6fe68..762edd995 100644
--- a/src/renderer/scss/_vars.scss
+++ b/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);
diff --git a/src/renderer/scss/all.scss b/src/renderer/scss/all.scss
index 0055ca6d0..487a4684b 100644
--- a/src/renderer/scss/all.scss
+++ b/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';
diff --git a/src/renderer/scss/component/_toggle.scss b/src/renderer/scss/component/_toggle.scss
new file mode 100644
index 000000000..e095c86ce
--- /dev/null
+++ b/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);
+}
diff --git a/src/renderer/scss/component/_tooltip.scss b/src/renderer/scss/component/_tooltip.scss
index 3e32a7fbe..2c34933e0 100644
--- a/src/renderer/scss/component/_tooltip.scss
+++ b/src/renderer/scss/component/_tooltip.scss
@@ -5,7 +5,7 @@
 
 // When there is a label for the tooltip and not just using a button or icon
 .tooltip.tooltip--label {
-  font-size: 12px;
+  font-size: 14px;
   padding-left: $spacing-vertical * 1/3;
 
   .tooltip__body {
@@ -13,6 +13,10 @@
   }
 }
 
+.tooltip.tooltip--no-padding {
+  padding: 0;
+}
+
 .tooltip.tooltip--icon {
   margin-top: 5px;
 }
diff --git a/yarn.lock b/yarn.lock
index 262e65dbd..4f9b41fda 100644
--- a/yarn.lock
+++ b/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"

From 6f4734b5182fb51cd47f19fa12c924720e85ddf0 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Fri, 15 Jun 2018 16:47:18 -0400
Subject: [PATCH 4/4] change prop name to describe where it should be used, not
 how it looks

---
 src/renderer/component/common/tooltip.jsx |  6 +++---
 src/renderer/page/file/view.jsx           |  2 +-
 src/renderer/scss/component/_tooltip.scss | 14 +++++++-------
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/renderer/component/common/tooltip.jsx b/src/renderer/component/common/tooltip.jsx
index ec6fa4f46..e0045d4a1 100644
--- a/src/renderer/component/common/tooltip.jsx
+++ b/src/renderer/component/common/tooltip.jsx
@@ -8,7 +8,7 @@ type Props = {
   children: ?React.Node,
   icon: ?boolean,
   direction: string,
-  noPadding?: boolean,
+  onFormField?: boolean,
 };
 
 class ToolTip extends React.PureComponent<Props> {
@@ -17,7 +17,7 @@ class ToolTip extends React.PureComponent<Props> {
   };
 
   render() {
-    const { children, label, body, icon, direction, noPadding } = this.props;
+    const { children, label, body, icon, direction, onFormField } = this.props;
 
     const tooltipContent = children || label;
 
@@ -30,7 +30,7 @@ class ToolTip extends React.PureComponent<Props> {
           'tooltip--right': direction === 'right',
           'tooltip--bottom': direction === 'bottom',
           'tooltip--left': direction === 'left',
-          'tooltip--no-padding': noPadding
+          'tooltip--on-formfield': onFormField,
         })}
       >
         {tooltipContent}
diff --git a/src/renderer/page/file/view.jsx b/src/renderer/page/file/view.jsx
index d1c359e81..b47ad5879 100644
--- a/src/renderer/page/file/view.jsx
+++ b/src/renderer/page/file/view.jsx
@@ -220,7 +220,7 @@ class FilePage extends React.Component<Props> {
                   onChange={this.onAutoplayChange}
                   postfix={
                     <ToolTip
-                      noPadding
+                      onFormField
                       label={__('Autoplay')}
                       body={__('Automatically download and play free content.')}
                     />
diff --git a/src/renderer/scss/component/_tooltip.scss b/src/renderer/scss/component/_tooltip.scss
index 2c34933e0..a85bdfc4a 100644
--- a/src/renderer/scss/component/_tooltip.scss
+++ b/src/renderer/scss/component/_tooltip.scss
@@ -4,7 +4,7 @@
 }
 
 // When there is a label for the tooltip and not just using a button or icon
-.tooltip.tooltip--label {
+.tooltip--label {
   font-size: 14px;
   padding-left: $spacing-vertical * 1/3;
 
@@ -13,11 +13,11 @@
   }
 }
 
-.tooltip.tooltip--no-padding {
+.tooltip--on-formfield {
   padding: 0;
 }
 
-.tooltip.tooltip--icon {
+.tooltip--icon {
   margin-top: 5px;
 }
 
@@ -46,7 +46,7 @@
   border-style: solid;
 }
 
-.tooltip.tooltip--top .tooltip__body {
+.tooltip--top .tooltip__body {
   bottom: 100%;
   left: 50%;
   margin-left: -100px;
@@ -59,7 +59,7 @@
   }
 }
 
-.tooltip.tooltip--right .tooltip__body {
+.tooltip--right .tooltip__body {
   margin-top: -5px;
   margin-left: 10px;
 
@@ -71,7 +71,7 @@
   }
 }
 
-.tooltip.tooltip--bottom .tooltip__body {
+.tooltip--bottom .tooltip__body {
   top: 90%;
   left: 50%;
   margin-left: -100px;
@@ -84,7 +84,7 @@
   }
 }
 
-.tooltip.tooltip--left .tooltip__body {
+.tooltip--left .tooltip__body {
   top: -5px;
   right: 105%;