refac: styling

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

@@ -19,6 +19,8 @@
 	let profileImageUrl = '';
 	let name = '';
 
+	let showAPIKeys = false;
+
 	let showJWTToken = false;
 	let JWTTokenCopied = false;
 
@@ -223,11 +225,25 @@
 				</div>
 			</div>
 		</div>
-		<hr class=" dark:border-gray-700 my-4" />
+
+		<div class="py-0.5">
 			<UpdatePassword />
+		</div>
 
 		<hr class=" dark:border-gray-700 my-4" />
 
+		<div class="flex justify-between items-center text-sm">
+			<div class="  font-medium">{$i18n.t('API keys')}</div>
+			<button
+				class=" text-xs font-medium text-gray-500"
+				type="button"
+				on:click={() => {
+					showAPIKeys = !showAPIKeys;
+				}}>{showAPIKeys ? $i18n.t('Hide') : $i18n.t('Show')}</button
+			>
+		</div>
+
+		{#if showAPIKeys}
 			<div class="flex flex-col gap-4">
 				<div class="justify-between w-full">
 					<div class="flex justify-between w-full">
@@ -237,14 +253,14 @@
 					<div class="flex mt-2">
 						<div class="flex w-full">
 							<input
-							class="w-full rounded-l-lg py-1.5 pl-4 text-sm bg-white dark:text-gray-300 dark:bg-gray-800 outline-none"
+								class="w-full rounded-l-lg py-1.5 pl-4 text-sm bg-white dark:text-gray-300 dark:bg-gray-850 outline-none"
 								type={showJWTToken ? 'text' : 'password'}
 								value={localStorage.token}
 								disabled
 							/>
 
 							<button
-							class="px-2 transition rounded-r-lg bg-white dark:bg-gray-800"
+								class="px-2 transition rounded-r-lg bg-white dark:bg-gray-850"
 								on:click={() => {
 									showJWTToken = !showJWTToken;
 								}}
@@ -284,7 +300,7 @@
 						</div>
 
 						<button
-						class="ml-1.5 px-1.5 py-1 dark:hover:bg-gray-800 transition rounded-lg"
+							class="ml-1.5 px-1.5 py-1 dark:hover:bg-gray-850 transition rounded-lg"
 							on:click={() => {
 								copyToClipboard(localStorage.token);
 								JWTTokenCopied = true;
@@ -337,14 +353,14 @@
 						{#if APIKey}
 							<div class="flex w-full">
 								<input
-								class="w-full rounded-l-lg py-1.5 pl-4 text-sm bg-white dark:text-gray-300 dark:bg-gray-800 outline-none"
+									class="w-full rounded-l-lg py-1.5 pl-4 text-sm bg-white dark:text-gray-300 dark:bg-gray-850 outline-none"
 									type={showAPIKey ? 'text' : 'password'}
 									value={APIKey}
 									disabled
 								/>
 
 								<button
-								class="px-2 transition rounded-r-lg bg-white dark:bg-gray-800"
+									class="px-2 transition rounded-r-lg bg-white dark:bg-gray-850"
 									on:click={() => {
 										showAPIKey = !showAPIKey;
 									}}
@@ -384,7 +400,7 @@
 							</div>
 
 							<button
-							class="ml-1.5 px-1.5 py-1 dark:hover:bg-gray-800 transition rounded-lg"
+								class="ml-1.5 px-1.5 py-1 dark:hover:bg-gray-850 transition rounded-lg"
 								on:click={() => {
 									copyToClipboard(APIKey);
 									APIKeyCopied = true;
@@ -429,7 +445,7 @@
 
 							<Tooltip content="Create new key">
 								<button
-								class=" px-1.5 py-1 dark:hover:bg-gray-800transition rounded-lg"
+									class=" px-1.5 py-1 dark:hover:bg-gray-850transition rounded-lg"
 									on:click={() => {
 										createAPIKeyHandler();
 									}}
@@ -452,7 +468,7 @@
 							</Tooltip>
 						{:else}
 							<button
-							class="flex gap-1.5 items-center font-medium px-3.5 py-1.5 rounded-lg bg-gray-100/70 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 transition"
+								class="flex gap-1.5 items-center font-medium px-3.5 py-1.5 rounded-lg bg-gray-100/70 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-850 transition"
 								on:click={() => {
 									createAPIKeyHandler();
 								}}
@@ -465,6 +481,7 @@
 					</div>
 				</div>
 			</div>
+		{/if}
 	</div>
 
 	<div class="flex justify-end pt-3 text-sm font-medium">