refac: account setting styling

src/lib/components/chat/Settings/Account.svelte

@@ -13,6 +13,7 @@
 	import Plus from '$lib/components/icons/Plus.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import SensitiveInput from '$lib/components/common/SensitiveInput.svelte';
+	import Textarea from '$lib/components/common/Textarea.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -21,6 +22,7 @@
 
 	let profileImageUrl = '';
 	let name = '';
+	let bio = '';
 
 	let webhookUrl = '';
 	let showAPIKeys = false;
@@ -152,11 +154,19 @@
 		/>
 
 		<div class="space-y-1">
+			<div>
+				<div class="text-base font-medium">{$i18n.t('Your Account')}</div>
+
+				<div class="text-xs text-gray-500 mt-0.5">
+					{$i18n.t('Manage your account information.')}
+				</div>
+			</div>
+
 			<!-- <div class=" text-sm font-medium">{$i18n.t('Account')}</div> -->
 
-			<div class="flex space-x-5">
-				<div class="flex flex-col">
-					<div class="self-center mt-2">
+			<div class="flex space-x-5 mt-4">
+				<div class="flex flex-col self-start group">
+					<div class="self-center flex">
 						<button
 							class="relative rounded-full dark:bg-gray-700"
 							type="button"
@@ -167,18 +177,16 @@
 							<img
 								src={profileImageUrl !== '' ? profileImageUrl : generateInitialsImage(name)}
 								alt="profile"
-								class=" rounded-full size-16 object-cover"
+								class=" rounded-full size-14 md:size-20 object-cover"
 							/>
 
-							<div
-								class="absolute flex justify-center rounded-full bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-gray-700 bg-fixed opacity-0 transition duration-300 ease-in-out hover:opacity-50"
-							>
-								<div class="my-auto text-gray-100">
+							<div class="absolute bottom-0 right-0 opacity-0 group-hover:opacity-100 transition">
+								<div class="p-1 rounded-full bg-white text-black border-gray-100 shadow">
 									<svg
 										xmlns="http://www.w3.org/2000/svg"
 										viewBox="0 0 20 20"
 										fill="currentColor"
-										class="w-5 h-5"
+										class="size-3"
 									>
 										<path
 											d="m2.695 14.762-1.262 3.155a.5.5 0 0 0 .65.65l3.155-1.262a4 4 0 0 0 1.343-.886L17.5 5.501a2.121 2.121 0 0 0-3-3L3.58 13.419a4 4 0 0 0-.885 1.343Z"
@@ -188,14 +196,16 @@
 							</div>
 						</button>
 					</div>
-				</div>
-
-				<div class="flex-1 flex flex-col self-center gap-0.5">
-					<div class=" mb-0.5 text-sm font-medium">{$i18n.t('Profile Image')}</div>
+					<div class="flex flex-col w-full justify-center mt-2">
+						<button
+							class=" text-xs text-center text-gray-500 rounded-lg py-0.5 opacity-0 group-hover:opacity-100 transition-all"
+							on:click={async () => {
+								profileImageUrl = `${WEBUI_BASE_URL}/user.png`;
+							}}>{$i18n.t('Remove')}</button
+						>
 
-					<div>
 						<button
-							class=" text-xs text-center text-gray-800 dark:text-gray-400 rounded-full px-4 py-0.5 bg-gray-100 dark:bg-gray-850"
+							class=" text-xs text-center text-gray-800 dark:text-gray-400 rounded-lg py-0.5 opacity-0 group-hover:opacity-100 transition-all"
 							on:click={async () => {
 								if (canvasPixelTest()) {
 									profileImageUrl = generateInitialsImage(name);
@@ -209,73 +219,80 @@
 										}
 									);
 								}
-							}}>{$i18n.t('Use Initials')}</button
+							}}>{$i18n.t('Initials')}</button
 						>
 
 						<button
-							class=" text-xs text-center text-gray-800 dark:text-gray-400 rounded-full px-4 py-0.5 bg-gray-100 dark:bg-gray-850"
+							class=" text-xs text-center text-gray-800 dark:text-gray-400 rounded-lg py-0.5 opacity-0 group-hover:opacity-100 transition-all"
 							on:click={async () => {
 								const url = await getGravatarUrl(localStorage.token, $user?.email);
 
 								profileImageUrl = url;
-							}}>{$i18n.t('Use Gravatar')}</button
+							}}>{$i18n.t('Gravatar')}</button
 						>
+					</div>
+				</div>
+				<div class="flex flex-1 flex-col">
+					<div class=" flex-1">
+						<div class="flex flex-col w-full">
+							<div class=" mb-1 text-xs font-medium">{$i18n.t('Name')}</div>
+
+							<div class="flex-1">
+								<input
+									class="w-full text-sm dark:text-gray-300 bg-transparent outline-hidden"
+									type="text"
+									bind:value={name}
+									required
+									placeholder={$i18n.t('Enter your name')}
+								/>
+							</div>
+						</div>
 
-						<button
-							class=" text-xs text-center text-gray-800 dark:text-gray-400 rounded-lg px-2 py-1"
-							on:click={async () => {
-								profileImageUrl = `${WEBUI_BASE_URL}/user.png`;
-							}}>{$i18n.t('Remove')}</button
-						>
+						<div class="flex flex-col w-full mt-2">
+							<div class=" mb-1 text-xs font-medium">{$i18n.t('Bio')}</div>
+
+							<div class="flex-1">
+								<Textarea
+									className="w-full text-sm dark:text-gray-300 bg-transparent outline-hidden"
+									bind:value={bio}
+									minSize={100}
+									placeholder={$i18n.t('Share your background and interests')}
+								/>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
+		</div>
 
-			<div class="pt-0.5">
+		{#if $config?.features?.enable_user_webhooks}
+			<div class="mt-2">
 				<div class="flex flex-col w-full">
-					<div class=" mb-1 text-xs font-medium">{$i18n.t('Name')}</div>
+					<div class=" mb-1 text-xs font-medium">{$i18n.t('Notification Webhook')}</div>
 
 					<div class="flex-1">
 						<input
-							class="w-full text-sm dark:text-gray-300 bg-transparent outline-hidden"
-							type="text"
-							bind:value={name}
+							class="w-full text-sm outline-hidden"
+							type="url"
+							placeholder={$i18n.t('Enter your webhook URL')}
+							bind:value={webhookUrl}
 							required
-							placeholder={$i18n.t('Enter your name')}
 						/>
 					</div>
 				</div>
 			</div>
+		{/if}
 
-			{#if $config?.features?.enable_user_webhooks}
-				<div class="pt-2">
-					<div class="flex flex-col w-full">
-						<div class=" mb-1 text-xs font-medium">{$i18n.t('Notification Webhook')}</div>
-
-						<div class="flex-1">
-							<input
-								class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden"
-								type="url"
-								placeholder={$i18n.t('Enter your webhook URL')}
-								bind:value={webhookUrl}
-								required
-							/>
-						</div>
-					</div>
-				</div>
-			{/if}
-		</div>
-
-		<hr class="border-gray-50 dark:border-gray-850 my-2" />
+		<hr class="border-gray-50 dark:border-gray-850 my-4" />
 
 		{#if $config?.features.enable_login_form}
-			<div class="my-2">
+			<div class="mt-2">
 				<UpdatePassword />
 			</div>
 		{/if}
 
 		{#if ($config?.features?.enable_api_key ?? true) || $user?.role === 'admin'}
-			<div class="flex justify-between items-center text-sm mb-2">
+			<div class="flex justify-between items-center text-sm mt-2">
 				<div class="  font-medium">{$i18n.t('API keys')}</div>
 				<button
 					class=" text-xs font-medium text-gray-500"
@@ -287,7 +304,7 @@
 			</div>
 
 			{#if showAPIKeys}
-				<div class="flex flex-col gap-4">
+				<div class="flex flex-col py-2.5">
 					{#if $user?.role === 'admin'}
 						<div class="justify-between w-full">
 							<div class="flex justify-between w-full">
@@ -345,7 +362,7 @@
 					{/if}
 
 					{#if $config?.features?.enable_api_key ?? true}
-						<div class="justify-between w-full">
+						<div class="justify-between w-full mt-2">
 							{#if $user?.role === 'admin'}
 								<div class="flex justify-between w-full">
 									<div class="self-center text-xs font-medium mb-1">{$i18n.t('API Key')}</div>