helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-07 17:27:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 7

fix(web): move support & feedback button to user modal (#18651)

Browse source 
* move support & feedback button to user modal

* cleanup styling of link

* update sign out button to use immich/ui

* revise sign out button to match design from @alextran1502

* more margin on support/feedback
This commit is contained in:
Brandon Wees 2025-05-27 09:26:40 -05:00 • committed by GitHub
parent 099a1e4210
commit a9851df8d1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 29 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

34
web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte
View file

@ -6,9 +6,13 @@
import { AppRoute } from '$lib/constants';
import { modalManager } from '$lib/managers/modal-manager.svelte';
import AvatarEditModal from '$lib/modals/AvatarEditModal.svelte';
import HelpAndFeedbackModal from '$lib/modals/HelpAndFeedbackModal.svelte';
import { user } from '$lib/stores/user.store';
import { userInteraction } from '$lib/stores/user.svelte';
import { getAboutInfo, type ServerAboutResponseDto } from '@immich/sdk';
import { Button } from '@immich/ui';
import { mdiCog, mdiLogout, mdiPencil, mdiWrench } from '@mdi/js';
import { onMount } from 'svelte';
import { t } from 'svelte-i18n';
import { fade } from 'svelte/transition';
import UserAvatar from '../user-avatar.svelte';
@ -19,6 +23,12 @@
}
let { onLogout, onClose = () => {} }: Props = $props();
let info: ServerAboutResponseDto | undefined = $state();
onMount(async () => {
info = userInteraction.aboutInfo ?? (await getAboutInfo());
});
</script>
<div
@ -29,7 +39,7 @@
use:focusTrap
>
<div
class="mx-4 mt-4 flex flex-col items-center justify-center gap-4 rounded-3xl bg-white p-4 dark:bg-immich-dark-primary/10"
class="mx-4 mt-4 flex flex-col items-center justify-center gap-4 rounded-t-3xl bg-white p-4 dark:bg-immich-dark-primary/10"
>
<div class="relative">
<UserAvatar user={$user} size="xl" />
@ -91,13 +101,25 @@
</div>
<div class="mb-4 flex flex-col">
<Button
class="m-1 mx-4 rounded-none rounded-b-3xl bg-white p-3 dark:bg-immich-dark-primary/10"
onclick={onLogout}
leadingIcon={mdiLogout}
variant="ghost"
color="secondary">{$t('sign_out')}</Button
>
<button
type="button"
class="flex w-full place-content-center place-items-center gap-2 py-3 font-medium text-gray-500 hover:bg-immich-primary/10 dark:text-gray-300"
onclick={onLogout}
>
<Icon path={mdiLogout} size={24} />
{$t('sign_out')}</button
class="text-center mt-4 underline text-xs text-immich-primary dark:text-immich-dark-primary"
onclick={async () => {
onClose();
if (info) {
await modalManager.show(HelpAndFeedbackModal, { info });
}
}}
>
{$t('support_and_feedback')}
</button>
</div>
</div>