(Almost the) rest of the redesign (#880)

* Load demo img

* two-up styles

* Back button

* Button size tweak

* Move back btn

* Move options and back button into a single grid

* Simpler max height

* Responsive grid

* Feed index into options

* Option heading themes

* More option styles

* Changing checkbox position

* Theme range input & use transforms

* Range input underline theme

* Checkbox color

* Add toggle

* Reorder

* Arrow revealer

* Round two-up thumb

* Don't bundle CSS urls starting #

* Results in progress

* Fix Safari bugs

* Download blobs

* Loading spinner

* Hook up download button

* Different style for original image

* Mobile design for results

* Remove demo auto-loader

* Remove redundant colors

* Sticky headings

src/features/encoders/wp2/client/index.tsx

@@ -9,6 +9,7 @@ import Select from 'client/lazy-app/Compress/Options/Select';
 import Checkbox from 'client/lazy-app/Compress/Options/Checkbox';
 import Expander from 'client/lazy-app/Compress/Options/Expander';
 import linkState from 'linkstate';
+import Revealer from 'client/lazy-app/Compress/Options/Revealer';
 
 export const encode = (
   signal: AbortSignal,
@@ -154,12 +155,12 @@ export class Options extends Component<Props, State> {
   ) {
     return (
       <form class={style.optionsSection} onSubmit={preventDefault}>
-        <label class={style.optionInputFirst}>
+        <label class={style.optionToggle}>
+          Lossless
           <Checkbox
             checked={lossless}
             onChange={this._inputChange('lossless', 'boolean')}
           />
-          Lossless
         </label>
         <Expander>
           {lossless && (
@@ -190,12 +191,12 @@ export class Options extends Component<Props, State> {
                   Quality:
                 </Range>
               </div>
-              <label class={style.optionInputFirst}>
+              <label class={style.optionToggle}>
+                Separate alpha quality
                 <Checkbox
                   checked={separateAlpha}
                   onChange={this._inputChange('separateAlpha', 'boolean')}
                 />
-                Separate alpha quality
               </label>
               <Expander>
                 {separateAlpha && (
@@ -212,12 +213,12 @@ export class Options extends Component<Props, State> {
                   </div>
                 )}
               </Expander>
-              <label class={style.optionInputFirst}>
-                <Checkbox
+              <label class={style.optionReveal}>
+                <Revealer
                   checked={showAdvanced}
                   onChange={linkState(this, 'showAdvanced')}
                 />
-                Show advanced settings
+                Advanced settings
               </label>
               <Expander>
                 {showAdvanced && (
@@ -278,7 +279,8 @@ export class Options extends Component<Props, State> {
                         <option value={Csp.kYIQ}>YIQ</option>
                       </Select>
                     </label>
-                    <label class={style.optionInputFirst}>
+                    <label class={style.optionToggle}>
+                      Random matrix
                       <Checkbox
                         checked={useRandomMatrix}
                         onChange={this._inputChange(
@@ -286,7 +288,6 @@ export class Options extends Component<Props, State> {
                           'boolean',
                         )}
                       />
-                      Random matrix
                     </label>
                   </div>
                 )}