refac: styling

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

@@ -134,6 +134,9 @@
 			}}
 		/>
 
+		<div class="space-y-1">
+			<!-- <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">
@@ -170,12 +173,12 @@
 					</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="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-lg px-4 py-1 bg-gray-100 dark:bg-gray-850"
+							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);
@@ -193,7 +196,7 @@
 						>
 
 						<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"
+							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);
 
@@ -202,7 +205,7 @@
 						>
 
 						<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"
+							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
@@ -211,9 +214,9 @@
 				</div>
 			</div>
 
-		<div class="flex-1">
+			<div class="pt-0.5">
 				<div class="flex flex-col w-full">
-				<div class=" mb-1 text-xs text-gray-500">{$i18n.t('Name')}</div>
+					<div class=" mb-1 text-xs font-medium">{$i18n.t('Name')}</div>
 
 					<div class="flex-1">
 						<input
@@ -225,6 +228,7 @@
 					</div>
 				</div>
 			</div>
+		</div>
 
 		<div class="py-0.5">
 			<UpdatePassword />