Back button

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

@@ -10,7 +10,6 @@ import {
   ToggleBackgroundIcon,
   AddIcon,
   RemoveIcon,
-  BackIcon,
   ToggleBackgroundActiveIcon,
   RotateIcon,
 } from '../../icons';
@@ -314,11 +313,19 @@ export default class Output extends Component<Props, State> {
           </pinch-zoom>
         </two-up>
 
-        <div class={style.back}>
-          <button class={style.button} onClick={onBack}>
-            <BackIcon />
-          </button>
-        </div>
+        <button class={style.back} onClick={onBack}>
+          <svg viewBox="0 0 61 53.3">
+            <title>Back</title>
+            <path
+              class={style.backBlob}
+              d="M0 25.6c-.5-7.1 4.1-14.5 10-19.1S23.4.1 32.2 0c8.8 0 19 1.6 24.4 8s5.6 17.8 1.7 27a29.7 29.7 0 01-20.5 18c-8.4 1.5-17.3-2.6-24.5-8S.5 32.6.1 25.6z"
+            />
+            <path
+              class={style.backX}
+              d="M41.6 17.1l-2-2.1-8.3 8.2-8.2-8.2-2 2 8.2 8.3-8.3 8.2 2.1 2 8.2-8.1 8.3 8.2 2-2-8.2-8.3z"
+            />
+          </svg>
+        </button>
 
         <div class={style.controls}>
           <div class={style.zoomControls}>

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

@@ -150,10 +150,24 @@
 }
 
 .back {
+  composes: unbutton from global;
   position: absolute;
-  top: 0;
-  left: 0;
-  padding: 9px;
+  top: var(--dist);
+  left: var(--dist);
+  --dist: 14px;
+
+  & > svg {
+    width: 70px;
+  }
+}
+
+.back-blob {
+  fill: var(--hot-pink);
+  opacity: 0.77;
+}
+
+.back-x {
+  fill: var(--white);
 }
 
 .buttons-no-wrap {

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

@@ -67,12 +67,6 @@ export const ExpandIcon = (props: preact.JSX.HTMLAttributes) => (
   </Icon>
 );
 
-export const BackIcon = (props: preact.JSX.HTMLAttributes) => (
-  <Icon {...props}>
-    <path d="M20 11H7.8l5.6-5.6L12 4l-8 8 8 8 1.4-1.4L7.8 13H20v-2z" />
-  </Icon>
-);
-
 const copyAcrossRotations = {
   up: 90,
   right: 180,