From 2cf42e867c12f2c5e13e507188d0f1f99b6cc421 Mon Sep 17 00:00:00 2001
From: Alex <alex.tran1502@gmail.com>
Date: Sun, 19 Feb 2023 23:29:06 -0600
Subject: [PATCH] feat(web): add some material design 3 styling to forms and ui
 elements (#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
---
 .../immich/src/controllers/user.controller.ts |  2 +-
 web/src/app.css                               |  6 +-
 .../forms/change-password-form.svelte         | 10 +--
 .../lib/components/forms/login-form.svelte    |  6 +-
 .../photos-page/asset-date-group.svelte       |  2 +-
 .../context-menu/context-menu.svelte          |  2 +-
 .../context-menu/menu-option.svelte           |  2 +-
 .../navigation-bar/account-info-panel.svelte  | 74 +++++++++----------
 .../navigation-bar/navigation-bar.svelte      |  6 +-
 web/src/routes/admin/+layout.svelte           |  6 +-
 10 files changed, 56 insertions(+), 60 deletions(-)

diff --git a/server/apps/immich/src/controllers/user.controller.ts b/server/apps/immich/src/controllers/user.controller.ts
index 364192203a..723bfcadfb 100644
--- a/server/apps/immich/src/controllers/user.controller.ts
+++ b/server/apps/immich/src/controllers/user.controller.ts
@@ -112,7 +112,7 @@ export class UserController {
   }
 
   @Get('/profile-image/:userId')
-  @Header('Cache-Control', 'max-age=86400')
+  @Header('Cache-Control', 'max-age=600')
   async getProfileImage(@Param('userId') userId: string, @Response({ passthrough: true }) res: Res): Promise<any> {
     const readableStream = await this.userService.getUserProfileImage(userId);
     res.set({
diff --git a/web/src/app.css b/web/src/app.css
index cec3d3d719..9120a9ff5b 100644
--- a/web/src/app.css
+++ b/web/src/app.css
@@ -57,7 +57,7 @@ input:focus-visible {
 
 @layer utilities {
 	.immich-form-input {
-		@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;
+		@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;
 	}
 
 	.immich-form-label {
@@ -69,11 +69,11 @@ input:focus-visible {
 	}
 
 	.immich-btn-primary-big {
-		@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;
+		@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;
 	}
 
 	.immich-btn-secondary-big {
-		@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;
+		@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;
 	}
 
 	.immich-text-button {
diff --git a/web/src/lib/components/forms/change-password-form.svelte b/web/src/lib/components/forms/change-password-form.svelte
index b66759b81b..f207aec1ab 100644
--- a/web/src/lib/components/forms/change-password-form.svelte
+++ b/web/src/lib/components/forms/change-password-form.svelte
@@ -45,7 +45,7 @@
 </script>
 
 <div
-	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"
+	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"
 >
 	<div class="flex flex-col place-items-center place-content-center gap-4 px-4">
 		<ImmichLogo class="text-center" height="100" width="100" />
@@ -54,7 +54,7 @@
 		</h1>
 
 		<p
-			class="text-sm border rounded-md p-4 font-mono text-gray-600 dark:border-immich-dark-bg dark:text-gray-300"
+			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"
 		>
 			Hi {user.firstName}
 			{user.lastName} ({user.email}),
@@ -98,11 +98,7 @@
 			<p class="text-immich-primary ml-4 text-sm">{success}</p>
 		{/if}
 		<div class="flex w-full">
-			<button
-				type="submit"
-				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"
-				>Change Password</button
-			>
+			<button type="submit" class="immich-btn-primary-big m-4">Change Password</button>
 		</div>
 	</form>
 </div>
diff --git a/web/src/lib/components/forms/login-form.svelte b/web/src/lib/components/forms/login-form.svelte
index 932de9f51d..94aec4605e 100644
--- a/web/src/lib/components/forms/login-form.svelte
+++ b/web/src/lib/components/forms/login-form.svelte
@@ -76,7 +76,7 @@
 </script>
 
 <div
-	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"
+	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"
 >
 	<div class="flex flex-col place-items-center place-content-center gap-4 py-4">
 		<ImmichLogo class="text-center h-24 w-24" />
@@ -85,7 +85,7 @@
 
 	{#if loginPageMessage}
 		<p
-			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"
+			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"
 		>
 			{@html loginPageMessage}
 		</p>
@@ -142,7 +142,7 @@
 	{#if authConfig.enabled}
 		{#if authConfig.passwordLoginEnabled}
 			<div class="inline-flex items-center justify-center w-full">
-				<hr class="w-3/4 h-px my-6 bg-gray-200 border-0 dark:bg-gray-600" />
+				<hr class="w-3/4 h-px my-4 bg-gray-200 border-0 dark:bg-gray-600" />
 				<span
 					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"
 				>
diff --git a/web/src/lib/components/photos-page/asset-date-group.svelte b/web/src/lib/components/photos-page/asset-date-group.svelte
index ae2013608c..931cbbdf24 100644
--- a/web/src/lib/components/photos-page/asset-date-group.svelte
+++ b/web/src/lib/components/photos-page/asset-date-group.svelte
@@ -110,7 +110,7 @@
 
 <section
 	id="asset-group-by-date"
-	class="flex flex-wrap gap-5 mt-5"
+	class="flex flex-wrap gap-12 mt-5"
 	bind:clientHeight={actualBucketHeight}
 >
 	{#each assetsGroupByDate as assetsInDateGroup, groupIndex (assetsInDateGroup[0].id)}
diff --git a/web/src/lib/components/shared-components/context-menu/context-menu.svelte b/web/src/lib/components/shared-components/context-menu/context-menu.svelte
index 32e2e2c550..9d58359c0f 100644
--- a/web/src/lib/components/shared-components/context-menu/context-menu.svelte
+++ b/web/src/lib/components/shared-components/context-menu/context-menu.svelte
@@ -32,7 +32,7 @@
 <div
 	transition:slide={{ duration: 200, easing: quintOut }}
 	bind:this={menuEl}
-	class="absolute w-[200px] z-[99999] rounded-lg overflow-hidden"
+	class="absolute w-[200px] z-[99999] rounded-lg overflow-hidden shadow-lg"
 	style={`top: ${y}px; left: ${x}px;`}
 	use:clickOutside
 	on:outclick={() => dispatch('clickoutside')}
diff --git a/web/src/lib/components/shared-components/context-menu/menu-option.svelte b/web/src/lib/components/shared-components/context-menu/menu-option.svelte
index 7776ff2ce5..6bd63174d1 100644
--- a/web/src/lib/components/shared-components/context-menu/menu-option.svelte
+++ b/web/src/lib/components/shared-components/context-menu/menu-option.svelte
@@ -16,7 +16,7 @@
 <button
 	class:disabled={isDisabled}
 	on:click={handleClick}
-	class="bg-white hover:bg-gray-300 dark:text-immich-dark-bg transition-all p-4 w-full text-left text-sm"
+	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"
 >
 	{#if text}
 		{text}
diff --git a/web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte b/web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte
index 821971ba26..b51fcb8fc7 100644
--- a/web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte
+++ b/web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte
@@ -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>
diff --git a/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte b/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
index 55dae7ec18..5a8606de70 100644
--- a/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
+++ b/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
@@ -42,7 +42,7 @@
 
 <section
 	id="dashboard-navbar"
-	class="fixed w-screen  z-[100] bg-immich-bg dark:bg-immich-dark-bg text-sm"
+	class="fixed w-screen z-[900] bg-immich-bg dark:bg-immich-dark-bg text-sm"
 >
 	<div class="flex border-b dark:border-b-immich-dark-gray place-items-center px-6 py-2 ">
 		<a
@@ -57,7 +57,7 @@
 		</a>
 		<div class="flex-1 ml-24">
 			<input
-				class="w-[50%] rounded-md bg-gray-200 dark:bg-immich-dark-gray  px-8 py-4"
+				class="w-[50%] rounded-3xl bg-gray-200 dark:bg-immich-dark-gray  px-8 py-4"
 				placeholder="Search - Coming soon"
 			/>
 		</div>
@@ -102,7 +102,7 @@
 								transition:fade={{ duration: 100 }}
 								src={`${$page.url.origin}/api/user/profile-image/${user.id}`}
 								alt="profile-img"
-								class="inline rounded-full h-12 w-12 object-cover shadow-md"
+								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"
 								draggable="false"
 							/>
 						{:else}
diff --git a/web/src/routes/admin/+layout.svelte b/web/src/routes/admin/+layout.svelte
index 5a7f8bb97b..44fd8c92f0 100644
--- a/web/src/routes/admin/+layout.svelte
+++ b/web/src/routes/admin/+layout.svelte
@@ -60,15 +60,15 @@
 			</div>
 		</section>
 
-		<section class="overflow-y-auto ">
-			<div id="setting-title" class="pt-10 fixed w-full z-50 bg-immich-bg dark:bg-immich-dark-bg">
+		<section class="overflow-y-auto immich-scrollbar ">
+			<div id="setting-title" class="pt-10 w-full z-50 bg-immich-bg dark:bg-immich-dark-bg">
 				<h1 class="text-lg ml-8 mb-4 text-immich-primary dark:text-immich-dark-primary font-medium">
 					{getPageTitle($page.route.id)}
 				</h1>
 				<hr class="dark:border-immich-dark-gray" />
 			</div>
 
-			<section id="setting-content" class="pt-[85px] flex place-content-center">
+			<section id="setting-content" class="flex place-content-center">
 				<section class="w-[800px] pt-5 pb-28">
 					<slot />
 				</section>