refac: styling

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

@@ -8,6 +8,8 @@
 	import UpdatePassword from './Account/UpdatePassword.svelte';
 	import { getGravatarUrl } from '$lib/apis/utils';
 	import { copyToClipboard } from '$lib/utils';
+	import Plus from '$lib/components/icons/Plus.svelte';
+	import Tooltip from '$lib/components/common/Tooltip.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -199,14 +201,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 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-800 outline-none"
 							type={showJWTToken ? 'text' : 'password'}
 							value={localStorage.token}
 							disabled
 						/>
 
 						<button
-							class="px-2 transition rounded-r-lg dark:bg-gray-800"
+							class="px-2 transition rounded-r-lg bg-white dark:bg-gray-800"
 							on:click={() => {
 								showJWTToken = !showJWTToken;
 							}}
@@ -246,7 +248,7 @@
 					</div>
 
 					<button
-						class="ml-1.5 px-1.5 py-1 hover:bg-gray-800 transition rounded-lg"
+						class="ml-1.5 px-1.5 py-1 dark:hover:bg-gray-800 transition rounded-lg"
 						on:click={() => {
 							copyToClipboard(localStorage.token);
 							JWTTokenCopied = true;
@@ -296,16 +298,17 @@
 				</div>
 
 				<div class="flex mt-2">
+					{#if APIKey}
 						<div class="flex w-full">
 							<input
-							class="w-full rounded-l-lg py-1.5 pl-4 text-sm 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-800 outline-none"
 								type={showAPIKey ? 'text' : 'password'}
 								value={APIKey}
 								disabled
 							/>
 
 							<button
-							class="px-2 transition rounded-r-lg dark:bg-gray-800"
+								class="px-2 transition rounded-r-lg bg-white dark:bg-gray-800"
 								on:click={() => {
 									showAPIKey = !showAPIKey;
 								}}
@@ -345,7 +348,7 @@
 						</div>
 
 						<button
-						class="ml-1.5 px-1.5 py-1 hover:bg-gray-800 transition rounded-lg"
+							class="ml-1.5 px-1.5 py-1 dark:hover:bg-gray-800 transition rounded-lg"
 							on:click={() => {
 								copyToClipboard(APIKey);
 								APIKeyCopied = true;
@@ -388,8 +391,9 @@
 							{/if}
 						</button>
 
+						<Tooltip content="Create new key">
 							<button
-						class=" px-1.5 py-1 hover:bg-gray-800 transition rounded-lg"
+								class=" px-1.5 py-1 dark:hover:bg-gray-800transition rounded-lg"
 								on:click={() => {
 									createAPIKeyHandler();
 								}}
@@ -409,6 +413,19 @@
 									/>
 								</svg>
 							</button>
+						</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"
+							on:click={() => {
+								createAPIKeyHandler();
+							}}
+						>
+							<Plus strokeWidth="2" className=" size-3.5" />
+
+							Create new secret key</button
+						>
+					{/if}
 				</div>
 			</div>
 		</div>

src/lib/components/icons/Plus.svelte

+<script lang="ts">
+	export let className = 'w-4 h-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	stroke="currentColor"
+	class={className}
+>
+	<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+</svg>