Clean up appearance settings

src/screens/Settings/AppearanceSettings.tsx

@@ -16,6 +16,7 @@ import {useSetThemePrefs, useThemePrefs} from '#/state/shell'
 import {SimpleViewHeader} from '#/view/com/util/SimpleViewHeader'
 import {ScrollView} from '#/view/com/util/Views'
 import {atoms as a, native, useAlf, useTheme} from '#/alf'
+import {Divider} from '#/components/Divider'
 import * as Toggle from '#/components/forms/Toggle'
 import * as ToggleButton from '#/components/forms/ToggleButton'
 import {Moon_Stroke2_Corner0_Rounded as MoonIcon} from '#/components/icons/Moon'
@@ -81,7 +82,9 @@ export function AppearanceSettingsScreen({}: Props) {
             </View>
           </SimpleViewHeader>
 
-          <View style={[a.p_xl, a.gap_lg]}>
+          <View style={[a.gap_3xl, a.pt_xl, a.px_xl]}>
+            <View style={[a.gap_lg]}>
+              <View style={[a.gap_md]}>
                 <View style={[a.flex_row, a.align_center, a.gap_md]}>
                   <PhoneIcon style={t.atoms.text} />
                   <Text style={a.text_md}>
@@ -108,11 +111,13 @@ export function AppearanceSettingsScreen({}: Props) {
                     </ToggleButton.ButtonText>
                   </ToggleButton.Button>
                 </ToggleButton.Group>
+              </View>
+
               {colorMode !== 'light' && (
                 <Animated.View
                   entering={native(FadeInDown)}
                   exiting={native(FadeOutDown)}
-                style={[a.mt_md, a.gap_lg]}>
+                  style={[a.gap_md]}>
                   <View style={[a.flex_row, a.align_center, a.gap_md]}>
                     <MoonIcon style={t.atoms.text} />
                     <Text style={a.text_md}>
@@ -140,32 +145,103 @@ export function AppearanceSettingsScreen({}: Props) {
             </View>
 
             {neue && (
-            <View style={[a.p_xl, a.gap_lg]}>
+              <View style={[a.gap_lg]}>
-              <Text>Neue options</Text>
+                <Text style={[a.text_lg, a.font_bold]}>Typography</Text>
+
+                <Divider />
+
+                <View
+                  style={[
+                    a.flex_row,
+                    a.align_start,
+                    a.justify_between,
+                    a.gap_xl,
+                  ]}>
+                  <View style={[a.flex_1, a.gap_xs, {maxWidth: 360}]}>
+                    <Text style={[a.text_sm, a.font_bold, a.leading_snug]}>
+                      <Trans>Theme font</Trans>
+                    </Text>
+                    <Text
+                      style={[
+                        a.text_sm,
+                        a.leading_snug,
+                        t.atoms.text_contrast_medium,
+                      ]}>
+                      <Trans>
+                        Enables a consistent typeface for a clean user
+                        experience across devices. To use your default system
+                        font, disable this.
+                      </Trans>
+                    </Text>
+                  </View>
+
                   <Toggle.Item
-                name="Font scale"
+                    name="font"
-                label="Font scale"
+                    label={_(msg`Use theme font`)}
-                value={fontScale}
-                onChange={checked => {
-                  setFontScale(checked)
-                  fonts.setFontScale(checked ? 0.9375 : 1)
-                }}>
-                <Toggle.LabelText>Enable new font scale</Toggle.LabelText>
-                <Toggle.Switch />
-              </Toggle.Item>
-              <Toggle.Item
-                name="Font family"
-                label="Font family"
                     value={fontFamily}
                     onChange={checked => {
                       setFontFamily(checked)
                       fonts.setFontFamily(checked ? 'theme' : 'system')
                     }}>
-                <Toggle.LabelText>Use theme font</Toggle.LabelText>
+                    <Toggle.LabelText>
+                      {fontFamily ? (
+                        <Trans>Enabled</Trans>
+                      ) : (
+                        <Trans>Disabled</Trans>
+                      )}
+                    </Toggle.LabelText>
                     <Toggle.Switch />
                   </Toggle.Item>
                 </View>
+
+                <Divider />
+
+                <View
+                  style={[
+                    a.flex_row,
+                    a.align_start,
+                    a.justify_between,
+                    a.gap_xl,
+                  ]}>
+                  <View style={[a.flex_1, a.gap_xs, {maxWidth: 360}]}>
+                    <Text style={[a.text_sm, a.font_bold, a.leading_snug]}>
+                      <Trans>Theme font size</Trans>
+                    </Text>
+                    <Text
+                      style={[
+                        a.text_sm,
+                        a.leading_snug,
+                        t.atoms.text_contrast_medium,
+                      ]}>
+                      <Trans>
+                        Subtly scales the type size for a clean user experience
+                        across devices. To use the font size defined by your
+                        operating system, disable this.
+                      </Trans>
+                    </Text>
+                  </View>
+
+                  <Toggle.Item
+                    name="fontScale"
+                    label={_(msg`Enable new font scale`)}
+                    value={fontScale}
+                    onChange={checked => {
+                      setFontScale(checked)
+                      fonts.setFontScale(checked ? 0.9375 : 1)
+                    }}>
+                    <Toggle.LabelText>
+                      {fontScale ? (
+                        <Trans>Enabled</Trans>
+                      ) : (
+                        <Trans>Disabled</Trans>
                       )}
+                    </Toggle.LabelText>
+                    <Toggle.Switch />
+                  </Toggle.Item>
+                </View>
+              </View>
+            )}
+          </View>
         </ScrollView>
       </View>
     </LayoutAnimationConfig>