alexei.dolgolyov/haos-hacs-immich-album-watcher
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix modal rendering + logout SVG icon
Some checks failed
Validate / Hassfest (push) Has been cancelled
Details

Browse Source 
- Modal: use inline styles instead of Tailwind classes for position:fixed
  overlay (Tailwind v4 classes weren't applying correctly inside flex)
- Move password modal outside the flex container to top level
- Replace logout text button with SVG logout icon (16x16, Lucide style)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Admin
2026-03-19 17:34:36 +03:00
parent 7b7ef5fec1
commit ca6a9c8830
2 changed files with 39 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
frontend/src/routes/+layout.svelte
View File

@@ -170,8 +170,9 @@
<p class="text-xs text-[var(--color-muted-foreground)]">{auth.user.role}</p>
</div>
<button onclick={logout}
class="text-xs text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)] transition-colors">
{tt('nav.logout')}
class="text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)] transition-colors"
title={tt('nav.logout')}>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
</button>
</div>
<button onclick={() => showPasswordForm = true}
@@ -191,26 +192,26 @@
</div>
</main>
</div>
<!-- Password change modal -->
<Modal open={showPasswordForm} title={tt('common.changePassword')} onclose={() => { showPasswordForm = false; pwdMsg = ''; }}>
<form onsubmit={changePassword} class="space-y-3">
<div>
<label for="pwd-current" class="block text-sm font-medium mb-1">{tt('common.currentPassword')}</label>
<input id="pwd-current" type="password" bind:value={pwdCurrent} required
class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
</div>
<div>
<label for="pwd-new" class="block text-sm font-medium mb-1">{tt('common.newPassword')}</label>
<input id="pwd-new" type="password" bind:value={pwdNew} required
class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
</div>
{#if pwdMsg}
<p class="text-sm {pwdMsg.includes(tt('common.passwordChanged')) ? 'text-[var(--color-success-fg)]' : 'text-[var(--color-error-fg)]'}">{pwdMsg}</p>
{/if}
<button type="submit" class="w-full py-2 bg-[var(--color-primary)] text-[var(--color-primary-foreground)] rounded-md text-sm font-medium hover:opacity-90">
{tt('common.save')}
</button>
</form>
</Modal>
{/if}
<!-- Password change modal (outside flex container) -->
<Modal open={showPasswordForm} title={tt('common.changePassword')} onclose={() => { showPasswordForm = false; pwdMsg = ''; }}>
<form onsubmit={changePassword} class="space-y-3">
<div>
<label for="pwd-current" class="block text-sm font-medium mb-1">{tt('common.currentPassword')}</label>
<input id="pwd-current" type="password" bind:value={pwdCurrent} required
class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
</div>
<div>
<label for="pwd-new" class="block text-sm font-medium mb-1">{tt('common.newPassword')}</label>
<input id="pwd-new" type="password" bind:value={pwdNew} required
class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
</div>
{#if pwdMsg}
<p class="text-sm" style="color: var(--color-success-fg);">{pwdMsg}</p>
{/if}
<button type="submit" class="w-full py-2 bg-[var(--color-primary)] text-[var(--color-primary-foreground)] rounded-md text-sm font-medium hover:opacity-90">
{tt('common.save')}
</button>
</form>
</Modal>