Skip to content

Commit 2cf42e8

Browse files
alextran1502alextran1502
authored
feat(web): add some material design 3 styling to forms and ui elements (immich-app#1798)
* 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
1 parent 83a2669 commit 2cf42e8

File tree

10 files changed

+54
-58
lines changed

10 files changed

+54
-58
lines changed

‎server/apps/immich/src/controllers/user.controller.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ export class UserController {
112112
}
113113

114114
@Get('/profile-image/:userId')
115-
@Header('Cache-Control', 'max-age=86400')
115+
@Header('Cache-Control', 'max-age=600')
116116
async getProfileImage(@Param('userId') userId: string, @Response({ passthrough: true }) res: Res): Promise<any> {
117117
const readableStream = await this.userService.getUserProfileImage(userId);
118118
res.set({

‎web/src/app.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ input:focus-visible {
5757

5858
@layer utilities {
5959
.immich-form-input {
60-
@apply bg-slate-200 p-2 rounded-lg focus:border-immich-primary text-sm dark:bg-gray-600 dark:text-immich-dark-fg disabled:bg-gray-400 dark:disabled:bg-gray-800 disabled:cursor-not-allowed disabled:text-gray-200;
60+
@apply bg-slate-200 p-4 rounded-xl focus:border-immich-primary text-sm dark:bg-gray-600 dark:text-immich-dark-fg disabled:bg-gray-400 dark:disabled:bg-gray-800 disabled:cursor-not-allowed disabled:text-gray-200;
6161
}
6262

6363
.immich-form-label {
@@ -69,11 +69,11 @@ input:focus-visible {
6969
}
7070

7171
.immich-btn-primary-big {
72-
@apply inline-flex justify-center items-center bg-immich-primary dark:bg-immich-dark-primary dark:text-immich-dark-gray text-white enabled:dark:hover:bg-immich-dark-primary/80 enabled:hover:bg-immich-primary/75 disabled:cursor-not-allowed px-6 py-4 rounded-md shadow-md w-full font-semibold;
72+
@apply inline-flex justify-center items-center bg-immich-primary dark:bg-immich-dark-primary dark:text-immich-dark-gray text-white enabled:dark:hover:bg-immich-dark-primary/80 enabled:hover:bg-immich-primary/75 disabled:cursor-not-allowed px-6 py-4 rounded-3xl shadow-md w-full font-semibold;
7373
}
7474

7575
.immich-btn-secondary-big {
76-
@apply inline-flex justify-center items-center bg-gray-500 dark:bg-gray-200 text-white enabled:hover:bg-gray-500/75 enabled:dark:hover:bg-gray-200/80 dark:text-immich-dark-gray disabled:cursor-not-allowed px-6 py-4 rounded-md shadow-md w-full font-semibold;
76+
@apply inline-flex justify-center items-center bg-gray-500 dark:bg-gray-200 text-white enabled:hover:bg-gray-500/75 enabled:dark:hover:bg-gray-200/80 dark:text-immich-dark-gray disabled:cursor-not-allowed px-6 py-4 rounded-3xl shadow-md w-full font-semibold;
7777
}
7878

7979
.immich-text-button {

‎web/src/lib/components/forms/change-password-form.svelte‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@
4545
</script>
4646

4747
<div
48-
class="border bg-immich-bg dark:bg-immich-dark-gray dark:border-immich-dark-gray p-4 shadow-sm w-[500px] max-w-[95vw] rounded-3xl py-8 dark:text-immich-dark-fg"
48+
class="border bg-gray-50 dark:bg-immich-dark-gray dark:border-immich-dark-gray p-4 shadow-sm w-[500px] max-w-[95vw] rounded-3xl py-8 dark:text-immich-dark-fg"
4949
>
5050
<div class="flex flex-col place-items-center place-content-center gap-4 px-4">
5151
<ImmichLogo class="text-center" height="100" width="100" />
@@ -54,7 +54,7 @@
5454
</h1>
5555

5656
<p
57-
class="text-sm border rounded-md p-4 font-mono text-gray-600 dark:border-immich-dark-bg dark:text-gray-300"
57+
class="text-sm border rounded-3xl p-6 text-gray-600 dark:border-immich-dark-bg dark:text-gray-300 bg-immich-bg dark:bg-gray-900"
5858
>
5959
Hi {user.firstName}
6060
{user.lastName} ({user.email}),
@@ -98,11 +98,7 @@
9898
<p class="text-immich-primary ml-4 text-sm">{success}</p>
9999
{/if}
100100
<div class="flex w-full">
101-
<button
102-
type="submit"
103-
class="m-4 p-2 bg-immich-primary dark:bg-immich-dark-primary hover:bg-immich-primary/75 dark:hover:bg-immich-dark-primary/80 dark:text-immich-dark-gray px-6 py-4 text-white rounded-md shadow-md w-full"
104-
>Change Password</button
105-
>
101+
<button type="submit" class="immich-btn-primary-big m-4">Change Password</button>
106102
</div>
107103
</form>
108104
</div>

‎web/src/lib/components/forms/login-form.svelte‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@
7676
</script>
7777

7878
<div
79-
class="border bg-white dark:bg-immich-dark-gray dark:border-immich-dark-gray p-8 shadow-sm w-full max-w-lg rounded-md"
79+
class="border bg-white dark:bg-immich-dark-gray dark:border-immich-dark-gray p-8 shadow-sm w-full max-w-lg rounded-3xl"
8080
>
8181
<div class="flex flex-col place-items-center place-content-center gap-4 py-4">
8282
<ImmichLogo class="text-center h-24 w-24" />
@@ -85,7 +85,7 @@
8585

8686
{#if loginPageMessage}
8787
<p
88-
class="text-sm border rounded-md m-4 p-4 text-immich-primary dark:text-immich-dark-primary font-medium bg-immich-primary/5 dark:border-immich-dark-bg"
88+
class="text-sm border rounded-xl p-4 text-immich-primary dark:text-immich-dark-primary font-medium bg-immich-primary/5 dark:border-immich-dark-bg w-full border-immich-primary border-2"
8989
>
9090
{@html loginPageMessage}
9191
</p>
@@ -142,7 +142,7 @@
142142
{#if authConfig.enabled}
143143
{#if authConfig.passwordLoginEnabled}
144144
<div class="inline-flex items-center justify-center w-full">
145-
<hr class="w-3/4 h-px my-6 bg-gray-200 border-0 dark:bg-gray-600" />
145+
<hr class="w-3/4 h-px my-4 bg-gray-200 border-0 dark:bg-gray-600" />
146146
<span
147147
class="absolute px-3 font-medium text-gray-900 -translate-x-1/2 left-1/2 dark:text-white bg-white dark:bg-immich-dark-gray"
148148
>

‎web/src/lib/components/photos-page/asset-date-group.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@
110110

111111
<section
112112
id="asset-group-by-date"
113-
class="flex flex-wrap gap-5 mt-5"
113+
class="flex flex-wrap gap-12 mt-5"
114114
bind:clientHeight={actualBucketHeight}
115115
>
116116
{#each assetsGroupByDate as assetsInDateGroup, groupIndex (assetsInDateGroup[0].id)}

‎web/src/lib/components/shared-components/context-menu/context-menu.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
<div
3333
transition:slide={{ duration: 200, easing: quintOut }}
3434
bind:this={menuEl}
35-
class="absolute w-[200px] z-[99999] rounded-lg overflow-hidden"
35+
class="absolute w-[200px] z-[99999] rounded-lg overflow-hidden shadow-lg"
3636
style={`top: ${y}px; left: ${x}px;`}
3737
use:clickOutside
3838
on:outclick={() => dispatch('clickoutside')}

‎web/src/lib/components/shared-components/context-menu/menu-option.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
<button
1717
class:disabled={isDisabled}
1818
on:click={handleClick}
19-
class="bg-white hover:bg-gray-300 dark:text-immich-dark-bg transition-all p-4 w-full text-left text-sm"
19+
class="bg-slate-100 hover:bg-gray-200 dark:text-immich-dark-bg transition-all p-4 w-full text-left text-sm font-medium"
2020
>
2121
{#if text}
2222
{text}

‎web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte‎

Lines changed: 35 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
import { page } from '$app/stores';
66
import { fade } from 'svelte/transition';
77
import Cog from 'svelte-material-icons/Cog.svelte';
8+
import Logout from 'svelte-material-icons/Logout.svelte';
89
import { goto } from '$app/navigation';
910
1011
export let user: UserResponseDto;
@@ -27,59 +28,58 @@
2728
in:fade={{ duration: 100 }}
2829
out:fade={{ duration: 100 }}
2930
id="account-info-panel"
30-
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]"
31+
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]"
3132
use:clickOutside
3233
on:outclick={() => dispatch('close')}
3334
>
34-
<div class="flex place-items-center place-content-center mt-6">
35-
<button
36-
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"
37-
>
38-
{#await getUserProfileImage() then hasProfileImage}
39-
{#if hasProfileImage}
35+
<div class="bg-white dark:bg-immich-dark-primary/10 rounded-3xl mx-4 mt-4 pb-4">
36+
<div class="flex place-items-center place-content-center">
37+
<button
38+
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"
39+
>
40+
{#await getUserProfileImage() then}
4041
<img
4142
transition:fade={{ duration: 100 }}
4243
src={`${$page.url.origin}/api/user/profile-image/${user.id}`}
4344
alt="profile-img"
44-
class="inline rounded-full h-20 w-20 object-cover shadow-md"
45+
class="inline rounded-full h-20 w-20 object-cover shadow-md border-2 border-immich-primary dark:border-immich-dark-primary"
4546
draggable="false"
4647
/>
47-
{:else}
48+
{:catch}
4849
<div transition:fade={{ duration: 200 }} class="text-lg">
4950
{getFirstLetter(user.firstName)}{getFirstLetter(user.lastName)}
5051
</div>
51-
{/if}
52-
{/await}
53-
</button>
54-
</div>
52+
{/await}
53+
</button>
54+
</div>
5555

56-
<p class="text-lg text-immich-primary dark:text-immich-dark-primary font-medium mt-4">
57-
{user.firstName}
58-
{user.lastName}
59-
</p>
56+
<p class="text-lg text-immich-primary dark:text-immich-dark-primary font-medium mt-4">
57+
{user.firstName}
58+
{user.lastName}
59+
</p>
6060

61-
<p class="text-sm text-gray-500 dark:text-immich-dark-fg">{user.email}</p>
61+
<p class="text-sm text-gray-500 dark:text-immich-dark-fg">{user.email}</p>
6262

63-
<div class="mt-4 flex place-items-center place-content-center">
64-
<button
65-
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"
66-
on:click={() => {
67-
goto('/user-settings');
68-
dispatch('close');
69-
}}
70-
>
71-
<span><Cog size="18" /></span>Manage your Immich account</button
72-
>
73-
</div>
74-
75-
<div class="my-4">
76-
<hr class="dark:border-immich-dark-bg" />
63+
<div class=" mt-4 flex place-items-center place-content-center">
64+
<button
65+
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"
66+
on:click={() => {
67+
goto('/user-settings');
68+
dispatch('close');
69+
}}
70+
>
71+
<span><Cog size="18" /></span>Account Settings</button
72+
>
73+
</div>
7774
</div>
7875

79-
<div class="mb-6">
76+
<div class="mb-4 flex flex-col">
8077
<button
81-
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"
82-
on:click={() => dispatch('logout')}>Sign Out</button
78+
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"
79+
on:click={() => dispatch('logout')}
80+
>
81+
<Logout size={24} />
82+
Sign Out</button
8383
>
8484
</div>
8585
</div>

‎web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@
4242

4343
<section
4444
id="dashboard-navbar"
45-
class="fixed w-screen z-[100] bg-immich-bg dark:bg-immich-dark-bg text-sm"
45+
class="fixed w-screen z-[900] bg-immich-bg dark:bg-immich-dark-bg text-sm"
4646
>
4747
<div class="flex border-b dark:border-b-immich-dark-gray place-items-center px-6 py-2 ">
4848
<a
@@ -57,7 +57,7 @@
5757
</a>
5858
<div class="flex-1 ml-24">
5959
<input
60-
class="w-[50%] rounded-md bg-gray-200 dark:bg-immich-dark-gray px-8 py-4"
60+
class="w-[50%] rounded-3xl bg-gray-200 dark:bg-immich-dark-gray px-8 py-4"
6161
placeholder="Search - Coming soon"
6262
/>
6363
</div>
@@ -102,7 +102,7 @@
102102
transition:fade={{ duration: 100 }}
103103
src={`${$page.url.origin}/api/user/profile-image/${user.id}`}
104104
alt="profile-img"
105-
class="inline rounded-full h-12 w-12 object-cover shadow-md"
105+
class="inline rounded-full h-12 w-12 object-cover shadow-md border-2 border-immich-primary hover:border-immich-dark-primary dark:hover:border-immich-primary dark:border-immich-dark-primary transition-all"
106106
draggable="false"
107107
/>
108108
{:else}

‎web/src/routes/admin/+layout.svelte‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -60,15 +60,15 @@
6060
</div>
6161
</section>
6262

63-
<section class="overflow-y-auto ">
64-
<div id="setting-title" class="pt-10 fixed w-full z-50 bg-immich-bg dark:bg-immich-dark-bg">
63+
<section class="overflow-y-auto immich-scrollbar ">
64+
<div id="setting-title" class="pt-10 w-full z-50 bg-immich-bg dark:bg-immich-dark-bg">
6565
<h1 class="text-lg ml-8 mb-4 text-immich-primary dark:text-immich-dark-primary font-medium">
6666
{getPageTitle($page.route.id)}
6767
</h1>
6868
<hr class="dark:border-immich-dark-gray" />
6969
</div>
7070

71-
<section id="setting-content" class="pt-[85px] flex place-content-center">
71+
<section id="setting-content" class="flex place-content-center">
7272
<section class="w-[800px] pt-5 pb-28">
7373
<slot />
7474
</section>

0 commit comments

Comments
 (0)