RecentRunner/HaBit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve locked customization previews so sprites and rooms stay visible.

Browse Source 
Replace full-button opacity and heavy scrims with a small dark lock pill so users can still see what they are previewing in the shop.
This commit is contained in:
Harkamal Randhawa
2026-05-24 05:12:19 -06:00
parent 8c0603475f
commit f0d36d53fa
3 changed files with 15 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
components/character/character-piece-selector.tsx
View File

@@ -94,7 +94,7 @@ export function CharacterPieceSelector({
className={cn( className={cn(
"relative flex size-14 items-center justify-center rounded-lg border bg-zinc-950/80 p-1.5 transition-colors", "relative flex size-14 items-center justify-center rounded-lg border bg-zinc-950/80 p-1.5 transition-colors",
locked locked
? "border-border/40 opacity-80 hover:border-border hover:bg-zinc-900/60" ? "border-border/40 hover:border-border hover:bg-zinc-900/60"
: activeId === variant.id : activeId === variant.id
? "border-foreground bg-zinc-900 shadow-[inset_0_0_0_1px_hsl(var(--foreground)/0.15)]" ? "border-foreground bg-zinc-900 shadow-[inset_0_0_0_1px_hsl(var(--foreground)/0.15)]"
: "border-border/60 hover:border-border hover:bg-zinc-900/60", : "border-border/60 hover:border-border hover:bg-zinc-900/60",
@@ -109,9 +109,11 @@ export function CharacterPieceSelector({
{locked ? ( {locked ? (
<span <span
aria-hidden aria-hidden
className="absolute inset-0 flex items-center justify-center rounded-lg bg-background/75" className="absolute inset-0 flex items-center justify-center rounded-lg"
> >
<Lock className="size-4 text-muted-foreground" strokeWidth={2.25} /> <span className="rounded bg-black/50 p-1">
<Lock className="size-4 text-white" strokeWidth={2.25} />
</span>
</span> </span>
) : null} ) : null}
</button> </button>

10
components/pet/room-background-picker.tsx
View File

@@ -68,9 +68,7 @@ export function RoomBackgroundPicker({
selected selected
? "border-secondary shadow-[0_0_0_2px_hsl(var(--secondary)/0.35)]" ? "border-secondary shadow-[0_0_0_2px_hsl(var(--secondary)/0.35)]"
: "border-border/70", : "border-border/70",
unlocked "hover:-translate-y-0.5",
? "hover:-translate-y-0.5"
: "opacity-80 hover:-translate-y-0.5",
)} )}
> >
{room.sceneImage ? ( {room.sceneImage ? (
@@ -87,8 +85,10 @@ export function RoomBackgroundPicker({
{room.name} {room.name}
</p> </p>
{!unlocked ? ( {!unlocked ? (
<span className="absolute inset-0 flex items-center justify-center bg-background/55"> <span className="absolute inset-0 flex items-center justify-center">
<Lock className="size-4 text-muted-foreground" strokeWidth={2.25} /> <span className="rounded bg-black/50 p-1">
<Lock className="size-4 text-white" strokeWidth={2.25} />
</span>
</span> </span>
) : null} ) : null}
</button> </button>

8
components/pet/room-style-selector.tsx
View File

@@ -64,7 +64,7 @@ export function RoomStyleSelector({
className={cn( className={cn(
"relative size-14 overflow-hidden rounded-lg border transition-colors", "relative size-14 overflow-hidden rounded-lg border transition-colors",
locked locked
? "border-border/40 opacity-80 hover:border-border" ? "border-border/40 hover:border-border"
: activeId === room.id : activeId === room.id
? "border-foreground shadow-[inset_0_0_0_1px_hsl(var(--foreground)/0.15)]" ? "border-foreground shadow-[inset_0_0_0_1px_hsl(var(--foreground)/0.15)]"
: "border-border/60 hover:border-border", : "border-border/60 hover:border-border",
@@ -83,9 +83,11 @@ export function RoomStyleSelector({
{locked ? ( {locked ? (
<span <span
aria-hidden aria-hidden
className="absolute inset-0 flex items-center justify-center bg-background/75" className="absolute inset-0 flex items-center justify-center"
> >
<Lock className="size-4 text-muted-foreground" strokeWidth={2.25} /> <span className="rounded bg-black/50 p-1">
<Lock className="size-4 text-white" strokeWidth={2.25} />
</span>
</span> </span>
) : null} ) : null}
</button> </button>