MrSphay/Modrinth-plus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
* 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>
This commit is contained in:
Prospector
2026-05-03 11:53:06 -07:00
committed by GitHub
parent 8a72ee9968
commit 7dbbbe590f
153 changed files with 2596 additions and 3817 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/ui/src/components/base/Avatar.vue
View File

@@ -2,7 +2,7 @@
<img
v-if="src && !failed"
ref="img"
class="`experimental-styles-within avatar shrink-0"
class="avatar shrink-0"
:style="`--_size: ${cssSize}`"
:class="{
circle: circle,
@@ -18,7 +18,7 @@
/>
<svg
v-else
class="`experimental-styles-within avatar shrink-0"
class="avatar shrink-0"
:style="`--_size: ${cssSize}${tint ? `;--_tint:oklch(50% 75% ${tint})` : ''}`"
:class="{
tint: tint,

10
packages/ui/src/components/base/Card.vue
View File

@@ -2,7 +2,7 @@
import { DropdownIcon } from '@modrinth/assets'
import { reactive } from 'vue'
import Button from './Button.vue'
import ButtonStyled from './ButtonStyled.vue'
const props = defineProps({
collapsible: {
@@ -33,9 +33,11 @@ function toggleCollapsed() {
<div v-if="!!$slots.header || collapsible" class="header">
<slot name="header"></slot>
<div v-if="collapsible" class="btn-group">
<Button :action="toggleCollapsed">
<DropdownIcon :style="{ transform: `rotate(${state.collapsed ? 0 : 180}deg)` }" />
</Button>
<ButtonStyled circular>
<button @click="toggleCollapsed">
<DropdownIcon :style="{ transform: `rotate(${state.collapsed ? 0 : 180}deg)` }" />
</button>
</ButtonStyled>
</div>
</div>
<slot v-if="!state.collapsed" />

19
packages/ui/src/components/base/JoinedButtons.vue
View File

@@ -1,21 +1,16 @@
<template>
<div class="joined-buttons">
<ButtonStyled
:color="color"
:size="size"
:class="{ 'joined-buttons__primary--muted': primaryMuted }"
>
<button :disabled="primaryDisabledResolved" @click="handlePrimaryAction">
<ButtonStyled :color="color" :size="size">
<button
:class="{ 'joined-buttons__primary--muted': primaryMuted }"
:disabled="primaryDisabledResolved"
@click="handlePrimaryAction"
>
<component :is="primaryAction.icon" v-if="primaryAction.icon" aria-hidden="true" />
{{ primaryAction.label }}
</button>
</ButtonStyled>
<ButtonStyled
v-if="dropdownActions.length > 0"
:color="color"
:size="size"
class="joined-buttons__dropdown"
>
<ButtonStyled v-if="dropdownActions.length > 0" :color="color" :size="size">
<OverflowMenu
class="btn-dropdown-animation !w-10"
:options="dropdownOptions"

115
packages/ui/src/components/base/MarkdownEditor.vue
View File

@@ -43,19 +43,23 @@
v-html="renderHighlightedString(linkMarkdown)"
/>
</div>
<div class="input-group push-right">
<Button :action="() => linkModal?.hide()"><XIcon /> Cancel</Button>
<Button
color="primary"
:disabled="!!linkValidationErrorMessage || !linkUrl"
:action="
() => {
if (editor) markdownCommands.replaceSelection(editor, linkMarkdown)
linkModal?.hide()
}
"
><PlusIcon /> Insert</Button
>
<div class="flex gap-2 justify-end mt-4">
<ButtonStyled type="outlined">
<button @click="() => linkModal?.hide()"><XIcon /> Cancel</button>
</ButtonStyled>
<ButtonStyled color="brand">
<button
:disabled="!!linkValidationErrorMessage || !linkUrl"
@click="
() => {
if (editor) markdownCommands.replaceSelection(editor, linkMarkdown)
linkModal?.hide()
}
"
>
<PlusIcon /> Insert
</button>
</ButtonStyled>
</div>
</div>
</NewModal>
@@ -125,20 +129,23 @@
v-html="renderHighlightedString(imageMarkdown)"
/>
</div>
<div class="input-group push-right">
<Button :action="() => imageModal?.hide()"><XIcon /> Cancel</Button>
<Button
color="primary"
:disabled="!canInsertImage"
:action="
() => {
if (editor) markdownCommands.replaceSelection(editor, imageMarkdown)
imageModal?.hide()
}
"
>
<PlusIcon /> Insert
</Button>
<div class="flex gap-2 justify-end mt-4">
<ButtonStyled type="outlined">
<button @click="() => imageModal?.hide()"><XIcon /> Cancel</button>
</ButtonStyled>
<ButtonStyled color="brand">
<button
:disabled="!canInsertImage"
@click="
() => {
if (editor) markdownCommands.replaceSelection(editor, imageMarkdown)
imageModal?.hide()
}
"
>
<PlusIcon /> Insert
</button>
</ButtonStyled>
</div>
</div>
</NewModal>
@@ -176,20 +183,23 @@
v-html="renderHighlightedString(videoMarkdown)"
/>
</div>
<div class="input-group push-right">
<Button :action="() => videoModal?.hide()"><XIcon /> Cancel</Button>
<Button
color="primary"
:disabled="!!linkValidationErrorMessage || !linkUrl"
:action="
() => {
if (editor) markdownCommands.replaceSelection(editor, videoMarkdown)
videoModal?.hide()
}
"
>
<PlusIcon /> Insert
</Button>
<div class="flex gap-2 justify-end mt-4">
<ButtonStyled type="outlined">
<button @click="() => videoModal?.hide()"><XIcon /> Cancel</button>
</ButtonStyled>
<ButtonStyled color="brand">
<button
:disabled="!!linkValidationErrorMessage || !linkUrl"
@click="
() => {
if (editor) markdownCommands.replaceSelection(editor, videoMarkdown)
videoModal?.hide()
}
"
>
<PlusIcon /> Insert
</button>
</ButtonStyled>
</div>
</div>
</NewModal>
@@ -202,16 +212,17 @@
>
<div class="divider"></div>
<template v-for="button in buttonGroup.buttons" :key="button.label">
<Button
v-tooltip="button.label"
icon-only
:aria-label="button.label"
:class="{ 'mobile-hidden-group': !!buttonGroup.hideOnMobile }"
:action="() => button.action(editor)"
:disabled="previewMode || disabled"
>
<component :is="button.icon" />
</Button>
<ButtonStyled circular>
<button
v-tooltip="button.label"
:aria-label="button.label"
:class="{ 'mobile-hidden-group': !!buttonGroup.hideOnMobile }"
:disabled="previewMode || disabled"
@click="() => button.action(editor)"
>
<component :is="button.icon" />
</button>
</ButtonStyled>
</template>
</template>
<div class="preview">
@@ -288,7 +299,7 @@ import { renderHighlightedString } from '@modrinth/utils/highlightjs'
import { type Component, computed, onBeforeUnmount, onMounted, ref, toRef, watch } from 'vue'
import NewModal from '../modal/NewModal.vue'
import Button from './Button.vue'
import ButtonStyled from './ButtonStyled.vue'
import Chips from './Chips.vue'
import FileInput from './FileInput.vue'
import StyledInput from './StyledInput.vue'

1
packages/ui/src/components/base/MultiStageModal.vue
View File

@@ -74,7 +74,6 @@
>
<ButtonStyled v-if="leftButtonConfig" type="outlined">
<button
class="!border-surface-5 !shadow-none"
:class="leftButtonConfig.buttonClass"
:disabled="leftButtonConfig.disabled"
@click="leftButtonConfig.onClick"

2
packages/ui/src/components/base/OptionGroup.vue
View File

@@ -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"

2
packages/ui/src/components/base/TeleportOverflowMenu.vue
View File

@@ -26,7 +26,7 @@
v-if="isOpen"
ref="menuRef"
data-pyro-telepopover-root
class="experimental-styles-within fixed isolate z-[9999] flex w-fit flex-col gap-2 overflow-hidden rounded-2xl border-[1px] border-solid border-surface-5 bg-bg-raised p-2 shadow-lg"
class="fixed isolate z-[9999] flex w-fit flex-col gap-2 overflow-hidden rounded-2xl border-[1px] border-solid border-surface-5 bg-bg-raised p-2 shadow-lg"
:style="menuStyle"
role="menu"
tabindex="-1"

2
packages/ui/src/components/billing/ResubscribeModal.vue
View File

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

4
packages/ui/src/components/billing/ServersGuestPlanModal.vue
View File

@@ -155,8 +155,8 @@ defineExpose({
<div class="font-semibold text-contrast">Sign in to continue your purchase</div>
<div class="">You need a Modrinth account to add your billing details.</div>
</div>
<ButtonStyled color="brand" class="mt-2">
<button @click="continueToAuth">
<ButtonStyled color="brand">
<button class="mt-2" @click="continueToAuth">
Sign in or create an account
<ExternalIcon class="size-4" />
</button>

2
packages/ui/src/components/billing/ServersPurchase0Plan.vue
View File

@@ -212,7 +212,7 @@ function selectCustom() {
</div>
</div>
<div class="w-full">
<ButtonStyled color="blue" class="w-full">
<ButtonStyled color="blue">
<button
class="w-full"
:disabled="existingPlan?.id === plansByRam.small.id"

4
packages/ui/src/components/flows/creation-flow-modal/components/CustomSetupStage.vue
View File

@@ -5,13 +5,13 @@
<Avatar :src="ctx.instanceIconUrl.value ?? undefined" size="5rem" />
<div class="flex flex-col gap-2">
<ButtonStyled type="outlined">
<button class="!border-surface-5" @click="triggerIconInput">
<button @click="triggerIconInput">
<UploadIcon />
{{ formatMessage(messages.selectIcon) }}
</button>
</ButtonStyled>
<ButtonStyled type="outlined">
<button class="!border-surface-5" :disabled="!ctx.instanceIcon.value" @click="removeIcon">
<button :disabled="!ctx.instanceIcon.value" @click="removeIcon">
<XIcon />
{{ formatMessage(messages.removeIcon) }}
</button>

9
packages/ui/src/components/flows/creation-flow-modal/components/ImportInstanceStage.vue
View File

@@ -83,10 +83,11 @@
</ButtonStyled>
</div>
<div v-else class="flex items-center gap-2">
<ButtonStyled icon-only
><button class="!shadow-none" @click="browseForLauncherPath">
<FolderSearchIcon class="size-5" /></button
></ButtonStyled>
<ButtonStyled circular>
<button class="!shadow-none" @click="browseForLauncherPath">
<FolderSearchIcon />
</button>
</ButtonStyled>
<StyledInput
v-model="newLauncherPath"
:placeholder="formatMessage(messages.launcherPathPlaceholder)"

2
packages/ui/src/components/flows/creation-flow-modal/components/ModpackStage.vue
View File

@@ -29,7 +29,7 @@
</div>
<div class="flex gap-3">
<ButtonStyled type="outlined">
<button class="flex-1 !border-surface-4" @click="triggerFileInput">
<button class="flex-1" @click="triggerFileInput">
<ImportIcon />
{{ formatMessage(messages.importModpack) }}
</button>

2
packages/ui/src/components/modal/ConfirmLeaveModal.vue
View File

@@ -9,7 +9,7 @@
<template #actions>
<div class="flex justify-end gap-2">
<ButtonStyled type="outlined">
<button class="!border !border-surface-4" @click="cancel">
<button @click="cancel">
<XIcon />
{{ localizeIfPossible(stayLabel) }}
</button>

2
packages/ui/src/components/modal/NewModal.vue
View File

@@ -18,7 +18,7 @@
]"
@click="() => (closeOnClickOutside && closable ? hide() : {})"
/>
<div class="modal-container experimental-styles-within" :class="{ shown: visible }">
<div class="modal-container" :class="{ shown: visible }">
<div
ref="modalBodyRef"
role="dialog"

13
packages/ui/src/components/modal/OpenInAppModal.vue
View File

@@ -88,14 +88,19 @@
formatMessage(messages.openingAutomatically)
}}</span>
<div v-else class="grid grid-cols-2 gap-2 w-full">
<ButtonStyled class="flex-1">
<button @click="hide">
<ButtonStyled>
<button class="flex-1" @click="hide">
<XIcon />
{{ formatMessage(commonMessages.closeButton) }}
</button>
</ButtonStyled>
<ButtonStyled color="green" class="flex-1">
<a href="https://modrinth.com/app" target="_blank" rel="noopener noreferrer">
<ButtonStyled color="brand">
<a
class="flex-1"
href="https://modrinth.com/app"
target="_blank"
rel="noopener noreferrer"
>
<DownloadIcon />
{{ formatMessage(messages.getApp) }}
</a>

143
packages/ui/src/components/modal/ShareModal.vue
View File

@@ -14,7 +14,7 @@ import { computed, nextTick, ref } from 'vue'
import { injectNotificationManager } from '#ui/providers'
import { Button, ButtonStyled, NewModal, StyledInput } from '../index'
import { ButtonStyled, NewModal, StyledInput } from '../index'
const props = defineProps({
header: {
@@ -148,15 +148,15 @@ defineExpose({
<template>
<NewModal ref="shareModal" :header="header" :noblur="noblur" :on-hide="onHide">
<div class="flex flex-row flex-wrap items-center gap-2">
<div class="flex flex-col flex-wrap items-center gap-2">
<div v-if="link" class="group relative mx-auto">
<div ref="qrCode">
<QrcodeVue :value="url" class="!bg-white rounded-[var(--radius-md)]" margin="3" />
</div>
<ButtonStyled circular>
<ButtonStyled circular type="transparent">
<button
v-tooltip="'Copy QR code'"
class="absolute top-0 right-0 m-2 opacity-0 transition-all duration-200 ease-in-out group-hover:opacity-100 group-focus-within:opacity-100 motion-reduce:transition-none"
class="absolute top-0 right-0 m-2"
aria-label="Copy QR code"
@click="copyImage"
>
@@ -164,17 +164,25 @@ defineExpose({
</button>
</ButtonStyled>
</div>
<StyledInput v-else v-model="content" multiline resize="vertical" wrapper-class="h-full">
<StyledInput
v-else
v-model="content"
multiline
resize="vertical"
wrapper-class="h-full w-[30rem]"
>
<template #right>
<button
v-tooltip="'Copy Text'"
type="button"
aria-label="Copy Text"
class="absolute top-0 right-0 m-2 grid h-10 w-10 cursor-pointer place-content-center rounded-lg border-none bg-button-bg text-primary transition-all hover:bg-button-bg-hover hover:brightness-125 active:scale-95"
@click="copyText"
>
<ClipboardCopyIcon class="h-5 w-5" aria-hidden="true" />
</button>
<ButtonStyled circular type="transparent">
<button
v-tooltip="'Copy Text'"
type="button"
aria-label="Copy Text"
class="absolute top-0 right-0 m-2"
@click="copyText"
>
<ClipboardCopyIcon class="h-5 w-5" aria-hidden="true" />
</button>
</ButtonStyled>
</template>
</StyledInput>
<div class="flex flex-grow flex-col justify-center gap-2">
@@ -199,56 +207,63 @@ defineExpose({
<ExternalIcon aria-hidden="true" />
</a>
</ButtonStyled>
<div v-if="socialButtons" class="flex flex-row gap-2">
<Button v-if="canShare" v-tooltip="'Share'" aria-label="Share" icon-only @click="share">
<ShareIcon aria-hidden="true" />
</Button>
<a
v-tooltip="'Send as an email'"
class="btn icon-only fill-contrast text-contrast"
:href="sendEmail"
:target="targetParameter"
aria-label="Send as an email"
>
<MailIcon aria-hidden="true" />
</a>
<a
v-if="link"
v-tooltip="'Open link in browser'"
class="btn icon-only fill-contrast text-contrast"
:target="targetParameter"
:href="url"
aria-label="Open link in browser"
>
<GlobeIcon aria-hidden="true" />
</a>
<a
v-tooltip="'Toot about it'"
class="btn icon-only fill-contrast text-contrast bg-[#563acc]"
:target="targetParameter"
:href="sendToot"
aria-label="Toot about it"
>
<MastodonIcon aria-hidden="true" />
</a>
<a
v-tooltip="'Tweet about it'"
class="btn icon-only fill-contrast text-contrast bg-[#1da1f2]"
:target="targetParameter"
:href="sendTweet"
aria-label="Tweet about it"
>
<TwitterIcon aria-hidden="true" />
</a>
<a
v-tooltip="'Share on Reddit'"
class="btn icon-only fill-contrast text-contrast bg-[#ff4500]"
:target="targetParameter"
:href="postOnReddit"
aria-label="Share on Reddit"
>
<RedditIcon aria-hidden="true" />
</a>
<div v-if="socialButtons" class="flex flex-row gap-1">
<ButtonStyled v-if="canShare" circular>
<button v-tooltip="'Share'" aria-label="Share" @click="share">
<ShareIcon aria-hidden="true" />
</button>
</ButtonStyled>
<ButtonStyled circular>
<a
v-tooltip="'Send as an email'"
:href="sendEmail"
:target="targetParameter"
aria-label="Send as an email"
>
<MailIcon aria-hidden="true" />
</a>
</ButtonStyled>
<ButtonStyled circular>
<a
v-if="link"
v-tooltip="'Open link in browser'"
:target="targetParameter"
:href="url"
aria-label="Open link in browser"
>
<GlobeIcon aria-hidden="true" />
</a>
</ButtonStyled>
<ButtonStyled circular>
<a
v-tooltip="'Toot about it'"
:target="targetParameter"
:href="sendToot"
aria-label="Toot about it"
>
<MastodonIcon aria-hidden="true" />
</a>
</ButtonStyled>
<ButtonStyled circular>
<a
v-tooltip="'Tweet about it'"
:target="targetParameter"
:href="sendTweet"
aria-label="Tweet about it"
>
<TwitterIcon aria-hidden="true" />
</a>
</ButtonStyled>
<ButtonStyled circular>
<a
v-tooltip="'Share on Reddit'"
:target="targetParameter"
:href="postOnReddit"
aria-label="Share on Reddit"
>
<RedditIcon aria-hidden="true" />
</a>
</ButtonStyled>
</div>
</div>
</div>

2
packages/ui/src/components/nav/NotificationPanel.vue
View File

@@ -1,6 +1,6 @@
<template>
<div
class="vue-notification-group experimental-styles-within"
class="vue-notification-group"
:class="{
'intercom-present': isIntercomPresent,
'location-left': notificationLocation === 'left',

2
packages/ui/src/components/nav/PopupNotificationPanel.vue
View File

@@ -1,6 +1,6 @@
<template>
<div
class="popup-notification-group experimental-styles-within"
class="popup-notification-group"
:class="{
'has-sidebar': hasSidebar,
}"

2
packages/ui/src/components/search/SearchFilterControl.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="experimental-styles-within flex flex-wrap items-center gap-1 empty:hidden">
<div class="flex flex-wrap items-center gap-1 empty:hidden">
<TagItem
v-if="selectedItems.length > 1"
class="transition-transform active:scale-[0.95]"

2
packages/ui/src/components/servers/ServerListing.vue
View File

@@ -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)"
>

2
packages/ui/src/components/servers/backups/BackupCreateModal.vue
View File

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

2
packages/ui/src/components/servers/backups/BackupDeleteModal.vue
View File

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

2
packages/ui/src/components/servers/backups/BackupRenameModal.vue
View File

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

2
packages/ui/src/components/servers/backups/BackupRestoreModal.vue
View File

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

2
packages/ui/src/components/servers/content/ContentVersionFilter.vue
View File

@@ -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="

2
packages/ui/src/components/servers/icons/ServerIcon.vue
View File

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

2
packages/ui/src/components/servers/labels/Separator.vue
View File

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

2
packages/ui/src/components/version/VersionFilterControl.vue
View File

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