Skip to content

draft: begin button consistency pass #7053

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Prospector wants to merge 6 commits into
base: main
Choose a base branch
from
Draft

draft: begin button consistency pass #7053

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
4f9baff
begin button consistency pass
Prospector Aug 7, 2026
59d3013
18px large
Prospector Aug 7, 2026
25eb09d
Merge remote-tracking branch 'origin/main' into prospector/button-con…
Prospector Aug 7, 2026
e0dc001
size & color consistencies
Prospector Aug 7, 2026
fb35b5a
prepr
Prospector Aug 7, 2026
dcb2739
revert bad translation nuke
Prospector Aug 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 41 additions & 46 deletions apps/frontend/src/layouts/default.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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-text-selected)]'
: route.path.startsWith('/mod/')
? '!bg-[var(--color-button-bg)] !text-contrast'
: ''
"
>
<BoxIcon aria-hidden="true" />
Expand All @@ -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-text-selected)]'
: route.path.startsWith('/resourcepack/')
? '!bg-[var(--color-button-bg)] !text-contrast'
: ''
"
>
<PaintbrushIcon aria-hidden="true" />
Expand All @@ -125,30 +124,28 @@
<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-text-selected)]'
: route.path.startsWith('/datapack/')
? '!bg-[var(--color-button-bg)] !text-contrast'
: ''
"
>
<BracesIcon aria-hidden="true" />
{{ formatMessage(commonProjectTypeCategoryMessages.datapack) }}
</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-text-selected)]'
: route.path.startsWith('/shader/')
? '!bg-[var(--color-button-bg)] !text-contrast'
: ''
"
>
<GlassesIcon aria-hidden="true" />
Expand All @@ -173,14 +170,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-text-selected)]'
: route.path.startsWith('/plugin/')
? '!bg-[var(--color-button-bg)] !text-contrast'
: ''
"
>
<PlugIcon aria-hidden="true" />
Expand All @@ -189,14 +185,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-text-selected)]'
: route.path.startsWith('/server/')
? '!bg-[var(--color-button-bg)] !text-contrast'
: ''
"
>
<ServerIcon aria-hidden="true" />
Expand All @@ -208,6 +203,7 @@
type="quiet"
:label="formatMessage(commonMessages.moreOptionsButton)"
hoverable
:icon-only="false"
:options="[
{
id: 'mods',
Expand Down Expand Up @@ -253,7 +249,6 @@
},
]"
: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)]'
: isDiscoveringSubpage
Expand Down Expand Up @@ -368,7 +363,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',
Expand Down Expand Up @@ -501,7 +496,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',
Expand Down Expand Up @@ -614,7 +609,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>
Expand Down
13 changes: 11 additions & 2 deletions apps/frontend/src/pages/[type]/[project].vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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) }}
Expand Down Expand Up @@ -501,12 +501,15 @@

<script setup>
import {
BulletListIcon,
ChartIcon,
ChevronRightIcon,
ClipboardCopyIcon,
DownloadIcon,
FolderSearchIcon,
HeartIcon,
ImagesIcon,
InfoIcon,
ListIcon,
MoreVerticalIcon,
PlayIcon,
Expand All @@ -515,6 +518,7 @@ import {
ScanEyeIcon,
ServerPlusIcon,
SettingsIcon,
VersionIcon,
XIcon,
} from '@modrinth/assets'
import { getMarginTarget, moderationSettings } from '@modrinth/moderation'
Expand Down Expand Up @@ -2021,22 +2025,26 @@ 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,
onHover: loadVersions,
},
{
label: formatMessage(messages.versionsTab),
icon: VersionIcon,
href: withInstallContextQuery(`${projectUrl}/versions`),
shown:
(hasVersions.value || !!currentMember.value) &&
Expand All @@ -2047,6 +2055,7 @@ const navLinks = computed(() => {
},
{
label: formatMessage(messages.moderationTab),
icon: ScaleIcon,
href: withInstallContextQuery(`${projectUrl}/moderation`),
shown: !!currentMember.value,
},
Expand Down
10 changes: 5 additions & 5 deletions apps/frontend/src/pages/[type]/[project]/settings/tags.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -390,10 +390,10 @@ const toggleFeatured = (tag: string) => {
:key="group.id"
class="rounded-2xl border border-solid border-surface-4 bg-surface-3 p-4"
>
<h3 class="mb-1 mt-0 text-base font-semibold text-contrast">
<h3 class="mb-1 mt-0 text-lg font-semibold text-contrast">
{{ group.title }}
</h3>
<p v-if="group.description" class="mb-3 mt-0 text-sm">
<p v-if="group.description" class="mb-3 mt-0">
{{ group.description }}
</p>
<div class="grid grid-cols-2 gap-x-4 gap-y-2 sm:grid-cols-4">
Expand All @@ -413,7 +413,7 @@ const toggleFeatured = (tag: string) => {

<div class="rounded-2xl border border-solid border-surface-4 bg-surface-3 p-4">
<div class="mb-1 flex items-center gap-2">
<h3 class="m-0 text-base font-semibold text-contrast">
<h3 class="m-0 text-lg font-semibold text-contrast">
{{ formatMessage(messages.featuredTags) }}
</h3>
<TagItem
Expand All @@ -427,10 +427,10 @@ const toggleFeatured = (tag: string) => {
{{ current.featuredTags.length }}/{{ MAX_FEATURED_TAGS }}
</TagItem>
</div>
<p class="mb-3 mt-0 text-sm">
<p class="mb-3 mt-0">
{{ formatMessage(messages.featuredTagsDescription) }}
</p>
<p v-if="current.selectedTags.length < 1" class="m-0 text-sm text-secondary">
<p v-if="current.selectedTags.length < 1" class="m-0 text-secondary">
{{ formatMessage(messages.selectAtLeastOneCategory) }}
</p>
<div v-else class="grid grid-cols-2 gap-x-4 gap-y-2 sm:grid-cols-4">
Expand Down
Loading
Loading