From 59ceb40a32b16c1cd916aa80e5b4458ee41c67f2 Mon Sep 17 00:00:00 2001
From: alexsparkes <alexsparkes@gmail.com>
Date: Sat, 7 Feb 2026 19:04:22 +0000
Subject: [PATCH] feat: Update Quote component and styles for improved
 visibility and user experience

---
 bun.lock                           |  1 +
 src/features/quote/Quote.jsx       |  2 +-
 src/features/quote/scss/index.scss | 33 ++++++++++++++++++++++--------
 3 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/bun.lock b/bun.lock
index e30c5e54..9cd3a6ad 100644
--- a/bun.lock
+++ b/bun.lock
@@ -1,5 +1,6 @@
 {
   "lockfileVersion": 1,
+  "configVersion": 0,
   "workspaces": {
     "": {
       "name": "mue",
diff --git a/src/features/quote/Quote.jsx b/src/features/quote/Quote.jsx
index 6d4c4913..4ac6d8eb 100644
--- a/src/features/quote/Quote.jsx
+++ b/src/features/quote/Quote.jsx
@@ -89,7 +89,7 @@ export default function Quote() {
   }
 
   return (
-    <div className="quotediv" style={{ display, fontSize }}>
+    <div className={`quotediv ${display === 'none' ? 'hidden' : ''}`} style={{ fontSize }}>
       <Modal
         closeTimeoutMS={300}
         isOpen={uiState.shareModal}
diff --git a/src/features/quote/scss/index.scss b/src/features/quote/scss/index.scss
index 40ba2f4a..ac9edd18 100644
--- a/src/features/quote/scss/index.scss
+++ b/src/features/quote/scss/index.scss
@@ -179,30 +179,44 @@ h1.quoteauthor {
   button {
     @include basicIconButton(11px, 1.3rem, ui);
   }
+
+  &.hidden {
+    display: none;
+  }
 }
 
 .quote-info-text {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 6px;
-  font-size: 0.75rem;
+  gap: 5px;
+  font-size: 0.8rem;
+  padding: 5px 10px;
   margin-top: -5px;
   cursor: pointer;
-  transition: opacity 0.2s ease;
+  transition: all 0.2s ease;
+  -webkit-user-select: none;
   user-select: none;
   align-self: center;
-
-  @include themed {
-    color: t($subColor);
-  }
+  width: fit-content;
+  border-radius: 12px;
+  background: rgb(0 0 0 / 25%);
+  -webkit-backdrop-filter: blur(4px);
+  backdrop-filter: blur(4px);
+  color: #fff;
 
   svg {
-    font-size: 0.8rem;
+    font-size: 0.95rem;
+    transition: transform 0.2s ease;
   }
 
   &:hover {
-    opacity: 0.7;
+    background: rgb(0 0 0 / 35%);
+    transform: translateY(-1px);
+
+    svg {
+      transform: scale(1.1);
+    }
   }
 }
 
@@ -356,6 +370,7 @@ h1.quoteauthor {
 
     .quoteInfoValue {
       font-size: 0.95rem;
+      text-transform: capitalize;
 
       @include themed {
         color: t($color);