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/components/servers/ServerListing.vue

@@ -174,7 +174,6 @@
 				>
 					<button
 						v-tooltip="formatMessage(messages.downloadLatestBackupTooltip)"
-						class="!border-surface-4"
 						data-server-listing-button
 						@click="onDownloadBackup"
 					>
@@ -184,7 +183,6 @@
 				<ButtonStyled v-if="noticeButtons.copyId" type="outlined">
 					<button
 						v-tooltip="formatMessage(messages.copyCodeToClipboardTooltip)"
-						class="!border-surface-4"
 						data-server-listing-button
 						@click="copyToClipboard(server_id)"
 					>

packages/ui/src/components/servers/backups/BackupCreateModal.vue

@@ -47,7 +47,7 @@
 		<template #actions>
 			<div class="flex gap-2 justify-end">
 				<ButtonStyled type="outlined">
-					<button class="!border !border-surface-4" @click="hideModal">
+					<button @click="hideModal">
 						<XIcon />
 						Cancel
 					</button>

packages/ui/src/components/servers/backups/BackupDeleteModal.vue

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

packages/ui/src/components/servers/backups/BackupRenameModal.vue

@@ -23,7 +23,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 />
 						Cancel
 					</button>

packages/ui/src/components/servers/backups/BackupRestoreModal.vue

@@ -18,7 +18,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 />
 						Cancel
 					</button>

packages/ui/src/components/servers/content/ContentVersionFilter.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="experimental-styles-within flex w-full flex-col items-center gap-2">
+	<div class="flex w-full flex-col items-center gap-2">
 		<ManySelect
 			v-model="selectedPlatforms"
 			:tooltip="

packages/ui/src/components/servers/icons/ServerIcon.vue

@@ -1,6 +1,6 @@
 <template>
 	<div
-		class="experimental-styles-within relative flex size-16 shrink-0 overflow-hidden rounded-2xl border-[1px] border-solid border-button-border bg-button-bg shadow-sm"
+		class="relative flex size-16 shrink-0 overflow-hidden rounded-2xl border-[1px] border-solid border-button-border bg-button-bg shadow-sm"
 	>
 		<template v-if="hasMounted">
 			<img

packages/ui/src/components/servers/labels/Separator.vue

@@ -1,3 +1,3 @@
 <template>
-	<div class="experimental-styles-within h-1.5 w-1.5 bg-button-border rounded-full"></div>
+	<div class="h-1.5 w-1.5 bg-button-border rounded-full"></div>
 </template>