From 8141513fa9551973a8514cee895880064b0cee6d Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Mon, 14 Aug 2023 20:32:09 +0800
Subject: [PATCH] Spruce up buttons in media modal

---
 src/app.css                    | 26 +++++++++++++++++++++++++-
 src/components/media-modal.jsx | 18 ++++++++----------
 src/components/status.css      |  4 ++--
 3 files changed, 35 insertions(+), 13 deletions(-)

diff --git a/src/app.css b/src/app.css
index 7e744233..4e9cdc80 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1097,6 +1097,25 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
 button.carousel-dot {
   pointer-events: auto;
   font-weight: bold;
+  color: var(--text-color);
+  background-color: var(--bg-faded-blur-color);
+  border: var(--hairline-width) solid var(--outline-color);
+  box-shadow: 0 4px 32px var(--drop-shadow-color);
+  transition: all 0.2s ease-out;
+}
+button.carousel-dot {
+  background-color: transparent;
+}
+.carousel-controls :is(.button, button).carousel-button {
+  background-color: var(--bg-blur-color);
+}
+.carousel-controls
+  :is(.button, button).carousel-button:is(:hover, :focus):not(:active) {
+  background-color: var(--bg-color);
+  transform: scale(1.2);
+}
+.carousel-controls :is(.button, button).carousel-button:active {
+  transition-duration: 0s;
 }
 .carousel-top-controls .szh-menu-container {
   pointer-events: auto;
@@ -1108,10 +1127,15 @@ button.carousel-dot {
 }
 .carousel-dots {
   border-radius: 999px;
-  backdrop-filter: blur(12px) invert(0.25);
+  background-color: var(--bg-faded-blur-color);
+  border: 1px solid var(--outline-color);
+  box-shadow: 0 4px 32px var(--drop-shadow-color);
+  /* backdrop-filter: blur(12px) invert(0.25); */
 }
 button.carousel-dot {
   backdrop-filter: none !important;
+  border: none;
+  box-shadow: none;
 }
 button.carousel-dot[disabled] {
   pointer-events: none;
diff --git a/src/components/media-modal.jsx b/src/components/media-modal.jsx
index 8188b133..77980f80 100644
--- a/src/components/media-modal.jsx
+++ b/src/components/media-modal.jsx
@@ -135,7 +135,7 @@ function MediaModal({
               {!!media.description && (
                 <button
                   type="button"
-                  class="plain2 media-alt"
+                  class="media-alt"
                   hidden={!showControls}
                   onClick={() => {
                     setShowMediaAlt(media.description);
@@ -154,7 +154,7 @@ function MediaModal({
         <span>
           <button
             type="button"
-            class="carousel-button plain3"
+            class="carousel-button"
             onClick={() => onClose()}
           >
             <Icon icon="x" />
@@ -167,9 +167,7 @@ function MediaModal({
                 key={media.id}
                 type="button"
                 disabled={i === currentIndex}
-                class={`plain3 carousel-dot ${
-                  i === currentIndex ? 'active' : ''
-                }`}
+                class={`carousel-dot ${i === currentIndex ? 'active' : ''}`}
                 onClick={(e) => {
                   e.preventDefault();
                   e.stopPropagation();
@@ -196,7 +194,7 @@ function MediaModal({
             gap={4}
             menuClassName="glass-menu"
             menuButton={
-              <button type="button" class="carousel-button plain3">
+              <button type="button" class="carousel-button">
                 <Icon icon="more" alt="More" />
               </button>
             }
@@ -206,7 +204,7 @@ function MediaModal({
                 mediaAttachments[currentIndex]?.remoteUrl ||
                 mediaAttachments[currentIndex]?.url
               }
-              class="carousel-button plain3"
+              class="carousel-button"
               target="_blank"
               title="Open original media in new window"
             >
@@ -220,7 +218,7 @@ function MediaModal({
                 ? `?media=${currentIndex + 1}`
                 : ''
             }`}
-            class="button carousel-button media-post-link plain3"
+            class="button carousel-button media-post-link"
             // onClick={() => {
             //   // if small screen (not media query min-width 40em + 350px), run onClose
             //   if (
@@ -238,7 +236,7 @@ function MediaModal({
         <div class="carousel-controls" hidden={!showControls}>
           <button
             type="button"
-            class="carousel-button plain3"
+            class="carousel-button"
             hidden={currentIndex === 0}
             onClick={(e) => {
               e.preventDefault();
@@ -254,7 +252,7 @@ function MediaModal({
           </button>
           <button
             type="button"
-            class="carousel-button plain3"
+            class="carousel-button"
             hidden={currentIndex === mediaAttachments.length - 1}
             onClick={(e) => {
               e.preventDefault();
diff --git a/src/components/status.css b/src/components/status.css
index 7a5b3b04..28d59d38 100644
--- a/src/components/status.css
+++ b/src/components/status.css
@@ -874,8 +874,8 @@ body:has(#modal-container .carousel) .status .media img:hover {
   border-radius: 8px;
   color: var(--text-color);
   padding: 4px 8px;
-  background-color: var(--bg-blur-color);
-  border: var(--hairline-width) solid var(--bg-blur-color);
+  background-color: var(--bg-faded-color);
+  border: 1px solid var(--outline-color);
   box-shadow: 0 4px 16px var(--drop-shadow-color);
   max-width: min(var(--main-width), calc(100% - 32px));
   display: flex;