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/pages/organization/[id].vue

@@ -4,7 +4,7 @@
 	</div>
 	<div
 		v-else-if="organization"
-		class="experimental-styles-within new-page sidebar"
+		class="new-page sidebar"
 		:class="{ 'alt-layout': cosmetics.leftContentLayout || routeHasSettings }"
 	>
 		<ModalCreation ref="modal_creation" :organization-id="organization.id" />
@@ -176,14 +176,18 @@
 					<h2>Invitation to join {{ organization.name }}</h2>
 					<p>You have been invited to join {{ organization.name }}.</p>
 					<div class="input-group">
-						<button class="iconified-button brand-button" @click="onAcceptInvite">
-							<CheckIcon />
-							Accept
-						</button>
-						<button class="iconified-button danger-button" @click="onDeclineInvite">
-							<XIcon />
-							Decline
-						</button>
+						<ButtonStyled color="brand">
+							<button @click="onAcceptInvite">
+								<CheckIcon />
+								Accept
+							</button>
+						</ButtonStyled>
+						<ButtonStyled color="red">
+							<button @click="onDeclineInvite">
+								<XIcon />
+								Decline
+							</button>
+						</ButtonStyled>
 					</div>
 				</div>
 				<div v-if="navLinks.length > 2" class="mb-4 max-w-full overflow-x-auto">

apps/frontend/src/pages/organization/[id]/settings/index.vue

@@ -2,7 +2,7 @@
 import { TrashIcon, UploadIcon } from '@modrinth/assets'
 import {
 	Avatar,
-	Button,
+	ButtonStyled,
 	ConfirmModal,
 	FileInput,
 	injectNotificationManager,
@@ -161,27 +161,27 @@ const onDeleteOrganization = useClientTry(async () => {
 					size="md"
 					class="project__icon"
 				/>
-				<div class="input-stack">
-					<FileInput
-						id="project-icon"
-						:max-size="262144"
-						:show-icon="true"
-						accept="image/png,image/jpeg,image/gif,image/webp"
-						class="btn"
-						prompt="Upload icon"
-						:disabled="!hasPermission"
-						@change="showPreviewImage"
-					>
-						<UploadIcon />
-					</FileInput>
-					<Button
-						v-if="!deletedIcon && (previewImage || organization.icon_url)"
-						:disabled="!hasPermission"
-						@click="markIconForDeletion"
-					>
-						<TrashIcon />
-						Remove icon
-					</Button>
+				<div class="flex flex-col gap-2">
+					<ButtonStyled>
+						<FileInput
+							id="project-icon"
+							:max-size="262144"
+							:show-icon="true"
+							accept="image/png,image/jpeg,image/gif,image/webp"
+							class="button-like"
+							prompt="Upload icon"
+							:disabled="!hasPermission"
+							@change="showPreviewImage"
+						>
+							<UploadIcon />
+						</FileInput>
+					</ButtonStyled>
+					<ButtonStyled v-if="!deletedIcon && (previewImage || organization.icon_url)">
+						<button :disabled="!hasPermission" @click="markIconForDeletion">
+							<TrashIcon />
+							Remove icon
+						</button>
+					</ButtonStyled>
 				</div>
 			</div>
 
@@ -231,10 +231,12 @@ const onDeleteOrganization = useClientTry(async () => {
 				Deleting your organization will transfer all of its projects to the organization owner. This
 				action cannot be undone.
 			</p>
-			<Button color="danger" @click="() => $refs.modal_deletion.show()">
-				<TrashIcon />
-				Delete organization
-			</Button>
+			<ButtonStyled color="red">
+				<button @click="() => $refs.modal_deletion.show()">
+					<TrashIcon />
+					Delete organization
+				</button>
+			</ButtonStyled>
 		</div>
 		<UnsavedChangesPopup
 			:original="originalState"

apps/frontend/src/pages/organization/[id]/settings/members.vue

@@ -43,19 +43,20 @@
 					@keypress.enter="() => onInviteTeamMember(organization.team, currentUsername)"
 				/>
 				<label for="username" class="hidden">Username</label>
-				<Button
-					color="primary"
-					:disabled="
-						!isPermission(
-							currentMember.organization_permissions,
-							organizationPermissions.MANAGE_INVITES,
-						)
-					"
-					@click="() => onInviteTeamMember(organization.team_id, currentUsername)"
-				>
-					<UserPlusIcon />
-					Invite
-				</Button>
+				<ButtonStyled color="brand">
+					<button
+						:disabled="
+							!isPermission(
+								currentMember.organization_permissions,
+								organizationPermissions.MANAGE_INVITES,
+							)
+						"
+						@click="() => onInviteTeamMember(organization.team_id, currentUsername)"
+					>
+						<UserPlusIcon />
+						Invite
+					</button>
+				</ButtonStyled>
 			</div>
 			<div class="adjacent-input">
 				<span class="label">
@@ -64,14 +65,15 @@
 						Remove yourself as a member of this organization.
 					</span>
 				</span>
-				<Button
-					color="danger"
-					:disabled="currentMember.is_owner"
-					@click="() => onLeaveProject(organization.team_id, auth.user.id)"
-				>
-					<UserRemoveIcon />
-					Leave organization
-				</Button>
+				<ButtonStyled color="red">
+					<button
+						:disabled="currentMember.is_owner"
+						@click="() => onLeaveProject(organization.team_id, auth.user.id)"
+					>
+						<UserRemoveIcon />
+						Leave organization
+					</button>
+				</ButtonStyled>
 			</div>
 		</div>
 		<div
@@ -94,18 +96,18 @@
 				<div class="side-buttons">
 					<Badge v-if="member.accepted" type="accepted" />
 					<Badge v-else type="pending" />
-					<Button
-						icon-only
-						transparent
-						class="dropdown-icon"
-						@click="
-							openTeamMembers.indexOf(member.user.id) === -1
-								? openTeamMembers.push(member.user.id)
-								: (openTeamMembers = openTeamMembers.filter((it) => it !== member.user.id))
-						"
-					>
-						<DropdownIcon />
-					</Button>
+					<ButtonStyled circular type="transparent">
+						<button
+							class="dropdown-icon"
+							@click="
+								openTeamMembers.indexOf(member.user.id) === -1
+									? openTeamMembers.push(member.user.id)
+									: (openTeamMembers = openTeamMembers.filter((it) => it !== member.user.id))
+							"
+						>
+							<DropdownIcon />
+						</button>
+					</ButtonStyled>
 				</div>
 			</div>
 			<div class="content">
@@ -188,44 +190,44 @@
 					</div>
 				</template>
 				<div class="input-group">
-					<Button
-						color="primary"
-						:disabled="
-							!isPermission(
-								currentMember.organization_permissions,
-								organizationPermissions.EDIT_MEMBER,
-							)
-						"
-						@click="onUpdateTeamMember(organization.team_id, member)"
-					>
-						<SaveIcon />
-						Save changes
-					</Button>
-					<Button
-						v-if="!member.is_owner"
-						color="danger"
-						:disabled="
-							!isPermission(
-								currentMember.organization_permissions,
-								organizationPermissions.EDIT_MEMBER,
-							) &&
-							!isPermission(
-								currentMember.organization_permissions,
-								organizationPermissions.REMOVE_MEMBER,
-							)
-						"
-						@click="onRemoveMember(organization.team_id, member)"
-					>
-						<UserRemoveIcon />
-						Remove member
-					</Button>
-					<Button
-						v-if="!member.is_owner && currentMember.is_owner && member.accepted"
-						@click="(e) => openTransferModal(member, e)"
-					>
-						<TransferIcon />
-						Transfer ownership
-					</Button>
+					<ButtonStyled color="brand">
+						<button
+							:disabled="
+								!isPermission(
+									currentMember.organization_permissions,
+									organizationPermissions.EDIT_MEMBER,
+								)
+							"
+							@click="onUpdateTeamMember(organization.team_id, member)"
+						>
+							<SaveIcon />
+							Save changes
+						</button>
+					</ButtonStyled>
+					<ButtonStyled v-if="!member.is_owner" color="red">
+						<button
+							:disabled="
+								!isPermission(
+									currentMember.organization_permissions,
+									organizationPermissions.EDIT_MEMBER,
+								) &&
+								!isPermission(
+									currentMember.organization_permissions,
+									organizationPermissions.REMOVE_MEMBER,
+								)
+							"
+							@click="onRemoveMember(organization.team_id, member)"
+						>
+							<UserRemoveIcon />
+							Remove member
+						</button>
+					</ButtonStyled>
+					<ButtonStyled v-if="!member.is_owner && currentMember.is_owner && member.accepted">
+						<button @click="(e) => openTransferModal(member, e)">
+							<TransferIcon />
+							Transfer ownership
+						</button>
+					</ButtonStyled>
 				</div>
 			</div>
 		</div>
@@ -244,7 +246,7 @@ import {
 import {
 	Avatar,
 	Badge,
-	Button,
+	ButtonStyled,
 	Checkbox,
 	injectNotificationManager,
 	StyledInput,

apps/frontend/src/pages/organization/[id]/settings/projects.vue

@@ -25,15 +25,17 @@
 							"
 							:maxlength="2048"
 						/>
-						<button
-							v-tooltip="'Clear link'"
-							aria-label="Clear link"
-							class="square-button label-button"
-							:data-active="editLinks.issues.clear"
-							@click="editLinks.issues.clear = !editLinks.issues.clear"
-						>
-							<TrashIcon />
-						</button>
+						<ButtonStyled circular>
+							<button
+								v-tooltip="'Clear link'"
+								class="label-button"
+								aria-label="Clear link"
+								:data-active="editLinks.issues.clear"
+								@click="editLinks.issues.clear = !editLinks.issues.clear"
+							>
+								<TrashIcon />
+							</button>
+						</ButtonStyled>
 					</div>
 					<label
 						for="source-code-input"
@@ -52,15 +54,17 @@
 								editLinks.source.clear ? 'Existing link will be cleared' : 'Enter a valid URL'
 							"
 						/>
-						<button
-							v-tooltip="'Clear link'"
-							aria-label="Clear link"
-							class="square-button label-button"
-							:data-active="editLinks.source.clear"
-							@click="editLinks.source.clear = !editLinks.source.clear"
-						>
-							<TrashIcon />
-						</button>
+						<ButtonStyled circular>
+							<button
+								v-tooltip="'Clear link'"
+								class="label-button"
+								aria-label="Clear link"
+								:data-active="editLinks.source.clear"
+								@click="editLinks.source.clear = !editLinks.source.clear"
+							>
+								<TrashIcon />
+							</button>
+						</ButtonStyled>
 					</div>
 					<label
 						for="wiki-page-input"
@@ -79,15 +83,17 @@
 								editLinks.wiki.clear ? 'Existing link will be cleared' : 'Enter a valid URL'
 							"
 						/>
-						<button
-							v-tooltip="'Clear link'"
-							aria-label="Clear link"
-							class="square-button label-button"
-							:data-active="editLinks.wiki.clear"
-							@click="editLinks.wiki.clear = !editLinks.wiki.clear"
-						>
-							<TrashIcon />
-						</button>
+						<ButtonStyled circular>
+							<button
+								v-tooltip="'Clear link'"
+								class="label-button"
+								aria-label="Clear link"
+								:data-active="editLinks.wiki.clear"
+								@click="editLinks.wiki.clear = !editLinks.wiki.clear"
+							>
+								<TrashIcon />
+							</button>
+						</ButtonStyled>
 					</div>
 					<label for="discord-invite-input" title="An invitation link to your Discord server.">
 						<span class="label__title">Discord invite</span>
@@ -105,15 +111,17 @@
 									: 'Enter a valid Discord invite URL'
 							"
 						/>
-						<button
-							v-tooltip="'Clear link'"
-							aria-label="Clear link"
-							class="square-button label-button"
-							:data-active="editLinks.discord.clear"
-							@click="editLinks.discord.clear = !editLinks.discord.clear"
-						>
-							<TrashIcon />
-						</button>
+						<ButtonStyled circular>
+							<button
+								v-tooltip="'Clear link'"
+								class="label-button"
+								aria-label="Clear link"
+								:data-active="editLinks.discord.clear"
+								@click="editLinks.discord.clear = !editLinks.discord.clear"
+							>
+								<TrashIcon />
+							</button>
+						</ButtonStyled>
 					</div>
 				</section>
 				<p>
@@ -143,14 +151,18 @@
 					description="Show all projects"
 				/>
 				<div class="push-right input-group">
-					<button class="iconified-button" @click="$refs.editLinksModal.hide()">
-						<XIcon />
-						Cancel
-					</button>
-					<button class="iconified-button brand-button" @click="onBulkEditLinks">
-						<SaveIcon />
-						Save changes
-					</button>
+					<ButtonStyled>
+						<button @click="$refs.editLinksModal.hide()">
+							<XIcon />
+							Cancel
+						</button>
+					</ButtonStyled>
+					<ButtonStyled color="brand">
+						<button @click="onBulkEditLinks">
+							<SaveIcon />
+							Save changes
+						</button>
+					</ButtonStyled>
 				</div>
 			</div>
 		</NewModal>
@@ -159,10 +171,12 @@
 			<div class="header__row">
 				<h2 class="header__title text-2xl">Projects</h2>
 				<div class="input-group">
-					<button class="iconified-button brand-button" @click="$refs.modal_creation.show($event)">
-						<PlusIcon />
-						{{ formatMessage(commonMessages.createAProjectButton) }}
-					</button>
+					<ButtonStyled color="brand">
+						<button @click="$refs.modal_creation.show($event)">
+							<PlusIcon />
+							{{ formatMessage(commonMessages.createAProjectButton) }}
+						</button>
+					</ButtonStyled>
 					<OrganizationProjectTransferModal
 						:projects="usersOwnedProjects || []"
 						@submit="onProjectTransferSubmit"
@@ -175,14 +189,12 @@
 			<template v-else>
 				<p>You can edit multiple projects at once by selecting them below.</p>
 				<div class="input-group">
-					<button
-						class="iconified-button"
-						:disabled="selectedProjects.length === 0"
-						@click="$refs.editLinksModal.show()"
-					>
-						<EditIcon />
-						Edit links
-					</button>
+					<ButtonStyled>
+						<button :disabled="selectedProjects.length === 0" @click="$refs.editLinksModal.show()">
+							<EditIcon />
+							Edit links
+						</button>
+					</ButtonStyled>
 					<div class="push-right">
 						<div class="labeled-control-row">
 							Sort by
@@ -193,14 +205,15 @@
 								:options="sortOptions"
 								@change="sortedProjects = updateSort(sortedProjects, sortBy, descending)"
 							/>
-							<button
-								v-tooltip="descending ? 'Descending' : 'Ascending'"
-								class="square-button"
-								@click="updateDescending()"
-							>
-								<SortDescIcon v-if="descending" />
-								<SortAscIcon v-else />
-							</button>
+							<ButtonStyled circular>
+								<button
+									v-tooltip="descending ? 'Descending' : 'Ascending'"
+									@click="updateDescending()"
+								>
+									<SortDescIcon v-if="descending" />
+									<SortAscIcon v-else />
+								</button>
+							</ButtonStyled>
 						</div>
 					</div>
 				</div>