rstillwell/deckhearth
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

refactor(card-item): tokenize list-mode palette (cleanup Brief 1) #128

Merged
varutasu merged 1 commit from cleanup-brief-1-card-item-list-mode into main 2026-06-04 17:55:36 -04:00
Conversation 1 Commits 1 Files changed 1 +52 -20
1 changed files with 52 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
components/CardItem.js
View file

@ -180,12 +180,16 @@ export default function CardItem({
if (viewMode === 'list') {
return (
<div
className={`flex items-center p-4 border rounded-lg transition-all duration-200 cursor-pointer ${
isSelected
? 'border-purple-500 bg-purple-50 shadow-md'
: 'border-gray-200 hover:border-gray-300 hover:shadow-sm'
}`}
<div
className="flex items-center p-4 rounded-xl transition-all duration-200 cursor-pointer nav-item-hover"
style={{
backgroundColor: isSelected
? 'rgba(255, 110, 0, 0.08)'
: 'transparent',
border: '1px solid',
borderColor: isSelected ? 'var(--accent-ember)' : 'var(--border)',
boxShadow: isSelected ? 'var(--rim-light-inner)' : 'none',
}}
onClick={handleCardClick}
>
{/* Selection Checkbox */}
@ -204,7 +208,10 @@ export default function CardItem({
{/* Card Image */}
<div className="flex-shrink-0 mr-4">
<div className="w-16 h-22 bg-gray-200 rounded-lg overflow-hidden">
<div
className="w-16 h-22 rounded-lg overflow-hidden"
style={{ backgroundColor: 'var(--bg-tertiary)' }}
>
{!imageError ? (
<img
src={card.image_url}
@ -213,7 +220,10 @@ export default function CardItem({
onError={handleImageError}
/>
) : (
<div className="w-full h-full flex items-center justify-center text-gray-400 text-xs">
<div
className="w-full h-full flex items-center justify-center text-xs"
style={{ color: 'var(--text-secondary)' }}
>
No Image
</div>
)}
@ -222,21 +232,40 @@ export default function CardItem({
{/* Card Info */}
<div className="flex-1 min-w-0">
<h3 className="font-semibold text-gray-900 truncate">{card.name}</h3>
<p className="text-sm text-gray-600">{card.set_name} • {card.rarity}</p>
<p className="text-sm text-gray-500">{card.card_type}</p>
<h3
className="font-semibold truncate"
style={{ color: 'var(--text-primary)' }}
>
{card.name}
</h3>
<p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
{card.set_name} • {card.rarity}
</p>
<p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
{card.card_type}
</p>
</div>
{/* Game Badge */}
<div className="flex-shrink-0 mx-4">
<span className="px-2 py-1 text-xs font-medium rounded-full bg-blue-100 text-blue-800">
<span
className="px-2 py-1 text-xs font-medium rounded-full"
style={{
backgroundColor: 'var(--bg-tertiary)',
color: 'var(--text-primary)',
border: '1px solid var(--border)',
}}
>
{card.game}
</span>
</div>
{/* Price */}
<div className="flex-shrink-0 mx-4">
<span className="text-lg font-bold text-green-600">
<span
className="text-lg font-bold"
style={{ color: 'var(--accent-flame)' }}
>
${card.market_price}
</span>
</div>
@ -248,11 +277,12 @@ export default function CardItem({
e.stopPropagation();
onToggleFavorite(card);
}}
className={`p-2 rounded-lg transition-colors ${
isFavorited
? 'text-red-500 hover:text-red-600'
: 'text-gray-400 hover:text-red-500'
}`}
className="nav-item-hover p-2 rounded-xl transition-colors"
style={{
color: isFavorited
? 'var(--accent-ember)'
: 'var(--text-secondary)',
}}
>
<svg className="w-5 h-5" fill={isFavorited ? "currentColor" : "none"} stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
@ -264,7 +294,8 @@ export default function CardItem({
e.stopPropagation();
onAddToCollection(card);
}}
className="p-2 text-blue-600 hover:text-blue-700 hover:bg-blue-50 rounded-lg transition-colors"
className="nav-item-hover p-2 rounded-xl transition-colors"
style={{ color: 'var(--accent-ember)' }}
title={VOCAB.ADD_TO_LIST}
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@ -277,7 +308,8 @@ export default function CardItem({
e.stopPropagation();
onAddToDeck(card);
}}
className="p-2 text-green-600 hover:text-green-700 hover:bg-green-50 rounded-lg transition-colors"
className="nav-item-hover p-2 rounded-xl transition-colors"
style={{ color: 'var(--accent-flame)' }}
title="Add to Deck"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">