From 4800cac837e3cdd3a7f6cc62f33c77d2ec5261ce Mon Sep 17 00:00:00 2001
From: Dorian <dorian@Dorians-MacBook-Air.local>
Date: Tue, 3 Feb 2026 00:33:55 +0000
Subject: [PATCH] Move profile avatar styles to global CSS with original fill

Changes:
- Moved .profile-avatar styles from Browse.vue to src/style.css
- Restored original gradient fill: orange (#f97316) to pink (#ec4899)
- Kept gradient border treatment
- Added z-index to span for proper layering
- Now available globally for reuse

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 src/style.css        | 36 ++++++++++++++++++++++++++++++++++++
 src/views/Browse.vue | 29 -----------------------------
 2 files changed, 36 insertions(+), 29 deletions(-)

diff --git a/src/style.css b/src/style.css
index c138151..506afdb 100644
--- a/src/style.css
+++ b/src/style.css
@@ -146,3 +146,39 @@ body {
   background-size: 1000px 100%;
   animation: shimmer 2s infinite;
 }
+
+/* Profile Avatar with Gradient Border */
+.profile-avatar {
+  position: relative;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  font-weight: 600;
+  color: white;
+  background: linear-gradient(to bottom right, #f97316, #ec4899);
+}
+
+.profile-avatar span {
+  position: relative;
+  z-index: 1;
+}
+
+.profile-avatar::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: 2px;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(245, 37, 50, 0.6));
+  -webkit-mask: 
+    linear-gradient(#fff 0 0) content-box, 
+    linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  pointer-events: none;
+}
+
diff --git a/src/views/Browse.vue b/src/views/Browse.vue
index d3c1225..ba11aef 100644
--- a/src/views/Browse.vue
+++ b/src/views/Browse.vue
@@ -479,35 +479,6 @@ onUnmounted(() => {
 }
 
 /* Profile Dropdown Styles */
-.profile-avatar {
-  position: relative;
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 14px;
-  font-weight: 600;
-  color: white;
-  background: linear-gradient(135deg, #F0003D 0%, #FA4727 36.98%, #6B90F4 77.6%);
-}
-
-.profile-avatar::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  padding: 2px;
-  background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(245, 37, 50, 0.6));
-  -webkit-mask: 
-    linear-gradient(#fff 0 0) content-box, 
-    linear-gradient(#fff 0 0);
-  -webkit-mask-composite: xor;
-  mask-composite: exclude;
-  pointer-events: none;
-}
-
 .profile-button {
   padding: 6px 12px 6px 6px;
   border-radius: 12px;