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"

2
packages/ui/src/layouts/shared/console/layout.vue
View File

@@ -76,7 +76,7 @@
<template #actions>
<div class="flex justify-end gap-2">
<ButtonStyled type="outlined">
<button class="!border !border-surface-4" @click="deleteModal?.hide()">
<button @click="deleteModal?.hide()">
<XIcon />
Cancel
</button>

6
packages/ui/src/layouts/shared/content-tab/components/ContentModpackCard.vue
View File

@@ -242,7 +242,7 @@ onUnmounted(() => {
</button>
</ButtonStyled>
<template #popper>
<div class="experimental-styles-within grid grid-cols-[min-content] gap-1">
<div class="grid grid-cols-[min-content] gap-1">
<div class="flex min-w-48 items-center justify-between gap-8">
<h3 class="m-0 whitespace-nowrap text-base font-bold text-contrast">
{{ formatMessage(messages.contentHintTitle) }}
@@ -265,7 +265,6 @@ onUnmounted(() => {
<ButtonStyled v-if="hasSettingsListener" type="outlined" circular>
<button
class="!border !border-surface-4"
@click="
() => {
emit('settings')
@@ -301,7 +300,6 @@ onUnmounted(() => {
><TeleportOverflowMenu
:options="collapsedOptions"
class="flex @[700px]:hidden"
btn-class="!border-surface-4 !border"
@open="emit('dismiss-content-hint')"
>
<MoreVerticalIcon class="size-5" />
@@ -316,7 +314,7 @@ onUnmounted(() => {
</TeleportOverflowMenu></ButtonStyled
>
<template #popper>
<div class="experimental-styles-within grid grid-cols-[min-content] gap-1">
<div class="grid grid-cols-[min-content] gap-1">
<div class="flex min-w-48 items-center justify-between gap-8">
<h3 class="m-0 whitespace-nowrap text-base font-bold text-contrast">
{{ formatMessage(messages.contentHintTitle) }}

2
packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmBulkUpdateModal.vue
View File

@@ -21,7 +21,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 />
{{ formatMessage(commonMessages.cancelButton) }}
</button>

2
packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmDeletionModal.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="modal?.hide()">
<button @click="modal?.hide()">
<XIcon />
{{ formatMessage(commonMessages.cancelButton) }}
</button>

2
packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmModpackUpdateModal.vue
View File

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

2
packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmReinstallModal.vue
View File

@@ -20,7 +20,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 />
{{ formatMessage(commonMessages.cancelButton) }}
</button>

2
packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmRepairModal.vue
View File

@@ -11,7 +11,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 />
{{ formatMessage(commonMessages.cancelButton) }}
</button>

2
packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmUnlinkModal.vue
View File

@@ -20,7 +20,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 />
{{ formatMessage(commonMessages.cancelButton) }}
</button>

13
packages/ui/src/layouts/shared/content-tab/components/modals/ContentInstallModal.vue
View File

@@ -70,7 +70,6 @@
<ButtonStyled type="outlined" circular>
<button
v-tooltip="`${hideUninstallable ? 'Show' : 'Hide'} unavailable`"
class="!border-surface-4 !border"
@click="hideUninstallable = !hideUninstallable"
>
<EyeOffIcon v-if="hideUninstallable" />
@@ -134,17 +133,13 @@
<Avatar :src="iconPreviewUrl ?? undefined" size="5rem" rounded="2xl" />
<div class="flex flex-col gap-2">
<ButtonStyled type="outlined">
<button class="!border-surface-4 !border" @click="selectIcon">
<button @click="selectIcon">
<UploadIcon />
{{ formatMessage(messages.selectIcon) }}
</button>
</ButtonStyled>
<ButtonStyled type="outlined">
<button
class="!border-surface-4 !border"
:disabled="!iconPreviewUrl"
@click="removeIcon"
>
<button :disabled="!iconPreviewUrl" @click="removeIcon">
<XIcon />
{{ formatMessage(messages.removeIcon) }}
</button>
@@ -213,7 +208,7 @@
</span>
</div>
<ButtonStyled type="outlined">
<button class="!border-surface-4 !border" @click="modal?.hide()">
<button @click="modal?.hide()">
<XIcon />
{{ formatMessage(commonMessages.cancelButton) }}
</button>
@@ -222,7 +217,7 @@
<div v-else class="flex items-center justify-end gap-2">
<ButtonStyled type="outlined">
<button class="!border-surface-4 !border" @click="modal?.hide()">
<button @click="modal?.hide()">
<XIcon />
{{ formatMessage(commonMessages.cancelButton) }}
</button>

2
packages/ui/src/layouts/shared/content-tab/components/modals/ContentUpdaterModal.vue
View File

@@ -205,7 +205,7 @@
</div>
<div class="flex flex-row gap-2 shrink-0">
<ButtonStyled type="outlined">
<button class="!border-[1px] !border-surface-4" @click="handleCancel">
<button @click="handleCancel">
<XIcon />
{{ formatMessage(commonMessages.cancelButton) }}
</button>

4
packages/ui/src/layouts/shared/content-tab/layout.vue
View File

@@ -582,7 +582,7 @@ const confirmUnlinkModal = ref<InstanceType<typeof ConfirmUnlinkModal>>()
(ctx.disableAddContent?.value ? ctx.disableAddContentTooltip : undefined)
"
:disabled="ctx.isBusy.value || ctx.disableAddContent?.value"
class="!h-10 !border-button-bg !border-[1px]"
class="!h-10"
@click="ctx.uploadFiles"
>
<FolderOpenIcon class="size-5" />
@@ -722,7 +722,7 @@ const confirmUnlinkModal = ref<InstanceType<typeof ConfirmUnlinkModal>>()
(ctx.disableAddContent?.value ? ctx.disableAddContentTooltip : undefined)
"
:disabled="ctx.isBusy.value || ctx.disableAddContent?.value"
class="!h-10 !border-button-bg !border-[1px]"
class="!h-10"
@click="ctx.uploadFiles"
>
<FolderOpenIcon class="size-5" />

2
packages/ui/src/layouts/shared/files-tab/components/FileContextMenu.vue
View File

@@ -11,7 +11,7 @@
<div
v-if="visible"
ref="menuRef"
class="experimental-styles-within fixed isolate z-[9999] flex w-fit min-w-[180px] flex-col gap-2 overflow-hidden rounded-2xl border border-solid border-surface-5 bg-bg-raised p-2 shadow-lg"
class="fixed isolate z-[9999] flex w-fit min-w-[180px] flex-col gap-2 overflow-hidden rounded-2xl border border-solid border-surface-5 bg-bg-raised p-2 shadow-lg"
:style="{ left: `${position.x}px`, top: `${position.y}px` }"
role="menu"
tabindex="-1"

4
packages/ui/src/layouts/shared/files-tab/components/FileNavbar.vue
View File

@@ -114,7 +114,7 @@
<ButtonStyled v-if="showRefreshButton" type="outlined">
<button
type="button"
class="flex !h-10 items-center gap-2 !border-[1px] !border-surface-5"
class="flex !h-10 items-center gap-2"
:disabled="refreshing"
@click="handleRefresh"
>
@@ -135,7 +135,7 @@
:aria-label="formatMessage(messages.createNew)"
:disabled="disabled"
:tooltip="disabled ? disabledTooltip : undefined"
class="!h-10 justify-center gap-2 !border-[1px] !border-surface-5"
class="!h-10 justify-center gap-2"
:options="[
{ id: 'file', action: () => $emit('create', 'file') },
{ id: 'directory', action: () => $emit('create', 'directory') },

4
packages/ui/src/layouts/shared/files-tab/components/editor/EditorFindReplace.vue
View File

@@ -94,7 +94,7 @@
</div>
<ButtonStyled type="outlined">
<button
class="!h-8 whitespace-nowrap !border !border-surface-5 px-2 text-sm disabled:opacity-50"
class="!h-8 whitespace-nowrap px-2 text-sm disabled:opacity-50"
:disabled="findMatchCount === 0"
@click="emit('replace', replaceQuery)"
>
@@ -103,7 +103,7 @@
</ButtonStyled>
<ButtonStyled type="outlined">
<button
class="!h-8 whitespace-nowrap !border !border-surface-5 px-2 text-sm disabled:opacity-50"
class="!h-8 whitespace-nowrap px-2 text-sm disabled:opacity-50"
:disabled="findMatchCount === 0"
@click="emit('replaceAll', replaceQuery)"
>

2
packages/ui/src/layouts/shared/files-tab/components/modals/FileCreateItemModal.vue
View File

@@ -21,7 +21,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 class="h-5 w-5" />
{{ formatMessage(commonMessages.cancelButton) }}
</button>

2
packages/ui/src/layouts/shared/files-tab/components/modals/FileDeleteItemModal.vue
View File

@@ -7,7 +7,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 class="h-5 w-5" />
{{ formatMessage(commonMessages.cancelButton) }}
</button>

2
packages/ui/src/layouts/shared/files-tab/components/modals/FileMoveItemModal.vue
View File

@@ -26,7 +26,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 class="h-5 w-5" />
{{ formatMessage(commonMessages.cancelButton) }}
</button>

2
packages/ui/src/layouts/shared/files-tab/components/modals/FileRenameItemModal.vue
View File

@@ -14,7 +14,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 class="h-5 w-5" />
{{ formatMessage(commonMessages.cancelButton) }}
</button>

2
packages/ui/src/layouts/shared/files-tab/components/modals/FileUnsavedChangesModal.vue
View File

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

2
packages/ui/src/layouts/shared/files-tab/components/modals/FileUploadConflictModal.vue
View File

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

2
packages/ui/src/layouts/shared/files-tab/components/modals/FileUploadZipUrlModal.vue
View File

@@ -63,7 +63,7 @@
<template #actions>
<div class="flex w-full items-center justify-end gap-2">
<ButtonStyled type="outlined">
<button type="button" class="!border !border-surface-4" @click="hide">
<button type="button" @click="hide">
<XIcon />
{{
submitted

5
packages/ui/src/layouts/shared/installation-settings/layout.vue
View File

@@ -635,10 +635,7 @@ const messages = defineMessages({
</button>
</ButtonStyled>
<ButtonStyled type="outlined">
<button
class="!border !border-surface-5 !shadow-none"
@click="form.cancelEditing()"
>
<button @click="form.cancelEditing()">
<XIcon />
{{ formatMessage(commonMessages.cancelButton) }}
</button>

6
packages/ui/src/layouts/shared/server-settings/pages/network.vue
View File

@@ -97,18 +97,18 @@
</template>
<template #cell-actions="{ row }">
<div class="flex items-center justify-end gap-2">
<ButtonStyled icon-only type="transparent" circular>
<ButtonStyled type="transparent" circular>
<button @click="copyText(`${serverIP}:${row.port}`)">
<CopyIcon />
</button>
</ButtonStyled>
<template v-if="!row.primary">
<ButtonStyled icon-only type="transparent" circular>
<ButtonStyled type="transparent" circular>
<button @click="showEditAllocationModal(row.port)">
<PencilIcon />
</button>
</ButtonStyled>
<ButtonStyled icon-only type="outlined" circular color="red">
<ButtonStyled type="outlined" circular color="red">
<button @click="showConfirmDeleteModal(row.port)">
<TrashIcon />
</button>

2
packages/ui/src/layouts/wrapped/hosting/manage/backups.vue
View File

@@ -100,7 +100,7 @@
>
<template #actions>
<ButtonStyled type="outlined">
<button class="!border !border-surface-4" @click="clearBackupFilters">
<button @click="clearBackupFilters">
{{ formatMessage(messages.clearFilters) }}
</button>
</ButtonStyled>

2
packages/ui/src/layouts/wrapped/hosting/manage/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<div
data-pyro-server-list-root
class="experimental-styles-within relative mx-auto mb-6 flex w-full flex-col p-6"
class="relative mx-auto mb-6 flex w-full flex-col p-6"
:class="serverList.length ? 'min-h-screen' : 'min-h-[calc(100vh-4.5rem)]'"
>
<ServersGuestPlanModal

8
packages/ui/src/layouts/wrapped/hosting/manage/root.vue
View File

@@ -1,7 +1,7 @@
<template>
<div
v-if="filteredNotices.length > 0"
class="experimental-styles-within relative mx-auto mb-4 flex w-full min-w-0 flex-col gap-3 px-6"
class="relative mx-auto mb-4 flex w-full min-w-0 flex-col gap-3 px-6"
:class="{
'max-w-[1280px]': isNuxt,
}"
@@ -99,7 +99,7 @@
<div
v-else-if="serverData"
data-pyro-server-manager-root
class="experimental-styles-within relative mx-auto box-border flex w-full min-w-0 flex-col gap-4 px-6 transition-all duration-300"
class="relative mx-auto box-border flex w-full min-w-0 flex-col gap-4 px-6 transition-all duration-300"
:style="{
'--server-bg-image': serverImage
? `url(${serverImage})`
@@ -144,7 +144,7 @@
</button>
</ButtonStyled>
<template #popper>
<div class="experimental-styles-within grid grid-cols-[min-content] gap-1">
<div class="grid grid-cols-[min-content] gap-1">
<div class="flex min-w-48 items-center justify-between gap-8">
<h3 class="m-0 whitespace-nowrap text-base font-bold text-contrast">
{{ formatMessage(settingsHintMessages.title) }}
@@ -321,7 +321,7 @@
</div>
<div
v-if="showAdvancedDebugInfo"
class="experimental-styles-within relative mx-auto mt-6 box-border w-full min-w-0 max-w-[1280px] px-6"
class="relative mx-auto mt-6 box-border w-full min-w-0 max-w-[1280px] px-6"
>
<h2 class="m-0 text-lg font-extrabold text-contrast">Server data</h2>
<pre class="markdown-body w-full overflow-auto rounded-2xl bg-bg-raised p-4 text-sm">{{