refac: styling

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

@@ -21,11 +21,11 @@
 	let profileImageInputElement: HTMLInputElement;
 
 	const submitHandler = async () => {
-		const isInitialsImage: boolean =
+		if (name !== $user.name) {
-			profileImageUrl === generateInitialsImage($user.name) || profileImageUrl === '';
+			if (profileImageUrl === generateInitialsImage($user.name) || profileImageUrl === '') {
-		if (isInitialsImage && name !== $user.name) {
 				profileImageUrl = generateInitialsImage(name);
 			}
+		}
 
 		const updatedUser = await updateUserProfile(localStorage.token, name, profileImageUrl).catch(
 			(error) => {
@@ -110,11 +110,11 @@
 			}}
 		/>
 
-		<div class=" mb-2.5 text-sm font-medium">{$i18n.t('Profile')}</div>
+		<!-- <div class="flex space-x-5">
-
-		<div class="flex space-x-5">
 			<div class="flex flex-col">
 				<div class="self-center">
+					<div class=" mb-2.5 text-sm font-medium">{$i18n.t('Profile')}</div>
+
 					<button
 						class="relative rounded-full dark:bg-gray-700"
 						type="button"
@@ -125,7 +125,7 @@
 						<img
 							src={profileImageUrl !== '' ? profileImageUrl : generateInitialsImage(name)}
 							alt="profile"
-							class=" rounded-full w-16 h-16 object-cover"
+							class=" rounded-full size-20 object-cover"
 						/>
 
 						<div
@@ -146,15 +146,40 @@
 						</div>
 					</button>
 				</div>
+			</div>
+
+			<div class="flex-1 flex flex-col self-center">
+				<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>
+
+					<div class="mt-2">
 						<button
-					class=" text-xs text-left text-gray-600"
+							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-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: default profile picture set. Disable to access Initial avatar!'
+											'Fingerprint spoofing detected: Unable to use initials as avatar. Defaulting to default profile image.'
 										),
 										{
 											duration: 1000 * 10
@@ -163,14 +188,86 @@
 								}
 							}}>{$i18n.t('Use Initials')}</button
 						>
+					</div>
+				</div>
+			</div>
+		</div> -->
+
+		<div class="flex space-x-5">
+			<div class="flex flex-col">
+				<div class="self-center mt-2">
 					<button
-					class=" text-xs text-left text-gray-600"
+						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="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>
+					</button>
+				</div>
+			</div>
+
+			<div class="flex-1 flex flex-col self-center">
+				<div class="  font-medium mb-1.5">{$i18n.t('Profile Image')}</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">
@@ -179,7 +276,7 @@
 
 				<div class="flex-1">
 					<input
-							class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
+						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
@@ -187,8 +284,6 @@
 				</div>
 			</div>
 		</div>
-		</div>
-
 		<hr class=" dark:border-gray-700 my-4" />
 		<UpdatePassword />
 

src/lib/i18n/locales/en-US/translation.json

@@ -150,7 +150,7 @@
 	"Failed to read clipboard contents": "",
 	"File Mode": "",
 	"File not found.": "",
-	"Fingerprint spoofing detected: default profile picture set. Disable to access Initial avatar!": "",
+	"Fingerprint spoofing detected: Unable to use initials as avatar. Defaulting to default profile image.": "",
 	"Focus chat input": "",
 	"Format your variables using square brackets like this:": "",
 	"From (Base Model)": "",