From a8bc48f94c53a0112ccc446b0bddcaf3685137c6 Mon Sep 17 00:00:00 2001
From: Aryan Pingle <49340972+aryanpingle@users.noreply.github.com>
Date: Thu, 2 Mar 2023 17:12:52 +0530
Subject: [PATCH] Rotate copy-over-buttons correctly (#1335)

---
 src/client/lazy-app/Compress/Options/style.css | 3 +++
 src/client/lazy-app/Compress/style.css         | 4 ++++
 2 files changed, 7 insertions(+)

diff --git a/src/client/lazy-app/Compress/Options/style.css b/src/client/lazy-app/Compress/Options/style.css
index 11428852..fa083cb3 100644
--- a/src/client/lazy-app/Compress/Options/style.css
+++ b/src/client/lazy-app/Compress/Options/style.css
@@ -112,6 +112,9 @@
 .copy-over-button {
   composes: title-button;
 
+  /* Make the filled arrow point towards the other options element */
+  transform: rotate(var(--rotate-copyoverbutton-angle));
+
   svg {
     fill: var(--header-text-color);
   }
diff --git a/src/client/lazy-app/Compress/style.css b/src/client/lazy-app/Compress/style.css
index b40d6fff..e8d418e5 100644
--- a/src/client/lazy-app/Compress/style.css
+++ b/src/client/lazy-app/Compress/style.css
@@ -45,9 +45,11 @@
   --hot-theme-color: var(--hot-pink);
   --header-text-color: var(--white);
   --scroller-radius: var(--options-radius) var(--options-radius) 0 0;
+  --rotate-copyoverbutton-angle: 90deg; /* To point down */
 
   @media (min-width: 600px) {
     --scroller-radius: 0 var(--options-radius) var(--options-radius) 0;
+    --rotate-copyoverbutton-angle: 0deg; /* To point right (no change) */
   }
 }
 
@@ -56,9 +58,11 @@
   --hot-theme-color: var(--deep-blue);
   --header-text-color: var(--dark-text);
   --scroller-radius: var(--options-radius) var(--options-radius) 0 0;
+  --rotate-copyoverbutton-angle: -90deg; /* To point up */
 
   @media (min-width: 600px) {
     --scroller-radius: var(--options-radius) 0 0 var(--options-radius);
+    --rotate-copyoverbutton-angle: 180deg; /* To point left */
   }
 }