add header to recommended content and decrease autoplay size

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

@@ -9,6 +9,7 @@ type Props = {
   verticallyCentered?: boolean,
   stretch?: boolean,
   alignRight?: boolean,
+  spaceBetween?: boolean,
 };
 
 export class FormRow extends React.PureComponent<Props> {
@@ -17,7 +18,14 @@ export class FormRow extends React.PureComponent<Props> {
   };
 
   render() {
-    const { centered, children, padded, verticallyCentered, stretch, alignRight } = this.props;
+    const {
+      children,
+      padded,
+      verticallyCentered,
+      stretch,
+      alignRight,
+      spaceBetween,
+    } = this.props;
     return (
       <div
         className={classnames('form-row', {
@@ -25,6 +33,7 @@ export class FormRow extends React.PureComponent<Props> {
           'form-row--vertically-centered': verticallyCentered,
           'form-row--stretch': stretch,
           'form-row--right': alignRight,
+          'form-row--space-between': spaceBetween,
         })}
       >
         {children}

src/renderer/component/recommendedContent/view.jsx

@@ -66,11 +66,12 @@ export default class RecommendedContent extends React.PureComponent<Props, State
 
     return (
       <section className="card__list--recommended">
-        <FormRow>
+        <FormRow spaceBetween>
+          <span>Related</span>
           <ToolTip onComponent body={__('Automatically download and play free content.')}>
             <FormField
-              useToggle
               firstInList
+              affixClass="form-field__prefix--recommended-content"
               name="autoplay"
               type="checkbox"
               prefix={__('Autoplay')}

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

@@ -27,6 +27,10 @@
     justify-content: flex-end;
   }
 
+  &.form-row--space-between {
+    justify-content: space-between;
+  }
+
   .form-field.form-field--stretch {
     width: 100%;
 
@@ -121,6 +125,11 @@
   padding-left: $spacing-vertical * 1/3;
 }
 
+.form-field__prefix--recommended-content {
+  font-size: 12px;
+  align-self: center;
+}
+
 .form-field__select {
   min-width: 60px;
   height: 30px;

src/renderer/scss/component/_toggle.scss

@@ -9,6 +9,7 @@
   padding: 0;
   user-select: none;
   margin-bottom: auto;
+  margin-top: 2px;
 }
 
 .react-toggle-screenreader-only {
@@ -30,8 +31,8 @@
 }
 
 .react-toggle-track {
-  width: 50px;
+  width: 40px;
-  height: 24px;
+  height: 19px;
   padding: 0;
   border-radius: 30px;
   background-color: #4d4d4d;
@@ -61,7 +62,7 @@
   margin-top: auto;
   margin-bottom: auto;
   line-height: 0;
-  left: 8px;
+  left: 6px;
   opacity: 0;
   -webkit-transition: opacity 0.25s ease;
   -moz-transition: opacity 0.25s ease;
@@ -98,8 +99,8 @@
   position: absolute;
   top: 1px;
   left: 1px;
-  width: 22px;
+  width: 17px;
-  height: 22px;
+  height: 17px;
   border: 1px solid #4d4d4d;
   border-radius: 50%;
   background-color: #fafafa;
@@ -108,6 +109,6 @@
 }
 
 .react-toggle--checked .react-toggle-thumb {
-  left: 27px;
+  left: 22px;
   border-color: var(--input-switch-color);
 }