From 61edcb21155061daa251c97b5486bcc55095cc86 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sat, 11 Feb 2023 22:36:19 +0800
Subject: [PATCH] Replace ALT badge with info icon
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ALT is just… too technical.
---
 src/app.css                    | 6 ++++++
 src/components/icon.jsx        | 1 +
 src/components/media-modal.jsx | 2 +-
 src/components/status.css      | 6 +++---
 4 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/app.css b/src/app.css
index 5641ae05..c0d683cb 100644
--- a/src/app.css
+++ b/src/app.css
@@ -972,6 +972,12 @@ button.carousel-dot:is(.active, [disabled].active) {
   mask-image: linear-gradient(to bottom, transparent 0%, black 10px);
 }
 
+/* ICON */
+
+.icon {
+  flex-shrink: 0;
+}
+
 /* TAG */
 
 .tag {
diff --git a/src/components/icon.jsx b/src/components/icon.jsx
index 7edefb70..aee772e9 100644
--- a/src/components/icon.jsx
+++ b/src/components/icon.jsx
@@ -52,6 +52,7 @@ const ICONS = {
   list: 'mingcute:list-check-line',
   search: 'mingcute:search-2-line',
   hashtag: 'mingcute:hashtag-line',
+  info: 'mingcute:information-line',
 };
 
 const modules = import.meta.glob('/node_modules/@iconify-icons/mingcute/*.js');
diff --git a/src/components/media-modal.jsx b/src/components/media-modal.jsx
index d4b08be4..ab39fae0 100644
--- a/src/components/media-modal.jsx
+++ b/src/components/media-modal.jsx
@@ -123,7 +123,7 @@ function MediaModal({
                     setShowMediaAlt(media.description);
                   }}
                 >
-                  <span class="tag">ALT</span>{' '}
+                  <Icon icon="info" />
                   <span class="media-alt-desc">{media.description}</span>
                 </button>
               )}
diff --git a/src/components/status.css b/src/components/status.css
index e21310d4..a3600e7e 100644
--- a/src/components/status.css
+++ b/src/components/status.css
@@ -532,13 +532,13 @@
   text-align: left;
   border-radius: 8px;
   color: var(--text-color);
-  padding: 4px 8px 4px 4px;
+  padding: 4px 8px;
   border: 1px solid var(--outline-color);
   box-shadow: 0 4px 16px var(--outline-color);
   max-width: min(40em, calc(100% - 32px));
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: 8px;
   font-size: 90%;
 }
 .carousel-item button.media-alt .media-alt-desc {
@@ -550,7 +550,7 @@
   box-orient: vertical;
   -webkit-line-clamp: 2;
   line-clamp: 2;
-  line-height: 1.2;
+  line-height: 1.4;
 }
 .carousel-item button.media-alt[hidden] {
   opacity: 0;