fix: remove emoji from UI, fix JSX structure, add microanimations
Some checks failed
Deploy Fediversion / deploy (push) Failing after 1s

This commit is contained in:
fullsizemalt 2025-12-29 21:56:31 -08:00
parent 0c7df04b92
commit 0f571864e0
2 changed files with 13 additions and 11 deletions

View file

@ -272,16 +272,18 @@ function BandGrid({
return ( return (
<Card <Card
key={band.id} 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 === "ignored" ? "opacity-60 grayscale" :
tier ? "ring-1 ring-primary/30" : "" tier ? "ring-1 ring-primary/30" : ""
}`} }`}
> >
<CardHeader className="p-4 pb-2"> <CardHeader className="p-4 pb-2">
<div className="flex items-start justify-between"> <div className="flex items-start justify-between gap-2">
<div> <div className="flex items-center gap-3">
<span className="text-2xl">{band.emoji || "🎵"}</span> <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center text-primary font-bold text-sm transition-colors">
<CardTitle className="text-base mt-1">{band.name}</CardTitle> {band.name.substring(0, 2).toUpperCase()}
</div>
<CardTitle className="text-base">{band.name}</CardTitle>
</div> </div>
{isUpdating && ( {isUpdating && (
<Loader2 className="h-4 w-4 animate-spin" /> <Loader2 className="h-4 w-4 animate-spin" />
@ -294,7 +296,7 @@ function BandGrid({
<button <button
onClick={() => setTier(band.id, tier === "headliner" ? "main_stage" : "headliner")} onClick={() => setTier(band.id, tier === "headliner" ? "main_stage" : "headliner")}
disabled={isUpdating} 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-yellow-500 text-black"
: "bg-muted hover:bg-yellow-500/20" : "bg-muted hover:bg-yellow-500/20"
}`} }`}
@ -307,7 +309,7 @@ function BandGrid({
<button <button
onClick={() => setTier(band.id, tier === "main_stage" ? null : "main_stage")} onClick={() => setTier(band.id, tier === "main_stage" ? null : "main_stage")}
disabled={isUpdating} 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-primary text-primary-foreground"
: "bg-muted hover:bg-primary/20" : "bg-muted hover:bg-primary/20"
}`} }`}
@ -320,7 +322,7 @@ function BandGrid({
<button <button
onClick={() => setTier(band.id, tier === "ignored" ? null : "ignored")} onClick={() => setTier(band.id, tier === "ignored" ? null : "ignored")}
disabled={isUpdating} 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-destructive text-destructive-foreground"
: "bg-muted hover:bg-destructive/20" : "bg-muted hover:bg-destructive/20"
}`} }`}

View file

@ -451,7 +451,7 @@ function ProfileSection({
<div className="grid gap-4 md:grid-cols-3"> <div className="grid gap-4 md:grid-cols-3">
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="bluesky" className="flex items-center gap-2"> <Label htmlFor="bluesky" className="flex items-center gap-2">
<span className="text-sky-500">🦋</span> BlueSky BlueSky
</Label> </Label>
<Input <Input
id="bluesky" id="bluesky"
@ -462,7 +462,7 @@ function ProfileSection({
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="mastodon" className="flex items-center gap-2"> <Label htmlFor="mastodon" className="flex items-center gap-2">
<span className="text-purple-500">🐘</span> Mastodon Mastodon
</Label> </Label>
<Input <Input
id="mastodon" id="mastodon"
@ -473,7 +473,7 @@ function ProfileSection({
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="instagram" className="flex items-center gap-2"> <Label htmlFor="instagram" className="flex items-center gap-2">
<span className="text-pink-500">📷</span> Instagram Instagram
</Label> </Label>
<Input <Input
id="instagram" id="instagram"