Option heading themes

src/client/lazy-app/Compress/Options/index.tsx

@@ -114,7 +114,13 @@ export default class Options extends Component<Props, State> {
       encoder && 'Options' in encoder ? encoder.Options : undefined;
 
     return (
-      <div class={style.optionsScroller}>
+      <div
+        class={
+          style.optionsScroller +
+          ' ' +
+          (encoderState ? '' : style.originalImage)
+        }
+      >
         <Expander>
           {!encoderState ? null : (
             <div>

src/client/lazy-app/Compress/Options/style.css

@@ -3,15 +3,24 @@
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
   --horizontal-padding: 15px;
+  border-radius: var(--scroller-radius);
 }
 
 .options-title {
-  background: rgba(0, 0, 0, 0.9);
+  background-color: var(--header-color);
+  color: var(--header-text-color);
   margin: 0;
   padding: 10px var(--horizontal-padding);
-  font-weight: normal;
+  font-weight: bold;
   font-size: 1.4rem;
   border-bottom: 1px solid #000;
+  transition: all 300ms ease-in-out;
+  transition-property: background-color, color;
+}
+
+.original-image .options-title {
+  background-color: var(--black);
+  color: var(--white);
 }
 
 .option-text-first {

src/client/lazy-app/Compress/index.tsx

@@ -877,18 +877,18 @@ export default class Compress extends Component<Props, State> {
           <div class={style.options}>
             <multi-panel class={style.multiPanel} open-one-only>
               {results[0]}
-              {options[0]}
+              <div class={style.options1Theme}>{options[0]}</div>
               {results[1]}
-              {options[1]}
+              <div class={style.options2Theme}>{options[1]}</div>
             </multi-panel>
           </div>
         ) : (
           [
-            <div class={style.options1} key="options0">
+            <div class={style.options1} key="options1">
               {options[0]}
               {results[0]}
             </div>,
-            <div class={style.options2} key="options1">
+            <div class={style.options2} key="options2">
               {options[1]}
               {results[1]}
             </div>,

src/client/lazy-app/Compress/style.css

@@ -8,6 +8,8 @@
     'header'
     'opts';
 
+  --options-radius: 7px;
+
   @media (min-width: 600px) {
     grid-template-rows: max-content 1fr;
     grid-template-columns: max-content 1fr max-content;
@@ -37,13 +39,35 @@
   }
 }
 
+.options-1-theme {
+  --header-color: var(--pink);
+  --header-text-color: var(--white);
+  --scroller-radius: var(--options-radius) var(--options-radius) 0 0;
+
+  @media (min-width: 600px) {
+    --scroller-radius: 0 var(--options-radius) var(--options-radius) 0;
+  }
+}
+
+.options-2-theme {
+  --header-color: var(--blue);
+  --header-text-color: var(--dark-text);
+  --scroller-radius: var(--options-radius) var(--options-radius) 0 0;
+
+  @media (min-width: 600px) {
+    --scroller-radius: var(--options-radius) 0 0 var(--options-radius);
+  }
+}
+
 .options-1 {
   composes: options;
+  composes: options-1-theme;
   grid-area: optsLeft;
 }
 
 .options-2 {
   composes: options;
+  composes: options-2-theme;
   grid-area: optsRight;
 }
 

src/shared/prerendered-app/Intro/style.css

@@ -6,7 +6,7 @@
   display: grid;
   grid-template-rows: 1fr max-content max-content;
   font-size: 1.2rem;
-  color: var(--dark-text);
+  color: var(--dim-text);
 }
 
 .blob-canvas {

src/shared/prerendered-app/colors.css

@@ -8,7 +8,8 @@ html {
   --deep-blue: #09f;
   --light-blue: #76c8ff;
   --light-gray: #eaeaea;
-  --dark-text: #343a3e;
+  --dim-text: #343a3e;
+  --dark-text: #142630;
 
   /* Old stuff: */
   --gray-dark: rgba(0, 0, 0, 0.8);