feat: Update Quote component and styles for improved visibility and user experience

bun.lock

@@ -1,5 +1,6 @@
 {
   "lockfileVersion": 1,
+  "configVersion": 0,
   "workspaces": {
     "": {
       "name": "mue",

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}

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);