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

feat(web): add some material design 3 styling to forms and ui elements (#1798)

Browse source 
* stlye: forms

* style: navigation bar

* style: user profile popup

* style: context menu

* fix: prettier

* style: manage account dark theme color

* style: user profile image border; fix: profile panel z-index

* style: border for profile image on hover and scrolling in administration page

* style: font size

* style: gap between day in a row
This commit is contained in:
Alex 2023-02-19 23:29:06 -06:00 • committed by GitHub
parent 83a2669ff5
commit 2cf42e867c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 56 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -5,6 +5,7 @@
import { page } from '$app/stores';
import { fade } from 'svelte/transition';
import Cog from 'svelte-material-icons/Cog.svelte';
import Logout from 'svelte-material-icons/Logout.svelte';
import { goto } from '$app/navigation';
export let user: UserResponseDto;
@ -27,59 +28,58 @@
in:fade={{ duration: 100 }}
out:fade={{ duration: 100 }}
id="account-info-panel"
class="absolute right-[25px] top-[75px] bg-immich-bg dark:bg-immich-dark-gray dark:border dark:border-immich-dark-gray shadow-lg rounded-2xl w-[360px] text-center z-[100]"
class="absolute right-[25px] top-[75px] bg-gray-200 dark:bg-immich-dark-gray dark:border dark:border-immich-dark-gray shadow-lg rounded-3xl w-[360px] text-center z-[100]"
use:clickOutside
on:outclick={() => dispatch('close')}
>
<div class="flex place-items-center place-content-center mt-6">
<button
class="flex place-items-center place-content-center rounded-full bg-immich-primary dark:bg-immich-dark-primary dark:immich-dark-primary/80 h-20 w-20 text-gray-100 hover:bg-immich-primary dark:text-immich-dark-bg"
>
{#await getUserProfileImage() then hasProfileImage}
{#if hasProfileImage}
<div class="bg-white dark:bg-immich-dark-primary/10 rounded-3xl mx-4 mt-4 pb-4">
<div class="flex place-items-center place-content-center">
<button
class="flex place-items-center place-content-center rounded-full bg-immich-primary dark:bg-immich-dark-primary dark:immich-dark-primary/80 h-20 w-20 text-gray-100 hover:bg-immich-primary dark:text-immich-dark-bg mt-4"
>
{#await getUserProfileImage() then}
<img
transition:fade={{ duration: 100 }}
src={`${$page.url.origin}/api/user/profile-image/${user.id}`}
alt="profile-img"
class="inline rounded-full h-20 w-20 object-cover shadow-md"
class="inline rounded-full h-20 w-20 object-cover shadow-md border-2 border-immich-primary dark:border-immich-dark-primary"
draggable="false"
/>
{:else}
{:catch}
<div transition:fade={{ duration: 200 }} class="text-lg">
{getFirstLetter(user.firstName)}{getFirstLetter(user.lastName)}
</div>
{/if}
{/await}
</button>
{/await}
</button>
</div>
<p class="text-lg text-immich-primary dark:text-immich-dark-primary font-medium mt-4">
{user.firstName}
{user.lastName}
</p>
<p class="text-sm text-gray-500 dark:text-immich-dark-fg">{user.email}</p>
<div class=" mt-4 flex place-items-center place-content-center">
<button
class="flex border rounded-3xl px-6 py-2 hover:bg-immich-primary/10 dark:border-immich-dark-gray dark:bg-gray-500 dark:hover:bg-immich-dark-primary/50 dark:text-white font-medium place-items-center place-content-center gap-2"
on:click={() => {
goto('/user-settings');
dispatch('close');
}}
>
<span><Cog size="18" /></span>Account Settings</button
>
</div>
</div>
<p class="text-lg text-immich-primary dark:text-immich-dark-primary font-medium mt-4">
{user.firstName}
{user.lastName}
</p>
<p class="text-sm text-gray-500 dark:text-immich-dark-fg">{user.email}</p>
<div class="mt-4 flex place-items-center place-content-center">
<div class="mb-4 flex flex-col">
<button
class="flex border rounded-3xl px-6 py-2 hover:bg-gray-50 dark:border-immich-dark-gray dark:bg-gray-300 dark:hover:bg-immich-dark-primary font-medium place-items-center place-content-center gap-2 text-xs"
on:click={() => {
goto('/user-settings');
dispatch('close');
}}
class="py-3 w-full font-medium flex place-items-center gap-2 hover:bg-immich-primary/10 text-gray-500 dark:text-gray-300 place-content-center"
on:click={() => dispatch('logout')}
>
<span><Cog size="18" /></span>Manage your Immich account</button
>
</div>
<div class="my-4">
<hr class="dark:border-immich-dark-bg" />
</div>
<div class="mb-6">
<button
class="border rounded-3xl px-6 py-2 hover:bg-gray-50 dark:border-immich-dark-gray dark:bg-gray-300 dark:hover:bg-immich-dark-primary text-xs"
on:click={() => dispatch('logout')}>Sign Out</button
<Logout size={24} />
Sign Out</button
>
</div>
</div>