From a88d562f3618fcea724e295a35640d85acda3cf9 Mon Sep 17 00:00:00 2001
From: Jake Archibald <jaffathecake@gmail.com>
Date: Sat, 5 Dec 2020 14:18:14 +0000
Subject: [PATCH] Option heading themes

---
 .../lazy-app/Compress/Options/index.tsx       |  8 ++++++-
 .../lazy-app/Compress/Options/style.css       | 13 ++++++++--
 src/client/lazy-app/Compress/index.tsx        |  8 +++----
 src/client/lazy-app/Compress/style.css        | 24 +++++++++++++++++++
 src/shared/prerendered-app/Intro/style.css    |  2 +-
 src/shared/prerendered-app/colors.css         |  3 ++-
 6 files changed, 49 insertions(+), 9 deletions(-)

diff --git a/src/client/lazy-app/Compress/Options/index.tsx b/src/client/lazy-app/Compress/Options/index.tsx
index 58e3f84d..98d38357 100644
--- a/src/client/lazy-app/Compress/Options/index.tsx
+++ b/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>
diff --git a/src/client/lazy-app/Compress/Options/style.css b/src/client/lazy-app/Compress/Options/style.css
index ac0efca4..fb01d748 100644
--- a/src/client/lazy-app/Compress/Options/style.css
+++ b/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 {
diff --git a/src/client/lazy-app/Compress/index.tsx b/src/client/lazy-app/Compress/index.tsx
index 78f97cb4..cc39731e 100644
--- a/src/client/lazy-app/Compress/index.tsx
+++ b/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>,
diff --git a/src/client/lazy-app/Compress/style.css b/src/client/lazy-app/Compress/style.css
index 3a33dba3..e0e49845 100644
--- a/src/client/lazy-app/Compress/style.css
+++ b/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;
 }
 
diff --git a/src/shared/prerendered-app/Intro/style.css b/src/shared/prerendered-app/Intro/style.css
index dea2ffe4..164502f0 100644
--- a/src/shared/prerendered-app/Intro/style.css
+++ b/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 {
diff --git a/src/shared/prerendered-app/colors.css b/src/shared/prerendered-app/colors.css
index 7fbc283f..04f58890 100644
--- a/src/shared/prerendered-app/colors.css
+++ b/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);