make input size changeable

src/lib/components/Input/Input.svelte

@@ -10,16 +10,31 @@
 	export let placeholder: string | null = null;
 	export let required = false;
 	export let disabled = false;
+	export let size: 'xs' | 'sm' | 'md' | 'lg' = 'md';
 
 	export let inputElement: HTMLInputElement | undefined = undefined;
 
 	let initialType = type;
+
+	let passwordEyeSize = {
+		xs: '14',
+		sm: '18',
+		md: '24',
+		lg: '30'
+	};
 </script>
 
 <!-- the cursor-not-allowed class must be set here because a disabled button does not respect the 'cursor' css property -->
 <div class={type === 'submit' && disabled ? 'cursor-not-allowed' : ''}>
 	{#if type === 'submit'}
-		<input class="btn" {id} type="submit" {disabled} bind:value bind:this={inputElement} />
+		<input
+			class={`btn btn-${size}`}
+			{id}
+			type="submit"
+			{disabled}
+			bind:value
+			bind:this={inputElement}
+		/>
 	{:else}
 		<div>
 			{#if $$slots.label}
@@ -34,6 +49,7 @@
 			{/if}
 			<div class="relative flex items-center" class:sm:max-w-[16rem]={type !== 'checkbox'}>
 				<input
+					class={type === 'checkbox' ? `checkbox-${size}` : `input-${size}`}
 					class:checkbox={type === 'checkbox'}
 					class:input,input-bordered,w-[100%]={type !== 'checkbox'}
 					class:pr-11={initialType === 'password'}
@@ -61,9 +77,17 @@
 						}}
 					>
 						{#if type === 'password'}
-							<IconSolid name="eye-slash-solid" />
+							<IconSolid
+								name="eye-slash-solid"
+								width={passwordEyeSize[size]}
+								height={passwordEyeSize[size]}
+							/>
 						{:else}
-							<IconSolid name="eye-solid" />
+							<IconSolid
+								name="eye-solid"
+								width={passwordEyeSize[size]}
+								height={passwordEyeSize[size]}
+							/>
 						{/if}
 					</button>
 				{/if}

src/routes/admin/admin/+page.svelte

@@ -115,6 +115,7 @@
 						type="text"
 						bind:value={admin.username}
 						disabled={!permissions.adminWrite() || !admin.edit}
+						size="sm"
 					/></td
 				>
 				<td
@@ -123,6 +124,7 @@
 						bind:value={admin.password}
 						placeholder="Neues Passwort..."
 						disabled={!permissions.adminWrite() || !admin.edit}
+						size="sm"
 					/></td
 				>
 				<td
@@ -137,7 +139,7 @@
 						{#if admin.edit}
 							<span class="w-min" class:cursor-not-allowed={!permissions.adminWrite()}>
 								<button
-									class="btn btn-square"
+									class="btn btn-sm btn-square"
 									disabled={!permissions.adminWrite()}
 									on:click={async (e) => {
 										await buttonTriggeredRequest(
@@ -153,12 +155,12 @@
 										admin.edit = false;
 									}}
 								>
-									<IconOutline name="check-outline" width="24" height="24" />
+									<IconOutline name="check-outline" width="18" height="18" />
 								</button>
 							</span>
 							<span class="w-min" class:cursor-not-allowed={!permissions.adminWrite()}>
 								<button
-									class="btn btn-square"
+									class="btn btn-sm btn-square"
 									disabled={!permissions.adminWrite()}
 									on:click={() => {
 										admin.username = admin.before.username;
@@ -167,13 +169,13 @@
 										admin.edit = false;
 									}}
 								>
-									<IconOutline name="no-symbol-outline" width="24" height="24" />
+									<IconOutline name="no-symbol-outline" width="18" height="18" />
 								</button>
 							</span>
 						{:else}
 							<span class="w-min" class:cursor-not-allowed={!permissions.adminWrite()}>
 								<button
-									class="btn btn-square"
+									class="btn btn-sm btn-square"
 									disabled={!permissions.adminWrite()}
 									on:click={() => {
 										admin.edit = true;
@@ -184,16 +186,16 @@
 										};
 									}}
 								>
-									<IconOutline name="pencil-square-outline" width="24" height="24" />
+									<IconOutline name="pencil-square-outline" width="18" height="18" />
 								</button>
 							</span>
 							<span class="w-min" class:cursor-not-allowed={!permissions.adminWrite()}>
 								<button
-									class="btn btn-square"
+									class="btn btn-sm btn-square"
 									disabled={!permissions.adminWrite()}
 									on:click={(e) => buttonTriggeredRequest(e, deleteAdmin(admin.id))}
 								>
-									<IconOutline name="trash-outline" width="24" height="24" />
+									<IconOutline name="trash-outline" width="18" height="18" />
 								</button>
 							</span>
 						{/if}
@@ -203,8 +205,8 @@
 		{/each}
 		<tr>
 			<td>{data.admins.length}</td>
-			<td><Input type="text" bind:value={newAdminUsername} /></td>
+			<td><Input type="text" bind:value={newAdminUsername} size="sm" /></td>
-			<td><Input type="password" bind:value={newAdminPassword} /></td>
+			<td><Input type="password" bind:value={newAdminPassword} size="sm" /></td>
 			<td
 				><Badges
 					bind:value={newAdminPermissions}
@@ -220,7 +222,7 @@
 						!newAdminPassword}
 				>
 					<button
-						class="btn btn-square"
+						class="btn btn-sm btn-square"
 						disabled={!permissions.adminWrite() || !newAdminUsername || !newAdminPassword}
 						on:click={async (e) => {
 							await buttonTriggeredRequest(
@@ -232,7 +234,7 @@
 							newAdminPermissions = [];
 						}}
 					>
-						<IconOutline name="user-plus-outline" width="24" height="24" />
+						<IconOutline name="user-plus-outline" width="18" height="18" />
 					</button>
 				</span>
 			</td>