From c53c803baa3c8c2ad62998df8b711311b026f820 Mon Sep 17 00:00:00 2001
From: Jake Archibald <jaffathecake@gmail.com>
Date: Fri, 27 Nov 2020 14:48:59 +0000
Subject: [PATCH] two-up styles

---
 .../Compress/Output/custom-els/TwoUp/index.ts | 11 +++++++---
 .../Output/custom-els/TwoUp/styles.css        | 20 ++++++++++---------
 src/shared/prerendered-app/Intro/index.tsx    |  2 +-
 src/shared/prerendered-app/colors.css         |  2 ++
 4 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/src/client/lazy-app/Compress/Output/custom-els/TwoUp/index.ts b/src/client/lazy-app/Compress/Output/custom-els/TwoUp/index.ts
index e003be25..35b51831 100644
--- a/src/client/lazy-app/Compress/Output/custom-els/TwoUp/index.ts
+++ b/src/client/lazy-app/Compress/Output/custom-els/TwoUp/index.ts
@@ -73,9 +73,14 @@ export default class TwoUp extends HTMLElement {
   connectedCallback() {
     this._childrenChange();
 
-    this._handle.innerHTML = `<div class="${
-      styles.scrubber
-    }">${`<svg viewBox="0 0 27 20" fill="currentColor">${'<path d="M17 19.2l9.5-9.6L16.9 0zM9.6 0L0 9.6l9.6 9.6z"/>'}</svg>`}</div>`;
+    // prettier-ignore
+    this._handle.innerHTML =
+      `<div class="${styles.scrubber}">${
+        `<svg viewBox="0 0 27 20">${
+          `<path class="${styles.arrowLeft}" d="M9.6 0L0 9.6l9.6 9.6z"/>` +
+          `<path class="${styles.arrowRight}" d="M17 19.2l9.5-9.6L16.9 0z"/>`
+        }</svg>
+      `}</div>`;
 
     if (!this._everConnected) {
       this._resetPosition();
diff --git a/src/client/lazy-app/Compress/Output/custom-els/TwoUp/styles.css b/src/client/lazy-app/Compress/Output/custom-els/TwoUp/styles.css
index a823c7e0..f1b975eb 100644
--- a/src/client/lazy-app/Compress/Output/custom-els/TwoUp/styles.css
+++ b/src/client/lazy-app/Compress/Output/custom-els/TwoUp/styles.css
@@ -2,12 +2,11 @@ two-up {
   display: grid;
   position: relative;
   --split-point: 0;
-  --accent-color: #777;
-  --track-color: var(--accent-color);
-  --thumb-background: #fff;
+  --track-color: rgb(0 0 0 / 0.6);
+  --thumb-background: var(--black);
   --thumb-color: var(--accent-color);
   --thumb-size: 62px;
-  --bar-size: 6px;
+  --bar-size: 9px;
   --bar-touch-size: 30px;
 }
 
@@ -37,8 +36,6 @@ two-up[legacy-clip-compat] > :not(.two-up-handle) {
   height: 100%;
   width: var(--bar-size);
   margin: 0 auto;
-  box-shadow: inset calc(var(--bar-size) / 2) 0 0 rgba(0, 0, 0, 0.1),
-    0 1px 4px rgba(0, 0, 0, 0.4);
   background: var(--track-color);
 }
 
@@ -47,14 +44,11 @@ two-up[legacy-clip-compat] > :not(.two-up-handle) {
   position: absolute;
   top: 50%;
   left: 50%;
-  transform-origin: 50% 50%;
   transform: translate(-50%, -50%);
   width: var(--thumb-size);
   height: calc(var(--thumb-size) * 0.9);
   background: var(--thumb-background);
-  border: 1px solid rgba(0, 0, 0, 0.2);
   border-radius: var(--thumb-size);
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
   color: var(--thumb-color);
   box-sizing: border-box;
   padding: 0 calc(var(--thumb-size) * 0.24);
@@ -64,6 +58,14 @@ two-up[legacy-clip-compat] > :not(.two-up-handle) {
   flex: 1;
 }
 
+.arrow-left {
+  fill: var(--pink);
+}
+
+.arrow-right {
+  fill: var(--blue);
+}
+
 two-up[orientation='vertical'] .two-up-handle {
   width: auto;
   height: var(--bar-touch-size);
diff --git a/src/shared/prerendered-app/Intro/index.tsx b/src/shared/prerendered-app/Intro/index.tsx
index 46a31c5c..bc78ab9c 100644
--- a/src/shared/prerendered-app/Intro/index.tsx
+++ b/src/shared/prerendered-app/Intro/index.tsx
@@ -46,7 +46,7 @@ const demos = [
     url: logo,
     iconUrl: logoIcon,
   },
-];
+] as const;
 
 const blobAnimImport =
   !__PRERENDER__ && matchMedia('(prefers-reduced-motion: reduce)').matches
diff --git a/src/shared/prerendered-app/colors.css b/src/shared/prerendered-app/colors.css
index 1f0ce297..7fbc283f 100644
--- a/src/shared/prerendered-app/colors.css
+++ b/src/shared/prerendered-app/colors.css
@@ -2,6 +2,8 @@ html {
   --pink: #ff3385;
   --hot-pink: #ff0066;
   --white: #fff;
+  --black: #000;
+  --blue: #5fb4e4;
   --dim-blue: #0a7bcc;
   --deep-blue: #09f;
   --light-blue: #76c8ff;