jimmy/nas-tools
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Fix Settings page dark mode styling

Browse Source
This commit is contained in:
Gan, Jimmy
2026-02-22 15:03:36 +08:00
parent 5d77ca5a3d
commit eadd44eee5
1 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/frontend/src/routes/Settings.svelte
+12 -12
View File
@@ -135,12 +135,12 @@
<div class="space-y-6">
<div>
<h1 class="text-2xl font-bold text-surface-900 tracking-tight">Settings</h1>
<h1 class="text-2xl font-bold text-surface-900 dark:text-white tracking-tight">Settings</h1>
<p class="text-sm text-surface-400 mt-1">Account and security settings</p>
</div>
<div class="bg-white rounded-xl border border-surface-200 p-6 shadow-sm max-w-md">
<h3 class="text-sm font-semibold text-surface-700 mb-4">Change Password</h3>
<div class="bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-6 shadow-sm max-w-md">
<h3 class="text-sm font-semibold text-surface-700 dark:text-surface-200 mb-4">Change Password</h3>
{#if message}
<div class="text-sm text-emerald-600 bg-emerald-50 px-3 py-2 rounded-lg mb-4">{message}</div>
@@ -152,15 +152,15 @@
<form onsubmit={(e) => { e.preventDefault(); changePassword(); }} class="space-y-3">
<div>
<label class="block text-xs font-medium text-surface-500 mb-1">Current Password</label>
<input type="password" bind:value={currentPassword} required class="w-full px-3 py-2 text-sm border border-surface-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500" />
<input type="password" bind:value={currentPassword} required class="w-full px-3 py-2 text-sm border border-surface-200 dark:border-surface-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-surface-700 dark:text-white" />
</div>
<div>
<label class="block text-xs font-medium text-surface-500 mb-1">New Password</label>
<input type="password" bind:value={newPassword} required class="w-full px-3 py-2 text-sm border border-surface-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500" />
<input type="password" bind:value={newPassword} required class="w-full px-3 py-2 text-sm border border-surface-200 dark:border-surface-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-surface-700 dark:text-white" />
</div>
<div>
<label class="block text-xs font-medium text-surface-500 mb-1">Confirm New Password</label>
<input type="password" bind:value={confirmPassword} required class="w-full px-3 py-2 text-sm border border-surface-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500" />
<input type="password" bind:value={confirmPassword} required class="w-full px-3 py-2 text-sm border border-surface-200 dark:border-surface-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-surface-700 dark:text-white" />
</div>
<button type="submit" disabled={saving} class="w-full px-4 py-2 text-sm font-medium text-white bg-primary-600 hover:bg-primary-700 rounded-lg transition-colors disabled:opacity-50">
{saving ? "Saving..." : "Change Password"}
@@ -168,8 +168,8 @@
</form>
</div>
<div class="bg-white rounded-xl border border-surface-200 p-6 shadow-sm max-w-md">
<h3 class="text-sm font-semibold text-surface-700 mb-4">Passkeys</h3>
<div class="bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-6 shadow-sm max-w-md">
<h3 class="text-sm font-semibold text-surface-700 dark:text-surface-200 mb-4">Passkeys</h3>
{#if passkeyMsg}
<div class="text-sm text-emerald-600 bg-emerald-50 px-3 py-2 rounded-lg mb-4">{passkeyMsg}</div>
@@ -181,9 +181,9 @@
{#if passkeys.length > 0}
<div class="space-y-2 mb-4">
{#each passkeys as pk}
<div class="flex items-center justify-between px-3 py-2 bg-surface-50 rounded-lg">
<div class="flex items-center justify-between px-3 py-2 bg-surface-50 dark:bg-surface-700 rounded-lg">
<div>
<span class="text-sm font-medium text-surface-700">{pk.name}</span>
<span class="text-sm font-medium text-surface-700 dark:text-surface-200">{pk.name}</span>
{#if pk.created_at}
<span class="text-xs text-surface-400 ml-2">{new Date(pk.created_at).toLocaleDateString()}</span>
{/if}
@@ -208,9 +208,9 @@
</div>
</div>
<div class="bg-white rounded-xl border border-surface-200 p-6 shadow-sm">
<div class="bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-6 shadow-sm">
<div class="flex items-center justify-between mb-4">
<h3 class="text-sm font-semibold text-surface-700">Audit Log</h3>
<h3 class="text-sm font-semibold text-surface-700 dark:text-surface-200">Audit Log</h3>
<button onclick={loadAuditLog} disabled={auditLoading} class="px-3 py-1.5 text-xs font-medium text-primary-600 bg-primary-50 hover:bg-primary-100 rounded-lg transition-colors disabled:opacity-50">
{auditLoading ? "Loading..." : auditEntries.length ? "Refresh" : "Load"}
</button>