sugoidogo/modrinth
1
0
Fork 0
mirror of https://github.com/modrinth/code.git synced 2026-08-31 12:05:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

begin button consistency pass

Browse Source
This commit is contained in:
Prospector
2026-08-07 13:34:26 -07:00
parent a71a361e0f
commit 4f9baffa13
10 changed files with 100 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/frontend/src/layouts/default.vue
+48 -54
View File
@@ -88,19 +88,19 @@
</div>
<div
class="col-span-2 row-start-2 flex justify-center lg:col-span-1 lg:row-start-auto"
:class="{ 'gap-4': !flags.projectTypesPrimaryNav }"
:class="{ 'gap-4': !flags.projectTypesPrimaryNav, 'gap-1': flags.projectTypesPrimaryNav }"
>
<template v-if="flags.projectTypesPrimaryNav">
<ButtonLink
type="quiet"
to="/discover/mods"
size="sm"
:class="
route.name === 'discover-mods' || route.path.startsWith('/mod/')
? (route.name === 'discover-mods' ? 'main-nav-primary' : 'main-nav-secondary') ===
'main-nav-primary'
? '!bg-[var(--color-button-bg-selected)] !text-[var(--color-button-text-selected)] [&>svg]:!text-[var(--color-button-text-selected)]'
: '!bg-[var(--color-button-bg)] !text-contrast'
: ''
route.path.startsWith('/discover/mods')
? '!bg-[var(--color-button-bg-selected)] !text-[var(--color-button-text-selected)] [&>svg]:!text-[var(--color-button-icon-selected)]'
: route.path.startsWith('/mod/')
? '!bg-[var(--color-button-bg)] !text-contrast'
: ''
"
>
<BoxIcon aria-hidden="true" />
@@ -109,14 +109,13 @@
<ButtonLink
type="quiet"
to="/discover/resourcepacks"
size="sm"
:class="
route.name === 'discover-resourcepacks' || route.path.startsWith('/resourcepack/')
? (route.name === 'discover-resourcepacks'
? 'main-nav-primary'
: 'main-nav-secondary') === 'main-nav-primary'
? '!bg-[var(--color-button-bg-selected)] !text-[var(--color-button-text-selected)] [&>svg]:!text-[var(--color-button-text-selected)]'
: '!bg-[var(--color-button-bg)] !text-contrast'
: ''
route.path.startsWith('/discover/resourcepacks')
? '!bg-[var(--color-button-bg-selected)] !text-[var(--color-button-text-selected)] [&>svg]:!text-[var(--color-button-icon-selected)]'
: route.path.startsWith('/resourcepack/')
? '!bg-[var(--color-button-bg)] !text-contrast'
: ''
"
>
<PaintbrushIcon aria-hidden="true" />
@@ -125,14 +124,13 @@
<ButtonLink
type="quiet"
to="/discover/datapacks"
size="sm"
:class="
route.name === 'discover-datapacks' || route.path.startsWith('/datapack/')
? (route.name === 'discover-datapacks'
? 'main-nav-primary'
: 'main-nav-secondary') === 'main-nav-primary'
? '!bg-[var(--color-button-bg-selected)] !text-[var(--color-button-text-selected)] [&>svg]:!text-[var(--color-button-text-selected)]'
: '!bg-[var(--color-button-bg)] !text-contrast'
: ''
route.path.startsWith('/discover/datapacks')
? '!bg-[var(--color-button-bg-selected)] !text-[var(--color-button-text-selected)] [&>svg]:!text-[var(--color-button-icon-selected)]'
: route.path.startsWith('/datapack/')
? '!bg-[var(--color-button-bg)] !text-contrast'
: ''
"
>
<BracesIcon aria-hidden="true" />
@@ -141,14 +139,13 @@
<ButtonLink
type="quiet"
to="/discover/modpacks"
size="sm"
:class="
route.name === 'discover-modpacks' || route.path.startsWith('/modpack/')
? (route.name === 'discover-modpacks'
? 'main-nav-primary'
: 'main-nav-secondary') === 'main-nav-primary'
? '!bg-[var(--color-button-bg-selected)] !text-[var(--color-button-text-selected)] [&>svg]:!text-[var(--color-button-text-selected)]'
: '!bg-[var(--color-button-bg)] !text-contrast'
: ''
route.path.startsWith('/discover/modpacks')
? '!bg-[var(--color-button-bg-selected)] !text-[var(--color-button-text-selected)] [&>svg]:!text-[var(--color-button-icon-selected)]'
: route.path.startsWith('/modpack/')
? '!bg-[var(--color-button-bg)] !text-contrast'
: ''
"
>
<PackageOpenIcon aria-hidden="true" />
@@ -156,15 +153,14 @@
</ButtonLink>
<ButtonLink
type="quiet"
size="sm"
to="/discover/shaders"
:class="
route.name === 'discover-shaders' || route.path.startsWith('/shader/')
? (route.name === 'discover-shaders'
? 'main-nav-primary'
: 'main-nav-secondary') === 'main-nav-primary'
? '!bg-[var(--color-button-bg-selected)] !text-[var(--color-button-text-selected)] [&>svg]:!text-[var(--color-button-text-selected)]'
: '!bg-[var(--color-button-bg)] !text-contrast'
: ''
route.path.startsWith('/discover/shaders')
? '!bg-[var(--color-button-bg-selected)] !text-[var(--color-button-text-selected)] [&>svg]:!text-[var(--color-button-icon-selected)]'
: route.path.startsWith('/shader/')
? '!bg-[var(--color-button-bg)] !text-contrast'
: ''
"
>
<GlassesIcon aria-hidden="true" />
@@ -173,14 +169,13 @@
<ButtonLink
type="quiet"
to="/discover/plugins"
size="sm"
:class="
route.name === 'discover-plugins' || route.path.startsWith('/plugin/')
? (route.name === 'discover-plugins'
? 'main-nav-primary'
: 'main-nav-secondary') === 'main-nav-primary'
? '!bg-[var(--color-button-bg-selected)] !text-[var(--color-button-text-selected)] [&>svg]:!text-[var(--color-button-text-selected)]'
: '!bg-[var(--color-button-bg)] !text-contrast'
: ''
route.path.startsWith('/discover/plugins')
? '!bg-[var(--color-button-bg-selected)] !text-[var(--color-button-text-selected)] [&>svg]:!text-[var(--color-button-icon-selected)]'
: route.path.startsWith('/plugin/')
? '!bg-[var(--color-button-bg)] !text-contrast'
: ''
"
>
<PlugIcon aria-hidden="true" />
@@ -189,14 +184,13 @@
<ButtonLink
type="quiet"
to="/discover/servers"
size="sm"
:class="
route.name === 'discover-servers' || route.path.startsWith('/server/')
? (route.name === 'discover-servers'
? 'main-nav-primary'
: 'main-nav-secondary') === 'main-nav-primary'
? '!bg-[var(--color-button-bg-selected)] !text-[var(--color-button-text-selected)] [&>svg]:!text-[var(--color-button-text-selected)]'
: '!bg-[var(--color-button-bg)] !text-contrast'
: ''
route.path.startsWith('/discover/servers')
? '!bg-[var(--color-button-bg-selected)] !text-[var(--color-button-text-selected)] [&>svg]:!text-[var(--color-button-icon-selected)]'
: route.path.startsWith('/server/')
? '!bg-[var(--color-button-bg)] !text-contrast'
: ''
"
>
<ServerIcon aria-hidden="true" />
@@ -208,6 +202,7 @@
type="quiet"
:label="formatMessage(commonMessages.moreOptionsButton)"
hoverable
:icon-only="false"
:options="[
{
id: 'mods',
@@ -253,9 +248,8 @@
},
]"
:class="[
'!w-auto !rounded-xl !px-2.5',
isDiscovering
? '!bg-[var(--color-button-bg-selected)] !text-[var(--color-button-text-selected)] [&>svg]:!text-[var(--color-button-text-selected)]'
? '!bg-[var(--color-button-bg-selected)] !text-[var(--color-button-text-selected)] [&>svg]:!text-[var(--color-button-icon-selected)]'
: isDiscoveringSubpage
? '!bg-[var(--color-button-bg)] !text-contrast'
: '',
@@ -368,7 +362,7 @@
type="quiet"
:icon-only="false"
:label="formatMessage(messages.createNew)"
class="btn-dropdown-animation !gap-1 !rounded-xl !px-2"
class="btn-dropdown-animation"
:options="[
{
id: 'review-projects',
@@ -501,7 +495,7 @@
type="quiet"
:icon-only="false"
:label="formatMessage(messages.createNew)"
class="btn-dropdown-animation !gap-1 !rounded-xl !px-2"
class="btn-dropdown-animation"
:options="[
{
id: 'new-project',
@@ -614,7 +608,7 @@
<ButtonLink
v-tooltip="formatMessage(commonMessages.settingsLabel)"
to="/settings"
class="!w-9 !rounded-full !px-0"
icon-only
>
<SettingsIcon :aria-label="formatMessage(commonMessages.settingsLabel)" />
</ButtonLink>
apps/frontend/src/pages/[type]/[project].vue
+11 -2
View File
@@ -146,7 +146,7 @@
color="brand"
size="xl"
:to="`${projectPath}/settings`"
class="!w-12 !rounded-full !px-0 !font-bold lg:!hidden"
class="lg:!hidden"
>
<SettingsIcon />
</ButtonLink>
@@ -156,7 +156,7 @@
color="brand"
size="xl"
:to="`${projectPath}/settings`"
class="!font-bold max-lg:!hidden"
class="max-lg:!hidden"
>
<SettingsIcon />
{{ formatMessage(messages.editProject) }}
@@ -498,12 +498,15 @@
<script setup>
import {
BulletListIcon,
ChartIcon,
ChevronRightIcon,
ClipboardCopyIcon,
DownloadIcon,
FolderSearchIcon,
HeartIcon,
ImagesIcon,
InfoIcon,
ListIcon,
MoreVerticalIcon,
PlayIcon,
@@ -512,6 +515,7 @@ import {
ScanEyeIcon,
ServerPlusIcon,
SettingsIcon,
VersionIcon,
XIcon,
} from '@modrinth/assets'
import { getMarginTarget, moderationSettings } from '@modrinth/moderation'
@@ -2007,15 +2011,18 @@ const navLinks = computed(() => {
return [
{
label: formatMessage(messages.descriptionTab),
icon: InfoIcon,
href: withInstallContextQuery(projectUrl),
},
{
label: formatMessage(messages.galleryTab),
icon: ImagesIcon,
href: withInstallContextQuery(`${projectUrl}/gallery`),
shown: galleryCount > 0 || !!currentMember.value,
},
{
label: formatMessage(messages.changelogTab),
icon: BulletListIcon,
href: withInstallContextQuery(`${projectUrl}/changelog`),
shown:
hasVersions.value && projectV3Loaded.value && projectV3.value?.minecraft_server == null,
@@ -2023,6 +2030,7 @@ const navLinks = computed(() => {
},
{
label: formatMessage(messages.versionsTab),
icon: VersionIcon,
href: withInstallContextQuery(`${projectUrl}/versions`),
shown:
(hasVersions.value || !!currentMember.value) &&
@@ -2033,6 +2041,7 @@ const navLinks = computed(() => {
},
{
label: formatMessage(messages.moderationTab),
icon: ScaleIcon,
href: withInstallContextQuery(`${projectUrl}/moderation`),
shown: !!currentMember.value,
},
packages/assets/generated-icons.ts
+2
View File
@@ -63,6 +63,7 @@ import _BoxesIcon from './icons/boxes.svg?component'
import _BracesIcon from './icons/braces.svg?component'
import _BrushCleaningIcon from './icons/brush-cleaning.svg?component'
import _BugIcon from './icons/bug.svg?component'
import _BulletListIcon from './icons/bullet-list.svg?component'
import _CalendarIcon from './icons/calendar.svg?component'
import _CalendarArrowDownIcon from './icons/calendar-arrow-down.svg?component'
import _CardIcon from './icons/card.svg?component'
@@ -495,6 +496,7 @@ export const BoxesIcon = _BoxesIcon
export const BracesIcon = _BracesIcon
export const BrushCleaningIcon = _BrushCleaningIcon
export const BugIcon = _BugIcon
export const BulletListIcon = _BulletListIcon
export const CalendarIcon = _CalendarIcon
export const CalendarArrowDownIcon = _CalendarArrowDownIcon
export const CardIcon = _CardIcon
packages/assets/icons/bullet-list.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-list-icon lucide-list"><path d="M3 5h.01"/><path d="M3 12h.01"/><path d="M3 19h.01"/><path d="M8 5h13"/><path d="M8 12h13"/><path d="M8 19h13"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 352 B

packages/assets/styles/variables.scss
+5 -3
View File
@@ -154,6 +154,7 @@
--brand-gradient-fade-out-color: linear-gradient(to bottom, rgba(213, 235, 224, 0), #d0ece0 70%);
--color-button-bg-selected: var(--color-brand);
--color-button-icon-selected: var(--color-accent-contrast);
--color-button-text-selected: var(--color-accent-contrast);
--color-gradient-button-bg: linear-gradient(180deg, #f8f9fa 0%, #dce0e6 100%);
@@ -330,7 +331,7 @@ html {
--color-base: var(--color-text-default);
--color-secondary: var(--color-text-tertiary);
--color-contrast: var(--color-text-primary);
--color-accent-contrast: #000000;
--color-accent-contrast: rgba(0, 0, 0, 0.9);
--color-red-highlight: rgba(255, 73, 110, 0.25);
--color-orange-highlight: rgba(255, 163, 71, 0.25);
@@ -346,7 +347,7 @@ html {
--color-purple-bg: rgba(199, 138, 255, 0.2);
--color-brand: var(--color-green);
--color-brand-highlight: rgba(27, 217, 106, 0.25);
--color-brand-highlight: rgba(27, 217, 106, 0.3);
--color-brand-shadow: rgba(27, 217, 106, 0.7);
--shadow-inset-lg: inset 0px -2px 2px hsla(221, 39%, 11%, 0.1);
@@ -368,7 +369,8 @@ html {
--brand-gradient-fade-out-color: linear-gradient(to bottom, rgba(24, 30, 31, 0), #171d1e 80%);
--color-button-bg-selected: var(--color-brand-highlight);
--color-button-text-selected: var(--color-brand);
--color-button-icon-selected: var(--color-brand);
--color-button-text-selected: var(--color-text-primary);
--color-gradient-button-bg: linear-gradient(180deg, #3a3d47 0%, #33363d 100%);
packages/tooling-config/tailwind/tailwind-preset.ts
+1
View File
@@ -177,6 +177,7 @@ const config: Config = {
border: 'var(--color-button-border)',
bgSelected: 'var(--color-button-bg-selected)',
textSelected: 'var(--color-button-text-selected)',
iconSelected: 'var(--color-button-icon-selected)',
},
toggleHandle: 'var(--color-toggle-handle)',
dropdown: {
packages/ui/src/components/base/NavTabs.vue
+20 -8
View File
@@ -2,7 +2,7 @@
<nav
v-if="filteredLinks.length > 1"
ref="scrollContainer"
class="relative flex w-fit overflow-x-auto rounded-full bg-bg-raised p-1 text-sm font-bold"
class="relative flex w-fit overflow-x-auto rounded-full bg-bg-raised p-1 text-sm font-semibold"
:class="{ 'drop-shadow-xl border border-solid border-surface-4': mode === 'navigation' }"
>
<template v-if="mode === 'navigation'">
@@ -18,8 +18,13 @@
@mouseenter="link.onHover?.()"
@focus="link.onHover?.()"
>
<component :is="link.icon" v-if="link.icon" class="size-5" :class="getIconClasses(index)" />
<span class="text-nowrap" :class="getLabelClasses(index)">
<component
:is="link.icon"
v-if="link.icon"
class="size-5 hidden md:flex"
:class="getIconClasses(index)"
/>
<span class="text-nowrap" :class="getLabelClasses(index, !!link.icon)">
{{ link.label }}
</span>
</RouterLink>
@@ -35,8 +40,13 @@
:class="getSSRFallbackClasses(index)"
@click="emit('tabClick', index, link)"
>
<component :is="link.icon" v-if="link.icon" class="size-5" :class="getIconClasses(index)" />
<span class="text-nowrap" :class="getLabelClasses(index)">
<component
:is="link.icon"
v-if="link.icon"
class="size-5 hidden md:flex"
:class="getIconClasses(index)"
/>
<span class="text-nowrap" :class="getLabelClasses(index, !!link.icon)">
{{ link.label }}
</span>
</div>
@@ -144,14 +154,16 @@ function getSSRFallbackClasses(index: number) {
function getIconClasses(index: number) {
return {
'text-button-textSelected': isActiveAndNotSubpage.value(index),
'text-button-iconSelected': isActiveAndNotSubpage.value(index),
'text-secondary': !isActiveAndNotSubpage.value(index),
}
}
function getLabelClasses(index: number) {
function getLabelClasses(index: number, hasIcon: boolean = false) {
return {
'text-button-textSelected': isActiveAndNotSubpage.value(index),
'text-button-iconSelected md:text-button-textSelected':
hasIcon && isActiveAndNotSubpage.value(index),
'text-button-iconSelected': !hasIcon && isActiveAndNotSubpage.value(index),
'text-contrast': !isActiveAndNotSubpage.value(index),
}
}
packages/ui/src/components/base/buttons/ButtonFrame.vue
+7 -7
View File
@@ -26,18 +26,18 @@ const baseClasses = [
].join(' ')
const sizeClasses: Record<ButtonSize, string> = {
xs: 'h-7 gap-1 rounded-lg px-1.5 text-sm font-semibold leading-5 [&>svg]:size-4 [&>svg]:min-h-4 [&>svg]:min-w-4 [&>svg]:shrink-0',
sm: 'h-8 gap-1 rounded-[10px] px-1.5 text-sm font-semibold leading-5 [&>svg]:size-4 [&>svg]:min-h-4 [&>svg]:min-w-4 [&>svg]:shrink-0',
md: 'h-9 gap-1.5 rounded-xl px-2.5 text-base font-semibold leading-5 [&>svg]:size-5 [&>svg]:min-h-5 [&>svg]:min-w-5 [&>svg]:shrink-0',
lg: 'h-10 gap-2 rounded-[14px] px-4 text-base font-semibold leading-5 [&>svg]:size-5 [&>svg]:min-h-5 [&>svg]:min-w-5 [&>svg]:shrink-0',
xl: 'h-12 gap-2 rounded-2xl px-3.5 text-base font-extrabold leading-5 [&>svg]:size-6 [&>svg]:min-h-6 [&>svg]:min-w-6 [&>svg]:shrink-0',
xs: 'h-7 gap-1 rounded-lg px-1.5 text-[12px] font-[500] leading-5 [&>svg]:size-4 [&>svg]:min-h-4 [&>svg]:min-w-4 [&>svg]:shrink-0 [&>svg]:stroke-[1.25px]',
sm: 'h-8 gap-1 rounded-[12px] px-3 text-[14px] font-[500] leading-5 [&>svg]:size-4 [&>svg]:min-h-4 [&>svg]:min-w-4 [&>svg]:shrink-0 [&>svg]:stroke-[1.25px]',
md: 'h-10 gap-2 rounded-[14px] px-4 text-[16px] font-[500] leading-6 [&>svg]:size-5 [&>svg]:min-h-5 [&>svg]:min-w-5 [&>svg]:shrink-0 [&>svg]:stroke-[1.5px]',
lg: 'h-12 gap-2.5 rounded-[14px] px-5 text-[20px] font-[500] leading-6 [&>svg]:size-6 [&>svg]:min-h-6 [&>svg]:min-w-6 [&>svg]:shrink-0 [&>svg]:stroke-[2px]',
xl: 'h-12 gap-2.5 rounded-[14px] px-5 text-[20px] font-[600] leading-6 [&>svg]:size-6 [&>svg]:min-h-6 [&>svg]:min-w-6 [&>svg]:shrink-0 [&>svg]:stroke-[2px]',
}
const iconOnlySizeClasses: Record<ButtonSize, string> = {
xs: 'w-7 !px-0',
sm: 'w-8 !px-0',
md: 'w-9 !px-0',
lg: 'w-10 !px-0',
md: 'w-10 !px-0',
lg: 'w-12 !px-0',
xl: 'w-12 !px-0',
}
packages/ui/src/components/base/buttons/ButtonLink.vue
+4
View File
@@ -12,6 +12,7 @@ import type {
} from './types'
type ButtonLinkProps = ButtonLinkDestination & {
iconOnly?: boolean
type?: ButtonType
color?: ButtonColor
size?: ButtonSize
@@ -23,6 +24,7 @@ type ButtonLinkProps = ButtonLinkDestination & {
}
const props = withDefaults(defineProps<ButtonLinkProps>(), {
iconOnly: false,
type: 'base',
size: 'md',
target: undefined,
@@ -50,6 +52,8 @@ function handleClick(event: MouseEvent) {
:as="component"
:type="props.type"
:color="props.color"
:icon-only="props.iconOnly"
:circular="props.iconOnly"
:size="props.size"
:interaction="props.interaction"
:to="usesRouter ? props.to : undefined"
packages/ui/src/components/base/buttons/TeleportOverflowMenu.vue
+1 -1
View File
@@ -81,7 +81,7 @@ const { isOpen, panelStyle, anchorStyle, resolvedSide, open, close } = useAnchor
)
const menuItemClasses =
'overflow-menu-item flex min-h-10 w-full items-center gap-2 rounded-[10px] border-0 bg-transparent px-3 py-2 text-left text-base font-semibold leading-5 text-contrast no-underline ' +
'overflow-menu-item flex min-h-10 w-full items-center gap-2.5 rounded-[14px] border-0 bg-transparent px-3 py-2 text-left text-4 font-[500] leading-5 text-contrast no-underline ' +
'cursor-pointer whitespace-nowrap hover:bg-surface-4 focus-visible:bg-surface-4 focus-visible:outline-none ' +
'disabled:cursor-not-allowed disabled:opacity-50 [&[aria-disabled=true]]:cursor-not-allowed [&[aria-disabled=true]]:opacity-50 ' +
'[&>svg]:size-5 [&>svg]:shrink-0 [&>svg]:text-primary'