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>
388 lines
18 KiB
JavaScript
388 lines
18 KiB
JavaScript
import { Button } from './ui';
|
|
|
|
const RARITY_OPTIONS = [
|
|
'common', 'uncommon', 'rare', 'mythic', 'legendary',
|
|
'holographic', 'enchanted', 'super rare', 'ultra rare',
|
|
];
|
|
|
|
const GAME_OPTIONS = ['MTG', 'Pokemon', 'Lorcana'];
|
|
|
|
const COLOR_OPTIONS = ['White', 'Blue', 'Black', 'Red', 'Green', 'Colorless'];
|
|
|
|
export default function CardEditorForm({
|
|
formData,
|
|
onInputChange,
|
|
onColorChange,
|
|
onSave,
|
|
saving,
|
|
message,
|
|
}) {
|
|
return (
|
|
<>
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h2 className="text-xl font-semibold" style={{ color: 'var(--text-primary)' }}>
|
|
Edit Card Details
|
|
</h2>
|
|
<Button
|
|
variant="primary"
|
|
size="lg"
|
|
onClick={onSave}
|
|
disabled={saving}
|
|
loading={saving}
|
|
>
|
|
{saving ? 'Saving...' : 'Save Changes'}
|
|
</Button>
|
|
</div>
|
|
|
|
{message && (
|
|
<div className={`p-4 rounded-lg mb-6 ${
|
|
message.includes('Error')
|
|
? 'bg-red-100 text-red-700 border border-red-200'
|
|
: 'bg-green-100 text-green-700 border border-green-200'
|
|
}`}>
|
|
{message}
|
|
</div>
|
|
)}
|
|
|
|
<div className="space-y-6">
|
|
{/* Basic Information */}
|
|
<div className="glass-panel p-6 rounded-xl">
|
|
<h3 className="text-lg font-semibold mb-4" style={{ color: 'var(--text-primary)' }}>
|
|
Basic Information
|
|
</h3>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
|
Card Name *
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formData.name}
|
|
onChange={(e) => onInputChange('name', e.target.value)}
|
|
className="w-full p-3 rounded-lg border transition-all duration-200"
|
|
style={{
|
|
backgroundColor: 'var(--bg-primary)',
|
|
borderColor: 'var(--border)',
|
|
color: 'var(--text-primary)'
|
|
}}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
|
Game *
|
|
</label>
|
|
<select
|
|
value={formData.game}
|
|
onChange={(e) => onInputChange('game', e.target.value)}
|
|
className="w-full p-3 rounded-lg border transition-all duration-200"
|
|
style={{
|
|
backgroundColor: 'var(--bg-primary)',
|
|
borderColor: 'var(--border)',
|
|
color: 'var(--text-primary)'
|
|
}}
|
|
>
|
|
<option value="">Select Game</option>
|
|
{GAME_OPTIONS.map(game => (
|
|
<option key={game} value={game}>{game}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
|
Set Name
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formData.set_name}
|
|
onChange={(e) => onInputChange('set_name', e.target.value)}
|
|
className="w-full p-3 rounded-lg border transition-all duration-200"
|
|
style={{
|
|
backgroundColor: 'var(--bg-primary)',
|
|
borderColor: 'var(--border)',
|
|
color: 'var(--text-primary)'
|
|
}}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
|
Set Code
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formData.set_code}
|
|
onChange={(e) => onInputChange('set_code', e.target.value)}
|
|
className="w-full p-3 rounded-lg border transition-all duration-200"
|
|
style={{
|
|
backgroundColor: 'var(--bg-primary)',
|
|
borderColor: 'var(--border)',
|
|
color: 'var(--text-primary)'
|
|
}}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
|
Card Number
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formData.card_number}
|
|
onChange={(e) => onInputChange('card_number', e.target.value)}
|
|
className="w-full p-3 rounded-lg border transition-all duration-200"
|
|
style={{
|
|
backgroundColor: 'var(--bg-primary)',
|
|
borderColor: 'var(--border)',
|
|
color: 'var(--text-primary)'
|
|
}}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
|
Rarity
|
|
</label>
|
|
<select
|
|
value={formData.rarity}
|
|
onChange={(e) => onInputChange('rarity', e.target.value)}
|
|
className="w-full p-3 rounded-lg border transition-all duration-200"
|
|
style={{
|
|
backgroundColor: 'var(--bg-primary)',
|
|
borderColor: 'var(--border)',
|
|
color: 'var(--text-primary)'
|
|
}}
|
|
>
|
|
<option value="">Select Rarity</option>
|
|
{RARITY_OPTIONS.map(rarity => (
|
|
<option key={rarity} value={rarity}>{rarity}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Game Mechanics */}
|
|
<div className="glass-panel p-6 rounded-xl">
|
|
<h3 className="text-lg font-semibold mb-4" style={{ color: 'var(--text-primary)' }}>
|
|
Game Mechanics
|
|
</h3>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
|
Card Type
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formData.card_type}
|
|
onChange={(e) => onInputChange('card_type', e.target.value)}
|
|
placeholder="e.g., Creature, Instant, Pokemon, Character"
|
|
className="w-full p-3 rounded-lg border transition-all duration-200"
|
|
style={{
|
|
backgroundColor: 'var(--bg-primary)',
|
|
borderColor: 'var(--border)',
|
|
color: 'var(--text-primary)'
|
|
}}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
|
Mana Cost
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formData.mana_cost}
|
|
onChange={(e) => onInputChange('mana_cost', e.target.value)}
|
|
placeholder="e.g., {2}{U}{U}, 3, etc."
|
|
className="w-full p-3 rounded-lg border transition-all duration-200"
|
|
style={{
|
|
backgroundColor: 'var(--bg-primary)',
|
|
borderColor: 'var(--border)',
|
|
color: 'var(--text-primary)'
|
|
}}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
|
CMC (Converted Mana Cost)
|
|
</label>
|
|
<input
|
|
type="number"
|
|
value={formData.cmc}
|
|
onChange={(e) => onInputChange('cmc', e.target.value)}
|
|
className="w-full p-3 rounded-lg border transition-all duration-200"
|
|
style={{
|
|
backgroundColor: 'var(--bg-primary)',
|
|
borderColor: 'var(--border)',
|
|
color: 'var(--text-primary)'
|
|
}}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
|
Power
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formData.power}
|
|
onChange={(e) => onInputChange('power', e.target.value)}
|
|
placeholder="e.g., 2, *, X"
|
|
className="w-full p-3 rounded-lg border transition-all duration-200"
|
|
style={{
|
|
backgroundColor: 'var(--bg-primary)',
|
|
borderColor: 'var(--border)',
|
|
color: 'var(--text-primary)'
|
|
}}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
|
Toughness
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formData.toughness}
|
|
onChange={(e) => onInputChange('toughness', e.target.value)}
|
|
placeholder="e.g., 2, *, X"
|
|
className="w-full p-3 rounded-lg border transition-all duration-200"
|
|
style={{
|
|
backgroundColor: 'var(--bg-primary)',
|
|
borderColor: 'var(--border)',
|
|
color: 'var(--text-primary)'
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Colors */}
|
|
<div className="mt-4">
|
|
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
|
Colors
|
|
</label>
|
|
<div className="flex flex-wrap gap-3">
|
|
{COLOR_OPTIONS.map(color => (
|
|
<label key={color} className="flex items-center gap-2 cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
checked={formData.colors.includes(color)}
|
|
onChange={(e) => onColorChange(color, e.target.checked)}
|
|
className="rounded"
|
|
/>
|
|
<span style={{ color: 'var(--text-primary)' }}>{color}</span>
|
|
</label>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Card Text */}
|
|
<div className="glass-panel p-6 rounded-xl">
|
|
<h3 className="text-lg font-semibold mb-4" style={{ color: 'var(--text-primary)' }}>
|
|
Card Text
|
|
</h3>
|
|
<div>
|
|
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
|
Oracle Text / Abilities
|
|
</label>
|
|
<textarea
|
|
value={formData.oracle_text}
|
|
onChange={(e) => onInputChange('oracle_text', e.target.value)}
|
|
rows={4}
|
|
placeholder="Enter the card's rules text, abilities, or flavor text..."
|
|
className="w-full p-3 rounded-lg border transition-all duration-200"
|
|
style={{
|
|
backgroundColor: 'var(--bg-primary)',
|
|
borderColor: 'var(--border)',
|
|
color: 'var(--text-primary)'
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Images */}
|
|
<div className="glass-panel p-6 rounded-xl">
|
|
<h3 className="text-lg font-semibold mb-4" style={{ color: 'var(--text-primary)' }}>
|
|
Card Images
|
|
</h3>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
|
Primary Image URL
|
|
</label>
|
|
<input
|
|
type="url"
|
|
value={formData.image_url}
|
|
onChange={(e) => onInputChange('image_url', e.target.value)}
|
|
placeholder="https://example.com/card-image.jpg"
|
|
className="w-full p-3 rounded-lg border transition-all duration-200"
|
|
style={{
|
|
backgroundColor: 'var(--bg-primary)',
|
|
borderColor: 'var(--border)',
|
|
color: 'var(--text-primary)'
|
|
}}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
|
Stock Image URL
|
|
</label>
|
|
<input
|
|
type="url"
|
|
value={formData.stock_image_url}
|
|
onChange={(e) => onInputChange('stock_image_url', e.target.value)}
|
|
placeholder="https://example.com/stock-image.jpg"
|
|
className="w-full p-3 rounded-lg border transition-all duration-200"
|
|
style={{
|
|
backgroundColor: 'var(--bg-primary)',
|
|
borderColor: 'var(--border)',
|
|
color: 'var(--text-primary)'
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Pricing */}
|
|
<div className="glass-panel p-6 rounded-xl">
|
|
<h3 className="text-lg font-semibold mb-4" style={{ color: 'var(--text-primary)' }}>
|
|
Pricing Information
|
|
</h3>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
|
Current Price ($)
|
|
</label>
|
|
<input
|
|
type="number"
|
|
step="0.01"
|
|
value={formData.current_price}
|
|
onChange={(e) => onInputChange('current_price', e.target.value)}
|
|
placeholder="0.00"
|
|
className="w-full p-3 rounded-lg border transition-all duration-200"
|
|
style={{
|
|
backgroundColor: 'var(--bg-primary)',
|
|
borderColor: 'var(--border)',
|
|
color: 'var(--text-primary)'
|
|
}}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
|
Market Price ($)
|
|
</label>
|
|
<input
|
|
type="number"
|
|
step="0.01"
|
|
value={formData.market_price}
|
|
onChange={(e) => onInputChange('market_price', e.target.value)}
|
|
placeholder="0.00"
|
|
className="w-full p-3 rounded-lg border transition-all duration-200"
|
|
style={{
|
|
backgroundColor: 'var(--bg-primary)',
|
|
borderColor: 'var(--border)',
|
|
color: 'var(--text-primary)'
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|