fix: remove emoji from UI, fix JSX structure, add microanimations
Some checks failed
Deploy Fediversion / deploy (push) Failing after 1s
Some checks failed
Deploy Fediversion / deploy (push) Failing after 1s
This commit is contained in:
parent
0c7df04b92
commit
0f571864e0
2 changed files with 13 additions and 11 deletions
|
|
@ -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"
|
||||||
}`}
|
}`}
|
||||||
|
|
|
||||||
|
|
@ -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"
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue