improve labels

apps/frontend/src/components/ui/project-settings/disclosures/AdvertisingDisclosureCard.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { MegaphoneIcon } from '@modrinth/assets'
 import {
+	commonMessages,
 	defineMessages,
 	IntlFormatted,
 	normalizeChildren,
@@ -33,11 +34,6 @@ const messages = defineMessages({
 		id: 'project.settings.disclosures.advertising.description.2',
 		defaultMessage: `If the promotion has no direct monetary value <emphasis>and</emphasis> it is for something that the average person would consider <italic>relevant</italic> and <italic>unobtrusive</italic> (such as a link to your Modrinth profile in the corner of the settings page for your own mod), we would not consider that an advertisement.`,
 	},
-	noteDescription: {
-		id: 'project.settings.disclosures.advertising.note-description',
-		defaultMessage:
-			'Please explain how your project utilizes advertising so that users can know what to expect.',
-	},
 	notePlaceholder: {
 		id: 'project.settings.disclosures.advertising.note-placeholder',
 		defaultMessage: 'e.g. Adds the Modrinth SMP server to your server list automatically.',
@@ -69,7 +65,7 @@ const messages = defineMessages({
 		</p>
 		<template #expanded>
 			<SettingsFormGroup
-				:title="formatMessage(messages.noteDescription)"
+				:title="formatMessage(commonMessages.explanationLabel)"
 				title-for="advertising-disclosure-note"
 			>
 				<StyledInput

apps/frontend/src/components/ui/project-settings/disclosures/AiDisclosureCard.vue

@@ -2,6 +2,7 @@
 import { SparklesIcon } from '@modrinth/assets'
 import {
 	Checkbox,
+	commonMessages,
 	defineMessages,
 	IntlFormatted,
 	normalizeChildren,
@@ -42,7 +43,7 @@ const messages = defineMessages({
 	},
 	typesDescription: {
 		id: 'project.settings.disclosures.ai.types-description',
-		defaultMessage: 'Select what this project uses generative AI for.',
+		defaultMessage: 'What is generative AI being used for?',
 	},
 	typeCode: {
 		id: 'project.settings.disclosures.ai.types-code',
@@ -60,11 +61,6 @@ const messages = defineMessages({
 		id: 'project.settings.disclosures.ai.types-functionality',
 		defaultMessage: 'Functionality',
 	},
-	noteDescription: {
-		id: 'project.settings.disclosures.ai.note-description',
-		defaultMessage:
-			'You may optionally provide a note to explain how you use generative AI in this project.',
-	},
 	notePlaceholder: {
 		id: 'project.settings.disclosures.ai.note-placeholder',
 		defaultMessage: 'e.g. The Chinese and Arabic translations are AI-generated.',
@@ -129,8 +125,9 @@ function setUse(use: AiUsage, enabled: boolean) {
 				</div>
 			</SettingsFormGroup>
 			<SettingsFormGroup
-				:title="formatMessage(messages.noteDescription)"
+				:title="formatMessage(commonMessages.explanationLabel)"
 				title-for="ai-disclosure-note"
+				optional
 			>
 				<StyledInput
 					id="ai-disclosure-note"

apps/frontend/src/components/ui/project-settings/disclosures/ArchivedDisclosureCard.vue

@@ -2,6 +2,7 @@
 import { ArchiveIcon } from '@modrinth/assets'
 import {
 	ArchivedProjectBanner,
+	commonMessages,
 	defineMessages,
 	SettingsFormGroup,
 	SettingsToggleCard,
@@ -33,11 +34,7 @@ const messages = defineMessages({
 	description2: {
 		id: 'project.settings.disclosures.archived.description.2',
 		defaultMessage:
-			'Archived projects remain discoverable when their visibility is set to Public. If you wish to de-list your project, set its visibility to Unlisted',
+			'Archived projects remain discoverable when their visibility is set to Public. If you wish to de-list your project, set its visibility to Unlisted.',
-	},
-	noteLabel: {
-		id: 'project.settings.disclosures.archived.note-label',
-		defaultMessage: 'Optionally explain why this project is archived.',
 	},
 	notePlaceholder: {
 		id: 'project.settings.disclosures.archived.note-placeholder',
@@ -61,8 +58,9 @@ const messages = defineMessages({
 		<p>{{ formatMessage(messages.description2) }}</p>
 		<template #expanded>
 			<SettingsFormGroup
-				:title="formatMessage(messages.noteLabel)"
+				:title="formatMessage(commonMessages.explanationLabel)"
 				title-for="archived-disclosure-note"
+				optional
 			>
 				<StyledInput
 					id="archived-disclosure-note"

apps/frontend/src/components/ui/project-settings/disclosures/DerivativeDisclosureCard.vue

@@ -49,7 +49,7 @@ const messages = defineMessages({
 	},
 	noteLabel: {
 		id: 'project.settings.disclosures.derivative.note-label',
-		defaultMessage: 'Please explain how your project is based on the original work',
+		defaultMessage: 'Explain how your project is based on the original work',
 	},
 })
 

apps/frontend/src/components/ui/project-settings/disclosures/PaidFeaturesDisclosureCard.vue

@@ -34,7 +34,7 @@ const messages = defineMessages({
 	},
 	featuresDescription: {
 		id: 'project.settings.disclosures.paid-features.features-description',
-		defaultMessage: 'What kinds of paid features does it add?',
+		defaultMessage: 'List the types of paid features',
 	},
 	featurePlaceholder: {
 		id: 'project.settings.disclosures.paid-features.feature-placeholder',

apps/frontend/src/components/ui/project-settings/disclosures/PhotosensitivityDisclosureCard.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { EyeIcon } from '@modrinth/assets'
 import {
+	commonMessages,
 	defineMessages,
 	SettingsFormGroup,
 	SettingsToggleCard,
@@ -28,10 +29,6 @@ const messages = defineMessages({
 		defaultMessage:
 			'Enable this if your project contains anything that you think may be dangerous to certain people who are sensitive to flashing lights or patterns.',
 	},
-	noteLabel: {
-		id: 'project.settings.disclosures.photosensitivity.note-label',
-		defaultMessage: 'Please briefly describe why your project has a photosensitivity warning.',
-	},
 	notePlaceholder: {
 		id: 'project.settings.disclosures.photosensitivity.note-placeholder',
 		defaultMessage:
@@ -50,7 +47,7 @@ const messages = defineMessages({
 	>
 		<template #expanded>
 			<SettingsFormGroup
-				:title="formatMessage(messages.noteLabel)"
+				:title="formatMessage(commonMessages.explanationLabel)"
 				title-for="photosensitivity-disclosure-note"
 			>
 				<StyledInput

apps/frontend/src/components/ui/project-settings/disclosures/SystemInteractionsDisclosureCard.vue

@@ -30,8 +30,7 @@ const messages = defineMessages({
 	},
 	noteLabel: {
 		id: 'project.settings.disclosures.system-interactions.note-label',
-		defaultMessage:
+		defaultMessage: 'Describe the external system interactions',
-			'Please describe the external system interactions in the mod so users can know what to expect.',
 	},
 	notePlaceholder: {
 		id: 'project.settings.disclosures.system-interactions.note-placeholder',

apps/frontend/src/components/ui/project-settings/disclosures/TelemetryDisclosureCard.vue

@@ -56,7 +56,7 @@ const messages = defineMessages({
 	},
 	dataLabel: {
 		id: 'project.settings.disclosures.telemetry.data-label',
-		defaultMessage: 'What data is being collected?',
+		defaultMessage: 'What data is collected?',
 	},
 	dataDescription: {
 		id: 'project.settings.disclosures.telemetry.data-description',

apps/frontend/src/locales/en-US/index.json

@@ -3782,9 +3782,6 @@
   "project.settings.disclosures.advertising.description.2": {
     "message": "If the promotion has no direct monetary value <emphasis>and</emphasis> it is for something that the average person would consider <italic>relevant</italic> and <italic>unobtrusive</italic> (such as a link to your Modrinth profile in the corner of the settings page for your own mod), we would not consider that an advertisement."
   },
-  "project.settings.disclosures.advertising.note-description": {
-    "message": "Please explain how your project utilizes advertising so that users can know what to expect."
-  },
   "project.settings.disclosures.advertising.note-placeholder": {
     "message": "e.g. Adds the Modrinth SMP server to your server list automatically."
   },
@@ -3797,9 +3794,6 @@
   "project.settings.disclosures.ai.description": {
     "message": "You must enable this if this project contains a substantial amount of AI-generated code, any\n\t\t\t\tassets that are substantially AI-generated, the project's functionality relies on the use of\n\t\t\t\tgenerative AI, or if any element of your project's page such as description or publishing\n\t\t\t\trelies on generative AI."
   },
-  "project.settings.disclosures.ai.note-description": {
-    "message": "You may optionally provide a note to explain how you use generative AI in this project."
-  },
   "project.settings.disclosures.ai.note-placeholder": {
     "message": "e.g. The Chinese and Arabic translations are AI-generated."
   },
@@ -3813,7 +3807,7 @@
     "message": "Code"
   },
   "project.settings.disclosures.ai.types-description": {
-    "message": "Select what this project uses generative AI for."
+    "message": "What is generative AI being used for?"
   },
   "project.settings.disclosures.ai.types-functionality": {
     "message": "Functionality"
@@ -3828,10 +3822,7 @@
     "message": "Mark your project as archived to let users know that you are no longer working on it."
   },
   "project.settings.disclosures.archived.description.2": {
-    "message": "Archived projects remain discoverable when their visibility is set to Public. If you wish to de-list your project, set its visibility to Unlisted"
+    "message": "Archived projects remain discoverable when their visibility is set to Public. If you wish to de-list your project, set its visibility to Unlisted."
-  },
-  "project.settings.disclosures.archived.note-label": {
-    "message": "Optionally explain why this project is archived."
   },
   "project.settings.disclosures.archived.note-placeholder": {
     "message": "e.g. I don't have time to maintain this project anymore, feel free to fork it!"
@@ -3858,7 +3849,7 @@
     "message": "Example project"
   },
   "project.settings.disclosures.derivative.note-label": {
-    "message": "Please explain how your project is based on the original work"
+    "message": "Explain how your project is based on the original work"
   },
   "project.settings.disclosures.derivative.title": {
     "message": "Contains derivative content"
@@ -3873,7 +3864,7 @@
     "message": "e.g. Cosmetics available as Patreon reward"
   },
   "project.settings.disclosures.paid-features.features-description": {
-    "message": "What kinds of paid features does it add?"
+    "message": "List the types of paid features"
   },
   "project.settings.disclosures.paid-features.title": {
     "message": "Contains paid features"
@@ -3881,9 +3872,6 @@
   "project.settings.disclosures.photosensitivity.description": {
     "message": "Enable this if your project contains anything that you think may be dangerous to certain people who are sensitive to flashing lights or patterns."
   },
-  "project.settings.disclosures.photosensitivity.note-label": {
-    "message": "Please briefly describe why your project has a photosensitivity warning."
-  },
   "project.settings.disclosures.photosensitivity.note-placeholder": {
     "message": "e.g. It adds a flashlight item that has a strobe mode. It can be disabled in Accessibility settings in-game."
   },
@@ -3918,7 +3906,7 @@
     "message": "You must enable this if your project reads or edits things on the user's system outside of the game."
   },
   "project.settings.disclosures.system-interactions.note-label": {
-    "message": "Please describe the external system interactions in the mod so users can know what to expect."
+    "message": "Describe the external system interactions"
   },
   "project.settings.disclosures.system-interactions.note-placeholder": {
     "message": "e.g. It adds a file to the desktop called wake_up.txt"
@@ -3942,7 +3930,7 @@
     "message": "You can either add a privacy policy, or a list of types of data that are collected. Remember to mention if it is anonymous or contains personally identifiable information (PII)."
   },
   "project.settings.disclosures.telemetry.data-label": {
-    "message": "What data is being collected?"
+    "message": "What data is collected?"
   },
   "project.settings.disclosures.telemetry.data-placeholder": {
     "message": "e.g. Anonymous launch analytics to track Minecraft version and mod loader usage."

apps/frontend/src/pages/[type]/[project]/settings/tags.vue

@@ -145,7 +145,7 @@ const groupDescriptionMessages: Record<string, MessageDescriptor> = {
 
 const { projectV2: project, projectV3, patchProject } = injectProjectPageContext()
 
-useProjectSettingsHeadTitle(messages.tagsTitle)
+useProjectSettingsHeadTitle(messages.title)
 
 const formatCategoryName = (categoryName: string) => formatCategory(formatMessage, categoryName)
 
@@ -392,10 +392,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">
@@ -415,7 +415,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
@@ -429,10 +429,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">

packages/ui/src/components/base/SettingsFormGroup.vue

@@ -1,9 +1,23 @@
 <script setup lang="ts">
-defineProps<{
+import { defineMessage, useVIntl } from '../../composables/i18n'
-	title?: string
+const { formatMessage } = useVIntl()
-	titleFor?: string
+
-	description?: string
+withDefaults(
-}>()
+	defineProps<{
+		title?: string
+		titleFor?: string
+		description?: string
+		optional?: boolean
+	}>(),
+	{
+		optional: false,
+	},
+)
+
+const optionalMessage = defineMessage({
+	id: 'settings.form.group.optional',
+	defaultMessage: '(optional)',
+})
 </script>
 
 <template>
@@ -12,11 +26,21 @@ defineProps<{
 			v-if="title || description || $slots.title || $slots.description"
 			:class="description || $slots.description ? 'flex flex-col gap-1' : undefined"
 		>
-			<label v-if="title && titleFor" :for="titleFor" class="m-0 leading-normal text-contrast">
+			<label
+				v-if="title && titleFor"
+				:for="titleFor"
+				class="m-0 leading-normal text-contrast font-semibold"
+			>
 				{{ title }}
+				<span v-if="optional" class="text-secondary font-normal">
+					{{ formatMessage(optionalMessage) }}
+				</span>
 			</label>
-			<p v-else-if="title" class="m-0 leading-normal text-contrast">
+			<p v-else-if="title" class="m-0 leading-normal text-contrast font-semibold">
 				{{ title }}
+				<span v-if="optional" class="text-secondary font-normal">
+					{{ formatMessage(optionalMessage) }}
+				</span>
 			</p>
 			<slot name="title" />
 			<p v-if="description" class="m-0 leading-normal text-primary">

packages/ui/src/components/base/SettingsOptionCard.vue

@@ -13,13 +13,13 @@ defineProps<{
 		class="grid w-full grid-cols-[1fr_auto] items-center gap-6 p-4 rounded-2xl border border-solid border-surface-4 bg-surface-3"
 	>
 		<div>
-			<h3 class="mb-1 mt-0 flex items-center gap-2 text-base font-semibold text-contrast">
+			<h3 class="mb-1 mt-0 flex items-center gap-2 text-lg font-semibold text-contrast">
 				<component :is="icon" v-if="icon" class="size-5 shrink-0 text-primary" aria-hidden="true" />
 				{{ title }}
 			</h3>
 			<div
 				v-if="description || $slots.default"
-				class="flex flex-col gap-2 text-sm leading-normal [&>p]:m-0"
+				class="flex flex-col gap-2 leading-normal [&>p]:m-0"
 			>
 				<p v-if="description">{{ description }}</p>
 				<slot />

packages/ui/src/components/base/SettingsToggleCard.vue

@@ -15,14 +15,11 @@ const enabled = defineModel<boolean>({ required: true })
 
 <template>
 	<ToggleCard v-model="enabled" :disabled="disabled">
-		<h3 class="mb-1 mt-0 flex items-center gap-2 text-base font-semibold text-contrast">
+		<h3 class="mb-1 mt-0 flex items-center gap-2 text-lg font-semibold text-contrast">
 			<component :is="icon" v-if="icon" class="size-5 shrink-0 text-primary" aria-hidden="true" />
 			{{ title }}
 		</h3>
-		<div
+		<div v-if="description || $slots.default" class="flex flex-col gap-2 leading-normal [&>p]:m-0">
-			v-if="description || $slots.default"
-			class="flex flex-col gap-2 text-sm leading-normal [&>p]:m-0"
-		>
 			<p v-if="description">{{ description }}</p>
 			<slot />
 		</div>

packages/ui/src/locales/en-US/index.json

@@ -2261,6 +2261,9 @@
   "label.error": {
     "defaultMessage": "Error"
   },
+  "label.explanation": {
+    "defaultMessage": "Explanation"
+  },
   "label.extract-failed": {
     "defaultMessage": "Extract failed"
   },
@@ -5315,6 +5318,9 @@
   "settings.feature-flags.title": {
     "defaultMessage": "Feature flags"
   },
+  "settings.form.group.optional": {
+    "defaultMessage": "(optional)"
+  },
   "settings.language.categories.default": {
     "defaultMessage": "Standard languages"
   },

packages/ui/src/utils/common-messages.ts

@@ -147,6 +147,10 @@ export const commonMessages = defineMessages({
 		id: 'notification.error.title',
 		defaultMessage: 'An error occurred',
 	},
+	explanationLabel: {
+		id: 'label.explanation',
+		defaultMessage: 'Explanation',
+	},
 	filterByLabel: {
 		id: 'label.filter-by',
 		defaultMessage: 'Filter by',