feat: add light/dark display switch mode
This commit is contained in:
@@ -66,9 +66,9 @@ export function Settings() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex-1 flex flex-col h-full bg-zinc-50/30 overflow-hidden">
|
||||
<div className="h-14 px-6 flex items-center justify-between border-b border-zinc-100 bg-white">
|
||||
<div className="flex items-center gap-2 text-zinc-700 font-medium">
|
||||
<div className="flex-1 flex flex-col h-full bg-muted/50/30 overflow-hidden">
|
||||
<div className="h-14 px-6 flex items-center justify-between border-b border-border bg-background">
|
||||
<div className="flex items-center gap-2 text-foreground/80 font-medium">
|
||||
<Save className="h-5 w-5 text-indigo-500" />
|
||||
个人设置
|
||||
</div>
|
||||
@@ -79,7 +79,7 @@ export function Settings() {
|
||||
{error && <div className="text-sm text-red-600 bg-red-50 border border-red-100 rounded-md p-3">{error}</div>}
|
||||
{success && <div className="text-sm text-emerald-600 bg-emerald-50 border border-emerald-100 rounded-md p-3">{success}</div>}
|
||||
|
||||
<Card className="border-zinc-200 shadow-sm">
|
||||
<Card className="border-border shadow-sm">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl">{t('accountInfo')}</CardTitle>
|
||||
<CardDescription>{t('modifyLoginEmailAndPassword')}</CardDescription>
|
||||
@@ -91,9 +91,9 @@ export function Settings() {
|
||||
id="username"
|
||||
value={user?.username || ''}
|
||||
disabled
|
||||
className="bg-zinc-50 text-zinc-500"
|
||||
className="bg-muted/50 text-muted-foreground"
|
||||
/>
|
||||
<p className="text-xs text-zinc-400">{t('usernameCannotBeModified')}</p>
|
||||
<p className="text-xs text-muted-foreground">{t('usernameCannotBeModified')}</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
@@ -106,7 +106,7 @@ export function Settings() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 pt-4 border-t border-zinc-100">
|
||||
<div className="space-y-2 pt-4 border-t border-border">
|
||||
<Label htmlFor="new-password">{t('newPassword')}</Label>
|
||||
<Input
|
||||
id="new-password"
|
||||
@@ -135,8 +135,8 @@ export function Settings() {
|
||||
{isPasswordMismatch && <p className="text-sm text-red-600">{t('passwordsDoNotMatch')}</p>}
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter className="bg-zinc-50/50 border-t border-zinc-100 pt-6">
|
||||
<Button onClick={handleSave} className="ml-auto bg-indigo-600 hover:bg-indigo-700 text-white" disabled={isSaving || isPasswordMismatch}>
|
||||
<CardFooter className="bg-muted/50/50 border-t border-border pt-6">
|
||||
<Button onClick={handleSave} className="ml-auto bg-indigo-600 hover:bg-indigo-700 text-primary-foreground" disabled={isSaving || isPasswordMismatch}>
|
||||
{isSaving ? <Loader2 className="h-4 w-4 mr-2 animate-spin" /> : <Save className="h-4 w-4 mr-2" />}
|
||||
保存设置
|
||||
</Button>
|
||||
|
||||
Reference in New Issue
Block a user