admin/DeskClaw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(apparence): opt clawx apparence and i18n settings (#410)

Browse Source
This commit is contained in:
Haze
2026-03-11 15:37:16 +08:00
committed by GitHub
Unverified
parent da8ed3bb32
commit a575977e3c
20 changed files with 110 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/pages/Agents/index.tsx
View File

@@ -72,7 +72,7 @@ export function Agents() {
>
{t('title')}
</h1>
<p className="text-[17px] text-foreground/80 font-medium">{t('subtitle')}</p>
<p className="text-[17px] text-foreground/70 font-medium">{t('subtitle')}</p>
</div>
<div className="flex items-center gap-3 md:mt-2">
<Button
@@ -244,7 +244,7 @@ function AgentCard({
);
}
const inputClasses = 'h-[44px] rounded-xl font-mono text-[13px] bg-[#eeece3] dark:bg-[#151514] 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';
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';
const labelClasses = 'text-[14px] text-foreground/80 font-bold';
function ChannelLogo({ type }: { type: ChannelType }) {
@@ -294,7 +294,7 @@ function AddAgentDialog({
return (
<div className="fixed inset-0 z-50 bg-black/50 flex items-center justify-center p-4">
<Card className="w-full max-w-md rounded-3xl border-0 shadow-2xl bg-[#f3f1e9] dark:bg-[#1a1a19] overflow-hidden">
<Card className="w-full max-w-md rounded-3xl border-0 shadow-2xl bg-[#f3f1e9] dark:bg-card overflow-hidden">
<CardHeader className="pb-2">
<CardTitle className="text-2xl font-serif font-normal tracking-tight">
{t('createDialog.title')}
@@ -405,7 +405,7 @@ function AgentSettingsModal({
return (
<div className="fixed inset-0 z-50 bg-black/50 flex items-center justify-center p-4">
<Card className="w-full max-w-2xl max-h-[90vh] flex flex-col rounded-3xl border-0 shadow-2xl bg-[#f3f1e9] dark:bg-[#1a1a19] overflow-hidden">
<Card className="w-full max-w-2xl max-h-[90vh] flex flex-col rounded-3xl border-0 shadow-2xl bg-[#f3f1e9] dark:bg-card overflow-hidden">
<CardHeader className="flex flex-row items-start justify-between pb-2 shrink-0">
<div>
<CardTitle className="text-2xl font-serif font-normal tracking-tight">
@@ -441,7 +441,7 @@ function AgentSettingsModal({
variant="outline"
onClick={() => void handleSaveName()}
disabled={savingName || !name.trim() || name.trim() === agent.name}
className="h-[44px] text-[13px] font-medium rounded-xl px-4 border-black/10 dark:border-white/10 bg-[#eeece3] dark:bg-[#151514] hover:bg-black/5 dark:hover:bg-white/5 shadow-none text-foreground/80 hover:text-foreground"
className="h-[44px] text-[13px] font-medium rounded-xl px-4 border-black/10 dark:border-white/10 bg-[#eeece3] dark:bg-muted hover:bg-black/5 dark:hover:bg-white/5 shadow-none text-foreground/80 hover:text-foreground"
>
{savingName ? (
<RefreshCw className="h-4 w-4 animate-spin" />

2
src/pages/Channels/index.tsx
View File

@@ -103,7 +103,7 @@ export function Channels() {
<h1 className="text-5xl md:text-6xl font-serif text-foreground mb-3 font-normal tracking-tight" style={{ fontFamily: 'Georgia, Cambria, "Times New Roman", Times, serif' }}>
{t('title')}
</h1>
<p className="text-[17px] text-foreground/80 font-medium">
<p className="text-[17px] text-foreground/70 font-medium">
{t('subtitle')}
</p>
</div>

4
src/pages/Chat/ChatInput.tsx
View File

@@ -408,7 +408,7 @@ export function ChatInput({ onSend, onStop, disabled = false, sending = false, i
)}
{/* Input Row */}
<div className={`relative bg-white dark:bg-[#1a1a19] rounded-[28px] shadow-sm border p-1.5 transition-all ${dragOver ? 'border-primary ring-1 ring-primary' : 'border-black/10 dark:border-white/10'}`}>
<div className={`relative bg-white dark:bg-card rounded-[28px] shadow-sm border p-1.5 transition-all ${dragOver ? 'border-primary ring-1 ring-primary' : 'border-black/10 dark:border-white/10'}`}>
{selectedTarget && (
<div className="px-2.5 pt-2 pb-1">
<button
@@ -452,7 +452,7 @@ export function ChatInput({ onSend, onStop, disabled = false, sending = false, i
<AtSign className="h-4 w-4" />
</Button>
{pickerOpen && (
<div className="absolute left-0 bottom-full z-20 mb-2 w-72 overflow-hidden rounded-2xl border border-black/10 bg-white p-1.5 shadow-xl dark:border-white/10 dark:bg-[#1a1a19]">
<div className="absolute left-0 bottom-full z-20 mb-2 w-72 overflow-hidden rounded-2xl border border-black/10 bg-white p-1.5 shadow-xl dark:border-white/10 dark:bg-card">
<div className="px-3 py-2 text-[11px] font-medium text-muted-foreground/80">
{t('composer.agentPickerTitle', { currentAgent: currentAgentName })}
</div>

18
src/pages/Cron/index.tsx
View File

@@ -234,7 +234,7 @@ function TaskDialog({ job, onClose, onSave }: TaskDialogProps) {
return (
<div className="fixed inset-0 z-50 bg-black/50 flex items-center justify-center p-4" onClick={onClose}>
<Card className="w-full max-w-lg max-h-[90vh] flex flex-col rounded-3xl border-0 shadow-2xl bg-[#f3f1e9] dark:bg-[#1a1a19] overflow-hidden" onClick={(e) => e.stopPropagation()}>
<Card className="w-full max-w-lg max-h-[90vh] flex flex-col rounded-3xl border-0 shadow-2xl bg-[#f3f1e9] dark:bg-card overflow-hidden" onClick={(e) => e.stopPropagation()}>
<CardHeader className="flex flex-row items-start justify-between pb-2 shrink-0">
<div>
<CardTitle className="text-2xl font-serif font-normal">{job ? t('dialog.editTitle') : t('dialog.createTitle')}</CardTitle>
@@ -253,7 +253,7 @@ function TaskDialog({ job, onClose, onSave }: TaskDialogProps) {
placeholder={t('dialog.taskNamePlaceholder')}
value={name}
onChange={(e) => setName(e.target.value)}
className="h-[44px] rounded-xl font-mono text-[13px] bg-[#eeece3] dark:bg-[#151514] 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"
className="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-primary/50 focus-visible:border-primary shadow-sm transition-all text-foreground placeholder:text-foreground/40"
/>
</div>
@@ -266,7 +266,7 @@ function TaskDialog({ job, onClose, onSave }: TaskDialogProps) {
value={message}
onChange={(e) => setMessage(e.target.value)}
rows={3}
className="rounded-xl font-mono text-[13px] bg-[#eeece3] dark:bg-[#151514] 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 resize-none"
className="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-primary/50 focus-visible:border-primary shadow-sm transition-all text-foreground placeholder:text-foreground/40 resize-none"
/>
</div>
@@ -285,8 +285,8 @@ function TaskDialog({ job, onClose, onSave }: TaskDialogProps) {
className={cn(
"justify-start h-10 rounded-xl font-medium text-[13px] transition-all",
schedule === preset.value
? "bg-[#0a84ff] hover:bg-[#007aff] text-white shadow-sm border-transparent"
: "bg-[#eeece3] dark:bg-[#151514] border-black/10 dark:border-white/10 hover:bg-black/5 dark:hover:bg-white/5 text-foreground/80 hover:text-foreground"
? "bg-primary hover:bg-primary/90 text-primary-foreground shadow-sm border-transparent"
: "bg-[#eeece3] dark:bg-muted border-black/10 dark:border-white/10 hover:bg-black/5 dark:hover:bg-white/5 text-foreground/80 hover:text-foreground"
)}
>
<Timer className="h-4 w-4 mr-2 opacity-70" />
@@ -299,7 +299,7 @@ function TaskDialog({ job, onClose, onSave }: TaskDialogProps) {
placeholder={t('dialog.cronPlaceholder')}
value={customSchedule}
onChange={(e) => setCustomSchedule(e.target.value)}
className="h-[44px] rounded-xl font-mono text-[13px] bg-[#eeece3] dark:bg-[#151514] 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"
className="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-primary/50 focus-visible:border-primary shadow-sm transition-all text-foreground placeholder:text-foreground/40"
/>
)}
<div className="flex items-center justify-between mt-2">
@@ -319,7 +319,7 @@ function TaskDialog({ job, onClose, onSave }: TaskDialogProps) {
</div>
{/* Enabled */}
<div className="flex items-center justify-between bg-[#eeece3] dark:bg-[#151514] p-4 rounded-2xl shadow-sm border border-black/5 dark:border-white/5">
<div className="flex items-center justify-between bg-[#eeece3] dark:bg-muted p-4 rounded-2xl shadow-sm border border-black/5 dark:border-white/5">
<div>
<Label className="text-[14px] text-foreground/80 font-bold">{t('dialog.enableImmediately')}</Label>
<p className="text-[13px] text-muted-foreground mt-0.5">
@@ -334,7 +334,7 @@ function TaskDialog({ job, onClose, onSave }: TaskDialogProps) {
<Button variant="outline" onClick={onClose} className="rounded-full px-6 h-[42px] text-[13px] font-semibold border-black/20 dark:border-white/20 bg-transparent hover:bg-black/5 dark:hover:bg-white/5 text-foreground/80 hover:text-foreground shadow-sm">
{t('common:actions.cancel', 'Cancel')}
</Button>
<Button onClick={handleSubmit} disabled={saving} className="rounded-full px-6 h-[42px] text-[13px] font-semibold bg-[#0a84ff] hover:bg-[#007aff] text-white shadow-sm border border-transparent transition-all">
<Button onClick={handleSubmit} disabled={saving} className="rounded-full px-6 h-[42px] text-[13px] font-semibold shadow-sm border border-transparent transition-all">
{saving ? (
<>
<Loader2 className="h-4 w-4 mr-2 animate-spin" />
@@ -557,7 +557,7 @@ export function Cron() {
<h1 className="text-5xl md:text-6xl font-serif text-foreground mb-3 font-normal tracking-tight" style={{ fontFamily: 'Georgia, Cambria, "Times New Roman", Times, serif' }}>
{t('title')}
</h1>
<p className="text-[17px] text-foreground/80 font-medium">
<p className="text-[17px] text-foreground/70 font-medium">
{t('subtitle')}
</p>
</div>

2
src/pages/Models/index.tsx
View File

@@ -164,7 +164,7 @@ export function Models() {
<h1 className="text-5xl md:text-6xl font-serif text-foreground mb-3 font-normal tracking-tight" style={{ fontFamily: 'Georgia, Cambria, "Times New Roman", Times, serif' }}>
{t('dashboard:models.title')}
</h1>
<p className="text-[17px] text-foreground/80 font-medium">
<p className="text-[17px] text-foreground/70 font-medium">
{t('dashboard:models.subtitle')}
</p>
</div>

20
src/pages/Settings/index.tsx
View File

@@ -368,7 +368,7 @@ export function Settings() {
return (
<div className="flex flex-col -m-6 dark:bg-background h-[calc(100vh-2.5rem)] overflow-hidden">
<div className="w-full max-w-4xl mx-auto flex flex-col h-full p-10 pt-16">
<div className="w-full max-w-5xl mx-auto flex flex-col h-full p-10 pt-16">
{/* Header */}
<div className="flex flex-col md:flex-row md:items-start justify-between mb-12 shrink-0 gap-4">
@@ -376,7 +376,7 @@ export function Settings() {
<h1 className="text-5xl md:text-6xl font-serif text-foreground mb-3 font-normal tracking-tight" style={{ fontFamily: 'Georgia, Cambria, "Times New Roman", Times, serif' }}>
{t('title')}
</h1>
<p className="text-[17px] text-foreground/80 font-medium">
<p className="text-[17px] text-foreground/70 font-medium">
{t('subtitle')}
</p>
</div>
@@ -491,7 +491,7 @@ export function Settings() {
</Button>
</div>
</div>
<pre className="text-[12px] text-muted-foreground bg-white dark:bg-[#1a1a19] p-4 rounded-xl max-h-60 overflow-auto whitespace-pre-wrap font-mono border border-black/5 dark:border-white/5 shadow-inner">
<pre className="text-[12px] text-muted-foreground bg-white dark:bg-card p-4 rounded-xl max-h-60 overflow-auto whitespace-pre-wrap font-mono border border-black/5 dark:border-white/5 shadow-inner">
{logContent || t('chat:noLogs')}
</pre>
</div>
@@ -760,25 +760,25 @@ export function Settings() {
{showTelemetryViewer && (
<div className="space-y-4 rounded-2xl border border-black/10 dark:border-white/10 p-5 bg-black/5 dark:bg-white/5">
<div className="flex flex-wrap items-center gap-2">
<Badge variant="secondary" className="rounded-full px-3 py-1 bg-white dark:bg-[#1a1a19] border border-black/5 dark:border-white/5">{t('developer.telemetryTotal')}: {telemetryStats.total}</Badge>
<Badge variant={telemetryStats.errorCount > 0 ? 'destructive' : 'secondary'} className={cn("rounded-full px-3 py-1", telemetryStats.errorCount === 0 && "bg-white dark:bg-[#1a1a19] border border-black/5 dark:border-white/5")}>
<Badge variant="secondary" className="rounded-full px-3 py-1 bg-white dark:bg-card border border-black/5 dark:border-white/5">{t('developer.telemetryTotal')}: {telemetryStats.total}</Badge>
<Badge variant={telemetryStats.errorCount > 0 ? 'destructive' : 'secondary'} className={cn("rounded-full px-3 py-1", telemetryStats.errorCount === 0 && "bg-white dark:bg-card border border-black/5 dark:border-white/5")}>
{t('developer.telemetryErrors')}: {telemetryStats.errorCount}
</Badge>
<Badge variant={telemetryStats.slowCount > 0 ? 'secondary' : 'outline'} className={cn("rounded-full px-3 py-1", telemetryStats.slowCount === 0 && "bg-white dark:bg-[#1a1a19] border border-black/5 dark:border-white/5")}>
<Badge variant={telemetryStats.slowCount > 0 ? 'secondary' : 'outline'} className={cn("rounded-full px-3 py-1", telemetryStats.slowCount === 0 && "bg-white dark:bg-card border border-black/5 dark:border-white/5")}>
{t('developer.telemetrySlow')}: {telemetryStats.slowCount}
</Badge>
<div className="ml-auto flex gap-2">
<Button type="button" variant="outline" size="sm" onClick={handleCopyTelemetry} className="rounded-full h-8 px-4 bg-white dark:bg-[#1a1a19] border-black/5 dark:border-white/5 hover:bg-black/5 dark:hover:bg-white/10">
<Button type="button" variant="outline" size="sm" onClick={handleCopyTelemetry} className="rounded-full h-8 px-4 bg-white dark:bg-card border-black/5 dark:border-white/5 hover:bg-black/5 dark:hover:bg-white/10">
<Copy className="h-3.5 w-3.5 mr-1.5" />
{t('common:actions.copy')}
</Button>
<Button type="button" variant="outline" size="sm" onClick={handleClearTelemetry} className="rounded-full h-8 px-4 bg-white dark:bg-[#1a1a19] border-black/5 dark:border-white/5 hover:bg-black/5 dark:hover:bg-white/10">
<Button type="button" variant="outline" size="sm" onClick={handleClearTelemetry} className="rounded-full h-8 px-4 bg-white dark:bg-card border-black/5 dark:border-white/5 hover:bg-black/5 dark:hover:bg-white/10">
{t('common:actions.clear')}
</Button>
</div>
</div>
<div className="max-h-80 overflow-auto rounded-xl border border-black/10 dark:border-white/10 bg-white dark:bg-[#1a1a19] shadow-inner">
<div className="max-h-80 overflow-auto rounded-xl border border-black/10 dark:border-white/10 bg-white dark:bg-card shadow-inner">
{telemetryByEvent.length > 0 && (
<div className="border-b border-black/5 dark:border-white/5 bg-black/5 dark:bg-white/5 p-3">
<p className="mb-3 text-[12px] font-semibold text-muted-foreground">
@@ -788,7 +788,7 @@ export function Settings() {
{telemetryByEvent.map((item) => (
<div
key={item.event}
className="grid grid-cols-[minmax(0,1.6fr)_0.7fr_0.9fr_0.8fr_1fr] gap-2 rounded-lg border border-black/5 dark:border-white/5 bg-white dark:bg-[#1a1a19] px-3 py-2"
className="grid grid-cols-[minmax(0,1.6fr)_0.7fr_0.9fr_0.8fr_1fr] gap-2 rounded-lg border border-black/5 dark:border-white/5 bg-white dark:bg-card px-3 py-2"
>
<span className="truncate font-medium" title={item.event}>{item.event}</span>
<span className="text-muted-foreground">n={item.count}</span>

16
src/pages/Skills/index.tsx
View File

@@ -158,16 +158,16 @@ function SkillDetailDialog({ skill, isOpen, onClose, onToggle, onUninstall }: Sk
return (
<Sheet open={isOpen} onOpenChange={(open) => !open && onClose()}>
<SheetContent
className="w-full sm:max-w-[450px] p-0 flex flex-col border-l border-black/10 dark:border-white/10 bg-[#f3f1e9] dark:bg-[#1a1a19] shadow-[0_0_40px_rgba(0,0,0,0.2)]"
className="w-full sm:max-w-[450px] p-0 flex flex-col border-l border-black/10 dark:border-white/10 bg-[#f3f1e9] dark:bg-card shadow-[0_0_40px_rgba(0,0,0,0.2)]"
side="right"
>
{/* Scrollable Content */}
<div className="flex-1 overflow-y-auto px-8 py-10">
<div className="flex flex-col items-center mb-8">
<div className="w-16 h-16 flex items-center justify-center rounded-full bg-white dark:bg-[#2c2c2a] border border-black/5 dark:border-white/5 shrink-0 mb-4 relative shadow-sm">
<div className="w-16 h-16 flex items-center justify-center rounded-full bg-white dark:bg-accent border border-black/5 dark:border-white/5 shrink-0 mb-4 relative shadow-sm">
<span className="text-3xl">{skill.icon || '🔧'}</span>
{skill.isCore && (
<div className="absolute -bottom-1 -right-1 bg-[#f3f1e9] dark:bg-[#1a1a19] rounded-full p-1 shadow-sm border border-black/5 dark:border-white/5">
<div className="absolute -bottom-1 -right-1 bg-[#f3f1e9] dark:bg-card rounded-full p-1 shadow-sm border border-black/5 dark:border-white/5">
<Lock className="h-3 w-3 text-muted-foreground shrink-0" />
</div>
)}
@@ -204,7 +204,7 @@ function SkillDetailDialog({ skill, isOpen, onClose, onToggle, onUninstall }: Sk
value={apiKey}
onChange={(e) => setApiKey(e.target.value)}
type="password"
className="h-[44px] font-mono text-[13px] bg-[#eeece3] dark:bg-[#151514] border-black/10 dark:border-white/10 rounded-xl 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"
className="h-[44px] font-mono text-[13px] bg-[#eeece3] dark:bg-muted border-black/10 dark:border-white/10 rounded-xl 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"
/>
<p className="text-[12px] text-foreground/50 mt-2 font-medium">
{t('detail.apiKeyDesc', 'The primary API key for this skill. Leave blank if not required or configured elsewhere.')}
@@ -239,7 +239,7 @@ function SkillDetailDialog({ skill, isOpen, onClose, onToggle, onUninstall }: Sk
<div className="space-y-2">
{envVars.length === 0 && (
<div className="text-[13px] text-foreground/50 font-medium italic flex items-center bg-[#eeece3] dark:bg-[#151514] border border-black/5 dark:border-white/5 rounded-xl px-4 py-3 shadow-sm">
<div className="text-[13px] text-foreground/50 font-medium italic flex items-center bg-[#eeece3] dark:bg-muted border border-black/5 dark:border-white/5 rounded-xl px-4 py-3 shadow-sm">
{t('detail.noEnvVars', 'No environment variables configured.')}
</div>
)}
@@ -249,13 +249,13 @@ function SkillDetailDialog({ skill, isOpen, onClose, onToggle, onUninstall }: Sk
<Input
value={env.key}
onChange={(e) => handleUpdateEnv(index, 'key', e.target.value)}
className="flex-1 h-[40px] font-mono text-[13px] bg-[#eeece3] dark:bg-[#151514] border-black/10 dark:border-white/10 rounded-xl focus-visible:ring-2 focus-visible:ring-blue-500/50 shadow-sm text-foreground"
className="flex-1 h-[40px] font-mono text-[13px] bg-[#eeece3] dark:bg-muted border-black/10 dark:border-white/10 rounded-xl focus-visible:ring-2 focus-visible:ring-blue-500/50 shadow-sm text-foreground"
placeholder={t('detail.keyPlaceholder', 'Key')}
/>
<Input
value={env.value}
onChange={(e) => handleUpdateEnv(index, 'value', e.target.value)}
className="flex-1 h-[40px] font-mono text-[13px] bg-[#eeece3] dark:bg-[#151514] border-black/10 dark:border-white/10 rounded-xl focus-visible:ring-2 focus-visible:ring-blue-500/50 shadow-sm text-foreground"
className="flex-1 h-[40px] font-mono text-[13px] bg-[#eeece3] dark:bg-muted border-black/10 dark:border-white/10 rounded-xl focus-visible:ring-2 focus-visible:ring-blue-500/50 shadow-sm text-foreground"
placeholder={t('detail.valuePlaceholder', 'Value')}
/>
<Button
@@ -556,7 +556,7 @@ export function Skills() {
<h1 className="text-5xl md:text-6xl font-serif text-foreground mb-3 font-normal tracking-tight" style={{ fontFamily: 'Georgia, Cambria, "Times New Roman", Times, serif' }}>
{t('title')}
</h1>
<p className="text-[17px] text-foreground/80 font-medium">
<p className="text-[17px] text-foreground/70 font-medium">
{t('subtitle')}
</p>
</div>