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/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>