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/settings/account.vue

@@ -13,10 +13,10 @@
 			<div class="universal-modal">
 				<p>Your account information is not displayed publicly.</p>
 				<label for="email-input"><span class="label__title">Email address</span> </label>
-				<input
+				<StyledInput
 					id="email-input"
 					v-model="email"
-					maxlength="2048"
+					:maxlength="2048"
 					type="email"
 					:placeholder="`Enter your email address...`"
 					@keyup.enter="saveEmail()"
@@ -58,21 +58,21 @@
 				<label v-else-if="auth.user.has_password" for="old-password">
 					<span class="label__title">Old password</span>
 				</label>
-				<input
+				<StyledInput
 					v-if="auth.user.has_password"
 					id="old-password"
 					v-model="oldPassword"
-					maxlength="2048"
+					:maxlength="2048"
 					type="password"
 					autocomplete="current-password"
 					:placeholder="`${removePasswordMode ? 'Confirm' : 'Old'} password`"
 				/>
 				<template v-if="!removePasswordMode">
 					<label for="new-password"><span class="label__title">New password</span></label>
-					<input
+					<StyledInput
 						id="new-password"
 						v-model="newPassword"
-						maxlength="2048"
+						:maxlength="2048"
 						type="password"
 						autocomplete="new-password"
 						placeholder="New password"
@@ -80,10 +80,10 @@
 					<label for="confirm-new-password"
 						><span class="label__title">Confirm new password</span></label
 					>
-					<input
+					<StyledInput
 						id="confirm-new-password"
 						v-model="confirmNewPassword"
-						maxlength="2048"
+						:maxlength="2048"
 						type="password"
 						autocomplete="new-password"
 						placeholder="Confirm new password"
@@ -145,11 +145,10 @@
 						<span class="label__title">Enter two-factor code</span>
 						<span class="label__description">Please enter a two-factor code to proceed.</span>
 					</label>
-					<input
+					<StyledInput
 						id="two-factor-code"
 						v-model="twoFactorCode"
-						maxlength="11"
-						type="text"
+						:maxlength="11"
 						placeholder="Enter code..."
 						@keyup.enter="removeTwoFactor()"
 					/>
@@ -197,11 +196,10 @@
 								>Enter the one-time code from authenticator to verify access.
 							</span>
 						</label>
-						<input
+						<StyledInput
 							id="verify-code"
 							v-model="twoFactorCode"
-							maxlength="6"
-							type="text"
+							:maxlength="6"
 							autocomplete="one-time-code"
 							placeholder="Enter code..."
 							@keyup.enter="verifyTwoFactorCode()"
@@ -421,7 +419,7 @@ import {
 	UpdatedIcon,
 	XIcon,
 } from '@modrinth/assets'
-import { ConfirmModal, injectNotificationManager } from '@modrinth/ui'
+import { ConfirmModal, injectNotificationManager, StyledInput } from '@modrinth/ui'
 import KeyIcon from 'assets/icons/auth/key.svg'
 import DiscordIcon from 'assets/icons/auth/sso-discord.svg'
 import GithubIcon from 'assets/icons/auth/sso-github.svg'

apps/frontend/src/pages/settings/applications.vue

@@ -12,11 +12,10 @@
 				<label for="app-name"
 					><span class="label__title">{{ formatMessage(messages.nameLabel) }}</span>
 				</label>
-				<input
+				<StyledInput
 					id="app-name"
 					v-model="name"
-					maxlength="2048"
-					type="text"
+					:maxlength="2048"
 					autocomplete="off"
 					:placeholder="formatMessage(messages.namePlaceholder)"
 				/>
@@ -38,11 +37,11 @@
 				<label v-if="editingId" for="app-url">
 					<span class="label__title">{{ formatMessage(messages.urlLabel) }}</span>
 				</label>
-				<input
+				<StyledInput
 					v-if="editingId"
 					id="app-url"
 					v-model="url"
-					maxlength="255"
+					:maxlength="255"
 					type="url"
 					autocomplete="off"
 					:placeholder="formatMessage(messages.urlPlaceholder)"
@@ -50,15 +49,15 @@
 				<label v-if="editingId" for="app-description">
 					<span class="label__title">{{ formatMessage(messages.descriptionLabel) }}</span>
 				</label>
-				<textarea
+				<StyledInput
 					v-if="editingId"
 					id="app-description"
 					v-model="description"
-					class="description-textarea"
-					maxlength="255"
-					type="text"
+					multiline
+					:maxlength="255"
 					autocomplete="off"
 					:placeholder="formatMessage(messages.descriptionPlaceholder)"
+					input-class="h-24 resize-y"
 				/>
 				<label for="app-scopes"
 					><span class="label__title">{{ formatMessage(messages.scopesLabel) }}</span>
@@ -88,9 +87,9 @@
 				<div class="uri-input-list">
 					<div v-for="(_, index) in redirectUris" :key="index">
 						<div class="input-group url-input-group-fixes">
-							<input
+							<StyledInput
 								v-model="redirectUris[index]"
-								maxlength="2048"
+								:maxlength="2048"
 								type="url"
 								autocomplete="off"
 								:placeholder="formatMessage(messages.redirectUriPlaceholder)"
@@ -257,6 +256,7 @@ import {
 	injectNotificationManager,
 	IntlFormatted,
 	normalizeChildren,
+	StyledInput,
 	useVIntl,
 } from '@modrinth/ui'
 
@@ -697,11 +697,6 @@ async function removeApp() {
 }
 </script>
 <style lang="scss" scoped>
-.description-textarea {
-	height: 6rem;
-	resize: vertical;
-}
-
 .secret_disclaimer {
 	font-size: var(--font-size-sm);
 }

apps/frontend/src/pages/settings/pats.vue

@@ -19,11 +19,10 @@
 				<label for="pat-name">
 					<span class="label__title">{{ formatMessage(createModalMessages.nameLabel) }}</span>
 				</label>
-				<input
+				<StyledInput
 					id="pat-name"
 					v-model="name"
-					maxlength="2048"
-					type="email"
+					:maxlength="2048"
 					:placeholder="formatMessage(createModalMessages.namePlaceholder)"
 				/>
 				<label for="pat-scopes">
@@ -51,7 +50,7 @@
 				<label for="pat-name" class="mt-4">
 					<span class="label__title">{{ formatMessage(createModalMessages.expiresLabel) }}</span>
 				</label>
-				<input id="pat-name" v-model="expires" type="date" />
+				<StyledInput id="pat-expires" v-model="expires" type="date" />
 				<p></p>
 				<div class="input-group push-right">
 					<button class="iconified-button" @click="$refs.patModal.hide()">
@@ -222,6 +221,7 @@ import {
 	defineMessages,
 	injectNotificationManager,
 	IntlFormatted,
+	StyledInput,
 	useRelativeTime,
 	useVIntl,
 } from '@modrinth/ui'

apps/frontend/src/pages/settings/profile.vue

@@ -56,15 +56,15 @@
 					{{ formatMessage(messages.usernameDescription) }}
 				</span>
 			</label>
-			<input id="username-field" v-model="current.username" type="text" />
+			<StyledInput id="username-field" v-model="current.username" />
 			<label for="bio-field">
 				<span class="label__title">{{ formatMessage(messages.bioTitle) }}</span>
 				<span class="label__description">
 					{{ formatMessage(messages.bioDescription) }}
 				</span>
 			</label>
-			<textarea id="bio-field" v-model="current.bio" type="text" />
-			<div class="input-group">
+			<StyledInput id="bio-field" v-model="current.bio" multiline />
+			<div class="input-group mt-4">
 				<Button :link="`/user/${auth.user.username}`">
 					<UserIcon /> {{ formatMessage(commonMessages.visitYourProfile) }}
 				</Button>
@@ -90,6 +90,7 @@ import {
 	FileInput,
 	injectNotificationManager,
 	IntlFormatted,
+	StyledInput,
 	UnsavedChangesPopup,
 	useSavable,
 	useVIntl,
@@ -250,10 +251,4 @@ async function save() {
 	gap: var(--gap-lg);
 	margin-top: var(--gap-md);
 }
-
-textarea {
-	height: 6rem;
-	width: 40rem;
-	margin-bottom: var(--gap-lg);
-}
 </style>