refac

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

@@ -173,8 +173,8 @@
 				description={$i18n.t('Choose the gender value stored on your profile.')}
 			>
 				<SettingsSelect
-					className="w-full"
 					bind:value={_gender}
+					className="w-full"
 					ariaLabel={$i18n.t('Gender')}
 					on:change={(e) => {
 						console.log(_gender);
@@ -264,7 +264,7 @@
 								description={$i18n.t('Copy the current session token for authenticated requests.')}
 							>
 								<div class="flex">
-									<SensitiveInput value={localStorage.token} readOnly={true} />
+									<SensitiveInput variant="settings" value={localStorage.token} readOnly={true} />
 
 									<button
 										class="ml-1.5 rounded-sm px-1.5 py-1 text-gray-500 transition hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-850 dark:hover:text-gray-300"
@@ -321,7 +321,7 @@
 							>
 								<div class="flex">
 									{#if APIKey}
-										<SensitiveInput value={APIKey} readOnly={true} />
+										<SensitiveInput variant="settings" value={APIKey} readOnly={true} />
 
 										<button
 											class="ml-1.5 rounded-sm px-1.5 py-1 text-gray-500 transition hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-850 dark:hover:text-gray-300"

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

@@ -10,8 +10,6 @@
 	let currentPassword = '';
 	let newPassword = '';
 	let newPasswordConfirm = '';
-	const inputClass =
-		'h-7 w-full rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 text-xs text-gray-700 outline-hidden transition-colors placeholder:text-gray-300 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:placeholder:text-gray-700 dark:focus:border-blue-500';
 	const actionButtonClass =
 		'text-xs text-gray-500 transition-colors hover:text-gray-900 dark:text-gray-500 dark:hover:text-white';
 
@@ -70,7 +68,7 @@
 
 				<div class="flex-1">
 					<SensitiveInput
-						class={inputClass}
+						variant="settings"
 						type="password"
 						bind:value={currentPassword}
 						placeholder={$i18n.t('Enter your current password')}
@@ -87,7 +85,7 @@
 
 				<div class="flex-1">
 					<SensitiveInput
-						class={inputClass}
+						variant="settings"
 						type="password"
 						bind:value={newPassword}
 						placeholder={$i18n.t('Enter your new password')}
@@ -104,7 +102,7 @@
 
 				<div class="flex-1">
 					<SensitiveInput
-						class={inputClass}
+						variant="settings"
 						type="password"
 						bind:value={newPasswordConfirm}
 						placeholder={$i18n.t('Confirm your new password')}

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

@@ -360,7 +360,7 @@
 					label={$i18n.t('Set Voice')}
 					description={$i18n.t('Choose the browser voice used for speech output.')}
 				>
-					<SettingsSelect className="w-full" bind:value={voice} ariaLabel={$i18n.t('Voice')}>
+					<SettingsSelect bind:value={voice} className="w-full" ariaLabel={$i18n.t('Voice')}>
 						<option value="" selected={voice !== ''}>{$i18n.t('Default')}</option>
 						{#each voices.filter((v) => nonLocalVoices || v.localService === true) as _voice}
 							<option

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

@@ -246,7 +246,6 @@
 				<SettingsSelect
 					bind:value={lang}
 					ariaLabel={$i18n.t('Language')}
-					className="w-48"
 					placeholder={$i18n.t('Select a language')}
 					on:change={(e) => {
 						changeLanguage(lang);