From 0f571864e023af311c1789b92768d9be85aaf7aa Mon Sep 17 00:00:00 2001
From: fullsizemalt <106900403+fullsizemalt@users.noreply.github.com>
Date: Mon, 29 Dec 2025 21:56:31 -0800
Subject: [PATCH] fix: remove emoji from UI, fix JSX structure, add
 microanimations

---
 frontend/app/my-bands/page.tsx | 18 ++++++++++--------
 frontend/app/settings/page.tsx |  6 +++---
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/frontend/app/my-bands/page.tsx b/frontend/app/my-bands/page.tsx
index 655c710..aefaf9e 100644
--- a/frontend/app/my-bands/page.tsx
+++ b/frontend/app/my-bands/page.tsx
@@ -272,16 +272,18 @@ function BandGrid({
                 return (
                     <Card
                         key={band.id}
-                        className={`relative overflow-hidden transition-all ${tier === "headliner" ? "ring-2 ring-yellow-500 bg-yellow-500/5" :
+                        className={`relative overflow-hidden transition-all duration-200 hover:scale-[1.02] hover:shadow-lg ${tier === "headliner" ? "ring-2 ring-yellow-500 bg-yellow-500/5" :
                                 tier === "ignored" ? "opacity-60 grayscale" :
                                     tier ? "ring-1 ring-primary/30" : ""
                             }`}
                     >
                         <CardHeader className="p-4 pb-2">
-                            <div className="flex items-start justify-between">
-                                <div>
-                                    <span className="text-2xl">{band.emoji || "🎵"}</span>
-                                    <CardTitle className="text-base mt-1">{band.name}</CardTitle>
+                            <div className="flex items-start justify-between gap-2">
+                                <div className="flex items-center gap-3">
+                                    <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center text-primary font-bold text-sm transition-colors">
+                                        {band.name.substring(0, 2).toUpperCase()}
+                                    </div>
+                                    <CardTitle className="text-base">{band.name}</CardTitle>
                                 </div>
                                 {isUpdating && (
                                     <Loader2 className="h-4 w-4 animate-spin" />
@@ -294,7 +296,7 @@ function BandGrid({
                                 <button
                                     onClick={() => setTier(band.id, tier === "headliner" ? "main_stage" : "headliner")}
                                     disabled={isUpdating}
-                                    className={`flex-1 p-2 rounded-lg text-xs font-medium transition-all ${tier === "headliner"
+                                    className={`flex-1 p-2 rounded-lg text-xs font-medium transition-all duration-150 active:scale-95 ${tier === "headliner"
                                             ? "bg-yellow-500 text-black"
                                             : "bg-muted hover:bg-yellow-500/20"
                                         }`}
@@ -307,7 +309,7 @@ function BandGrid({
                                 <button
                                     onClick={() => setTier(band.id, tier === "main_stage" ? null : "main_stage")}
                                     disabled={isUpdating}
-                                    className={`flex-1 p-2 rounded-lg text-xs font-medium transition-all ${tier === "main_stage" || tier === "supporting"
+                                    className={`flex-1 p-2 rounded-lg text-xs font-medium transition-all duration-150 active:scale-95 ${tier === "main_stage" || tier === "supporting"
                                             ? "bg-primary text-primary-foreground"
                                             : "bg-muted hover:bg-primary/20"
                                         }`}
@@ -320,7 +322,7 @@ function BandGrid({
                                 <button
                                     onClick={() => setTier(band.id, tier === "ignored" ? null : "ignored")}
                                     disabled={isUpdating}
-                                    className={`flex-1 p-2 rounded-lg text-xs font-medium transition-all ${tier === "ignored"
+                                    className={`flex-1 p-2 rounded-lg text-xs font-medium transition-all duration-150 active:scale-95 ${tier === "ignored"
                                             ? "bg-destructive text-destructive-foreground"
                                             : "bg-muted hover:bg-destructive/20"
                                         }`}
diff --git a/frontend/app/settings/page.tsx b/frontend/app/settings/page.tsx
index 6d7b4f0..696f669 100644
--- a/frontend/app/settings/page.tsx
+++ b/frontend/app/settings/page.tsx
@@ -451,7 +451,7 @@ function ProfileSection({
                     <div className="grid gap-4 md:grid-cols-3">
                         <div className="space-y-2">
                             <Label htmlFor="bluesky" className="flex items-center gap-2">
-                                <span className="text-sky-500">🦋</span> BlueSky
+                                BlueSky
                             </Label>
                             <Input
                                 id="bluesky"
@@ -462,7 +462,7 @@ function ProfileSection({
                         </div>
                         <div className="space-y-2">
                             <Label htmlFor="mastodon" className="flex items-center gap-2">
-                                <span className="text-purple-500">🐘</span> Mastodon
+                                Mastodon
                             </Label>
                             <Input
                                 id="mastodon"
@@ -473,7 +473,7 @@ function ProfileSection({
                         </div>
                         <div className="space-y-2">
                             <Label htmlFor="instagram" className="flex items-center gap-2">
-                                <span className="text-pink-500">📷</span> Instagram
+                                Instagram
                             </Label>
                             <Input
                                 id="instagram"