consistency: migrate Tailwind default colors in CheckoutView and FileManagerView (Batches 19-20)
This commit is contained in:
senke
parent
43b2257657
commit
4032172050
3 changed files with 43 additions and 41 deletions
|
|
@ -3122,7 +3122,9 @@ Critical path dependencies:
|
|||
- ✅ Batch 16 complete: EducationView.tsx (6 instances)
|
||||
- ✅ Batch 17 complete: CartView.tsx (8 instances)
|
||||
- ✅ Batch 18 complete: SearchPageView.tsx (11 instances)
|
||||
- ✅ Total: 254 instances migrated (1,492 → 1,238 remaining, ~17.0% complete)
|
||||
- ✅ Batch 19 complete: CheckoutView.tsx (20 instances)
|
||||
- ✅ Batch 20 complete: FileManagerView.tsx (20 instances)
|
||||
- ✅ Total: 294 instances migrated (1,492 → 1,198 remaining, ~19.7% complete)
|
||||
- ⏳ Continuing with remaining files incrementally
|
||||
- **Validation**: No Tailwind default colors used (in progress)
|
||||
- **Rollback**: Restore Tailwind colors
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@ export const CheckoutView: React.FC<CheckoutViewProps> = ({
|
|||
<Button
|
||||
variant="ghost"
|
||||
onClick={onBack}
|
||||
className="mb-6 pl-0 text-gray-400 hover:text-white"
|
||||
className="mb-6 pl-0 text-kodo-content-dim hover:text-white"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4 mr-2" /> Back to Cart
|
||||
</Button>
|
||||
|
|
@ -80,7 +80,7 @@ export const CheckoutView: React.FC<CheckoutViewProps> = ({
|
|||
<div className="lg:col-span-2 space-y-8">
|
||||
{/* Billing Info */}
|
||||
<Card variant="default">
|
||||
<h3 className="font-bold text-white mb-6 border-b border-gray-700 pb-2">
|
||||
<h3 className="font-bold text-white mb-6 border-b border-kodo-steel pb-2">
|
||||
Billing Information
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
|
||||
|
|
@ -119,7 +119,7 @@ export const CheckoutView: React.FC<CheckoutViewProps> = ({
|
|||
onChange={(e) => setForm({ ...form, zip: e.target.value })}
|
||||
/>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-400 mb-2">
|
||||
<label className="block text-sm font-medium text-kodo-content-dim mb-2">
|
||||
Country
|
||||
</label>
|
||||
<select
|
||||
|
|
@ -141,7 +141,7 @@ export const CheckoutView: React.FC<CheckoutViewProps> = ({
|
|||
|
||||
{/* Payment Method (Visual Mock) */}
|
||||
<Card variant="default">
|
||||
<h3 className="font-bold text-white mb-6 border-b border-gray-700 pb-2 flex items-center gap-2">
|
||||
<h3 className="font-bold text-white mb-6 border-b border-kodo-steel pb-2 flex items-center gap-2">
|
||||
<Lock className="w-4 h-4 text-kodo-lime" /> Payment Method
|
||||
</h3>
|
||||
|
||||
|
|
@ -150,23 +150,23 @@ export const CheckoutView: React.FC<CheckoutViewProps> = ({
|
|||
<CreditCard className="w-5 h-5 text-kodo-cyan" />
|
||||
<span className="font-bold text-white">Credit Card</span>
|
||||
<div className="flex gap-1 ml-auto">
|
||||
<div className="w-8 h-5 bg-gray-700 rounded"></div>
|
||||
<div className="w-8 h-5 bg-gray-700 rounded"></div>
|
||||
<div className="w-8 h-5 bg-gray-700 rounded"></div>
|
||||
<div className="w-8 h-5 bg-kodo-steel rounded"></div>
|
||||
<div className="w-8 h-5 bg-kodo-steel rounded"></div>
|
||||
<div className="w-8 h-5 bg-kodo-steel rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stripe Element Simulation */}
|
||||
<div className="space-y-3">
|
||||
<div className="bg-kodo-graphite border border-kodo-steel rounded px-3 py-3 text-sm text-gray-400 flex items-center justify-between">
|
||||
<div className="bg-kodo-graphite border border-kodo-steel rounded px-3 py-3 text-sm text-kodo-content-dim flex items-center justify-between">
|
||||
<span>4242 4242 4242 4242</span>
|
||||
<CreditCard className="w-4 h-4" />
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="bg-kodo-graphite border border-kodo-steel rounded px-3 py-3 text-sm text-gray-400">
|
||||
<div className="bg-kodo-graphite border border-kodo-steel rounded px-3 py-3 text-sm text-kodo-content-dim">
|
||||
MM / YY
|
||||
</div>
|
||||
<div className="bg-kodo-graphite border border-kodo-steel rounded px-3 py-3 text-sm text-gray-400">
|
||||
<div className="bg-kodo-graphite border border-kodo-steel rounded px-3 py-3 text-sm text-kodo-content-dim">
|
||||
CVC
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -177,26 +177,26 @@ export const CheckoutView: React.FC<CheckoutViewProps> = ({
|
|||
<label className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="rounded border-gray-600 bg-transparent text-kodo-cyan focus:ring-0"
|
||||
className="rounded border-kodo-steel bg-transparent text-kodo-cyan focus:ring-0"
|
||||
checked={form.saveInfo}
|
||||
onChange={(e) =>
|
||||
setForm({ ...form, saveInfo: e.target.checked })
|
||||
}
|
||||
/>
|
||||
<span className="text-sm text-gray-400">
|
||||
<span className="text-sm text-kodo-content-dim">
|
||||
Save payment information for future purchases
|
||||
</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="rounded border-gray-600 bg-transparent text-kodo-cyan focus:ring-0"
|
||||
className="rounded border-kodo-steel bg-transparent text-kodo-cyan focus:ring-0"
|
||||
checked={form.acceptTerms}
|
||||
onChange={(e) =>
|
||||
setForm({ ...form, acceptTerms: e.target.checked })
|
||||
}
|
||||
/>
|
||||
<span className="text-sm text-gray-400">
|
||||
<span className="text-sm text-kodo-content-dim">
|
||||
I accept the{' '}
|
||||
<span className="text-white hover:underline">
|
||||
Terms of Service
|
||||
|
|
@ -225,10 +225,10 @@ export const CheckoutView: React.FC<CheckoutViewProps> = ({
|
|||
className="flex justify-between items-start text-sm"
|
||||
>
|
||||
<div className="flex-1 pr-4">
|
||||
<div className="text-gray-300 font-medium truncate">
|
||||
<div className="text-kodo-text-main font-medium truncate">
|
||||
{item.title}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500">
|
||||
<div className="text-xs text-kodo-content-dim">
|
||||
{item.selectedLicense?.name || 'Standard'} License
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -239,12 +239,12 @@ export const CheckoutView: React.FC<CheckoutViewProps> = ({
|
|||
))}
|
||||
</div>
|
||||
|
||||
<div className="border-t border-gray-700 pt-4 space-y-2 mb-6">
|
||||
<div className="flex justify-between text-sm text-gray-400">
|
||||
<div className="border-t border-kodo-steel pt-4 space-y-2 mb-6">
|
||||
<div className="flex justify-between text-sm text-kodo-content-dim">
|
||||
<span>Subtotal</span>
|
||||
<span>${cartTotal.toFixed(2)}</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm text-gray-400">
|
||||
<div className="flex justify-between text-sm text-kodo-content-dim">
|
||||
<span>Taxes</span>
|
||||
<span>${tax.toFixed(2)}</span>
|
||||
</div>
|
||||
|
|
@ -271,7 +271,7 @@ export const CheckoutView: React.FC<CheckoutViewProps> = ({
|
|||
)}
|
||||
</Button>
|
||||
|
||||
<div className="text-center mt-4 flex items-center justify-center gap-2 text-xs text-gray-500">
|
||||
<div className="text-center mt-4 flex items-center justify-center gap-2 text-xs text-kodo-content-dim">
|
||||
<Lock className="w-3 h-3" /> 256-bit SSL Encrypted
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -151,7 +151,7 @@ export const FileManagerView: React.FC = () => {
|
|||
<h2 className="text-2xl font-display font-bold text-white mb-1">
|
||||
FILE MANAGER
|
||||
</h2>
|
||||
<div className="flex items-center gap-2 text-sm text-gray-400">
|
||||
<div className="flex items-center gap-2 text-sm text-kodo-content-dim">
|
||||
<span
|
||||
className="hover:text-white cursor-pointer"
|
||||
onClick={() => setCurrentFolder('Root')}
|
||||
|
|
@ -187,7 +187,7 @@ export const FileManagerView: React.FC = () => {
|
|||
<div className="bg-kodo-ink p-1 rounded-lg border border-kodo-steel flex">
|
||||
<button
|
||||
onClick={() => setViewMode('list')}
|
||||
className={`p-2 rounded ${viewMode === 'list' ? 'bg-kodo-slate text-white' : 'text-gray-400 hover:text-white'}`}
|
||||
className={`p-2 rounded ${viewMode === 'list' ? 'bg-kodo-slate text-white' : 'text-kodo-content-dim hover:text-white'}`}
|
||||
aria-label="Vue liste"
|
||||
aria-pressed={viewMode === 'list'}
|
||||
>
|
||||
|
|
@ -195,7 +195,7 @@ export const FileManagerView: React.FC = () => {
|
|||
</button>
|
||||
<button
|
||||
onClick={() => setViewMode('grid')}
|
||||
className={`p-2 rounded ${viewMode === 'grid' ? 'bg-kodo-slate text-white' : 'text-gray-400 hover:text-white'}`}
|
||||
className={`p-2 rounded ${viewMode === 'grid' ? 'bg-kodo-slate text-white' : 'text-kodo-content-dim hover:text-white'}`}
|
||||
aria-label="Vue grille"
|
||||
aria-pressed={viewMode === 'grid'}
|
||||
>
|
||||
|
|
@ -223,21 +223,21 @@ export const FileManagerView: React.FC = () => {
|
|||
<div className="h-4 w-px bg-kodo-cyan/30 mx-2"></div>
|
||||
<button
|
||||
onClick={() => handleBulkAction('Downloaded')}
|
||||
className="text-gray-300 hover:text-white"
|
||||
className="text-kodo-text-main hover:text-white"
|
||||
title="Download"
|
||||
>
|
||||
<Download className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleBulkAction('Moved')}
|
||||
className="text-gray-300 hover:text-white"
|
||||
className="text-kodo-text-main hover:text-white"
|
||||
title="Move"
|
||||
>
|
||||
<Move className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleBulkAction('Deleted')}
|
||||
className="text-red-400 hover:text-red-300"
|
||||
className="text-kodo-red hover:text-kodo-red/80"
|
||||
title="Delete"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
|
|
@ -270,7 +270,7 @@ export const FileManagerView: React.FC = () => {
|
|||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr className="border-b border-kodo-steel bg-kodo-ink/50 text-xs font-mono text-gray-500 uppercase tracking-wider">
|
||||
<tr className="border-b border-kodo-steel bg-kodo-ink/50 text-xs font-mono text-kodo-content-dim uppercase tracking-wider">
|
||||
<th className="p-4 w-10">
|
||||
<div
|
||||
onClick={selectAll}
|
||||
|
|
@ -300,7 +300,7 @@ export const FileManagerView: React.FC = () => {
|
|||
<td className="p-4">
|
||||
<div
|
||||
onClick={() => toggleSelection(file.id)}
|
||||
className="cursor-pointer text-gray-500 hover:text-white"
|
||||
className="cursor-pointer text-kodo-content-dim hover:text-white"
|
||||
>
|
||||
{selectedFiles.includes(file.id) ? (
|
||||
<CheckSquare className="w-4 h-4 text-kodo-cyan" />
|
||||
|
|
@ -325,42 +325,42 @@ export const FileManagerView: React.FC = () => {
|
|||
)}
|
||||
{['document', 'archive', 'project'].includes(
|
||||
file.type,
|
||||
) && <File className="w-5 h-5 text-gray-400" />}
|
||||
<span className="font-medium text-gray-200 group-hover:text-white transition-colors">
|
||||
) && <File className="w-5 h-5 text-kodo-content-dim" />}
|
||||
<span className="font-medium text-kodo-text-main group-hover:text-white transition-colors">
|
||||
{file.name}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="px-2 py-1 bg-kodo-ink rounded text-[10px] uppercase font-bold text-gray-400">
|
||||
<span className="px-2 py-1 bg-kodo-ink rounded text-[10px] uppercase font-bold text-kodo-content-dim">
|
||||
{file.type}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4 text-sm text-gray-400 font-mono">
|
||||
<td className="p-4 text-sm text-kodo-content-dim font-mono">
|
||||
{file.size}
|
||||
</td>
|
||||
<td className="p-4 text-sm text-gray-400">
|
||||
<td className="p-4 text-sm text-kodo-content-dim">
|
||||
{file.modified}
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span
|
||||
className={`flex items-center gap-1.5 text-xs font-bold capitalize ${file.status === 'ready' ? 'text-kodo-lime' : file.status === 'processing' ? 'text-kodo-gold' : 'text-gray-500'}`}
|
||||
className={`flex items-center gap-1.5 text-xs font-bold capitalize ${file.status === 'ready' ? 'text-kodo-lime' : file.status === 'processing' ? 'text-kodo-gold' : 'text-kodo-content-dim'}`}
|
||||
>
|
||||
<div
|
||||
className={`w-1.5 h-1.5 rounded-full ${file.status === 'ready' ? 'bg-kodo-lime' : file.status === 'processing' ? 'bg-kodo-gold animate-pulse' : 'bg-gray-500'}`}
|
||||
className={`w-1.5 h-1.5 rounded-full ${file.status === 'ready' ? 'bg-kodo-lime' : file.status === 'processing' ? 'bg-kodo-gold animate-pulse' : 'bg-kodo-steel'}`}
|
||||
></div>
|
||||
{file.status}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4 text-right">
|
||||
<div className="flex justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<button className="p-1.5 hover:bg-white/10 rounded text-gray-400 hover:text-white">
|
||||
<button className="p-1.5 hover:bg-white/10 rounded text-kodo-content-dim hover:text-white">
|
||||
<Eye
|
||||
className="w-4 h-4"
|
||||
onClick={() => handleFileClick(file)}
|
||||
/>
|
||||
</button>
|
||||
<button className="p-1.5 hover:bg-white/10 rounded text-gray-400 hover:text-white">
|
||||
<button className="p-1.5 hover:bg-white/10 rounded text-kodo-content-dim hover:text-white">
|
||||
<MoreVertical className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -390,7 +390,7 @@ export const FileManagerView: React.FC = () => {
|
|||
{selectedFiles.includes(file.id) ? (
|
||||
<CheckSquare className="w-4 h-4 text-kodo-cyan" />
|
||||
) : (
|
||||
<Square className="w-4 h-4 text-gray-400 hover:text-white" />
|
||||
<Square className="w-4 h-4 text-kodo-content-dim hover:text-white" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
|
@ -405,14 +405,14 @@ export const FileManagerView: React.FC = () => {
|
|||
<ImageIcon className="w-8 h-8 text-kodo-magenta" />
|
||||
)}
|
||||
{['document', 'archive', 'project'].includes(file.type) && (
|
||||
<File className="w-8 h-8 text-gray-400" />
|
||||
<File className="w-8 h-8 text-kodo-content-dim" />
|
||||
)}
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<h4 className="font-bold text-white text-sm truncate w-full">
|
||||
{file.name}
|
||||
</h4>
|
||||
<p className="text-xs text-gray-500 mt-1">{file.size}</p>
|
||||
<p className="text-xs text-kodo-content-dim mt-1">{file.size}</p>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
|
|
|
|||
Loading…
Reference in a new issue