From f08ac13138e9a1b8a5430385a33b91b72680ef50 Mon Sep 17 00:00:00 2001
From: Christopher <admin@gaion.chat>
Date: Thu, 22 Jan 2026 18:58:59 -0800
Subject: [PATCH] style: enhance compose media button with dedicated styling,
 hover effects, and an increased icon size.

---
 src/app/globals.css        | 19 +++++++++++++++++--
 src/components/Compose.tsx |  4 ++--
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 6d32303..c4eceb1 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -340,7 +340,8 @@ a.btn-primary:visited {
 
 .video-embed-container {
   position: relative;
-  padding-bottom: 56.25%; /* 16:9 aspect ratio */
+  padding-bottom: 56.25%;
+  /* 16:9 aspect ratio */
   height: 0;
   overflow: hidden;
   border-radius: var(--radius-md);
@@ -503,6 +504,20 @@ a.btn-primary:visited {
 .compose-media-button {
   position: relative;
   overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--radius-full);
+  color: var(--foreground-secondary);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.compose-media-button:hover {
+  background: var(--background-tertiary);
+  color: var(--accent);
 }
 
 .compose-media-input {
@@ -1564,4 +1579,4 @@ a.btn-primary:visited {
 .thread-line {
   margin-left: 20px;
   border-left: 1px solid var(--border);
-}
+}
\ No newline at end of file
diff --git a/src/components/Compose.tsx b/src/components/Compose.tsx
index adb7c88..af71c64 100644
--- a/src/components/Compose.tsx
+++ b/src/components/Compose.tsx
@@ -186,8 +186,8 @@ export function Compose({ onPost, replyingTo, onCancelReply, placeholder = "What
                     {remaining}
                 </span>
                 <div className="compose-actions">
-                    <label className="btn btn-ghost btn-sm compose-media-button" title="Add media">
-                        {isUploading ? '...' : <ImageIcon size={18} />}
+                    <label className="compose-media-button" title="Add media">
+                        {isUploading ? '...' : <ImageIcon size={20} />}
                         <input
                             type="file"
                             accept="image/*"