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/index.vue

@@ -91,21 +91,20 @@
 					<div class="blob-demonstration gradient-border bigger">
 						<div class="demo-search">
 							<div class="search-controls">
-								<div class="iconified-input">
-									<label class="hidden" for="search">{{
-										formatMessage(commonMessages.searchLabel)
-									}}</label>
-									<SearchIcon aria-hidden="true" />
-									<input
-										id="search"
-										v-model="searchQuery"
-										type="search"
-										name="search"
-										:placeholder="formatMessage(commonMessages.searchPlaceholder)"
-										autocomplete="off"
-										@input="updateSearchProjects"
-									/>
-								</div>
+								<label class="hidden" for="search">{{
+									formatMessage(commonMessages.searchLabel)
+								}}</label>
+								<StyledInput
+									id="search"
+									v-model="searchQuery"
+									:icon="SearchIcon"
+									type="search"
+									name="search"
+									:placeholder="formatMessage(commonMessages.searchPlaceholder)"
+									autocomplete="off"
+									wrapper-class="w-full"
+									@input="updateSearchProjects"
+								/>
 								<div class="sort-by">
 									<span class="label">{{ formatMessage(commonMessages.sortByLabel) }}</span>
 									<Multiselect
@@ -447,6 +446,7 @@ import {
 	defineMessages,
 	IntlFormatted,
 	ProjectCard,
+	StyledInput,
 	useRelativeTime,
 	useVIntl,
 } from '@modrinth/ui'