Skip to content

Commit a5890d4

Browse files
hazeonehazeone
committed
refactor(tailwind-config): enhance ClawX design tokens and component styling
- Expanded Tailwind configuration to include ClawX-specific design tokens for font sizes, font families, and colors. - Updated components across the application (e.g., ChannelConfigModal, Sidebar, ProvidersSettings) to utilize new design tokens for improved consistency and readability. - Standardized text sizes and background colors to align with ClawX's visual language, enhancing overall UI coherence. - Adjusted various components to replace hardcoded styles with semantic class names, improving maintainability and responsiveness.
1 parent d6b2d1d commit a5890d4

17 files changed

Lines changed: 665 additions & 361 deletions

File tree

‎src/components/channels/ChannelConfigModal.tsx‎

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -62,10 +62,10 @@ interface ChannelConfigModalProps {
6262
onChannelSaved?: (channelType: ChannelType) => void | Promise<void>;
6363
}
6464

65-
const inputClasses = 'h-[44px] rounded-xl font-mono text-[13px] bg-[#eeece3] dark:bg-muted border-black/10 dark:border-white/10 focus-visible:ring-2 focus-visible:ring-blue-500/50 focus-visible:border-blue-500 shadow-sm transition-all text-foreground placeholder:text-foreground/40';
66-
const labelClasses = 'text-[14px] text-foreground/80 font-bold';
67-
const outlineButtonClasses = 'h-9 text-[13px] font-medium rounded-full px-4 border-black/10 dark:border-white/10 bg-transparent hover:bg-black/5 dark:hover:bg-white/5 shadow-none text-foreground/80 hover:text-foreground';
68-
const primaryButtonClasses = 'h-9 text-[13px] font-medium rounded-full px-4 shadow-none';
65+
const inputClasses = 'h-[44px] rounded-xl font-mono text-meta bg-surface-input border-black/10 dark:border-white/10 focus-visible:ring-2 focus-visible:ring-blue-500/50 focus-visible:border-blue-500 shadow-sm transition-all text-foreground placeholder:text-foreground/40';
66+
const labelClasses = 'text-sm text-foreground/80 font-bold';
67+
const outlineButtonClasses = 'h-9 text-meta font-medium rounded-full px-4 border-black/10 dark:border-white/10 bg-transparent hover:bg-black/5 dark:hover:bg-white/5 shadow-none text-foreground/80 hover:text-foreground';
68+
const primaryButtonClasses = 'h-9 text-meta font-medium rounded-full px-4 shadow-none';
6969

7070
export function ChannelConfigModal({
7171
initialSelectedType = null,
@@ -500,7 +500,7 @@ export function ChannelConfigModal({
500500
}}
501501
>
502502
<Card
503-
className="w-full max-w-3xl max-h-[90vh] flex flex-col rounded-3xl border-0 shadow-2xl bg-[#f3f1e9] dark:bg-card overflow-hidden"
503+
className="w-full max-w-3xl max-h-[90vh] flex flex-col rounded-3xl border-0 shadow-2xl bg-surface-modal overflow-hidden"
504504
onMouseDown={(event) => event.stopPropagation()}
505505
onClick={(event) => event.stopPropagation()}
506506
>
@@ -539,7 +539,7 @@ export function ChannelConfigModal({
539539
key={type}
540540
onClick={() => setSelectedType(type)}
541541
className={cn(
542-
'group flex items-start gap-4 p-4 rounded-2xl transition-all text-left border relative overflow-hidden bg-[#eeece3] dark:bg-muted shadow-sm',
542+
'group flex items-start gap-4 p-4 rounded-2xl transition-all text-left border relative overflow-hidden bg-surface-input shadow-sm',
543543
isConfigured
544544
? 'border-green-500/40 bg-green-500/5 dark:bg-green-500/10'
545545
: 'border-black/5 dark:border-white/10 hover:bg-black/5 dark:hover:bg-white/5'
@@ -550,25 +550,25 @@ export function ChannelConfigModal({
550550
</div>
551551
<div className="flex flex-col flex-1 min-w-0 py-0.5 mt-1">
552552
<div className="flex items-center gap-2 mb-1">
553-
<p className="text-[16px] font-semibold text-foreground truncate">{channelMeta.name}</p>
553+
<p className="text-base font-semibold text-foreground truncate">{channelMeta.name}</p>
554554
{channelMeta.isPlugin && (
555555
<Badge
556556
variant="secondary"
557-
className="font-mono text-[10px] font-medium px-2 py-0.5 rounded-full bg-black/[0.04] dark:bg-white/[0.08] border-0 shadow-none text-foreground/70"
557+
className="font-mono text-2xs font-medium px-2 py-0.5 rounded-full bg-black/[0.04] dark:bg-white/[0.08] border-0 shadow-none text-foreground/70"
558558
>
559559
{t('pluginBadge')}
560560
</Badge>
561561
)}
562562
</div>
563-
<p className="text-[13.5px] text-muted-foreground line-clamp-2 leading-[1.5]">
563+
<p className="text-sm text-muted-foreground line-clamp-2 leading-[1.5]">
564564
{t(channelMeta.description.replace('channels:', ''))}
565565
</p>
566-
<p className="text-[12px] font-medium text-muted-foreground/80 mt-2">
566+
<p className="text-xs font-medium text-muted-foreground/80 mt-2">
567567
{channelMeta.connectionType === 'qr' ? t('dialog.qrCode') : t('dialog.token')}
568568
</p>
569569
</div>
570570
{isConfigured && (
571-
<Badge className="absolute top-3 right-3 text-[10px] font-medium rounded-full bg-green-600 hover:bg-green-600">
571+
<Badge className="absolute top-3 right-3 text-2xs font-medium rounded-full bg-green-600 hover:bg-green-600">
572572
{t('configuredBadge')}
573573
</Badge>
574574
)}
@@ -578,7 +578,7 @@ export function ChannelConfigModal({
578578
</div>
579579
) : qrCode ? (
580580
<div className="text-center space-y-6">
581-
<div className="bg-[#eeece3] dark:bg-muted p-4 rounded-3xl inline-block shadow-sm border border-black/10 dark:border-white/10">
581+
<div className="bg-surface-input p-4 rounded-3xl inline-block shadow-sm border border-black/10 dark:border-white/10">
582582
{qrCode.startsWith('data:image') || qrCode.startsWith('http://') || qrCode.startsWith('https://') ? (
583583
<img src={qrCode} alt="Scan QR Code" className="w-64 h-64 object-contain rounded-2xl" />
584584
) : (
@@ -587,7 +587,7 @@ export function ChannelConfigModal({
587587
</div>
588588
)}
589589
</div>
590-
<p className="text-[14px] text-muted-foreground">
590+
<p className="text-sm text-muted-foreground">
591591
{t('dialog.scanQR', { name: meta?.name })}
592592
</p>
593593
<div className="flex justify-center gap-2">
@@ -604,24 +604,24 @@ export function ChannelConfigModal({
604604
</div>
605605
</div>
606606
) : loadingConfig ? (
607-
<div className="flex items-center justify-center py-10 rounded-2xl bg-[#eeece3] dark:bg-muted border border-black/10 dark:border-white/10">
607+
<div className="flex items-center justify-center py-10 rounded-2xl bg-surface-input border border-black/10 dark:border-white/10">
608608
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
609-
<span className="ml-2 text-[14px] text-muted-foreground">{t('dialog.loadingConfig')}</span>
609+
<span className="ml-2 text-sm text-muted-foreground">{t('dialog.loadingConfig')}</span>
610610
</div>
611611
) : (
612612
<div className="space-y-6">
613613
{isExistingConfig && (
614-
<div className="bg-blue-500/10 text-blue-600 dark:text-blue-400 p-4 rounded-2xl text-[13.5px] flex items-center gap-2 border border-blue-500/20">
614+
<div className="bg-blue-500/10 text-blue-600 dark:text-blue-400 p-4 rounded-2xl text-sm flex items-center gap-2 border border-blue-500/20">
615615
<CheckCircle className="h-4 w-4 shrink-0" />
616616
<span>{t('dialog.existingHint')}</span>
617617
</div>
618618
)}
619619

620-
<div className="bg-[#eeece3] dark:bg-muted p-4 rounded-2xl space-y-4 shadow-sm border border-black/10 dark:border-white/10">
620+
<div className="bg-surface-input p-4 rounded-2xl space-y-4 shadow-sm border border-black/10 dark:border-white/10">
621621
<div className="flex items-center justify-between gap-3">
622622
<div>
623623
<p className={labelClasses}>{t('dialog.howToConnect')}</p>
624-
<p className="text-[13px] text-muted-foreground mt-1">
624+
<p className="text-meta text-muted-foreground mt-1">
625625
{meta ? t(meta.description.replace('channels:', '')) : ''}
626626
</p>
627627
</div>
@@ -635,7 +635,7 @@ export function ChannelConfigModal({
635635
<ExternalLink className="h-3 w-3 ml-1" />
636636
</Button>
637637
</div>
638-
<ol className="list-decimal pl-5 text-[13px] text-muted-foreground leading-relaxed space-y-1.5">
638+
<ol className="list-decimal pl-5 text-meta text-muted-foreground leading-relaxed space-y-1.5">
639639
{meta?.instructions.map((instruction, index) => (
640640
<li key={index}>{t(instruction)}</li>
641641
))}
@@ -672,9 +672,9 @@ export function ChannelConfigModal({
672672
className={cn(inputClasses, accountIdError && 'border-destructive/50 focus-visible:ring-destructive/30')}
673673
/>
674674
{accountIdError ? (
675-
<p className="text-[12px] text-destructive">{accountIdError}</p>
675+
<p className="text-xs text-destructive">{accountIdError}</p>
676676
) : (
677-
<p className="text-[12px] text-muted-foreground">{t('account.customIdHint')}</p>
677+
<p className="text-xs text-muted-foreground">{t('account.customIdHint')}</p>
678678
)}
679679
</div>
680680
)}
@@ -822,7 +822,7 @@ function ChannelLogo({ type }: { type: ChannelType }) {
822822
case 'qqbot':
823823
return <img src={qqIcon} alt="QQ" className="w-[22px] h-[22px] dark:invert" />;
824824
default:
825-
return <span className="text-[22px]">{CHANNEL_ICONS[type] || '💬'}</span>;
825+
return <span className="text-xl">{CHANNEL_ICONS[type] || '💬'}</span>;
826826
}
827827
}
828828

@@ -851,19 +851,19 @@ function ConfigField({ field, value, onChange, showSecret, onToggleSecret }: Con
851851
variant="outline"
852852
size="icon"
853853
onClick={onToggleSecret}
854-
className="h-[44px] w-[44px] rounded-xl bg-[#eeece3] dark:bg-muted border-black/10 dark:border-white/10 text-muted-foreground hover:text-foreground shrink-0 shadow-sm"
854+
className="h-[44px] w-[44px] rounded-xl bg-surface-input border-black/10 dark:border-white/10 text-muted-foreground hover:text-foreground shrink-0 shadow-sm"
855855
>
856856
{showSecret ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
857857
</Button>
858858
)}
859859
</div>
860860
{field.description && (
861-
<p className="text-[13px] text-muted-foreground leading-relaxed">
861+
<p className="text-meta text-muted-foreground leading-relaxed">
862862
{t(field.description)}
863863
</p>
864864
)}
865865
{field.envVar && (
866-
<p className="text-[12px] text-muted-foreground/70 font-mono">
866+
<p className="text-xs text-muted-foreground/70 font-mono">
867867
{t('dialog.envVar', { var: field.envVar })}
868868
</p>
869869
)}

‎src/components/layout/Sidebar.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ function NavItem({ to, icon, label, badge, collapsed, onClick, testId }: NavItem
5858
data-testid={testId}
5959
className={({ isActive }) =>
6060
cn(
61-
'flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-[14px] font-medium transition-colors',
61+
'flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium transition-colors',
6262
'hover:bg-black/5 dark:hover:bg-white/5 text-foreground/80',
6363
isActive
6464
? 'bg-black/5 dark:bg-white/10 text-foreground'
@@ -237,7 +237,7 @@ export function Sidebar() {
237237
<aside
238238
data-testid="sidebar"
239239
className={cn(
240-
'flex min-h-0 shrink-0 flex-col overflow-hidden border-r bg-[#eae8e1]/60 dark:bg-background transition-all duration-300',
240+
'flex min-h-0 shrink-0 flex-col overflow-hidden border-r bg-surface-sidebar/60 transition-all duration-300',
241241
sidebarCollapsed ? 'w-16' : 'w-64'
242242
)}
243243
>
@@ -275,7 +275,7 @@ export function Sidebar() {
275275
navigate('/');
276276
}}
277277
className={cn(
278-
'flex w-full items-center gap-2.5 rounded-lg px-2.5 py-2 text-[14px] font-medium transition-colors mb-2',
278+
'flex w-full items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium transition-colors mb-2',
279279
'bg-black/5 dark:bg-accent shadow-none border border-transparent text-foreground',
280280
sidebarCollapsed && 'justify-center px-0',
281281
)}
@@ -301,7 +301,7 @@ export function Sidebar() {
301301
{sessionBuckets.map((bucket) => (
302302
bucket.sessions.length > 0 ? (
303303
<div key={bucket.key} className="pt-2">
304-
<div className="px-2.5 pb-1 text-[11px] font-medium text-muted-foreground/60 tracking-tight">
304+
<div className="px-2.5 pb-1 text-tiny font-medium text-muted-foreground/60 tracking-tight">
305305
{bucket.label}
306306
</div>
307307
{bucket.sessions.map((s) => {
@@ -312,15 +312,15 @@ export function Sidebar() {
312312
<button
313313
onClick={() => { switchSession(s.key); navigate('/'); }}
314314
className={cn(
315-
'w-full text-left rounded-lg px-2.5 py-1.5 text-[13px] transition-colors pr-7',
315+
'w-full text-left rounded-lg px-2.5 py-1.5 text-meta transition-colors pr-7',
316316
'hover:bg-black/5 dark:hover:bg-white/5',
317317
isOnChat && currentSessionKey === s.key
318318
? 'bg-black/5 dark:bg-white/10 text-foreground font-medium'
319319
: 'text-foreground/75',
320320
)}
321321
>
322322
<div className="flex min-w-0 items-center gap-2">
323-
<span className="shrink-0 rounded-full bg-black/[0.04] px-2 py-0.5 text-[10px] font-medium text-foreground/70 dark:bg-white/[0.08]">
323+
<span className="shrink-0 rounded-full bg-black/[0.04] px-2 py-0.5 text-2xs font-medium text-foreground/70 dark:bg-white/[0.08]">
324324
{agentName}
325325
</span>
326326
<span className="truncate">{getSessionLabel(s.key, s.displayName, s.label)}</span>
@@ -359,7 +359,7 @@ export function Sidebar() {
359359
data-testid="sidebar-nav-settings"
360360
className={({ isActive }) =>
361361
cn(
362-
'flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-[14px] font-medium transition-colors',
362+
'flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium transition-colors',
363363
'hover:bg-black/5 dark:hover:bg-white/5 text-foreground/80',
364364
isActive && 'bg-black/5 dark:bg-white/10 text-foreground',
365365
sidebarCollapsed ? 'justify-center px-0' : ''
@@ -381,7 +381,7 @@ export function Sidebar() {
381381
data-testid="sidebar-open-dev-console"
382382
variant="ghost"
383383
className={cn(
384-
'flex items-center gap-2.5 rounded-lg px-2.5 py-2 h-auto text-[14px] font-medium transition-colors w-full mt-1',
384+
'flex items-center gap-2.5 rounded-lg px-2.5 py-2 h-auto text-sm font-medium transition-colors w-full mt-1',
385385
'hover:bg-black/5 dark:hover:bg-white/5 text-foreground/80',
386386
sidebarCollapsed ? 'justify-center px-0' : 'justify-start'
387387
)}

0 commit comments

Comments
 (0)