[Neue] Font weights (#5442)

* Align all font weights

* Only load necessary fonts

* Also comment out from hook

src/view/screens/AccessibilitySettings.tsx

@@ -69,7 +69,7 @@ export function AccessibilitySettingsScreen({}: Props) {
           },
         ]}>
         <View style={a.flex_1}>
-          <Text type="title-lg" style={[pal.text, {fontWeight: 'bold'}]}>
+          <Text type="title-lg" style={[pal.text, {fontWeight: '600'}]}>
             <Trans>Accessibility Settings</Trans>
           </Text>
         </View>

src/view/screens/LanguageSettings.tsx

@@ -9,19 +9,19 @@ import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useFocusEffect} from '@react-navigation/native'
 
+import {APP_LANGUAGES, LANGUAGES} from '#/lib/../locale/languages'
+import {useAnalytics} from '#/lib/analytics/analytics'
+import {usePalette} from '#/lib/hooks/usePalette'
+import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
+import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
+import {s} from '#/lib/styles'
 import {sanitizeAppLanguageSetting} from '#/locale/helpers'
 import {useModalControls} from '#/state/modals'
 import {useLanguagePrefs, useLanguagePrefsApi} from '#/state/preferences'
 import {useSetMinimalShellMode} from '#/state/shell'
-import {APP_LANGUAGES, LANGUAGES} from 'lib/../locale/languages'
-import {useAnalytics} from 'lib/analytics/analytics'
-import {usePalette} from 'lib/hooks/usePalette'
-import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types'
-import {s} from 'lib/styles'
-import {Button} from 'view/com/util/forms/Button'
-import {ViewHeader} from 'view/com/util/ViewHeader'
-import {CenteredView} from 'view/com/util/Views'
+import {Button} from '#/view/com/util/forms/Button'
+import {ViewHeader} from '#/view/com/util/ViewHeader'
+import {CenteredView} from '#/view/com/util/Views'
 import {Text} from '../com/util/text/Text'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'LanguageSettings'>
@@ -118,7 +118,7 @@ export function LanguageSettingsScreen(_props: Props) {
                   color: pal.text.color,
                   fontSize: 14,
                   letterSpacing: 0.5,
-                  fontWeight: '500',
+                  fontWeight: '600',
                   paddingHorizontal: 14,
                   paddingVertical: 8,
                   borderRadius: 24,
@@ -128,7 +128,7 @@ export function LanguageSettingsScreen(_props: Props) {
                   color: pal.text.color,
                   fontSize: 14,
                   letterSpacing: 0.5,
-                  fontWeight: '500',
+                  fontWeight: '600',
                   paddingHorizontal: 14,
                   paddingVertical: 8,
                   borderRadius: 24,
@@ -147,7 +147,7 @@ export function LanguageSettingsScreen(_props: Props) {
                   fontSize: 14,
                   fontFamily: 'inherit',
                   letterSpacing: 0.5,
-                  fontWeight: '500',
+                  fontWeight: '600',
                   paddingHorizontal: 14,
                   paddingVertical: 8,
                   borderRadius: 24,
@@ -211,7 +211,7 @@ export function LanguageSettingsScreen(_props: Props) {
                   color: pal.text.color,
                   fontSize: 14,
                   letterSpacing: 0.5,
-                  fontWeight: '500',
+                  fontWeight: '600',
                   paddingHorizontal: 14,
                   paddingVertical: 8,
                   borderRadius: 24,
@@ -221,7 +221,7 @@ export function LanguageSettingsScreen(_props: Props) {
                   color: pal.text.color,
                   fontSize: 14,
                   letterSpacing: 0.5,
-                  fontWeight: '500',
+                  fontWeight: '600',
                   paddingHorizontal: 14,
                   paddingVertical: 8,
                   borderRadius: 24,
@@ -239,7 +239,7 @@ export function LanguageSettingsScreen(_props: Props) {
                   fontSize: 14,
                   fontFamily: 'inherit',
                   letterSpacing: 0.5,
-                  fontWeight: '500',
+                  fontWeight: '600',
                   paddingHorizontal: 14,
                   paddingVertical: 8,
                   borderRadius: 24,

src/view/screens/Lists.tsx

@@ -5,17 +5,17 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {Trans} from '@lingui/macro'
 import {useFocusEffect, useNavigation} from '@react-navigation/native'
 
+import {usePalette} from '#/lib/hooks/usePalette'
+import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
+import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
+import {NavigationProp} from '#/lib/routes/types'
+import {s} from '#/lib/styles'
 import {useModalControls} from '#/state/modals'
 import {useSetMinimalShellMode} from '#/state/shell'
-import {usePalette} from 'lib/hooks/usePalette'
-import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types'
-import {NavigationProp} from 'lib/routes/types'
-import {s} from 'lib/styles'
 import {MyLists} from '#/view/com/lists/MyLists'
-import {Button} from 'view/com/util/forms/Button'
-import {SimpleViewHeader} from 'view/com/util/SimpleViewHeader'
-import {Text} from 'view/com/util/text/Text'
+import {Button} from '#/view/com/util/forms/Button'
+import {SimpleViewHeader} from '#/view/com/util/SimpleViewHeader'
+import {Text} from '#/view/com/util/text/Text'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'Lists'>
 export function ListsScreen({}: Props) {
@@ -61,7 +61,7 @@ export function ListsScreen({}: Props) {
               },
         ]}>
         <View style={{flex: 1}}>
-          <Text type="title-lg" style={[pal.text, {fontWeight: 'bold'}]}>
+          <Text type="title-lg" style={[pal.text, {fontWeight: '600'}]}>
             <Trans>User Lists</Trans>
           </Text>
           <Text style={pal.textLight}>

src/view/screens/ModerationModlists.tsx

@@ -1,20 +1,21 @@
 import React from 'react'
 import {View} from 'react-native'
-import {useFocusEffect, useNavigation} from '@react-navigation/native'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {AtUri} from '@atproto/api'
-import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
-import {MyLists} from '#/view/com/lists/MyLists'
-import {Text} from 'view/com/util/text/Text'
-import {Button} from 'view/com/util/forms/Button'
-import {NavigationProp} from 'lib/routes/types'
-import {usePalette} from 'lib/hooks/usePalette'
-import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {SimpleViewHeader} from 'view/com/util/SimpleViewHeader'
-import {s} from 'lib/styles'
-import {useSetMinimalShellMode} from '#/state/shell'
-import {useModalControls} from '#/state/modals'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {Trans} from '@lingui/macro'
+import {useFocusEffect, useNavigation} from '@react-navigation/native'
+
+import {usePalette} from '#/lib/hooks/usePalette'
+import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
+import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
+import {NavigationProp} from '#/lib/routes/types'
+import {s} from '#/lib/styles'
+import {useModalControls} from '#/state/modals'
+import {useSetMinimalShellMode} from '#/state/shell'
+import {MyLists} from '#/view/com/lists/MyLists'
+import {Button} from '#/view/com/util/forms/Button'
+import {SimpleViewHeader} from '#/view/com/util/SimpleViewHeader'
+import {Text} from '#/view/com/util/text/Text'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'ModerationModlists'>
 export function ModerationModlistsScreen({}: Props) {
@@ -54,7 +55,7 @@ export function ModerationModlistsScreen({}: Props) {
           !isMobile && [pal.border, {borderLeftWidth: 1, borderRightWidth: 1}]
         }>
         <View style={{flex: 1}}>
-          <Text type="title-lg" style={[pal.text, {fontWeight: 'bold'}]}>
+          <Text type="title-lg" style={[pal.text, {fontWeight: '600'}]}>
             <Trans>Moderation Lists</Trans>
           </Text>
           <Text style={pal.textLight}>

src/view/screens/PreferencesExternalEmbeds.tsx

@@ -3,21 +3,21 @@ import {StyleSheet, View} from 'react-native'
 import {Trans} from '@lingui/macro'
 import {useFocusEffect} from '@react-navigation/native'
 
+import {useAnalytics} from '#/lib/analytics/analytics'
+import {usePalette} from '#/lib/hooks/usePalette'
+import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
+import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
 import {
   EmbedPlayerSource,
   externalEmbedLabels,
 } from '#/lib/strings/embed-player'
-import {useSetMinimalShellMode} from '#/state/shell'
-import {useAnalytics} from 'lib/analytics/analytics'
-import {usePalette} from 'lib/hooks/usePalette'
-import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types'
-import {s} from 'lib/styles'
+import {s} from '#/lib/styles'
 import {
   useExternalEmbedsPrefs,
   useSetExternalEmbedPref,
-} from 'state/preferences'
-import {ToggleButton} from 'view/com/util/forms/ToggleButton'
+} from '#/state/preferences'
+import {useSetMinimalShellMode} from '#/state/shell'
+import {ToggleButton} from '#/view/com/util/forms/ToggleButton'
 import {atoms as a} from '#/alf'
 import {SimpleViewHeader} from '../com/util/SimpleViewHeader'
 import {Text} from '../com/util/text/Text'
@@ -50,7 +50,7 @@ export function PreferencesExternalEmbeds({}: Props) {
           showBackButton={isTabletOrMobile}
           style={[pal.border, a.border_b]}>
           <View style={a.flex_1}>
-            <Text type="title-lg" style={[pal.text, {fontWeight: 'bold'}]}>
+            <Text type="title-lg" style={[pal.text, {fontWeight: '600'}]}>
               <Trans>External Media Preferences</Trans>
             </Text>
             <Text style={pal.textLight}>

src/view/screens/PreferencesFollowingFeed.tsx

@@ -44,7 +44,7 @@ export function PreferencesFollowingFeed({}: Props) {
           showBackButton={isTabletOrMobile}
           style={[pal.border, a.border_b]}>
           <View style={a.flex_1}>
-            <Text type="title-lg" style={[pal.text, {fontWeight: 'bold'}]}>
+            <Text type="title-lg" style={[pal.text, {fontWeight: '600'}]}>
               <Trans>Following Feed Preferences</Trans>
             </Text>
             <Text style={pal.textLight}>

src/view/screens/PreferencesThreads.tsx

@@ -47,7 +47,7 @@ export function PreferencesThreads({}: Props) {
           showBackButton={isTabletOrMobile}
           style={[pal.border, a.border_b]}>
           <View style={a.flex_1}>
-            <Text type="title-lg" style={[pal.text, {fontWeight: 'bold'}]}>
+            <Text type="title-lg" style={[pal.text, {fontWeight: '600'}]}>
               <Trans>Thread Preferences</Trans>
             </Text>
             <Text style={pal.textLight}>

src/view/screens/Search/Search.tsx

@@ -24,11 +24,18 @@ import {useFocusEffect, useNavigation} from '@react-navigation/native'
 import {useAnalytics} from '#/lib/analytics/analytics'
 import {createHitslop} from '#/lib/constants'
 import {HITSLOP_10} from '#/lib/constants'
+import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
 import {usePalette} from '#/lib/hooks/usePalette'
+import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {MagnifyingGlassIcon} from '#/lib/icons'
 import {makeProfileLink} from '#/lib/routes/links'
 import {NavigationProp} from '#/lib/routes/types'
+import {
+  NativeStackScreenProps,
+  SearchTabNavigatorParams,
+} from '#/lib/routes/types'
 import {augmentSearchQuery} from '#/lib/strings/helpers'
+import {useTheme} from '#/lib/ThemeContext'
 import {logger} from '#/logger'
 import {isNative, isWeb} from '#/platform/detection'
 import {listenSoftReset} from '#/state/events'
@@ -40,13 +47,6 @@ import {useSearchPostsQuery} from '#/state/queries/search-posts'
 import {useSession} from '#/state/session'
 import {useSetDrawerOpen} from '#/state/shell'
 import {useSetDrawerSwipeDisabled, useSetMinimalShellMode} from '#/state/shell'
-import {useNonReactiveCallback} from 'lib/hooks/useNonReactiveCallback'
-import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {
-  NativeStackScreenProps,
-  SearchTabNavigatorParams,
-} from 'lib/routes/types'
-import {useTheme} from 'lib/ThemeContext'
 import {Pager} from '#/view/com/pager/Pager'
 import {TabBar} from '#/view/com/pager/TabBar'
 import {Post} from '#/view/com/post/Post'
@@ -414,7 +414,7 @@ let SearchScreenInner = ({query}: {query?: string}): React.ReactNode => {
                 display: 'flex',
                 paddingVertical: 12,
                 paddingHorizontal: 18,
-                fontWeight: 'bold',
+                fontWeight: '600',
                 borderBottomWidth: 1,
               },
             ]}>
@@ -1134,7 +1134,7 @@ const styles = StyleSheet.create({
     borderRadius: 8,
   },
   searchHistoryTitle: {
-    fontWeight: 'bold',
+    fontWeight: '600',
     paddingVertical: 12,
     paddingHorizontal: 10,
   },

src/view/screens/Settings/index.tsx

@@ -18,6 +18,18 @@ import {useLingui} from '@lingui/react'
 import {useFocusEffect, useNavigation} from '@react-navigation/native'
 import {useQueryClient} from '@tanstack/react-query'
 
+import {useAnalytics} from '#/lib/analytics/analytics'
+import {appVersion, BUNDLE_DATE, bundleInfo} from '#/lib/app-info'
+import {STATUS_PAGE_URL} from '#/lib/constants'
+import {useAccountSwitcher} from '#/lib/hooks/useAccountSwitcher'
+import {useCustomPalette} from '#/lib/hooks/useCustomPalette'
+import {usePalette} from '#/lib/hooks/usePalette'
+import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
+import {HandIcon, HashtagIcon} from '#/lib/icons'
+import {makeProfileLink} from '#/lib/routes/links'
+import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
+import {NavigationProp} from '#/lib/routes/types'
+import {colors, s} from '#/lib/styles'
 import {isNative} from '#/platform/detection'
 import {useModalControls} from '#/state/modals'
 import {clearStorage} from '#/state/persisted'
@@ -33,26 +45,14 @@ import {SessionAccount, useSession, useSessionApi} from '#/state/session'
 import {useOnboardingDispatch, useSetMinimalShellMode} from '#/state/shell'
 import {useLoggedOutViewControls} from '#/state/shell/logged-out'
 import {useCloseAllActiveElements} from '#/state/util'
-import {useAnalytics} from 'lib/analytics/analytics'
-import {appVersion, BUNDLE_DATE, bundleInfo} from 'lib/app-info'
-import {STATUS_PAGE_URL} from 'lib/constants'
-import {useAccountSwitcher} from 'lib/hooks/useAccountSwitcher'
-import {useCustomPalette} from 'lib/hooks/useCustomPalette'
-import {usePalette} from 'lib/hooks/usePalette'
-import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {HandIcon, HashtagIcon} from 'lib/icons'
-import {makeProfileLink} from 'lib/routes/links'
-import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types'
-import {NavigationProp} from 'lib/routes/types'
-import {colors, s} from 'lib/styles'
-import {AccountDropdownBtn} from 'view/com/util/AccountDropdownBtn'
-import {ToggleButton} from 'view/com/util/forms/ToggleButton'
-import {Link, TextLink} from 'view/com/util/Link'
-import {SimpleViewHeader} from 'view/com/util/SimpleViewHeader'
-import {Text} from 'view/com/util/text/Text'
-import * as Toast from 'view/com/util/Toast'
-import {UserAvatar} from 'view/com/util/UserAvatar'
-import {ScrollView} from 'view/com/util/Views'
+import {AccountDropdownBtn} from '#/view/com/util/AccountDropdownBtn'
+import {ToggleButton} from '#/view/com/util/forms/ToggleButton'
+import {Link, TextLink} from '#/view/com/util/Link'
+import {SimpleViewHeader} from '#/view/com/util/SimpleViewHeader'
+import {Text} from '#/view/com/util/text/Text'
+import * as Toast from '#/view/com/util/Toast'
+import {UserAvatar} from '#/view/com/util/UserAvatar'
+import {ScrollView} from '#/view/com/util/Views'
 import {DeactivateAccountDialog} from '#/screens/Settings/components/DeactivateAccountDialog'
 import {atoms as a, useTheme} from '#/alf'
 import {useDialogControl} from '#/components/Dialog'
@@ -298,7 +298,7 @@ export function SettingsScreen({}: Props) {
           !isMobile && {borderLeftWidth: 1, borderRightWidth: 1},
         ]}>
         <View style={{flex: 1}}>
-          <Text type="title-lg" style={[pal.text, {fontWeight: 'bold'}]}>
+          <Text type="title-lg" style={[pal.text, {fontWeight: '600'}]}>
             <Trans>Settings</Trans>
           </Text>
         </View>