improve labels

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

@@ -1,9 +1,23 @@
 <script setup lang="ts">
-defineProps<{
-	title?: string
-	titleFor?: string
-	description?: string
-}>()
+import { defineMessage, useVIntl } from '../../composables/i18n'
+const { formatMessage } = useVIntl()
+
+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
-			v-if="description || $slots.default"
-			class="flex flex-col gap-2 text-sm leading-normal [&>p]:m-0"
-		>
+		<div v-if="description || $slots.default" class="flex flex-col gap-2 leading-normal [&>p]:m-0">
 			<p v-if="description">{{ description }}</p>
 			<slot />
 		</div>