More option styles

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

@@ -1,6 +1,7 @@
 import { h, Component } from 'preact';
 import * as style from './style.css';
 import 'add-css:./style.css';
+import { Arrow } from 'client/lazy-app/icons';
 
 interface Props extends preact.JSX.HTMLAttributes {
   large?: boolean;
@@ -18,9 +19,9 @@ export default class Select extends Component<Props, State> {
           class={`${style.builtinSelect} ${large ? style.large : ''}`}
           {...otherProps}
         />
-        <svg class={style.arrow} viewBox="0 0 10 5">
-          <path d="M0 0l5 5 5-5z" />
-        </svg>
+        <div class={style.arrow}>
+          <Arrow />
+        </div>
       </div>
     );
   }

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

@@ -3,10 +3,12 @@
 }
 
 .builtin-select {
-  background: #2f2f2f;
+  background: var(--black);
   border-radius: 4px;
   font: inherit;
-  padding: 4px 25px 4px 10px;
+  padding: 7px 0;
+  padding-right: 25px;
+  padding-left: 10px;
   -webkit-appearance: none;
   -moz-appearance: none;
   border: none;
@@ -25,7 +27,7 @@
 
 .large {
   padding: 10px 35px 10px 10px;
-  background: #151515;
+  background: var(--dark-gray);
 
   & .arrow {
     right: 13px;

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

@@ -13,7 +13,7 @@
   padding: 10px var(--horizontal-padding);
   font-weight: bold;
   font-size: 1.4rem;
-  border-bottom: 1px solid #000;
+  border-bottom: 1px solid var(--off-black);
   transition: all 300ms ease-in-out;
   transition-property: background-color, color;
 }
@@ -48,20 +48,22 @@
 }
 
 .section-enabler {
-  background: rgba(0, 0, 0, 0.8);
+  background: var(--dark-gray);
+  padding: 15px var(--horizontal-padding);
+  border-bottom: 1px solid var(--off-black);
 }
 
 .options-section {
-  background: rgba(0, 0, 0, 0.7);
+  background: var(--off-black);
 }
 
 .text-field {
-  background: #fff;
-  color: #000;
+  background: var(--white);
+  color: var(--black);
   font: inherit;
   border: none;
-  padding: 2px 0 2px 10px;
+  padding: 6px 0 6px 10px;
   width: 100%;
   box-sizing: border-box;
-  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
+  border-radius: 4px;
 }

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

@@ -9,12 +9,12 @@
     right: 0;
     bottom: 0;
     background: #000;
-    opacity: 0;
+    opacity: 0.8;
     transition: opacity 500ms ease;
   }
 
   &.alt-background::before {
-    opacity: 0.6;
+    opacity: 0;
   }
 }
 

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

@@ -20,8 +20,8 @@
 }
 
 .options {
+  position: relative;
   color: #fff;
-  opacity: 0.9;
   font-size: 1.2rem;
   display: flex;
   flex-flow: column;

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

@@ -67,6 +67,12 @@ export const ExpandIcon = (props: preact.JSX.HTMLAttributes) => (
   </Icon>
 );
 
+export const Arrow = () => (
+  <svg viewBox="0 -1.95 9.8 9.8">
+    <path d="M8.2.2a1 1 0 011.4 1.4l-4 4a1 1 0 01-1.4 0l-4-4A1 1 0 011.6.2l3.3 3.3L8.2.2z" />
+  </svg>
+);
+
 const copyAcrossRotations = {
   up: 90,
   right: 180,

src/shared/prerendered-app/colors.css

@@ -3,11 +3,13 @@ html {
   --hot-pink: #ff0066;
   --white: #fff;
   --black: #000;
+  --off-black: #1d1d1d;
   --blue: #5fb4e4;
   --dim-blue: #0a7bcc;
   --deep-blue: #09f;
   --light-blue: #76c8ff;
   --light-gray: #eaeaea;
+  --dark-gray: #333;
   --dim-text: #343a3e;
   --dark-text: #142630;