From f9cb9502b11cd75db8956f636e329ced1bc551a9 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Thu, 28 Sep 2023 23:48:01 +0800
Subject: [PATCH] Extract alt badge styles out from tag

- Differentiate clickable version vs non-clickable version
- Also differentiate alt badge vs the other "tags" on media
---
 src/components/media-modal.jsx |  2 +-
 src/components/media.jsx       |  2 +-
 src/components/status.css      | 44 +++++++++++++++++++++-------------
 3 files changed, 30 insertions(+), 18 deletions(-)

diff --git a/src/components/media-modal.jsx b/src/components/media-modal.jsx
index d01f97fe..7e520da4 100644
--- a/src/components/media-modal.jsx
+++ b/src/components/media-modal.jsx
@@ -141,7 +141,7 @@ function MediaModal({
                     setShowMediaAlt(media.description);
                   }}
                 >
-                  <span class="tag collapsed">ALT</span>
+                  <span class="alt-badge">ALT</span>
                   <span class="media-alt-desc">{media.description}</span>
                 </button>
               )}
diff --git a/src/components/media.jsx b/src/components/media.jsx
index d2c6c498..a1a376de 100644
--- a/src/components/media.jsx
+++ b/src/components/media.jsx
@@ -34,7 +34,7 @@ const AltBadge = (props) => {
   return (
     <button
       type="button"
-      class="tag collapsed clickable"
+      class="alt-badge clickable"
       {...rest}
       onClick={(e) => {
         e.stopPropagation();
diff --git a/src/components/status.css b/src/components/status.css
index 1fc920f6..d7e8cf6f 100644
--- a/src/components/status.css
+++ b/src/components/status.css
@@ -853,31 +853,16 @@
   &[data-has-alt] {
     position: relative;
 
-    .tag {
+    .alt-badge {
       position: absolute;
       bottom: 8px;
       left: 8px;
-      font-size: 12px;
-      font-weight: bold;
-      color: var(--media-fg-color);
-      background-color: var(--media-bg-color);
-      border: var(--hairline-width) solid var(--media-outline-color);
-      mix-blend-mode: luminosity;
-      opacity: 0.75;
 
       &:before {
         content: '';
         position: absolute;
         inset: -12px;
       }
-
-      &:is(:hover, :focus):not(:active) {
-        transition: 0.15s ease-out;
-        transition-property: transform, opacity, mix-blend-mode;
-        transform: scale(1.15);
-        opacity: 0.8;
-        mix-blend-mode: normal;
-      }
     }
   }
 }
@@ -1674,3 +1659,30 @@ a.card:is(:hover, :focus):visited {
 #reactions-container .reactions-block .reblog-icon {
   color: var(--reblog-color);
 }
+
+/* ALT BADGE */
+
+.alt-badge {
+  font-size: 12px;
+  font-weight: bold;
+  color: var(--media-fg-color);
+  background-color: var(--media-bg-color);
+  border: var(--hairline-width) solid var(--media-outline-color);
+  mix-blend-mode: luminosity;
+  border-radius: 4px;
+  padding: 4px;
+  opacity: 0.65;
+
+  &.clickable {
+    opacity: 0.75;
+    border-width: 2px;
+
+    &:is(:hover, :focus):not(:active) {
+      transition: 0.15s ease-out;
+      transition-property: transform, opacity, mix-blend-mode;
+      transform: scale(1.15);
+      opacity: 0.8;
+      mix-blend-mode: normal;
+    }
+  }
+}