Copy tweaks

src/components/dialogs/nuxs/NeueTypography.tsx

@@ -49,19 +49,18 @@ export function NeueTypography() {
         <View style={[a.gap_xl]}>
           <View style={[a.gap_md]}>
             <Text style={[a.text_3xl, {fontWeight: '900'}]}>
-              <Trans>Introducing new font settings ✨</Trans>
+              <Trans>New font settings ✨</Trans>
             </Text>
-            <Text style={[a.text_lg, a.leading_snug]}>
+            <Text style={[a.text_lg, a.leading_snug, {maxWidth: 400}]}>
               <Trans>
-                To ensure the best possible experience, we're introducing a new
+                We're introducing a new theme font, along with adjustable font
-                theme font, along with adjustable font sizing settings.
+                sizing.
               </Trans>
             </Text>
             <Text
               style={[a.text_sm, a.leading_snug, t.atoms.text_contrast_medium]}>
               <Trans>
-                Defaults are shown below. You can edit these in your Appearance
+                You can adjust these in your Appearance Settings later.
-                Settings later.
               </Trans>
             </Text>
           </View>

src/screens/Settings/AppearanceSettings.tsx

@@ -206,9 +206,17 @@ export function AppearanceToggleButtonGroup({
   const t = useTheme()
   return (
     <View style={[a.gap_sm]}>
-      <View style={[a.flex_row, a.align_center, a.gap_md]}>
+      <View style={[a.gap_xs]}>
-        <Icon style={t.atoms.text} />
+        <View style={[a.flex_row, a.align_center, a.gap_md]}>
-        <Text style={[a.text_md, a.font_bold]}>{title}</Text>
+          <Icon style={t.atoms.text} />
+          <Text style={[a.text_md, a.font_bold]}>{title}</Text>
+        </View>
+        {description && (
+          <Text
+            style={[a.text_sm, a.leading_snug, t.atoms.text_contrast_medium]}>
+            {description}
+          </Text>
+        )}
       </View>
       <ToggleButton.Group label={title} values={values} onChange={onChange}>
         {items.map(item => (
@@ -220,12 +228,6 @@ export function AppearanceToggleButtonGroup({
           </ToggleButton.Button>
         ))}
       </ToggleButton.Group>
-
-      {description && (
-        <Text style={[a.text_sm, a.leading_snug, t.atoms.text_contrast_medium]}>
-          {description}
-        </Text>
-      )}
     </View>
   )
 }