refactor: migrate all input fields to StyledInput (#5306)

* feat: StyledInput component

* migrate: auth pages to styledInput

* migrate: search/filter inputs

* migrate: dashboard inputs

* migrate: app frontend

* migrate: search related inputs

* migrate: all of app-frontend

* fix: missing inputs on app-frontend

* migrate: frontend

* feat: multiline

* migrate: textareas

* fix: storybook use text-primary

* fix: lint

* fix: merge conflict

* feat: cleanup

apps/frontend/src/pages/auth/sign-in.vue

@@ -13,15 +13,13 @@
 					{{ formatMessage(messages.twoFactorCodeLabelDescription) }}
 				</span>
 			</label>
-			<input
+			<StyledInput
 				id="two-factor-code"
 				v-model="twoFactorCode"
-				maxlength="11"
-				type="text"
+				:maxlength="11"
 				inputmode="numeric"
 				:placeholder="formatMessage(messages.twoFactorCodeInputPlaceholder)"
 				autocomplete="one-time-code"
-				autofocus
 				@keyup.enter="begin2FASignIn"
 			/>
 
@@ -62,32 +60,28 @@
 			<h1>{{ formatMessage(messages.usePasswordLabel) }}</h1>
 
 			<section class="auth-form">
-				<div class="iconified-input">
-					<label for="email" hidden>{{ formatMessage(commonMessages.emailUsernameLabel) }}</label>
-					<MailIcon />
-					<input
-						id="email"
-						v-model="email"
-						type="text"
-						inputmode="email"
-						autocomplete="username"
-						class="auth-form__input"
-						:placeholder="formatMessage(commonMessages.emailUsernameLabel)"
-					/>
-				</div>
+				<label for="email" hidden>{{ formatMessage(commonMessages.emailUsernameLabel) }}</label>
+				<StyledInput
+					id="email"
+					v-model="email"
+					:icon="MailIcon"
+					type="text"
+					inputmode="email"
+					autocomplete="username"
+					:placeholder="formatMessage(commonMessages.emailUsernameLabel)"
+					wrapper-class="w-full"
+				/>
 
-				<div class="iconified-input">
-					<label for="password" hidden>{{ formatMessage(commonMessages.passwordLabel) }}</label>
-					<KeyIcon />
-					<input
-						id="password"
-						v-model="password"
-						type="password"
-						autocomplete="current-password"
-						class="auth-form__input"
-						:placeholder="formatMessage(commonMessages.passwordLabel)"
-					/>
-				</div>
+				<label for="password" hidden>{{ formatMessage(commonMessages.passwordLabel) }}</label>
+				<StyledInput
+					id="password"
+					v-model="password"
+					:icon="KeyIcon"
+					type="password"
+					autocomplete="current-password"
+					:placeholder="formatMessage(commonMessages.passwordLabel)"
+					wrapper-class="w-full"
+				/>
 
 				<HCaptcha v-if="globals?.captcha_enabled" ref="captcha" v-model="token" />
 
@@ -147,6 +141,7 @@ import {
 	defineMessages,
 	injectNotificationManager,
 	IntlFormatted,
+	StyledInput,
 	useVIntl,
 } from '@modrinth/ui'
 import { useQueryClient } from '@tanstack/vue-query'