From 23933c1f49e0bbd6934c429cf566912c96b25d97 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Fri, 31 Jul 2026 13:45:26 +0100
Subject: [PATCH] fix: qa

---
 .../query-builder/TimeframePicker.vue            |  9 +++++++++
 .../analytics-dashboard/query-builder/index.vue  |  6 ++++++
 apps/frontend/src/layouts/default.vue            |  6 ++++++
 .../src/pages/moderation/reports/index.vue       |  1 +
 .../ui/src/components/base/DropdownFilterBar.vue |  5 +++--
 packages/ui/src/components/base/MultiSelect.vue  | 10 +++++++++-
 .../ui/src/components/base/TimeFramePicker.vue   | 16 +++++++++++++++-
 .../ui/src/components/user/UserPageHeader.vue    |  4 ++++
 8 files changed, 53 insertions(+), 4 deletions(-)

diff --git a/apps/frontend/src/components/analytics-dashboard/query-builder/TimeframePicker.vue b/apps/frontend/src/components/analytics-dashboard/query-builder/TimeframePicker.vue
index 11cc66820..06a0f2546 100644
--- a/apps/frontend/src/components/analytics-dashboard/query-builder/TimeframePicker.vue
+++ b/apps/frontend/src/components/analytics-dashboard/query-builder/TimeframePicker.vue
@@ -9,6 +9,9 @@
 		:min-date="ANALYTICS_START_DATE_INPUT_VALUE"
 		:now-timestamp="queryRefreshTimestamp"
 		:trigger-class="triggerClass"
+		:trigger-type="triggerType"
+		:trigger-size="triggerSize"
+		:trigger-interaction="triggerInteraction"
 		@open="handleTimeframeOpen"
 		@commit="handleTimeframeCommit"
 		@apply="handleTimeframeApply"
@@ -23,6 +26,9 @@
 
 <script setup lang="ts">
 import {
+	type ButtonInteraction,
+	type ButtonSize,
+	type ButtonType,
 	type ComboboxOption,
 	TimeFramePicker as BaseTimeFramePicker,
 	type TimeFramePickerSelection,
@@ -58,6 +64,9 @@ const {
 
 defineProps<{
 	triggerClass?: string
+	triggerType?: ButtonType
+	triggerSize?: ButtonSize
+	triggerInteraction?: ButtonInteraction
 }>()
 
 const draftSelectedGroupBy = ref(selectedGroupBy.value)
diff --git a/apps/frontend/src/components/analytics-dashboard/query-builder/index.vue b/apps/frontend/src/components/analytics-dashboard/query-builder/index.vue
index e6a3cfe81..e0ba59b22 100644
--- a/apps/frontend/src/components/analytics-dashboard/query-builder/index.vue
+++ b/apps/frontend/src/components/analytics-dashboard/query-builder/index.vue
@@ -16,6 +16,7 @@
 				:max-tag-rows="1"
 				:trigger-class="analyticsQueryChipTriggerClass"
 				fit-content
+				trigger-type="base"
 				checkbox-position="right"
 				show-selection-actions
 				@open="handleProjectSelectOpen"
@@ -145,6 +146,7 @@
 				:dropdown-min-width="QUERY_BUILDER_DROPDOWN_MIN_WIDTH"
 				:display-value="selectedGroupByLabel"
 				:trigger-class="analyticsQueryChipTriggerClass"
+				trigger-type="base"
 			>
 				<template #prefix>
 					<ClockIcon class="size-5 shrink-0 text-primary" />
@@ -160,6 +162,7 @@
 				:dropdown-min-width="QUERY_BUILDER_DROPDOWN_MIN_WIDTH"
 				:trigger-class="analyticsQueryChipTriggerClass"
 				fit-content
+				trigger-type="base"
 				checkbox-position="right"
 				:placeholder="formatMessage(analyticsMessages.none)"
 				show-selection-actions
@@ -214,6 +217,7 @@
 						:searchable="projectOptions.length > 6"
 						fuzzy-search
 						:max-tag-rows="1"
+						trigger-type="base"
 						checkbox-position="right"
 						show-selection-actions
 						@open="handleProjectSelectOpen"
@@ -372,6 +376,7 @@
 							:options="groupByOptions"
 							:max-height="QUERY_BUILDER_DROPDOWN_MAX_HEIGHT"
 							:dropdown-min-width="QUERY_BUILDER_DROPDOWN_MIN_WIDTH"
+							trigger-type="base"
 						/>
 					</div>
 				</div>
@@ -401,6 +406,7 @@
 									:max-height="QUERY_BUILDER_DROPDOWN_MAX_HEIGHT"
 									:dropdown-width="QUERY_BUILDER_DROPDOWN_MIN_WIDTH"
 									:dropdown-min-width="QUERY_BUILDER_DROPDOWN_MIN_WIDTH"
+									trigger-type="base"
 									checkbox-position="right"
 									:placeholder="formatMessage(analyticsMessages.none)"
 									show-selection-actions
diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index 45df99462..9178802d9 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -335,6 +335,7 @@
 								label: formatMessage(messages.lookupByEmail),
 								type: 'link',
 								to: '/admin/user_email',
+								tone: 'brand',
 								shown: isAdmin(auth.user),
 							},
 							{
@@ -342,6 +343,7 @@
 								label: formatMessage(messages.manageAffiliates),
 								type: 'link',
 								to: '/admin/affiliates',
+								tone: 'brand',
 								shown: isAdmin(auth.user),
 							},
 							{
@@ -349,6 +351,7 @@
 								label: formatMessage(messages.manageServerNotices),
 								type: 'link',
 								to: '/admin/servers/notices',
+								tone: 'brand',
 								shown: isAdmin(auth.user),
 							},
 							{
@@ -356,12 +359,14 @@
 								label: 'Server transfers',
 								type: 'link',
 								to: '/admin/servers/transfers',
+								tone: 'brand',
 								shown: isAdmin(auth.user),
 							},
 							{
 								id: 'servers-nodes',
 								label: 'Credit server nodes',
 								action: (event) => $refs.modal_batch_credit.show(event),
+								tone: 'brand',
 								shown: isAdmin(auth.user),
 							},
 							{
@@ -369,6 +374,7 @@
 								label: formatMessage(messages.analyticsEvents),
 								type: 'link',
 								to: '/admin/analytics/events',
+								tone: 'brand',
 								shown: isAdmin(auth.user),
 							},
 					]"
diff --git a/apps/frontend/src/pages/moderation/reports/index.vue b/apps/frontend/src/pages/moderation/reports/index.vue
index 0f4793c6e..20d80f948 100644
--- a/apps/frontend/src/pages/moderation/reports/index.vue
+++ b/apps/frontend/src/pages/moderation/reports/index.vue
@@ -61,6 +61,7 @@
 					:searchable="reporterOrProjectOptions.length > 6"
 					:max-tag-rows="1"
 					fit-content
+					trigger-type="base"
 					checkbox-position="right"
 					show-selection-actions
 					should-show-select-all
diff --git a/packages/ui/src/components/base/DropdownFilterBar.vue b/packages/ui/src/components/base/DropdownFilterBar.vue
index 710c036dd..83b3a23c3 100644
--- a/packages/ui/src/components/base/DropdownFilterBar.vue
+++ b/packages/ui/src/components/base/DropdownFilterBar.vue
@@ -20,6 +20,8 @@
 		:fit-content="true"
 		:searchable="preview.category.searchable"
 		:search-placeholder="preview.category.searchPlaceholder"
+		trigger-type="base"
+		trigger-size="lg"
 		:trigger-class="effectivePreviewTriggerClass"
 		:dropdown-width="getPreviewDropdownWidth(preview.category)"
 		:dropdown-min-width="getPreviewDropdownMinWidth(preview.category)"
@@ -748,8 +750,7 @@ const appliedFilterPreviews = computed(() =>
 
 const hasAppliedFilters = computed(() => appliedFilterPreviews.value.length > 0)
 const shouldShowClear = computed(() => hasAppliedFilters.value || props.showClear)
-const DEFAULT_PREVIEW_TRIGGER_CLASS =
-	'h-10 max-w-[16rem] bg-surface-4 px-4 py-1.5 transition-all bg-surface-4 hover:brightness-110 active:brightness-110'
+const DEFAULT_PREVIEW_TRIGGER_CLASS = 'max-w-[16rem]'
 const effectivePreviewTriggerClass = computed(
 	() => props.previewTriggerClass ?? DEFAULT_PREVIEW_TRIGGER_CLASS,
 )
diff --git a/packages/ui/src/components/base/MultiSelect.vue b/packages/ui/src/components/base/MultiSelect.vue
index a85a28181..f7e367809 100644
--- a/packages/ui/src/components/base/MultiSelect.vue
+++ b/packages/ui/src/components/base/MultiSelect.vue
@@ -420,7 +420,12 @@ import {
 
 import { useVirtualScroll } from '../../composables/virtual-scroll'
 import ButtonFrame from './buttons/ButtonFrame.vue'
-import type { ButtonElementHandle, ButtonSize, ButtonType } from './buttons/types'
+import type {
+	ButtonElementHandle,
+	ButtonInteraction,
+	ButtonSize,
+	ButtonType,
+} from './buttons/types'
 import StyledInput from './StyledInput.vue'
 
 export interface MultiSelectOption<T> {
@@ -501,6 +506,7 @@ const props = withDefaults(
 		/** Apply the shared button frame to compact, button-owned multiselect triggers. */
 		triggerType?: ButtonType
 		triggerSize?: ButtonSize
+		triggerInteraction?: ButtonInteraction
 		fitContent?: boolean
 		/** Width for the teleported dropdown; defaults to the trigger width */
 		dropdownWidth?: string | number
@@ -527,6 +533,7 @@ const props = withDefaults(
 		clearable: true,
 		maxHeight: DEFAULT_MAX_HEIGHT,
 		triggerSize: 'md',
+		triggerInteraction: 'surface',
 		fitContent: false,
 		noOptionsMessage: 'No options available',
 		noResultsMessage: 'No results found',
@@ -556,6 +563,7 @@ const triggerButtonProps = computed(() =>
 				nativeType: 'button' as const,
 				type: props.triggerType,
 				size: props.triggerSize,
+				interaction: props.triggerInteraction,
 				disabled: props.disabled,
 			}
 		: {},
diff --git a/packages/ui/src/components/base/TimeFramePicker.vue b/packages/ui/src/components/base/TimeFramePicker.vue
index b9bd31ada..8f4243fbe 100644
--- a/packages/ui/src/components/base/TimeFramePicker.vue
+++ b/packages/ui/src/components/base/TimeFramePicker.vue
@@ -5,6 +5,9 @@
 		:display-value="selectedTimeframeLabel"
 		:max-height="maxHeight"
 		:trigger-class="triggerClass"
+		:trigger-type="triggerType"
+		:trigger-size="triggerSize"
+		:trigger-interaction="triggerInteraction"
 		:dropdown-min-width="timeframeDropdownMinWidth"
 		:outside-click-ignore="timeframeDropdownOutsideClickIgnore"
 		:dropdown-class="
@@ -189,7 +192,12 @@
 </template>
 
 <script setup lang="ts">
-import { Button } from '#ui/components/base/buttons'
+import {
+	Button,
+	type ButtonInteraction,
+	type ButtonSize,
+	type ButtonType,
+} from '#ui/components/base/buttons'
 import { MinusIcon, PlusIcon } from '@modrinth/assets'
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
@@ -387,11 +395,17 @@ const props = withDefaults(
 		nowTimestamp?: number
 		maxHeight?: number
 		triggerClass?: string
+		triggerType?: ButtonType
+		triggerSize?: ButtonSize
+		triggerInteraction?: ButtonInteraction
 		dropdownMinWidth?: string | number
 		customRangeDropdownMinWidth?: string | number
 	}>(),
 	{
 		maxHeight: TIMEFRAME_DROPDOWN_MAX_HEIGHT,
+		triggerType: 'base',
+		triggerSize: 'md',
+		triggerInteraction: 'surface',
 		dropdownMinWidth: TIMEFRAME_DROPDOWN_MIN_WIDTH,
 		customRangeDropdownMinWidth: CUSTOM_RANGE_DROPDOWN_MIN_WIDTH,
 	},
diff --git a/packages/ui/src/components/user/UserPageHeader.vue b/packages/ui/src/components/user/UserPageHeader.vue
index ee77e288b..bac17d822 100644
--- a/packages/ui/src/components/user/UserPageHeader.vue
+++ b/packages/ui/src/components/user/UserPageHeader.vue
@@ -266,6 +266,7 @@ const moreActions = computed<OverflowMenuOption[]>(() => [
 		label: formatMessage(messages.billingButton),
 		icon: CurrencyIcon,
 		action: () => emit('openBilling'),
+		tone: 'orange',
 		shown: props.showStaffActions && props.isStaff,
 	},
 	{
@@ -284,6 +285,7 @@ const moreActions = computed<OverflowMenuOption[]>(() => [
 		label: formatMessage(messages.infoButton),
 		icon: InfoIcon,
 		action: () => emit('openInfo'),
+		tone: 'orange',
 		shown: props.showStaffActions && props.isStaff,
 	},
 	{
@@ -291,6 +293,7 @@ const moreActions = computed<OverflowMenuOption[]>(() => [
 		label: formatMessage(messages.analyticsButton),
 		icon: ChartIcon,
 		action: () => emit('openAnalytics'),
+		tone: 'orange',
 		shown: props.showStaffActions && props.isAdmin,
 	},
 	{
@@ -298,6 +301,7 @@ const moreActions = computed<OverflowMenuOption[]>(() => [
 		label: formatMessage(messages.editRoleButton),
 		icon: EditIcon,
 		action: () => emit('editRole'),
+		tone: 'orange',
 		shown: props.showStaffActions && props.isAdmin,
 	},
 ])