d269bd29c1
PR #95/#96 shipped the Liquid Glass foundation (tokens, primitives, gates) plus Layout shell, modals, landing, auth pages, and form CTAs — but body- content panels on authenticated pages (admin Card Editor, admin Card Import, admin Submissions, dashboard, my-cards, settings, scanner panels, card detail price cards, popovers) were still rendering as flat var(--bg-secondary) cards. Result: the admin Tools screen and several core pages looked unchanged after the redesign. This sweep adds a `.glass-panel` / `.glass-panel-strong` utility (<GlassSurface tint=mid/high rim=subtle elevation=ambient/pronounced blur=mid/high> in class form) and applies it across 18 surfaces: * Admin Card Editor view, search panel, form (5 sections), preview * Admin Card Import navigation + 3 body cards + sync panel * Admin Card Submissions list items * Dashboard stat cards + empty-state + grid items (5 surfaces) * My-cards empty-state CTA card * Settings panels (3) * Scanner page settings + grid + queue + bulk toolbar + dialog * Scanner destination picker + camera status banner + disambiguation * Card detail price cards (Current / TCGPlayer / CardKingdom) * Permission indicator tooltips * Collections page header card * Card detail view price cards Also migrates the lingering admin Card Editor "Card Editor / Card Import" nav buttons and the "Save Changes" / "Import Cards" / "Run catalog sync" CTAs to the <Button> primitive (consistent loading + disabled states). Page header bands (full-bleed strips with border-bottom on dashboard, my-cards, cards, collections, community/collections, collection/[id]) are intentionally left solid — they're not card-shaped surfaces and stacking glass-on-glass directly below the already-glass topbar would muddy the hierarchy. Tests: lint clean, vitest 104/104, build green. The visual diff baseline will need refresh because the homepage spec is unaffected (it targets the unauthenticated landing page) but the dashboard/ admin/scanner surfaces will diff if/when we add baselines for them. Co-authored-by: Cursor <cursoragent@cursor.com>
62 lines
2.9 KiB
JavaScript
62 lines
2.9 KiB
JavaScript
/* eslint-disable @next/next/no-img-element -- External card image URLs; next/image migration is out of scope. */
|
|
|
|
export default function CardEditorPreview({ formData }) {
|
|
return (
|
|
<div className="sticky top-8">
|
|
<h2 className="text-xl font-semibold mb-4" style={{ color: 'var(--text-primary)' }}>
|
|
Card Preview
|
|
</h2>
|
|
<div className="glass-panel p-6 rounded-xl">
|
|
<div className="w-full max-w-xs mx-auto">
|
|
<div
|
|
className="w-full rounded-lg overflow-hidden shadow-lg"
|
|
style={{ aspectRatio: '5/7' }}
|
|
>
|
|
{formData.image_url ? (
|
|
<img
|
|
src={formData.image_url}
|
|
alt={formData.name}
|
|
className="w-full h-full object-cover"
|
|
onError={(e) => {
|
|
e.target.style.display = 'none';
|
|
e.target.nextSibling.style.display = 'flex';
|
|
}}
|
|
/>
|
|
) : null}
|
|
<div
|
|
className={`w-full h-full flex items-center justify-center ${formData.image_url ? 'hidden' : 'flex'}`}
|
|
style={{ backgroundColor: 'var(--bg-primary)' }}
|
|
>
|
|
<div className="text-center p-4">
|
|
<div className="text-4xl mb-2">🃏</div>
|
|
<div className="text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>
|
|
{formData.name || 'Card Name'}
|
|
</div>
|
|
<div className="text-xs" style={{ color: 'var(--text-secondary)' }}>
|
|
{formData.set_name || 'Set Name'}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-4 text-center">
|
|
<h3 className="font-bold" style={{ color: 'var(--text-primary)' }}>
|
|
{formData.name || 'Card Name'}
|
|
</h3>
|
|
<p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
|
|
{formData.set_name} • {formData.game}
|
|
</p>
|
|
<p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
|
|
{formData.rarity} • {formData.card_type}
|
|
</p>
|
|
{formData.current_price && (
|
|
<p className="text-lg font-bold mt-2 gradient-text-gold">
|
|
${parseFloat(formData.current_price).toFixed(2)}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|