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

packages/ui/src/components/modal/ConfirmModal.vue

@@ -23,13 +23,12 @@
 					<span class="italic font-bold">{{ confirmationText }}</span> below:
 				</span>
 			</label>
-			<input
+			<StyledInput
 				v-if="hasToType"
 				id="confirmation"
 				v-model="confirmation_typed"
-				type="text"
 				placeholder="Type here..."
-				class="max-w-[20rem]"
+				wrapper-class="max-w-[20rem]"
 			/>
 			<div class="flex gap-2">
 				<ButtonStyled :color="danger ? 'red' : 'brand'">
@@ -55,6 +54,7 @@ import { renderString } from '@modrinth/utils'
 import { computed, ref } from 'vue'
 
 import ButtonStyled from '../base/ButtonStyled.vue'
+import StyledInput from '../base/StyledInput.vue'
 import NewModal from './NewModal.vue'
 
 const props = defineProps({

packages/ui/src/components/modal/ShareModal.vue

@@ -2,7 +2,6 @@
 import {
 	ClipboardCopyIcon,
 	GlobeIcon,
-	LinkIcon,
 	MailIcon,
 	MastodonIcon,
 	RedditIcon,
@@ -12,7 +11,7 @@ import {
 import QrcodeVue from 'qrcode.vue'
 import { computed, nextTick, ref } from 'vue'
 
-import { Button, Modal } from '../index'
+import { Button, Modal, StyledInput } from '../index'
 
 const props = defineProps({
 	header: {
@@ -142,26 +141,27 @@ defineExpose({
 					<ClipboardCopyIcon aria-hidden="true" />
 				</Button>
 			</div>
-			<div v-else class="resizable-textarea-wrapper">
-				<textarea v-model="content" />
-				<Button
-					v-tooltip="'Copy Text'"
-					icon-only
-					aria-label="Copy Text"
-					class="copy-button transparent"
-					@click="copyText"
-				>
-					<ClipboardCopyIcon aria-hidden="true" />
-				</Button>
-			</div>
-			<div class="all-buttons">
-				<div v-if="link" class="iconified-input">
-					<LinkIcon />
-					<input type="text" :value="url" readonly />
-					<Button v-tooltip="'Copy Text'" aria-label="Copy Text" class="r-btn" @click="copyText">
+			<StyledInput v-else v-model="content" multiline resize="vertical" wrapper-class="h-full">
+				<template #right>
+					<Button
+						v-tooltip="'Copy Text'"
+						icon-only
+						aria-label="Copy Text"
+						class="copy-button transparent"
+						@click="copyText"
+					>
 						<ClipboardCopyIcon aria-hidden="true" />
 					</Button>
-				</div>
+				</template>
+			</StyledInput>
+			<div class="all-buttons">
+				<StyledInput v-if="link" type="text" :model-value="url" readonly wrapper-class="w-full">
+					<template #right>
+						<Button v-tooltip="'Copy Text'" aria-label="Copy Text" class="r-btn" @click="copyText">
+							<ClipboardCopyIcon aria-hidden="true" />
+						</Button>
+					</template>
+				</StyledInput>
 				<div class="button-row">
 					<Button v-if="canShare" v-tooltip="'Share'" aria-label="Share" icon-only @click="share">
 						<ShareIcon aria-hidden="true" />
@@ -236,14 +236,6 @@ defineExpose({
 	justify-content: center;
 }
 
-.iconified-input {
-	width: 100%;
-
-	input {
-		flex-basis: auto;
-	}
-}
-
 .button-row {
 	display: flex;
 	flex-direction: row;
@@ -295,19 +287,4 @@ defineExpose({
 		transition: none !important;
 	}
 }
-
-.resizable-textarea-wrapper {
-	position: relative;
-	height: 100%;
-
-	textarea {
-		width: 100%;
-		margin: 0;
-	}
-
-	.btn {
-		opacity: 1;
-		margin: 0;
-	}
-}
 </style>