admin/cc-switch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(styles): migrate from CSS variables to Tailwind classes

Browse Source 
- Replace all CSS custom properties with Tailwind utility classes
- Add tailwind.config.js with custom color palette matching Linear design
- Reduce index.css from 89 to 37 lines (58% reduction)
- Maintain consistent visual appearance with semantic color usage
- Update all components to use Tailwind classes instead of CSS variables
This commit is contained in:
Jason
2025-09-08 11:48:05 +08:00
parent 3ce847d2e0
commit 77a65aaad8
13 changed files with 168 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/ConfirmDialog.tsx
View File

@@ -33,18 +33,18 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
{/* Dialog */}
<div className="relative bg-white rounded-xl shadow-lg max-w-md w-full mx-4 overflow-hidden">
{/* Header */}
<div className="flex items-center justify-between p-6 border-b border-[var(--color-border)]">
<div className="flex items-center justify-between p-6 border-b border-gray-200">
<div className="flex items-center gap-3">
<div className="w-10 h-10 bg-[var(--color-error-light)] rounded-full flex items-center justify-center">
<AlertTriangle size={20} className="text-[var(--color-error)]" />
<div className="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center">
<AlertTriangle size={20} className="text-red-500" />
</div>
<h3 className="text-lg font-semibold text-[var(--color-text-primary)]">
<h3 className="text-lg font-semibold text-gray-900">
{title}
</h3>
</div>
<button
onClick={onCancel}
className="p-1 text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-tertiary)] rounded-md transition-colors"
className="p-1 text-gray-500 hover:text-gray-900 hover:bg-gray-100 rounded-md transition-colors"
>
<X size={18} />
</button>
@@ -52,23 +52,23 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
{/* Content */}
<div className="p-6">
<p className="text-[var(--color-text-secondary)] leading-relaxed">
<p className="text-gray-500 leading-relaxed">
{message}
</p>
</div>
{/* Actions */}
<div className="flex items-center justify-end gap-3 p-6 border-t border-[var(--color-border)] bg-[var(--color-bg-tertiary)]">
<div className="flex items-center justify-end gap-3 p-6 border-t border-gray-200 bg-gray-100">
<button
onClick={onCancel}
className="px-4 py-2 text-sm font-medium text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-white rounded-md transition-colors"
className="px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-900 hover:bg-white rounded-md transition-colors"
autoFocus
>
{cancelText}
</button>
<button
onClick={onConfirm}
className="px-4 py-2 text-sm font-medium bg-[var(--color-error)] text-white hover:bg-[var(--color-error)]/90 rounded-md transition-colors"
className="px-4 py-2 text-sm font-medium bg-red-500 text-white hover:bg-red-500/90 rounded-md transition-colors"
>
{confirmText}
</button>