chore: clean up a bunch of legacy styles (#5973)

* remove unused experimental-styles-within

* remove unused styles

* more cleanup + prepr

* Refactor nearly all legacy buttons to use ButtonStyled

* prepr

* Update MC account selector to modern version

* prepr

---------

Co-authored-by: Calum H. <calum@modrinth.com>

packages/ui/src/layouts/shared/console/layout.vue

@@ -76,7 +76,7 @@
 		<template #actions>
 			<div class="flex justify-end gap-2">
 				<ButtonStyled type="outlined">
-					<button class="!border !border-surface-4" @click="deleteModal?.hide()">
+					<button @click="deleteModal?.hide()">
 						<XIcon />
 						Cancel
 					</button>

packages/ui/src/layouts/shared/content-tab/components/ContentModpackCard.vue

@@ -242,7 +242,7 @@ onUnmounted(() => {
 								</button>
 							</ButtonStyled>
 							<template #popper>
-								<div class="experimental-styles-within grid grid-cols-[min-content] gap-1">
+								<div class="grid grid-cols-[min-content] gap-1">
 									<div class="flex min-w-48 items-center justify-between gap-8">
 										<h3 class="m-0 whitespace-nowrap text-base font-bold text-contrast">
 											{{ formatMessage(messages.contentHintTitle) }}
@@ -265,7 +265,6 @@ onUnmounted(() => {
 
 						<ButtonStyled v-if="hasSettingsListener" type="outlined" circular>
 							<button
-								class="!border !border-surface-4"
 								@click="
 									() => {
 										emit('settings')
@@ -301,7 +300,6 @@ onUnmounted(() => {
 							><TeleportOverflowMenu
 								:options="collapsedOptions"
 								class="flex @[700px]:hidden"
-								btn-class="!border-surface-4 !border"
 								@open="emit('dismiss-content-hint')"
 							>
 								<MoreVerticalIcon class="size-5" />
@@ -316,7 +314,7 @@ onUnmounted(() => {
 							</TeleportOverflowMenu></ButtonStyled
 						>
 						<template #popper>
-							<div class="experimental-styles-within grid grid-cols-[min-content] gap-1">
+							<div class="grid grid-cols-[min-content] gap-1">
 								<div class="flex min-w-48 items-center justify-between gap-8">
 									<h3 class="m-0 whitespace-nowrap text-base font-bold text-contrast">
 										{{ formatMessage(messages.contentHintTitle) }}

packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmBulkUpdateModal.vue

@@ -21,7 +21,7 @@
 		<template #actions>
 			<div class="flex gap-2 justify-end">
 				<ButtonStyled type="outlined">
-					<button class="!border !border-surface-4" @click="modal?.hide()">
+					<button @click="modal?.hide()">
 						<XIcon />
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>

packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmDeletionModal.vue

@@ -23,7 +23,7 @@
 		<template #actions>
 			<div class="flex gap-2 justify-end">
 				<ButtonStyled type="outlined">
-					<button class="!border !border-surface-4" @click="modal?.hide()">
+					<button @click="modal?.hide()">
 						<XIcon />
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>

packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmModpackUpdateModal.vue

@@ -29,7 +29,7 @@
 		<template #actions>
 			<div class="flex gap-2 justify-end">
 				<ButtonStyled type="outlined">
-					<button class="!border !border-surface-4" @click="handleCancel">
+					<button @click="handleCancel">
 						<XIcon />
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>

packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmReinstallModal.vue

@@ -20,7 +20,7 @@
 		<template #actions>
 			<div class="flex gap-2 justify-end">
 				<ButtonStyled type="outlined">
-					<button class="!border !border-surface-4" @click="modal?.hide()">
+					<button @click="modal?.hide()">
 						<XIcon />
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>

packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmRepairModal.vue

@@ -11,7 +11,7 @@
 		<template #actions>
 			<div class="flex gap-2 justify-end">
 				<ButtonStyled type="outlined">
-					<button class="!border !border-surface-4" @click="modal?.hide()">
+					<button @click="modal?.hide()">
 						<XIcon />
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>

packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmUnlinkModal.vue

@@ -20,7 +20,7 @@
 		<template #actions>
 			<div class="flex gap-2 justify-end">
 				<ButtonStyled type="outlined">
-					<button class="!border !border-surface-4" @click="modal?.hide()">
+					<button @click="modal?.hide()">
 						<XIcon />
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>

packages/ui/src/layouts/shared/content-tab/components/modals/ContentInstallModal.vue

@@ -70,7 +70,6 @@
 				<ButtonStyled type="outlined" circular>
 					<button
 						v-tooltip="`${hideUninstallable ? 'Show' : 'Hide'} unavailable`"
-						class="!border-surface-4 !border"
 						@click="hideUninstallable = !hideUninstallable"
 					>
 						<EyeOffIcon v-if="hideUninstallable" />
@@ -134,17 +133,13 @@
 				<Avatar :src="iconPreviewUrl ?? undefined" size="5rem" rounded="2xl" />
 				<div class="flex flex-col gap-2">
 					<ButtonStyled type="outlined">
-						<button class="!border-surface-4 !border" @click="selectIcon">
+						<button @click="selectIcon">
 							<UploadIcon />
 							{{ formatMessage(messages.selectIcon) }}
 						</button>
 					</ButtonStyled>
 					<ButtonStyled type="outlined">
-						<button
-							class="!border-surface-4 !border"
-							:disabled="!iconPreviewUrl"
-							@click="removeIcon"
-						>
+						<button :disabled="!iconPreviewUrl" @click="removeIcon">
 							<XIcon />
 							{{ formatMessage(messages.removeIcon) }}
 						</button>
@@ -213,7 +208,7 @@
 					</span>
 				</div>
 				<ButtonStyled type="outlined">
-					<button class="!border-surface-4 !border" @click="modal?.hide()">
+					<button @click="modal?.hide()">
 						<XIcon />
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>
@@ -222,7 +217,7 @@
 
 			<div v-else class="flex items-center justify-end gap-2">
 				<ButtonStyled type="outlined">
-					<button class="!border-surface-4 !border" @click="modal?.hide()">
+					<button @click="modal?.hide()">
 						<XIcon />
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>

packages/ui/src/layouts/shared/content-tab/components/modals/ContentUpdaterModal.vue

@@ -205,7 +205,7 @@
 			</div>
 			<div class="flex flex-row gap-2 shrink-0">
 				<ButtonStyled type="outlined">
-					<button class="!border-[1px] !border-surface-4" @click="handleCancel">
+					<button @click="handleCancel">
 						<XIcon />
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>

packages/ui/src/layouts/shared/content-tab/layout.vue

@@ -582,7 +582,7 @@ const confirmUnlinkModal = ref<InstanceType<typeof ConfirmUnlinkModal>>()
 											(ctx.disableAddContent?.value ? ctx.disableAddContentTooltip : undefined)
 										"
 										:disabled="ctx.isBusy.value || ctx.disableAddContent?.value"
-										class="!h-10 !border-button-bg !border-[1px]"
+										class="!h-10"
 										@click="ctx.uploadFiles"
 									>
 										<FolderOpenIcon class="size-5" />
@@ -722,7 +722,7 @@ const confirmUnlinkModal = ref<InstanceType<typeof ConfirmUnlinkModal>>()
 									(ctx.disableAddContent?.value ? ctx.disableAddContentTooltip : undefined)
 								"
 								:disabled="ctx.isBusy.value || ctx.disableAddContent?.value"
-								class="!h-10 !border-button-bg !border-[1px]"
+								class="!h-10"
 								@click="ctx.uploadFiles"
 							>
 								<FolderOpenIcon class="size-5" />

packages/ui/src/layouts/shared/files-tab/components/FileContextMenu.vue

@@ -11,7 +11,7 @@
 			<div
 				v-if="visible"
 				ref="menuRef"
-				class="experimental-styles-within fixed isolate z-[9999] flex w-fit min-w-[180px] flex-col gap-2 overflow-hidden rounded-2xl border border-solid border-surface-5 bg-bg-raised p-2 shadow-lg"
+				class="fixed isolate z-[9999] flex w-fit min-w-[180px] flex-col gap-2 overflow-hidden rounded-2xl border border-solid border-surface-5 bg-bg-raised p-2 shadow-lg"
 				:style="{ left: `${position.x}px`, top: `${position.y}px` }"
 				role="menu"
 				tabindex="-1"

packages/ui/src/layouts/shared/files-tab/components/FileNavbar.vue

@@ -114,7 +114,7 @@
 				<ButtonStyled v-if="showRefreshButton" type="outlined">
 					<button
 						type="button"
-						class="flex !h-10 items-center gap-2 !border-[1px] !border-surface-5"
+						class="flex !h-10 items-center gap-2"
 						:disabled="refreshing"
 						@click="handleRefresh"
 					>
@@ -135,7 +135,7 @@
 						:aria-label="formatMessage(messages.createNew)"
 						:disabled="disabled"
 						:tooltip="disabled ? disabledTooltip : undefined"
-						class="!h-10 justify-center gap-2 !border-[1px] !border-surface-5"
+						class="!h-10 justify-center gap-2"
 						:options="[
 							{ id: 'file', action: () => $emit('create', 'file') },
 							{ id: 'directory', action: () => $emit('create', 'directory') },

packages/ui/src/layouts/shared/files-tab/components/editor/EditorFindReplace.vue

@@ -94,7 +94,7 @@
 				</div>
 				<ButtonStyled type="outlined">
 					<button
-						class="!h-8 whitespace-nowrap !border !border-surface-5 px-2 text-sm disabled:opacity-50"
+						class="!h-8 whitespace-nowrap px-2 text-sm disabled:opacity-50"
 						:disabled="findMatchCount === 0"
 						@click="emit('replace', replaceQuery)"
 					>
@@ -103,7 +103,7 @@
 				</ButtonStyled>
 				<ButtonStyled type="outlined">
 					<button
-						class="!h-8 whitespace-nowrap !border !border-surface-5 px-2 text-sm disabled:opacity-50"
+						class="!h-8 whitespace-nowrap px-2 text-sm disabled:opacity-50"
 						:disabled="findMatchCount === 0"
 						@click="emit('replaceAll', replaceQuery)"
 					>

packages/ui/src/layouts/shared/files-tab/components/modals/FileCreateItemModal.vue

@@ -21,7 +21,7 @@
 		<template #actions>
 			<div class="flex gap-2 justify-end">
 				<ButtonStyled type="outlined">
-					<button class="!border !border-surface-4" @click="hide">
+					<button @click="hide">
 						<XIcon class="h-5 w-5" />
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>

packages/ui/src/layouts/shared/files-tab/components/modals/FileDeleteItemModal.vue

@@ -7,7 +7,7 @@
 		<template #actions>
 			<div class="flex gap-2 justify-end">
 				<ButtonStyled type="outlined">
-					<button class="!border !border-surface-4" @click="hide">
+					<button @click="hide">
 						<XIcon class="h-5 w-5" />
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>

packages/ui/src/layouts/shared/files-tab/components/modals/FileMoveItemModal.vue

@@ -26,7 +26,7 @@
 		<template #actions>
 			<div class="flex gap-2 justify-end">
 				<ButtonStyled type="outlined">
-					<button class="!border !border-surface-4" @click="hide">
+					<button @click="hide">
 						<XIcon class="h-5 w-5" />
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>

packages/ui/src/layouts/shared/files-tab/components/modals/FileRenameItemModal.vue

@@ -14,7 +14,7 @@
 		<template #actions>
 			<div class="flex gap-2 justify-end">
 				<ButtonStyled type="outlined">
-					<button class="!border !border-surface-4" @click="hide">
+					<button @click="hide">
 						<XIcon class="h-5 w-5" />
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>

packages/ui/src/layouts/shared/files-tab/components/modals/FileUnsavedChangesModal.vue

@@ -6,7 +6,7 @@
 		<template #actions>
 			<div class="flex justify-end gap-2">
 				<ButtonStyled type="outlined">
-					<button class="!border !border-surface-4" @click="handleCancel">
+					<button @click="handleCancel">
 						<XIcon />
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>

packages/ui/src/layouts/shared/files-tab/components/modals/FileUploadConflictModal.vue

@@ -54,7 +54,7 @@
 		<template #actions>
 			<div class="flex justify-end gap-2 pt-4">
 				<ButtonStyled type="outlined">
-					<button class="!border !border-surface-4" @click="hide">
+					<button @click="hide">
 						<XIcon />
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>

packages/ui/src/layouts/shared/files-tab/components/modals/FileUploadZipUrlModal.vue

@@ -63,7 +63,7 @@
 		<template #actions>
 			<div class="flex w-full items-center justify-end gap-2">
 				<ButtonStyled type="outlined">
-					<button type="button" class="!border !border-surface-4" @click="hide">
+					<button type="button" @click="hide">
 						<XIcon />
 						{{
 							submitted

packages/ui/src/layouts/shared/installation-settings/layout.vue

@@ -635,10 +635,7 @@ const messages = defineMessages({
 								</button>
 							</ButtonStyled>
 							<ButtonStyled type="outlined">
-								<button
-									class="!border !border-surface-5 !shadow-none"
-									@click="form.cancelEditing()"
-								>
+								<button @click="form.cancelEditing()">
 									<XIcon />
 									{{ formatMessage(commonMessages.cancelButton) }}
 								</button>

packages/ui/src/layouts/shared/server-settings/pages/network.vue

@@ -97,18 +97,18 @@
 							</template>
 							<template #cell-actions="{ row }">
 								<div class="flex items-center justify-end gap-2">
-									<ButtonStyled icon-only type="transparent" circular>
+									<ButtonStyled type="transparent" circular>
 										<button @click="copyText(`${serverIP}:${row.port}`)">
 											<CopyIcon />
 										</button>
 									</ButtonStyled>
 									<template v-if="!row.primary">
-										<ButtonStyled icon-only type="transparent" circular>
+										<ButtonStyled type="transparent" circular>
 											<button @click="showEditAllocationModal(row.port)">
 												<PencilIcon />
 											</button>
 										</ButtonStyled>
-										<ButtonStyled icon-only type="outlined" circular color="red">
+										<ButtonStyled type="outlined" circular color="red">
 											<button @click="showConfirmDeleteModal(row.port)">
 												<TrashIcon />
 											</button>