Improvements to the UI

components/shop/shop-content.tsx

@@ -1,9 +1,9 @@
 "use client";
 
+import { Coins } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
 
 import { TintedSpriteIcon } from "@/components/character/tinted-sprite-icon";
-import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { useToast } from "@/components/ui/toast-provider";
@@ -24,9 +24,47 @@ import {
   type ShopItemRecord,
   type ShopLayerId,
 } from "@/lib/shop-catalog";
+import { ShopItemPreviewModal } from "@/components/shop/shop-item-preview-modal";
 import { cn } from "@/lib/utils";
 
-import { ShopItemPreviewModal } from "@/components/shop/shop-item-preview-modal";
+function ShopItemPriceBadge({
+  price,
+  owned,
+  equipped,
+}: {
+  price: number;
+  owned: boolean;
+  equipped?: boolean;
+}) {
+  const boxClassName =
+    "inline-flex shrink-0 items-center justify-center gap-2.5 border-2 px-5 font-pixel text-[13px] font-normal uppercase tracking-wide leading-none shadow-[var(--retro-shadow-sm)] h-12";
+
+  if (owned) {
+    return (
+      <div
+        className={cn(
+          boxClassName,
+          "border-border/60 bg-muted/30 text-muted-foreground",
+        )}
+      >
+        {equipped ? "Equipped" : "Owned"}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        boxClassName,
+        "border-primary/35 bg-primary/10 text-primary",
+      )}
+    >
+      <Coins aria-hidden="true" className="size-5 shrink-0" />
+      <span className="tabular-nums">{price}</span>
+      <span className="text-primary/80">pts</span>
+    </div>
+  );
+}
 
 const SHOP_LAYER_ORDER: ShopLayerId[] = [
   "head",
@@ -94,13 +132,15 @@ function ShopItemCard({
             )}
           </div>
 
-          <div className="min-w-0 flex-1 space-y-1">
-            <div className="flex items-start justify-between gap-2">
-              <p className="min-w-0 flex-1 text-xs leading-snug">{item.name}</p>
-              <Badge className="shrink-0 px-1.5 py-0.5 text-[8px]">
-                {item.price} pts
-              </Badge>
-            </div>
+          <div className="flex min-w-0 flex-1 items-start justify-between gap-2">
+            <p className="min-w-0 pt-1 text-sm font-medium leading-snug">
+              {item.name}
+            </p>
+            <ShopItemPriceBadge
+              price={item.price}
+              owned={owned}
+              equipped={equipped}
+            />
           </div>
         </div>
 
@@ -287,15 +327,6 @@ export function ShopContent() {
         }}
       />
 
-      <div className="mb-5 flex items-center justify-between gap-3 border-2 border-border bg-muted/40 px-4 py-3 shadow-[var(--retro-shadow-sm)]">
-        <span className="text-[10px] uppercase tracking-wider text-muted-foreground">
-          Your balance
-        </span>
-        <Badge variant="secondary" className="shrink-0">
-          {coins === null ? "..." : `${coins} points`}
-        </Badge>
-      </div>
-
       {error ? <p className="mb-4 text-xs text-red-500">{error}</p> : null}
 
       {!error && coins !== null && items.length === 0 ? (
@@ -312,7 +343,7 @@ export function ShopContent() {
       <div className="grid gap-8">
         {roomItems.length > 0 ? (
           <section className="grid gap-3">
-            <h3 className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
+            <h3 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">
               Room backgrounds
             </h3>
             <div className={itemGridClassName}>
@@ -335,7 +366,7 @@ export function ShopContent() {
 
         {styleGroups.map((group) => (
           <section key={group.layerId} className="grid gap-3">
-            <h3 className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
+            <h3 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">
               {group.label}
             </h3>
             <div className={itemGridClassName}>

components/shop/shop-item-preview-modal.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { X } from "lucide-react";
+import { Coins, X } from "lucide-react";
 import Link from "next/link";
 import { useEffect } from "react";
 
@@ -87,7 +87,7 @@ export function ShopItemPreviewModal({
               id="shop-preview-title"
               className="text-[10px] uppercase tracking-wider text-muted-foreground"
             >
-              Preview on your pet
+              Preview on your bit
             </p>
             <p className="mt-1 truncate text-sm">{item.name}</p>
           </div>
@@ -119,13 +119,16 @@ export function ShopItemPreviewModal({
             <div className="pointer-events-none absolute inset-x-0 bottom-0 z-[2] h-8 bg-gradient-to-t from-black/35 to-transparent" />
           </div>
           <p className="mt-3 text-center text-[10px] text-muted-foreground">
-            Preview only — nothing is purchased or equipped until you confirm.
+            This is a preview only. Nothing is purchased or equipped until you confirm.
           </p>
 
           <div className="mt-4 grid gap-2 border-t-2 border-border pt-4">
-            <div className="flex items-center justify-between gap-3 text-xs">
-              <span className="text-muted-foreground">Price</span>
-              <span>{item.price} points</span>
+            <div className="flex items-center justify-end gap-1.5 border-2 border-primary/30 bg-primary/5 px-3 py-2.5">
+              <Coins aria-hidden="true" className="size-4 text-primary" />
+              <span className="text-xl font-bold tabular-nums text-primary">
+                {item.price}
+              </span>
+              <span className="text-sm text-muted-foreground">points</span>
             </div>
 
             {owned ? (