From 073aecd42757763e09e131beeff01a5cd459f4f3 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Sun, 7 Apr 2024 00:31:59 -0700
Subject: [PATCH] refac: styling

---
 .../components/chat/Settings/Account.svelte   | 166 +++++++++---------
 1 file changed, 85 insertions(+), 81 deletions(-)

diff --git a/src/lib/components/chat/Settings/Account.svelte b/src/lib/components/chat/Settings/Account.svelte
index 47af62a5b..81652c0dc 100644
--- a/src/lib/components/chat/Settings/Account.svelte
+++ b/src/lib/components/chat/Settings/Account.svelte
@@ -134,94 +134,98 @@
 			}}
 		/>
 
-		<div class="flex space-x-5">
-			<div class="flex flex-col">
-				<div class="self-center mt-2">
-					<button
-						class="relative rounded-full dark:bg-gray-700"
-						type="button"
-						on:click={() => {
-							profileImageInputElement.click();
-						}}
-					>
-						<img
-							src={profileImageUrl !== '' ? profileImageUrl : generateInitialsImage(name)}
-							alt="profile"
-							class=" rounded-full size-16 object-cover"
-						/>
+		<div class="space-y-1">
+			<!-- <div class=" text-sm font-medium">{$i18n.t('Account')}</div> -->
 
-						<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="flex space-x-5">
+				<div class="flex flex-col">
+					<div class="self-center mt-2">
+						<button
+							class="relative rounded-full dark:bg-gray-700"
+							type="button"
+							on:click={() => {
+								profileImageInputElement.click();
+							}}
 						>
-							<div class="my-auto text-gray-100">
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									viewBox="0 0 20 20"
-									fill="currentColor"
-									class="w-5 h-5"
-								>
-									<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"
-									/>
-								</svg>
+							<img
+								src={profileImageUrl !== '' ? profileImageUrl : generateInitialsImage(name)}
+								alt="profile"
+								class=" rounded-full size-16 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">
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										viewBox="0 0 20 20"
+										fill="currentColor"
+										class="w-5 h-5"
+									>
+										<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"
+										/>
+									</svg>
+								</div>
 							</div>
-						</div>
-					</button>
+						</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>
+						<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"
+							on:click={async () => {
+								if (canvasPixelTest()) {
+									profileImageUrl = generateInitialsImage(name);
+								} else {
+									toast.info(
+										$i18n.t(
+											'Fingerprint spoofing detected: Unable to use initials as avatar. Defaulting to default profile image.'
+										),
+										{
+											duration: 1000 * 10
+										}
+									);
+								}
+							}}>{$i18n.t('Use 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"
+							on:click={async () => {
+								const url = await getGravatarUrl($user.email);
+
+								profileImageUrl = url;
+							}}>{$i18n.t('Use Gravatar')}</button
+						>
+
+						<button
+							class=" text-xs text-center text-gray-800 dark:text-gray-400 rounded-lg px-2 py-1"
+							on:click={async () => {
+								profileImageUrl = '/user.png';
+							}}>{$i18n.t('Remove')}</button
+						>
+					</div>
 				</div>
 			</div>
 
-			<div class="flex-1 flex flex-col self-center">
-				<div class="  font-medium mb-1.5">{$i18n.t('Profile Image')}</div>
+			<div class="pt-0.5">
+				<div class="flex flex-col w-full">
+					<div class=" mb-1 text-xs font-medium">{$i18n.t('Name')}</div>
 
-				<div>
-					<button
-						class=" text-xs text-center text-gray-800 dark:text-gray-400 rounded-lg px-4 py-1 bg-gray-100 dark:bg-gray-850"
-						on:click={async () => {
-							if (canvasPixelTest()) {
-								profileImageUrl = generateInitialsImage(name);
-							} else {
-								toast.info(
-									$i18n.t(
-										'Fingerprint spoofing detected: Unable to use initials as avatar. Defaulting to default profile image.'
-									),
-									{
-										duration: 1000 * 10
-									}
-								);
-							}
-						}}>{$i18n.t('Use Initials')}</button
-					>
-
-					<button
-						class=" text-xs text-center text-gray-800 dark:text-gray-400 rounded-lg px-4 py-1 bg-gray-100 dark:bg-gray-850"
-						on:click={async () => {
-							const url = await getGravatarUrl($user.email);
-
-							profileImageUrl = url;
-						}}>{$i18n.t('Use Gravatar')}</button
-					>
-
-					<button
-						class=" text-xs text-center text-gray-800 dark:text-gray-400 rounded-lg px-4 py-1 bg-gray-100 dark:bg-gray-850"
-						on:click={async () => {
-							profileImageUrl = '/user.png';
-						}}>{$i18n.t('Remove')}</button
-					>
-				</div>
-			</div>
-		</div>
-
-		<div class="flex-1">
-			<div class="flex flex-col w-full">
-				<div class=" mb-1 text-xs text-gray-500">{$i18n.t('Name')}</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-none"
-						type="text"
-						bind:value={name}
-						required
-					/>
+					<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-none"
+							type="text"
+							bind:value={name}
+							required
+						/>
+					</div>
 				</div>
 			</div>
 		</div>