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>

apps/frontend/src/components/ui/Modal.vue

@@ -12,9 +12,11 @@
 			<div class="modal-body">
 				<div v-if="header" class="header">
 					<strong>{{ header }}</strong>
-					<button class="iconified-button icon-only transparent" @click="hide">
-						<XIcon />
-					</button>
+					<ButtonStyled circular type="transparent">
+						<button @click="hide">
+							<XIcon />
+						</button>
+					</ButtonStyled>
 				</div>
 				<div class="content">
 					<slot />
@@ -27,9 +29,11 @@
 
 <script>
 import { XIcon } from '@modrinth/assets'
+import { ButtonStyled } from '@modrinth/ui'
 
 export default {
 	components: {
+		ButtonStyled,
 		XIcon,
 	},
 	props: {

apps/frontend/src/components/ui/ModrinthFooter.vue

@@ -223,9 +223,7 @@ function developerModeIncrement() {
 </script>
 
 <template>
-	<footer
-		class="footer-brand-background experimental-styles-within border-0 border-t-[1px] border-solid"
-	>
+	<footer class="footer-brand-background border-0 border-t-[1px] border-solid">
 		<div class="mx-auto flex max-w-screen-xl flex-col gap-6 p-6 pb-20 sm:px-12 md:py-12">
 			<div
 				class="grid grid-cols-1 gap-4 text-primary md:grid-cols-[1fr_2fr] lg:grid-cols-[auto_auto_auto_auto_auto]"

apps/frontend/src/components/ui/NotificationItem.vue

@@ -199,47 +199,9 @@
 		</span>
 		<div v-if="compact" class="notification__actions">
 			<template v-if="type === 'team_invite' || type === 'organization_invite'">
-				<button
-					v-tooltip="`Accept`"
-					class="iconified-button square-button brand-button button-transparent"
-					@click="
-						() => {
-							acceptTeamInvite(notification.body.team_id)
-							read()
-						}
-					"
-				>
-					<CheckIcon />
-				</button>
-				<button
-					v-tooltip="`Decline`"
-					class="iconified-button square-button danger-button button-transparent"
-					@click="
-						() => {
-							removeSelfFromTeam(notification.body.team_id)
-							read()
-						}
-					"
-				>
-					<XIcon />
-				</button>
-			</template>
-			<button
-				v-else-if="!notification.read"
-				v-tooltip="`Mark as read`"
-				class="iconified-button square-button button-transparent"
-				@click="read()"
-			>
-				<XIcon />
-			</button>
-		</div>
-		<div v-else class="notification__actions">
-			<div v-if="type !== null" class="input-group">
-				<template
-					v-if="(type === 'team_invite' || type === 'organization_invite') && !notification.read"
-				>
+				<ButtonStyled circular color="brand" type="transparent">
 					<button
-						class="iconified-button brand-button"
+						v-tooltip="`Accept`"
 						@click="
 							() => {
 								acceptTeamInvite(notification.body.team_id)
@@ -248,10 +210,11 @@
 						"
 					>
 						<CheckIcon />
-						Accept
 					</button>
+				</ButtonStyled>
+				<ButtonStyled circular color="red" type="transparent">
 					<button
-						class="iconified-button danger-button"
+						v-tooltip="`Decline`"
 						@click="
 							() => {
 								removeSelfFromTeam(notification.body.team_id)
@@ -260,51 +223,75 @@
 						"
 					>
 						<XIcon />
-						Decline
 					</button>
-				</template>
-				<button
-					v-else-if="!notification.read"
-					class="iconified-button"
-					:class="{ 'raised-button': raised }"
-					@click="read()"
-				>
-					<CheckIcon />
-					Mark as read
+				</ButtonStyled>
+			</template>
+			<ButtonStyled v-else-if="!notification.read" circular type="transparent">
+				<button v-tooltip="`Mark as read`" @click="read()">
+					<XIcon />
 				</button>
+			</ButtonStyled>
+		</div>
+		<div v-else class="notification__actions">
+			<div v-if="type !== null" class="input-group">
+				<template
+					v-if="(type === 'team_invite' || type === 'organization_invite') && !notification.read"
+				>
+					<ButtonStyled color="brand">
+						<button
+							@click="
+								() => {
+									acceptTeamInvite(notification.body.team_id)
+									read()
+								}
+							"
+						>
+							<CheckIcon />
+							Accept
+						</button>
+					</ButtonStyled>
+					<ButtonStyled color="red">
+						<button
+							@click="
+								() => {
+									removeSelfFromTeam(notification.body.team_id)
+									read()
+								}
+							"
+						>
+							<XIcon />
+							Decline
+						</button>
+					</ButtonStyled>
+				</template>
+				<ButtonStyled v-else-if="!notification.read">
+					<button @click="read()">
+						<CheckIcon />
+						Mark as read
+					</button>
+				</ButtonStyled>
 				<CopyCode v-if="flags.developerMode" :text="notification.id" />
 			</div>
 			<div v-else class="input-group">
-				<nuxt-link
-					v-if="notification.link && notification.link !== '#'"
-					class="iconified-button"
-					:class="{ 'raised-button': raised }"
-					:to="notification.link"
-					target="_blank"
-				>
-					<ExternalIcon />
-					Open link
-				</nuxt-link>
-				<button
-					v-for="(action, actionIndex) in notification.actions"
-					:key="actionIndex"
-					class="iconified-button"
-					:class="{ 'raised-button': raised }"
-					@click="performAction(notification, actionIndex)"
-				>
-					<CheckIcon v-if="action.title === 'Accept'" />
-					<XIcon v-else-if="action.title === 'Deny'" />
-					{{ action.title }}
-				</button>
-				<button
-					v-if="notification.actions.length === 0 && !notification.read"
-					class="iconified-button"
-					:class="{ 'raised-button': raised }"
-					@click="performAction(notification, null)"
-				>
-					<CheckIcon />
-					Mark as read
-				</button>
+				<ButtonStyled v-if="notification.link && notification.link !== '#'">
+					<nuxt-link :to="notification.link" target="_blank">
+						<ExternalIcon />
+						Open link
+					</nuxt-link>
+				</ButtonStyled>
+				<ButtonStyled v-for="(action, actionIndex) in notification.actions" :key="actionIndex">
+					<button @click="performAction(notification, actionIndex)">
+						<CheckIcon v-if="action.title === 'Accept'" />
+						<XIcon v-else-if="action.title === 'Deny'" />
+						{{ action.title }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled v-if="notification.actions.length === 0 && !notification.read">
+					<button @click="performAction(notification, null)">
+						<CheckIcon />
+						Mark as read
+					</button>
+				</ButtonStyled>
 				<CopyCode v-if="flags.developerMode" :text="notification.id" />
 			</div>
 		</div>
@@ -325,6 +312,7 @@ import {
 } from '@modrinth/assets'
 import {
 	Avatar,
+	ButtonStyled,
 	Categories,
 	CopyCode,
 	DoubleIcon,
@@ -594,10 +582,6 @@ function getLoaderCategories(ver) {
 		gap: var(--spacing-card-sm);
 	}
 
-	.notification__actions .iconified-button.square-button svg {
-		margin-right: 0;
-	}
-
 	.unknown-type {
 		color: var(--color-red);
 	}
@@ -618,4 +602,8 @@ function getLoaderCategories(ver) {
 		color: var(--color-blue);
 	}
 }
+
+.title-link {
+	@apply underline hover:brightness-[--hover-brightness];
+}
 </style>

apps/frontend/src/components/ui/OptionGroup.vue

@@ -1,7 +1,7 @@
 <template>
 	<nav
 		ref="scrollContainer"
-		class="card-shadow experimental-styles-within relative flex w-fit overflow-x-auto rounded-full bg-bg-raised p-1 text-sm font-bold"
+		class="card-shadow relative flex w-fit overflow-x-auto rounded-full bg-bg-raised p-1 text-sm font-bold"
 	>
 		<button
 			v-for="(option, index) in options"

apps/frontend/src/components/ui/OrganizationProjectTransferModal.vue

@@ -67,50 +67,55 @@
 						</div>
 
 						<div class="table-cell">
-							<nuxt-link
-								class="btn icon-only"
-								:to="`/project/${project.slug ? project.slug : project.id}/settings`"
-							>
-								<SettingsIcon />
-							</nuxt-link>
+							<ButtonStyled circular>
+								<nuxt-link :to="`/project/${project.slug ? project.slug : project.id}/settings`">
+									<SettingsIcon />
+								</nuxt-link>
+							</ButtonStyled>
 						</div>
 					</div>
 				</div>
 				<div class="push-right input-group">
-					<Button @click="$refs.modalOpen?.hide()">
-						<XIcon />
-						Cancel
-					</Button>
-					<Button :disabled="!selectedProjects?.length" color="primary" @click="onSubmitHandler()">
-						<TransferIcon />
-						<span>
-							Transfer
+					<ButtonStyled type="outlined">
+						<button @click="$refs.modalOpen?.hide()">
+							<XIcon />
+							Cancel
+						</button>
+					</ButtonStyled>
+					<ButtonStyled color="brand">
+						<button :disabled="!selectedProjects?.length" @click="onSubmitHandler()">
+							<TransferIcon />
 							<span>
-								{{
-									selectedProjects.length === props.projects.length
-										? 'All'
-										: selectedProjects.length
-								}}
+								Transfer
+								<span>
+									{{
+										selectedProjects.length === props.projects.length
+											? 'All'
+											: selectedProjects.length
+									}}
+								</span>
+								<span>
+									{{ ' ' }}
+									{{ selectedProjects.length === 1 ? 'project' : 'projects' }}
+								</span>
 							</span>
-							<span>
-								{{ ' ' }}
-								{{ selectedProjects.length === 1 ? 'project' : 'projects' }}
-							</span>
-						</span>
-					</Button>
+						</button>
+					</ButtonStyled>
 				</div>
 			</div>
 		</Modal>
-		<Button @click="$refs.modalOpen?.show()">
-			<TransferIcon />
-			<span>Transfer projects</span>
-		</Button>
+		<ButtonStyled>
+			<button @click="$refs.modalOpen?.show()">
+				<TransferIcon />
+				<span>Transfer projects</span>
+			</button>
+		</ButtonStyled>
 	</div>
 </template>
 
 <script setup>
 import { BoxIcon, SettingsIcon, TransferIcon, XIcon } from '@modrinth/assets'
-import { Avatar, Button, Checkbox, CopyCode, Modal } from '@modrinth/ui'
+import { Avatar, ButtonStyled, Checkbox, CopyCode, Modal } from '@modrinth/ui'
 import { formatProjectType } from '@modrinth/utils'
 
 const EDIT_DETAILS = 1 << 2

apps/frontend/src/components/ui/banner/SubscriptionPaymentFailedBanner.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { SettingsIcon } from '@modrinth/assets'
-import { defineMessages, PagewideBanner, useVIntl } from '@modrinth/ui'
+import { ButtonStyled, defineMessages, PagewideBanner, useVIntl } from '@modrinth/ui'
 
 const { formatMessage } = useVIntl()
 
@@ -30,10 +30,12 @@ const messages = defineMessages({
 			<span>{{ formatMessage(messages.description) }}</span>
 		</template>
 		<template #actions>
-			<nuxt-link class="btn" to="/settings/billing">
-				<SettingsIcon aria-hidden="true" />
-				{{ formatMessage(messages.action) }}
-			</nuxt-link>
+			<ButtonStyled>
+				<nuxt-link to="/settings/billing">
+					<SettingsIcon aria-hidden="true" />
+					{{ formatMessage(messages.action) }}
+				</nuxt-link>
+			</ButtonStyled>
 		</template>
 	</PagewideBanner>
 </template>

apps/frontend/src/components/ui/banner/VerifyEmailBanner.vue

@@ -1,6 +1,12 @@
 <script setup lang="ts">
 import { SettingsIcon } from '@modrinth/assets'
-import { defineMessages, injectNotificationManager, PagewideBanner, useVIntl } from '@modrinth/ui'
+import {
+	ButtonStyled,
+	defineMessages,
+	injectNotificationManager,
+	PagewideBanner,
+	useVIntl,
+} from '@modrinth/ui'
 import { FetchError } from 'ofetch'
 
 const { addNotification } = injectNotificationManager()
@@ -91,13 +97,17 @@ async function handleResendEmailVerification() {
 			</span>
 		</template>
 		<template #actions>
-			<button v-if="hasEmail" class="btn" @click="handleResendEmailVerification">
-				{{ formatMessage(verifyEmailBannerMessages.action) }}
-			</button>
-			<nuxt-link v-else class="btn" to="/settings/account">
-				<SettingsIcon aria-hidden="true" />
-				{{ formatMessage(addEmailBannerMessages.action) }}
-			</nuxt-link>
+			<ButtonStyled v-if="hasEmail">
+				<button @click="handleResendEmailVerification">
+					{{ formatMessage(verifyEmailBannerMessages.action) }}
+				</button>
+			</ButtonStyled>
+			<ButtonStyled v-else>
+				<nuxt-link to="/settings/account">
+					<SettingsIcon aria-hidden="true" />
+					{{ formatMessage(addEmailBannerMessages.action) }}
+				</nuxt-link>
+			</ButtonStyled>
 		</template>
 	</PagewideBanner>
 </template>

apps/frontend/src/components/ui/charts/ChartDisplay.vue

@@ -81,15 +81,21 @@
 							</span>
 						</h2>
 						<div class="chart-controls__buttons">
-							<Button v-tooltip="'Toggle project colors'" icon-only @click="onToggleColors">
-								<PaletteIcon />
-							</Button>
-							<Button v-tooltip="'Download this data as CSV'" icon-only @click="onDownloadSetAsCSV">
-								<DownloadIcon />
-							</Button>
-							<Button v-tooltip="'Refresh the chart'" icon-only @click="resetCharts">
-								<UpdatedIcon />
-							</Button>
+							<ButtonStyled circular type="outlined">
+								<button v-tooltip="'Toggle project colors'" @click="onToggleColors">
+									<PaletteIcon />
+								</button>
+							</ButtonStyled>
+							<ButtonStyled circular type="outlined">
+								<button v-tooltip="'Download this data as CSV'" @click="onDownloadSetAsCSV">
+									<DownloadIcon />
+								</button>
+							</ButtonStyled>
+							<ButtonStyled circular type="outlined">
+								<button v-tooltip="'Refresh the chart'" @click="resetCharts">
+									<UpdatedIcon />
+								</button>
+							</ButtonStyled>
 							<DropdownSelect
 								v-model="selectedRange"
 								class="range-dropdown"
@@ -156,8 +162,8 @@
 								<template v-for="project in selectedDataSetProjects" :key="project">
 									<button
 										v-tooltip="project.title"
-										:class="`legend__item button-base btn-transparent ${
-											!projectIsOnDisplay(project.id) ? 'btn-dimmed' : ''
+										:class="`legend__item button-base legend__item-transparent ${
+											!projectIsOnDisplay(project.id) ? 'legend__item-dimmed' : ''
 										}`"
 										@click="
 											() =>
@@ -311,7 +317,7 @@
 <script setup lang="ts">
 import { DownloadIcon, PaletteIcon, UpdatedIcon } from '@modrinth/assets'
 import {
-	Button,
+	ButtonStyled,
 	Card,
 	DropdownSelect,
 	useCompactNumber,
@@ -842,7 +848,7 @@ const defaultRanges: RangeObject[] = [
 	}
 }
 
-.btn-transparent {
+.legend__item-transparent {
 	background-color: transparent;
 	border: none;
 	cursor: pointer;
@@ -851,7 +857,7 @@ const defaultRanges: RangeObject[] = [
 	font-weight: var(--font-weight-regular);
 }
 
-.btn-dimmed {
+.legend__item-dimmed {
 	opacity: 0.5;
 }
 

apps/frontend/src/components/ui/create/CollectionCreateModal.vue

@@ -38,13 +38,13 @@
 				{{ formatMessage(messages.collectionInfo, { count: projectIds.length }) }}
 			</p>
 			<div class="flex justify-end gap-2">
-				<ButtonStyled class="w-24">
+				<ButtonStyled type="outlined">
 					<button @click="modal.hide()">
 						<XIcon aria-hidden="true" />
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>
 				</ButtonStyled>
-				<ButtonStyled color="brand" class="w-36">
+				<ButtonStyled color="brand">
 					<button :disabled="hasHitLimit" @click="create">
 						<PlusIcon aria-hidden="true" />
 						{{ formatMessage(messages.createCollection) }}

apps/frontend/src/components/ui/create/OrganizationCreateModal.vue

@@ -59,13 +59,13 @@
 				{{ formatMessage(messages.ownershipInfo) }}
 			</p>
 			<div class="flex justify-end gap-2">
-				<ButtonStyled class="w-24">
+				<ButtonStyled type="outlined">
 					<button @click="hide">
 						<XIcon aria-hidden="true" />
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>
 				</ButtonStyled>
-				<ButtonStyled color="brand" class="w-40">
+				<ButtonStyled color="brand">
 					<button :disabled="hasHitLimit" @click="createOrganization">
 						<PlusIcon aria-hidden="true" />
 						{{ formatMessage(messages.createOrganization) }}

apps/frontend/src/components/ui/create/ProjectCreateModal.vue

@@ -110,13 +110,13 @@
 				<span>{{ formatMessage(messages.summaryDescription) }}</span>
 			</div>
 			<div class="flex justify-end gap-2.5">
-				<ButtonStyled class="w-24">
+				<ButtonStyled type="outlined">
 					<button @click="cancel">
 						<XIcon aria-hidden="true" />
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>
 				</ButtonStyled>
-				<ButtonStyled color="brand" class="w-32">
+				<ButtonStyled color="brand">
 					<button v-tooltip="missingFieldsTooltip" :disabled="disableCreate" @click="createProject">
 						<PlusIcon aria-hidden="true" />
 						{{ formatMessage(messages.createProject) }}

apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue

@@ -58,24 +58,20 @@
 		</div>
 		<template #actions>
 			<div v-if="currentStage === 'completion'" class="mt-4 flex w-full gap-3">
-				<ButtonStyled class="flex-1">
-					<button class="w-full text-contrast" @click="handleClose">
+				<ButtonStyled>
+					<button class="w-full flex-1 text-contrast" @click="handleClose">
 						{{ formatMessage(commonMessages.closeButton) }}
 					</button>
 				</ButtonStyled>
-				<ButtonStyled class="flex-1">
-					<button class="w-full text-contrast" @click="handleViewTransactions">
+				<ButtonStyled>
+					<button class="w-full flex-1 text-contrast" @click="handleViewTransactions">
 						{{ formatMessage(messages.transactionsButton) }}
 					</button>
 				</ButtonStyled>
 			</div>
 			<div v-else class="mt-4 flex flex-col justify-end gap-2 sm:flex-row">
 				<ButtonStyled type="outlined">
-					<button
-						class="!border-surface-5"
-						:disabled="leftButtonConfig.disabled"
-						@click="leftButtonConfig.handler"
-					>
+					<button :disabled="leftButtonConfig.disabled" @click="leftButtonConfig.handler">
 						<component :is="leftButtonConfig.icon" />
 						{{ leftButtonConfig.label }}
 					</button>

apps/frontend/src/components/ui/moderation/ModerationProjectNags.vue

@@ -30,9 +30,13 @@
 				</ButtonStyled>
 			</div>
 		</div>
-		<div v-if="!collapsed" class="grid-display width-16 mt-4">
-			<div v-for="nag in visibleNags" :key="nag.id" class="grid-display__item">
-				<span class="flex items-center gap-2 font-semibold">
+		<div v-if="!collapsed" class="mt-4 grid grid-cols-[repeat(auto-fit,minmax(15rem,1fr))] gap-2">
+			<div
+				v-for="nag in visibleNags"
+				:key="nag.id"
+				class="flex flex-col gap-3 rounded-2xl border border-solid border-surface-5 bg-surface-2 p-4"
+			>
+				<span class="flex items-center gap-2 font-medium text-contrast">
 					<component
 						:is="nag.icon || getDefaultIcon(nag.status)"
 						v-tooltip="getStatusTooltip(nag.status)"
@@ -52,7 +56,7 @@
 					:to="`/${project.project_type}/${project.slug ? project.slug : project.id}/${
 						nag.link.path
 					}`"
-					class="goto-link"
+					class="goto-link mt-auto"
 				>
 					{{ getFormattedMessage(nag.link.title) }}
 					<ChevronRightIcon aria-hidden="true" class="featured-header-chevron" />

apps/frontend/src/components/ui/moderation/ModerationReportCard.vue

@@ -154,8 +154,8 @@
 					@update-thread="updateThread"
 				>
 					<template #closedActions>
-						<ButtonStyled v-if="isStaff(auth.user)" color="green" class="mt-2">
-							<button class="w-full gap-2 sm:w-auto" @click="reopenReport()">
+						<ButtonStyled v-if="isStaff(auth.user)" color="green">
+							<button class="mt-2 w-full gap-2 sm:w-auto" @click="reopenReport()">
 								<CheckCircleIcon class="size-4" />
 								Reopen Thread
 							</button>

apps/frontend/src/components/ui/moderation/ModerationTechRevCard.vue

@@ -1201,7 +1201,6 @@ async function handleSubmitReview(verdict: 'safe' | 'unsafe') {
 								:href="file.download_url"
 								:title="`Download ${file.file_name}`"
 								:download="file.file_name"
-								class="!border-px !border-surface-4"
 								tabindex="0"
 							>
 								<DownloadIcon /> Download
@@ -1362,7 +1361,6 @@ async function handleSubmitReview(verdict: 'safe' | 'unsafe') {
 												"
 											>
 												<button
-													class="!border-[1px]"
 													:disabled="updatingDetails.has(flag.detail.id)"
 													@click="updateDetailStatus(flag.detail.id, 'safe')"
 												>
@@ -1379,7 +1377,6 @@ async function handleSubmitReview(verdict: 'safe' | 'unsafe') {
 												"
 											>
 												<button
-													class="!border-[1px]"
 													:disabled="updatingDetails.has(flag.detail.id)"
 													@click="updateDetailStatus(flag.detail.id, 'unsafe')"
 												>

apps/frontend/src/components/ui/project-settings/CompatibilityCard.vue

@@ -40,11 +40,7 @@
 					</div>
 				</div>
 				<ButtonStyled v-if="content" type="outlined">
-					<button
-						class="!border-[1px]"
-						:disabled="!hasPermission"
-						@click="handleSwitchCompatibility"
-					>
+					<button :disabled="!hasPermission" @click="handleSwitchCompatibility">
 						<ArrowLeftRightIcon />
 						Switch type
 					</button>

apps/frontend/src/components/ui/servers/marketing/MedalPlanPromotion.vue

@@ -21,10 +21,10 @@
 				</span>
 			</div>
 		</div>
-		<ButtonStyled color="medal-promo" type="outlined" size="large" class="z-10 my-auto mt-2">
+		<ButtonStyled color="medal-promo" type="outlined" size="large">
 			<nuxt-link
 				to="https://medal.tv/modrinth"
-				class="z-10 flex w-full items-center justify-center gap-1 md:mt-0 md:w-auto"
+				class="z-10 my-auto mt-2 flex w-full items-center justify-center gap-1 md:mt-0 md:w-auto"
 				>{{ formatMessage(messages.learnMoreButton) }} <ExternalIcon
 			/></nuxt-link>
 		</ButtonStyled>

apps/frontend/src/components/ui/thread/ConversationThread.vue

@@ -23,14 +23,12 @@
 					I confirm that I have properly addressed the moderators' comments.
 				</Checkbox>
 				<div class="input-group push-right">
-					<button
-						class="iconified-button moderation-button"
-						:disabled="!submissionConfirmation"
-						@click="resubmit()"
-					>
-						<ScaleIcon aria-hidden="true" />
-						Resubmit for review
-					</button>
+					<ButtonStyled color="orange">
+						<button :disabled="!submissionConfirmation" @click="resubmit()">
+							<ScaleIcon aria-hidden="true" />
+							Resubmit for review
+						</button>
+					</ButtonStyled>
 				</div>
 			</div>
 		</Modal>
@@ -55,14 +53,12 @@
 					I acknowledge that the moderators do not actively monitor the thread.
 				</Checkbox>
 				<div class="input-group push-right">
-					<button
-						class="btn btn-primary"
-						:disabled="!replyConfirmation"
-						@click="sendReplyFromModal()"
-					>
-						<ReplyIcon aria-hidden="true" />
-						Reply to thread
-					</button>
+					<ButtonStyled color="brand">
+						<button :disabled="!replyConfirmation" @click="sendReplyFromModal()">
+							<ReplyIcon aria-hidden="true" />
+							Reply to thread
+						</button>
+					</ButtonStyled>
 				</div>
 			</div>
 		</Modal>
@@ -85,10 +81,12 @@
 		</div>
 		<template v-if="report && report.closed">
 			<p>This thread is closed and new messages cannot be sent to it.</p>
-			<button v-if="isStaff(auth.user)" class="iconified-button" @click="reopenReport()">
-				<CheckCircleIcon aria-hidden="true" />
-				Reopen thread
-			</button>
+			<ButtonStyled v-if="isStaff(auth.user)">
+				<button @click="reopenReport()">
+					<CheckCircleIcon aria-hidden="true" />
+					Reopen thread
+				</button>
+			</ButtonStyled>
 		</template>
 		<template v-else-if="!report || !report.closed">
 			<div class="markdown-editor-spacing">
@@ -99,196 +97,175 @@
 				/>
 			</div>
 			<div class="input-group">
-				<button
-					v-if="sortedMessages.length > 0"
-					class="btn btn-primary"
-					:disabled="!replyBody"
-					@click="isApproved(project) && !isStaff(auth.user) ? openReplyModal() : sendReply()"
-				>
-					<ReplyIcon aria-hidden="true" />
-					Reply
-				</button>
-				<button
-					v-else
-					class="btn btn-primary"
-					:disabled="!replyBody"
-					@click="isApproved(project) && !isStaff(auth.user) ? openReplyModal() : sendReply()"
-				>
-					<SendIcon aria-hidden="true" />
-					Send
-				</button>
-				<button
-					v-if="isStaff(auth.user)"
-					class="btn"
-					:disabled="!replyBody"
-					@click="sendReply(null, true)"
-				>
-					<ScaleIcon aria-hidden="true" />
-					Add private note
-				</button>
+				<ButtonStyled color="brand">
+					<button
+						v-if="sortedMessages.length > 0"
+						:disabled="!replyBody"
+						@click="isApproved(project) && !isStaff(auth.user) ? openReplyModal() : sendReply()"
+					>
+						<ReplyIcon aria-hidden="true" />
+						Reply
+					</button>
+					<button
+						v-else
+						:disabled="!replyBody"
+						@click="isApproved(project) && !isStaff(auth.user) ? openReplyModal() : sendReply()"
+					>
+						<SendIcon aria-hidden="true" />
+						Send
+					</button>
+				</ButtonStyled>
+				<ButtonStyled v-if="isStaff(auth.user)">
+					<button :disabled="!replyBody" @click="sendReply(null, true)">
+						<ScaleIcon aria-hidden="true" />
+						Add private note
+					</button>
+				</ButtonStyled>
 				<template v-if="currentMember && !isStaff(auth.user)">
 					<template v-if="isRejected(project)">
-						<button
-							v-if="replyBody"
-							class="iconified-button moderation-button"
-							@click="openResubmitModal(true)"
-						>
-							<ScaleIcon aria-hidden="true" />
-							Resubmit for review with reply
-						</button>
-						<button
-							v-else
-							class="iconified-button moderation-button"
-							@click="openResubmitModal(false)"
-						>
-							<ScaleIcon aria-hidden="true" />
-							Resubmit for review
-						</button>
+						<ButtonStyled color="orange">
+							<button v-if="replyBody" @click="openResubmitModal(true)">
+								<ScaleIcon aria-hidden="true" />
+								Resubmit for review with reply
+							</button>
+							<button v-else @click="openResubmitModal(false)">
+								<ScaleIcon aria-hidden="true" />
+								Resubmit for review
+							</button>
+						</ButtonStyled>
 					</template>
 				</template>
 				<div class="spacer"></div>
 				<div class="input-group extra-options">
 					<template v-if="report">
 						<template v-if="isStaff(auth.user)">
-							<button
-								v-if="replyBody"
-								class="iconified-button danger-button"
-								@click="closeReport(true)"
-							>
-								<CheckCircleIcon aria-hidden="true" />
-								Close with reply
-							</button>
-							<button v-else class="iconified-button danger-button" @click="closeReport()">
-								<CheckCircleIcon aria-hidden="true" />
-								Close thread
-							</button>
+							<ButtonStyled color="red">
+								<button v-if="replyBody" @click="closeReport(true)">
+									<CheckCircleIcon aria-hidden="true" />
+									Close with reply
+								</button>
+								<button v-else @click="closeReport()">
+									<CheckCircleIcon aria-hidden="true" />
+									Close thread
+								</button>
+							</ButtonStyled>
 						</template>
 					</template>
 					<template v-if="project">
 						<template v-if="isStaff(auth.user)">
-							<button
-								v-if="replyBody"
-								class="btn btn-green"
-								:disabled="isApproved(project)"
-								@click="sendReply(requestedStatus)"
-							>
-								<CheckIcon aria-hidden="true" />
-								Approve with reply
-							</button>
-							<button
-								v-else
-								class="btn btn-green"
-								:disabled="isApproved(project)"
-								@click="setStatus(requestedStatus)"
-							>
-								<CheckIcon aria-hidden="true" />
-								Approve
-							</button>
+							<ButtonStyled v-if="replyBody" color="green">
+								<button :disabled="isApproved(project)" @click="sendReply(requestedStatus)">
+									<CheckIcon aria-hidden="true" />
+									Approve with reply
+								</button>
+							</ButtonStyled>
+							<ButtonStyled v-else color="green">
+								<button :disabled="isApproved(project)" @click="setStatus(requestedStatus)">
+									<CheckIcon aria-hidden="true" />
+									Approve
+								</button>
+							</ButtonStyled>
 							<div class="joined-buttons">
-								<button
-									v-if="replyBody"
-									class="btn btn-danger"
-									:disabled="project.status === 'rejected'"
-									@click="sendReply('rejected')"
-								>
-									<XIcon aria-hidden="true" />
-									Reject with reply
-								</button>
-								<button
-									v-else
-									class="btn btn-danger"
-									:disabled="project.status === 'rejected'"
-									@click="setStatus('rejected')"
-								>
-									<XIcon aria-hidden="true" />
-									Reject
-								</button>
-								<OverflowMenu
-									class="btn btn-danger btn-dropdown-animation icon-only"
-									:options="
-										replyBody
-											? [
-													{
-														id: 'withhold-reply',
-														color: 'danger',
-														action: () => {
-															sendReply('withheld')
+								<ButtonStyled v-if="replyBody" color="red">
+									<button :disabled="project.status === 'rejected'" @click="sendReply('rejected')">
+										<XIcon aria-hidden="true" />
+										Reject with reply
+									</button>
+								</ButtonStyled>
+								<ButtonStyled v-else color="red">
+									<button :disabled="project.status === 'rejected'" @click="setStatus('rejected')">
+										<XIcon aria-hidden="true" />
+										Reject
+									</button>
+								</ButtonStyled>
+								<ButtonStyled color="red">
+									<OverflowMenu
+										class="btn-dropdown-animation"
+										:options="
+											replyBody
+												? [
+														{
+															id: 'withhold-reply',
+															color: 'danger',
+															action: () => {
+																sendReply('withheld')
+															},
+															hoverFilled: true,
+															disabled: project.status === 'withheld',
 														},
-														hoverFilled: true,
-														disabled: project.status === 'withheld',
-													},
-													{
-														id: 'set-to-draft-reply',
-														action: () => {
-															sendReply('draft')
+														{
+															id: 'set-to-draft-reply',
+															action: () => {
+																sendReply('draft')
+															},
+															hoverFilled: true,
+															disabled: project.status === 'draft',
 														},
-														hoverFilled: true,
-														disabled: project.status === 'draft',
-													},
-													{
-														id: 'send-to-review-reply',
-														action: () => {
-															sendReply('processing', true)
+														{
+															id: 'send-to-review-reply',
+															action: () => {
+																sendReply('processing', true)
+															},
+															hoverFilled: true,
+															disabled: project.status === 'processing',
 														},
-														hoverFilled: true,
-														disabled: project.status === 'processing',
-													},
-												]
-											: [
-													{
-														id: 'withhold',
-														color: 'danger',
-														action: () => {
-															setStatus('withheld')
+													]
+												: [
+														{
+															id: 'withhold',
+															color: 'danger',
+															action: () => {
+																setStatus('withheld')
+															},
+															hoverFilled: true,
+															disabled: project.status === 'withheld',
 														},
-														hoverFilled: true,
-														disabled: project.status === 'withheld',
-													},
-													{
-														id: 'set-to-draft',
-														action: () => {
-															setStatus('draft')
+														{
+															id: 'set-to-draft',
+															action: () => {
+																setStatus('draft')
+															},
+															hoverFilled: true,
+															disabled: project.status === 'draft',
 														},
-														hoverFilled: true,
-														disabled: project.status === 'draft',
-													},
-													{
-														id: 'send-to-review',
-														action: () => {
-															setStatus('processing')
+														{
+															id: 'send-to-review',
+															action: () => {
+																setStatus('processing')
+															},
+															hoverFilled: true,
+															disabled: project.status === 'processing',
 														},
-														hoverFilled: true,
-														disabled: project.status === 'processing',
-													},
-												]
-									"
-								>
-									<DropdownIcon style="rotate: 180deg" aria-hidden="true" />
-									<template #withhold-reply>
-										<EyeOffIcon aria-hidden="true" />
-										Withhold with reply
-									</template>
-									<template #withhold>
-										<EyeOffIcon aria-hidden="true" />
-										Withhold
-									</template>
-									<template #set-to-draft-reply>
-										<FileTextIcon aria-hidden="true" />
-										Set to draft with reply
-									</template>
-									<template #set-to-draft>
-										<FileTextIcon aria-hidden="true" />
-										Set to draft
-									</template>
-									<template #send-to-review-reply>
-										<ScaleIcon aria-hidden="true" />
-										Send to review with reply
-									</template>
-									<template #send-to-review>
-										<ScaleIcon aria-hidden="true" />
-										Send to review
-									</template>
-								</OverflowMenu>
+													]
+										"
+									>
+										<DropdownIcon aria-hidden="true" />
+										<template #withhold-reply>
+											<EyeOffIcon aria-hidden="true" />
+											Withhold with reply
+										</template>
+										<template #withhold>
+											<EyeOffIcon aria-hidden="true" />
+											Withhold
+										</template>
+										<template #set-to-draft-reply>
+											<FileTextIcon aria-hidden="true" />
+											Set to draft with reply
+										</template>
+										<template #set-to-draft>
+											<FileTextIcon aria-hidden="true" />
+											Set to draft
+										</template>
+										<template #send-to-review-reply>
+											<ScaleIcon aria-hidden="true" />
+											Send to review with reply
+										</template>
+										<template #send-to-review>
+											<ScaleIcon aria-hidden="true" />
+											Send to review
+										</template>
+									</OverflowMenu>
+								</ButtonStyled>
 							</div>
 						</template>
 					</template>
@@ -311,6 +288,7 @@ import {
 	XIcon,
 } from '@modrinth/assets'
 import {
+	ButtonStyled,
 	Checkbox,
 	CopyCode,
 	injectNotificationManager,

apps/frontend/src/components/ui/thread/ThreadMessage.vue

@@ -104,20 +104,22 @@
 			</span>
 		</span>
 		<div v-if="isStaff(auth.user) && message.author_id === auth.user.id" class="message__actions">
-			<OverflowMenu
-				class="btn btn-transparent icon-only"
-				:options="[
-					{
-						id: 'delete',
-						action: () => deleteMessage(),
-						color: 'red',
-						hoverFilled: true,
-					},
-				]"
-			>
-				<MoreHorizontalIcon />
-				<template #delete> <TrashIcon /> Delete </template>
-			</OverflowMenu>
+			<ButtonStyled circular type="transparent">
+				<OverflowMenu
+					class="btn-dropdown-animation"
+					:options="[
+						{
+							id: 'delete',
+							action: () => deleteMessage(),
+							color: 'red',
+							hoverFilled: true,
+						},
+					]"
+				>
+					<MoreHorizontalIcon />
+					<template #delete> <TrashIcon /> Delete </template>
+				</OverflowMenu>
+			</ButtonStyled>
 		</div>
 	</div>
 </template>
@@ -135,6 +137,7 @@ import {
 	AutoLink,
 	Avatar,
 	Badge,
+	ButtonStyled,
 	OverflowMenu,
 	useFormatDateTime,
 	useRelativeTime,