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(
"relative flex size-14 items-center justify-center rounded-lg border bg-zinc-950/80 p-1.5 transition-colors",
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
? "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",
@@ -109,9 +109,11 @@ export function CharacterPieceSelector({
{locked ? (
<span
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>
) : null}
</button>

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

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

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

@@ -64,7 +64,7 @@ export function RoomStyleSelector({
className={cn(
"relative size-14 overflow-hidden rounded-lg border transition-colors",
locked
? "border-border/40 opacity-80 hover:border-border"
? "border-border/40 hover:border-border"
: activeId === room.id
? "border-foreground shadow-[inset_0_0_0_1px_hsl(var(--foreground)/0.15)]"
: "border-border/60 hover:border-border",
@@ -83,9 +83,11 @@ export function RoomStyleSelector({
{locked ? (
<span
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>
) : null}
</button>