(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/webP/client/index.tsx

@@ -12,6 +12,7 @@ import Range from 'client/lazy-app/Compress/Options/Range';
 import Checkbox from 'client/lazy-app/Compress/Options/Checkbox';
 import Expander from 'client/lazy-app/Compress/Options/Expander';
 import Select from 'client/lazy-app/Compress/Options/Select';
+import Revealer from 'client/lazy-app/Compress/Options/Revealer';
 
 export const encode = (
   signal: AbortSignal,
@@ -179,7 +180,8 @@ export class Options extends Component<Props, State> {
             Slight loss:
           </Range>
         </div>
-        <label class={style.optionInputFirst}>
+        <label class={style.optionToggle}>
+          Discrete tone image
           {/*
             Although there are 3 different kinds of image hint, webp only
             seems to do something with the 'graph' type, and I don't really
@@ -190,7 +192,6 @@ export class Options extends Component<Props, State> {
             checked={options.image_hint === WebPImageHint.WEBP_HINT_GRAPH}
             onChange={this.onChange}
           />
-          Discrete tone image
         </label>
       </div>
     );
@@ -224,23 +225,23 @@ export class Options extends Component<Props, State> {
             Quality:
           </Range>
         </div>
-        <label class={style.optionInputFirst}>
-          <Checkbox
+        <label class={style.optionReveal}>
+          <Revealer
             checked={showAdvanced}
             onChange={linkState(this, 'showAdvanced')}
           />
-          Show advanced settings
+          Advanced settings
         </label>
         <Expander>
           {showAdvanced ? (
             <div>
-              <label class={style.optionInputFirst}>
+              <label class={style.optionToggle}>
+                Compress alpha
                 <Checkbox
                   name="alpha_compression"
                   checked={!!options.alpha_compression}
                   onChange={this.onChange}
                 />
-                Compress alpha
               </label>
               <div class={style.optionOneCell}>
                 <Range
@@ -264,13 +265,13 @@ export class Options extends Component<Props, State> {
                   Alpha filter quality:
                 </Range>
               </div>
-              <label class={style.optionInputFirst}>
+              <label class={style.optionToggle}>
+                Auto adjust filter strength
                 <Checkbox
                   name="autofilter"
                   checked={!!options.autofilter}
                   onChange={this.onChange}
                 />
-                Auto adjust filter strength
               </label>
               <Expander>
                 {options.autofilter ? null : (
@@ -287,13 +288,13 @@ export class Options extends Component<Props, State> {
                   </div>
                 )}
               </Expander>
-              <label class={style.optionInputFirst}>
+              <label class={style.optionToggle}>
+                Strong filter
                 <Checkbox
                   name="filter_type"
                   checked={!!options.filter_type}
                   onChange={this.onChange}
                 />
-                Strong filter
               </label>
               <div class={style.optionOneCell}>
                 <Range
@@ -306,13 +307,13 @@ export class Options extends Component<Props, State> {
                   Filter sharpness:
                 </Range>
               </div>
-              <label class={style.optionInputFirst}>
+              <label class={style.optionToggle}>
+                Sharp RGB→YUV conversion
                 <Checkbox
                   name="use_sharp_yuv"
                   checked={!!options.use_sharp_yuv}
                   onChange={this.onChange}
                 />
-                Sharp RGB→YUV conversion
               </label>
               <div class={style.optionOneCell}>
                 <Range
@@ -382,24 +383,24 @@ export class Options extends Component<Props, State> {
     // gathering the data.
     return (
       <form class={style.optionsSection} onSubmit={preventDefault}>
-        <label class={style.optionInputFirst}>
+        <label class={style.optionToggle}>
+          Lossless
           <Checkbox
             name="lossless"
             checked={!!options.lossless}
             onChange={this.onChange}
           />
-          Lossless
         </label>
         {options.lossless
           ? this._losslessSpecificOptions(options)
           : this._lossySpecificOptions(options)}
-        <label class={style.optionInputFirst}>
+        <label class={style.optionToggle}>
+          Preserve transparent data
           <Checkbox
             name="exact"
             checked={!!options.exact}
             onChange={this.onChange}
           />
-          Preserve transparent data
         </label>
       </form>
     );