[Neue] Font weights (#5442)

* Align all font weights

* Only load necessary fonts

* Also comment out from hook

src/view/com/auth/SplashScreen.tsx

@@ -4,9 +4,9 @@ import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
 import {Logo} from '#/view/icons/Logo'
 import {Logotype} from '#/view/icons/Logotype'
-import {ErrorBoundary} from 'view/com/util/ErrorBoundary'
 import {atoms as a, useTheme} from '#/alf'
 import {AppLanguageDropdown} from '#/components/AppLanguageDropdown'
 import {Button, ButtonText} from '#/components/Button'
@@ -35,8 +35,7 @@ export const SplashScreen = ({
             <Logotype width={161} fill={t.atoms.text.color} />
           </View>
 
-          <Text
-            style={[a.text_md, a.font_semibold, t.atoms.text_contrast_medium]}>
+          <Text style={[a.text_md, a.font_bold, t.atoms.text_contrast_medium]}>
             <Trans>What's up?</Trans>
           </Text>
         </View>

src/view/com/auth/SplashScreen.web.tsx

@@ -4,11 +4,11 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {useKawaiiMode} from '#/state/preferences/kawaii'
-import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
+import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
 import {Logo} from '#/view/icons/Logo'
 import {Logotype} from '#/view/icons/Logotype'
-import {ErrorBoundary} from 'view/com/util/ErrorBoundary'
 import {atoms as a, useTheme} from '#/alf'
 import {AppLanguageDropdown} from '#/components/AppLanguageDropdown'
 import {Button, ButtonText} from '#/components/Button'
@@ -78,11 +78,7 @@ export const SplashScreen = ({
               )}
 
               <Text
-                style={[
-                  a.text_md,
-                  a.font_semibold,
-                  t.atoms.text_contrast_medium,
-                ]}>
+                style={[a.text_md, a.font_bold, t.atoms.text_contrast_medium]}>
                 <Trans>What's up?</Trans>
               </Text>
             </View>

src/view/com/composer/photos/Gallery.tsx

@@ -7,13 +7,13 @@ import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {observer} from 'mobx-react-lite'
 
+import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
+import {Dimensions} from '#/lib/media/types'
+import {colors, s} from '#/lib/styles'
+import {isNative} from '#/platform/detection'
 import {useModalControls} from '#/state/modals'
-import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {Dimensions} from 'lib/media/types'
-import {colors, s} from 'lib/styles'
-import {isNative} from 'platform/detection'
-import {GalleryModel} from 'state/models/media/gallery'
-import {Text} from 'view/com/util/text/Text'
+import {GalleryModel} from '#/state/models/media/gallery'
+import {Text} from '#/view/com/util/text/Text'
 import {useTheme} from '#/alf'
 
 const IMAGE_GAP = 8
@@ -263,7 +263,7 @@ const styles = StyleSheet.create({
   altTextControlLabel: {
     color: 'white',
     fontSize: 12,
-    fontWeight: 'bold',
+    fontWeight: '600',
     letterSpacing: 1,
   },
   altTextHiddenRegion: {

src/view/com/modals/CreateOrEditList.tsx

@@ -14,22 +14,22 @@ import {AppBskyGraphDefs, RichText as RichTextAPI} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {useAnalytics} from '#/lib/analytics/analytics'
+import {usePalette} from '#/lib/hooks/usePalette'
+import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
+import {compressIfNeeded} from '#/lib/media/manip'
+import {cleanError, isNetworkError} from '#/lib/strings/errors'
+import {enforceLen} from '#/lib/strings/helpers'
 import {richTextToString} from '#/lib/strings/rich-text-helpers'
 import {shortenLinks, stripInvalidMentions} from '#/lib/strings/rich-text-manip'
+import {colors, gradients, s} from '#/lib/styles'
+import {useTheme} from '#/lib/ThemeContext'
 import {useModalControls} from '#/state/modals'
 import {
   useListCreateMutation,
   useListMetadataMutation,
 } from '#/state/queries/list'
 import {useAgent} from '#/state/session'
-import {useAnalytics} from 'lib/analytics/analytics'
-import {usePalette} from 'lib/hooks/usePalette'
-import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {compressIfNeeded} from 'lib/media/manip'
-import {cleanError, isNetworkError} from 'lib/strings/errors'
-import {enforceLen} from 'lib/strings/helpers'
-import {colors, gradients, s} from 'lib/styles'
-import {useTheme} from 'lib/ThemeContext'
 import {ErrorMessage} from '../util/error/ErrorMessage'
 import {Text} from '../util/text/Text'
 import * as Toast from '../util/Toast'
@@ -359,7 +359,7 @@ export function Component({
 const styles = StyleSheet.create({
   title: {
     textAlign: 'center',
-    fontWeight: 'bold',
+    fontWeight: '600',
     fontSize: 24,
     marginBottom: 18,
   },
@@ -373,7 +373,7 @@ const styles = StyleSheet.create({
     marginTop: 20,
   },
   label: {
-    fontWeight: 'bold',
+    fontWeight: '600',
   },
   form: {
     paddingHorizontal: 6,

src/view/com/modals/EditImage.tsx

@@ -8,16 +8,16 @@ import {Slider} from '@miblanchard/react-native-slider'
 import {observer} from 'mobx-react-lite'
 import ImageEditor, {Position} from 'react-avatar-editor'
 
+import {MAX_ALT_TEXT} from '#/lib/constants'
+import {usePalette} from '#/lib/hooks/usePalette'
+import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
+import {enforceLen} from '#/lib/strings/helpers'
+import {gradients, s} from '#/lib/styles'
+import {useTheme} from '#/lib/ThemeContext'
+import {getKeys} from '#/lib/type-assertions'
 import {useModalControls} from '#/state/modals'
-import {MAX_ALT_TEXT} from 'lib/constants'
-import {usePalette} from 'lib/hooks/usePalette'
-import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {enforceLen} from 'lib/strings/helpers'
-import {gradients, s} from 'lib/styles'
-import {useTheme} from 'lib/ThemeContext'
-import {getKeys} from 'lib/type-assertions'
-import {GalleryModel} from 'state/models/media/gallery'
-import {ImageModel} from 'state/models/media/image'
+import {GalleryModel} from '#/state/models/media/gallery'
+import {ImageModel} from '#/state/models/media/image'
 import {atoms as a} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import {
@@ -333,7 +333,7 @@ const styles = StyleSheet.create({
   subsection: {marginTop: 12},
   gap18: {gap: 18},
   title: {
-    fontWeight: 'bold',
+    fontWeight: '600',
     fontSize: 24,
   },
   btns: {

src/view/com/modals/EditProfile.tsx

@@ -15,18 +15,18 @@ import {AppBskyActorDefs} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {useAnalytics} from '#/lib/analytics/analytics'
+import {MAX_DESCRIPTION, MAX_DISPLAY_NAME} from '#/lib/constants'
+import {usePalette} from '#/lib/hooks/usePalette'
+import {compressIfNeeded} from '#/lib/media/manip'
+import {cleanError} from '#/lib/strings/errors'
+import {enforceLen} from '#/lib/strings/helpers'
+import {colors, gradients, s} from '#/lib/styles'
+import {useTheme} from '#/lib/ThemeContext'
 import {logger} from '#/logger'
+import {isWeb} from '#/platform/detection'
 import {useModalControls} from '#/state/modals'
 import {useProfileUpdateMutation} from '#/state/queries/profile'
-import {useAnalytics} from 'lib/analytics/analytics'
-import {MAX_DESCRIPTION, MAX_DISPLAY_NAME} from 'lib/constants'
-import {usePalette} from 'lib/hooks/usePalette'
-import {compressIfNeeded} from 'lib/media/manip'
-import {cleanError} from 'lib/strings/errors'
-import {enforceLen} from 'lib/strings/helpers'
-import {colors, gradients, s} from 'lib/styles'
-import {useTheme} from 'lib/ThemeContext'
-import {isWeb} from 'platform/detection'
 import {ErrorMessage} from '../util/error/ErrorMessage'
 import {Text} from '../util/text/Text'
 import * as Toast from '../util/Toast'
@@ -261,12 +261,12 @@ export function Component({
 const styles = StyleSheet.create({
   title: {
     textAlign: 'center',
-    fontWeight: 'bold',
+    fontWeight: '600',
     fontSize: 24,
     marginBottom: 18,
   },
   label: {
-    fontWeight: 'bold',
+    fontWeight: '600',
     paddingHorizontal: 4,
     paddingBottom: 4,
     marginTop: 20,

src/view/com/modals/InAppBrowserConsent.tsx

@@ -1,19 +1,18 @@
 import React from 'react'
 import {StyleSheet, View} from 'react-native'
-
-import {s} from 'lib/styles'
-import {Text} from '../util/text/Text'
-import {Button} from '../util/forms/Button'
-import {ScrollView} from './util'
-import {usePalette} from 'lib/hooks/usePalette'
-
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
+
+import {usePalette} from '#/lib/hooks/usePalette'
+import {s} from '#/lib/styles'
 import {useModalControls} from '#/state/modals'
 import {
   useOpenLink,
   useSetInAppBrowser,
 } from '#/state/preferences/in-app-browser'
+import {Button} from '../util/forms/Button'
+import {Text} from '../util/text/Text'
+import {ScrollView} from './util'
 
 export const snapPoints = [350]
 
@@ -89,7 +88,7 @@ export function Component({href}: {href: string}) {
 const styles = StyleSheet.create({
   title: {
     textAlign: 'center',
-    fontWeight: 'bold',
+    fontWeight: '600',
     fontSize: 24,
     marginBottom: 12,
   },

src/view/com/modals/UserAddRemoveLists.tsx

@@ -9,7 +9,12 @@ import {AppBskyGraphDefs as GraphDefs} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {usePalette} from '#/lib/hooks/usePalette'
+import {sanitizeDisplayName} from '#/lib/strings/display-names'
 import {cleanError} from '#/lib/strings/errors'
+import {sanitizeHandle} from '#/lib/strings/handles'
+import {s} from '#/lib/styles'
+import {isAndroid, isMobileWeb, isWeb} from '#/platform/detection'
 import {useModalControls} from '#/state/modals'
 import {
   getMembership,
@@ -19,11 +24,6 @@ import {
   useListMembershipRemoveMutation,
 } from '#/state/queries/list-memberships'
 import {useSession} from '#/state/session'
-import {usePalette} from 'lib/hooks/usePalette'
-import {sanitizeDisplayName} from 'lib/strings/display-names'
-import {sanitizeHandle} from 'lib/strings/handles'
-import {s} from 'lib/styles'
-import {isAndroid, isMobileWeb, isWeb} from 'platform/detection'
 import {MyLists} from '../lists/MyLists'
 import {Button} from '../util/forms/Button'
 import {Text} from '../util/text/Text'
@@ -71,7 +71,7 @@ export function Component({
         style={[
           {
             textAlign: 'center',
-            fontWeight: 'bold',
+            fontWeight: '600',
             fontSize: 20,
             marginBottom: 12,
             paddingHorizontal: 12,

src/view/com/modals/lang-settings/ContentLanguagesSettings.tsx

@@ -2,14 +2,14 @@ import React from 'react'
 import {StyleSheet, View} from 'react-native'
 import {Trans} from '@lingui/macro'
 
+import {usePalette} from '#/lib/hooks/usePalette'
+import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {deviceLanguageCodes} from '#/locale/deviceLocales'
 import {useModalControls} from '#/state/modals'
 import {
   useLanguagePrefs,
   useLanguagePrefsApi,
 } from '#/state/preferences/languages'
-import {usePalette} from 'lib/hooks/usePalette'
-import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {LANGUAGES, LANGUAGES_MAP_CODE2} from '../../../../locale/languages'
 import {Text} from '../../util/text/Text'
 import {ScrollView} from '../util'
@@ -111,7 +111,7 @@ const styles = StyleSheet.create({
   },
   title: {
     textAlign: 'center',
-    fontWeight: 'bold',
+    fontWeight: '600',
     fontSize: 24,
     marginBottom: 12,
   },

src/view/com/modals/lang-settings/PostLanguagesSettings.tsx

@@ -2,6 +2,8 @@ import React from 'react'
 import {StyleSheet, View} from 'react-native'
 import {Trans} from '@lingui/macro'
 
+import {usePalette} from '#/lib/hooks/usePalette'
+import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {deviceLanguageCodes} from '#/locale/deviceLocales'
 import {useModalControls} from '#/state/modals'
 import {
@@ -9,9 +11,7 @@ import {
   useLanguagePrefs,
   useLanguagePrefsApi,
 } from '#/state/preferences/languages'
-import {usePalette} from 'lib/hooks/usePalette'
-import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {ToggleButton} from 'view/com/util/forms/ToggleButton'
+import {ToggleButton} from '#/view/com/util/forms/ToggleButton'
 import {LANGUAGES, LANGUAGES_MAP_CODE2} from '../../../../locale/languages'
 import {Text} from '../../util/text/Text'
 import {ScrollView} from '../util'
@@ -119,7 +119,7 @@ const styles = StyleSheet.create({
   },
   title: {
     textAlign: 'center',
-    fontWeight: 'bold',
+    fontWeight: '600',
     fontSize: 24,
     marginBottom: 12,
   },

src/view/com/notifications/FeedItem.tsx

@@ -632,7 +632,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   aviExtraCount: {
-    fontWeight: 'bold',
+    fontWeight: '600',
     paddingLeft: 6,
   },
   meta: {

src/view/com/profile/ProfileSubpageHeader.tsx

@@ -5,16 +5,16 @@ import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useNavigation} from '@react-navigation/native'
 
+import {BACK_HITSLOP} from '#/lib/constants'
+import {usePalette} from '#/lib/hooks/usePalette'
+import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
+import {makeProfileLink} from '#/lib/routes/links'
+import {NavigationProp} from '#/lib/routes/types'
+import {sanitizeHandle} from '#/lib/strings/handles'
+import {isNative} from '#/platform/detection'
 import {emitSoftReset} from '#/state/events'
 import {ImagesLightbox, useLightboxControls} from '#/state/lightbox'
 import {useSetDrawerOpen} from '#/state/shell'
-import {BACK_HITSLOP} from 'lib/constants'
-import {usePalette} from 'lib/hooks/usePalette'
-import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {makeProfileLink} from 'lib/routes/links'
-import {NavigationProp} from 'lib/routes/types'
-import {sanitizeHandle} from 'lib/strings/handles'
-import {isNative} from 'platform/detection'
 import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu'
 import {StarterPack} from '#/components/icons/StarterPack'
 import {TextLink} from '../util/Link'
@@ -145,7 +145,7 @@ export function ProfileSubpageHeader({
               testID="headerTitle"
               type="title-xl"
               href={href}
-              style={[pal.text, {fontWeight: 'bold'}]}
+              style={[pal.text, {fontWeight: '600'}]}
               text={title || ''}
               onPress={emitSoftReset}
               numberOfLines={4}

src/view/com/util/Html.tsx

@@ -1,16 +1,17 @@
 import * as React from 'react'
 import {StyleSheet, View} from 'react-native'
-import {usePalette} from 'lib/hooks/usePalette'
-import {useTheme} from 'lib/ThemeContext'
-import {Text} from './text/Text'
-import {TextLink} from './Link'
 import {
   H1 as ExpoH1,
   H2 as ExpoH2,
   H3 as ExpoH3,
   H4 as ExpoH4,
 } from '@expo/html-elements'
-import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
+
+import {usePalette} from '#/lib/hooks/usePalette'
+import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
+import {useTheme} from '#/lib/ThemeContext'
+import {TextLink} from './Link'
+import {Text} from './text/Text'
 
 /**
  * These utilities are used to define long documents in an html-like
@@ -166,7 +167,7 @@ const useStyles = () => {
     h4: {
       marginTop: 0,
       marginBottom: 10,
-      fontWeight: 'bold',
+      fontWeight: '600',
     },
     p: {
       marginBottom: 10,

src/view/com/util/ViewHeader.tsx

@@ -6,12 +6,12 @@ import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useNavigation} from '@react-navigation/native'
 
+import {useAnalytics} from '#/lib/analytics/analytics'
+import {useMinimalShellHeaderTransform} from '#/lib/hooks/useMinimalShellTransform'
+import {usePalette} from '#/lib/hooks/usePalette'
+import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
+import {NavigationProp} from '#/lib/routes/types'
 import {useSetDrawerOpen} from '#/state/shell'
-import {useAnalytics} from 'lib/analytics/analytics'
-import {useMinimalShellHeaderTransform} from 'lib/hooks/useMinimalShellTransform'
-import {usePalette} from 'lib/hooks/usePalette'
-import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {NavigationProp} from 'lib/routes/types'
 import {useTheme} from '#/alf'
 import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu'
 import {Text} from './text/Text'
@@ -250,7 +250,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   title: {
-    fontWeight: 'bold',
+    fontWeight: '600',
   },
   subtitle: {
     fontSize: 13,

src/view/com/util/forms/Button.tsx

@@ -1,20 +1,21 @@
 import React from 'react'
 import {
+  ActivityIndicator,
   GestureResponderEvent,
+  NativeSyntheticEvent,
+  NativeTouchEvent,
+  Pressable,
+  PressableStateCallbackType,
   StyleProp,
   StyleSheet,
   TextStyle,
-  Pressable,
-  ViewStyle,
-  PressableStateCallbackType,
-  ActivityIndicator,
   View,
-  NativeSyntheticEvent,
-  NativeTouchEvent,
+  ViewStyle,
 } from 'react-native'
+
+import {choose} from '#/lib/functions'
+import {useTheme} from '#/lib/ThemeContext'
 import {Text} from '../text/Text'
-import {useTheme} from 'lib/ThemeContext'
-import {choose} from 'lib/functions'
 
 export type ButtonType =
   | 'primary'
@@ -112,7 +113,7 @@ export function Button({
       },
       secondary: {
         color: theme.palette.secondary.text,
-        fontWeight: theme.palette.secondary.isLowContrast ? '500' : undefined,
+        fontWeight: theme.palette.secondary.isLowContrast ? '600' : undefined,
       },
       default: {
         color: theme.palette.default.text,
@@ -123,23 +124,23 @@ export function Button({
       },
       'primary-outline': {
         color: theme.palette.primary.textInverted,
-        fontWeight: theme.palette.primary.isLowContrast ? '500' : undefined,
+        fontWeight: theme.palette.primary.isLowContrast ? '600' : undefined,
       },
       'secondary-outline': {
         color: theme.palette.secondary.textInverted,
-        fontWeight: theme.palette.secondary.isLowContrast ? '500' : undefined,
+        fontWeight: theme.palette.secondary.isLowContrast ? '600' : undefined,
       },
       'primary-light': {
         color: theme.palette.primary.textInverted,
-        fontWeight: theme.palette.primary.isLowContrast ? '500' : undefined,
+        fontWeight: theme.palette.primary.isLowContrast ? '600' : undefined,
       },
       'secondary-light': {
         color: theme.palette.secondary.textInverted,
-        fontWeight: theme.palette.secondary.isLowContrast ? '500' : undefined,
+        fontWeight: theme.palette.secondary.isLowContrast ? '600' : undefined,
       },
       'default-light': {
         color: theme.palette.default.text,
-        fontWeight: theme.palette.default.isLowContrast ? '500' : undefined,
+        fontWeight: theme.palette.default.isLowContrast ? '600' : undefined,
       },
     },
   )

src/view/com/util/forms/DropdownButton.tsx

@@ -17,11 +17,11 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {HITSLOP_10} from 'lib/constants'
-import {usePalette} from 'lib/hooks/usePalette'
-import {colors} from 'lib/styles'
-import {useTheme} from 'lib/ThemeContext'
-import {isWeb} from 'platform/detection'
+import {HITSLOP_10} from '#/lib/constants'
+import {usePalette} from '#/lib/hooks/usePalette'
+import {colors} from '#/lib/styles'
+import {useTheme} from '#/lib/ThemeContext'
+import {isWeb} from '#/platform/detection'
 import {native} from '#/alf'
 import {FullWindowOverlay} from '#/components/FullWindowOverlay'
 import {Text} from '../text/Text'
@@ -382,6 +382,6 @@ const styles = StyleSheet.create({
   },
   headingLabel: {
     fontSize: 18,
-    fontWeight: '500',
+    fontWeight: '600',
   },
 })

src/view/com/util/forms/NativeDropdown.web.tsx

@@ -5,9 +5,9 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 import {MenuItemCommonProps} from 'zeego/lib/typescript/menu'
 
-import {HITSLOP_10} from 'lib/constants'
-import {usePalette} from 'lib/hooks/usePalette'
-import {useTheme} from 'lib/ThemeContext'
+import {HITSLOP_10} from '#/lib/constants'
+import {usePalette} from '#/lib/hooks/usePalette'
+import {useTheme} from '#/lib/ThemeContext'
 
 // Custom Dropdown Menu Components
 // ==
@@ -267,7 +267,7 @@ const styles = StyleSheet.create({
   },
   itemTitle: {
     fontSize: 16,
-    fontWeight: '500',
+    fontWeight: '600',
     paddingRight: 10,
   },
 })

src/view/com/util/forms/RadioButton.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import {StyleProp, StyleSheet, TextStyle, View, ViewStyle} from 'react-native'
 
-import {choose} from 'lib/functions'
-import {useTheme} from 'lib/ThemeContext'
+import {choose} from '#/lib/functions'
+import {useTheme} from '#/lib/ThemeContext'
 import {Text} from '../text/Text'
 import {Button, ButtonType} from './Button'
 
@@ -86,39 +86,39 @@ export function RadioButton({
   const labelStyle = choose<TextStyle, Record<ButtonType, TextStyle>>(type, {
     primary: {
       color: theme.palette.primary.text,
-      fontWeight: theme.palette.primary.isLowContrast ? '500' : undefined,
+      fontWeight: theme.palette.primary.isLowContrast ? '600' : undefined,
     },
     secondary: {
       color: theme.palette.secondary.text,
-      fontWeight: theme.palette.secondary.isLowContrast ? '500' : undefined,
+      fontWeight: theme.palette.secondary.isLowContrast ? '600' : undefined,
     },
     inverted: {
       color: theme.palette.inverted.text,
-      fontWeight: theme.palette.inverted.isLowContrast ? '500' : undefined,
+      fontWeight: theme.palette.inverted.isLowContrast ? '600' : undefined,
     },
     'primary-outline': {
       color: theme.palette.primary.textInverted,
-      fontWeight: theme.palette.primary.isLowContrast ? '500' : undefined,
+      fontWeight: theme.palette.primary.isLowContrast ? '600' : undefined,
     },
     'secondary-outline': {
       color: theme.palette.secondary.textInverted,
-      fontWeight: theme.palette.secondary.isLowContrast ? '500' : undefined,
+      fontWeight: theme.palette.secondary.isLowContrast ? '600' : undefined,
     },
     'primary-light': {
       color: theme.palette.primary.textInverted,
-      fontWeight: theme.palette.primary.isLowContrast ? '500' : undefined,
+      fontWeight: theme.palette.primary.isLowContrast ? '600' : undefined,
     },
     'secondary-light': {
       color: theme.palette.secondary.textInverted,
-      fontWeight: theme.palette.secondary.isLowContrast ? '500' : undefined,
+      fontWeight: theme.palette.secondary.isLowContrast ? '600' : undefined,
     },
     default: {
       color: theme.palette.default.text,
-      fontWeight: theme.palette.default.isLowContrast ? '500' : undefined,
+      fontWeight: theme.palette.default.isLowContrast ? '600' : undefined,
     },
     'default-light': {
       color: theme.palette.default.text,
-      fontWeight: theme.palette.default.isLowContrast ? '500' : undefined,
+      fontWeight: theme.palette.default.isLowContrast ? '600' : undefined,
     },
   })
   return (

src/view/com/util/forms/ToggleButton.tsx

@@ -1,11 +1,12 @@
 import React from 'react'
 import {StyleProp, StyleSheet, TextStyle, View, ViewStyle} from 'react-native'
+
+import {choose} from '#/lib/functions'
+import {colors} from '#/lib/styles'
+import {useTheme} from '#/lib/ThemeContext'
+import {TypographyVariant} from '#/lib/ThemeContext'
 import {Text} from '../text/Text'
 import {Button, ButtonType} from './Button'
-import {useTheme} from 'lib/ThemeContext'
-import {choose} from 'lib/functions'
-import {colors} from 'lib/styles'
-import {TypographyVariant} from 'lib/ThemeContext'
 
 export function ToggleButton({
   testID,
@@ -100,39 +101,39 @@ export function ToggleButton({
   const labelStyle = choose<TextStyle, Record<ButtonType, TextStyle>>(type, {
     primary: {
       color: theme.palette.primary.text,
-      fontWeight: theme.palette.primary.isLowContrast ? '500' : undefined,
+      fontWeight: theme.palette.primary.isLowContrast ? '600' : undefined,
     },
     secondary: {
       color: theme.palette.secondary.text,
-      fontWeight: theme.palette.secondary.isLowContrast ? '500' : undefined,
+      fontWeight: theme.palette.secondary.isLowContrast ? '600' : undefined,
     },
     inverted: {
       color: theme.palette.inverted.text,
-      fontWeight: theme.palette.inverted.isLowContrast ? '500' : undefined,
+      fontWeight: theme.palette.inverted.isLowContrast ? '600' : undefined,
     },
     'primary-outline': {
       color: theme.palette.primary.textInverted,
-      fontWeight: theme.palette.primary.isLowContrast ? '500' : undefined,
+      fontWeight: theme.palette.primary.isLowContrast ? '600' : undefined,
     },
     'secondary-outline': {
       color: theme.palette.secondary.textInverted,
-      fontWeight: theme.palette.secondary.isLowContrast ? '500' : undefined,
+      fontWeight: theme.palette.secondary.isLowContrast ? '600' : undefined,
     },
     'primary-light': {
       color: theme.palette.primary.textInverted,
-      fontWeight: theme.palette.primary.isLowContrast ? '500' : undefined,
+      fontWeight: theme.palette.primary.isLowContrast ? '600' : undefined,
     },
     'secondary-light': {
       color: theme.palette.secondary.textInverted,
-      fontWeight: theme.palette.secondary.isLowContrast ? '500' : undefined,
+      fontWeight: theme.palette.secondary.isLowContrast ? '600' : undefined,
     },
     default: {
       color: theme.palette.default.text,
-      fontWeight: theme.palette.default.isLowContrast ? '500' : undefined,
+      fontWeight: theme.palette.default.isLowContrast ? '600' : undefined,
     },
     'default-light': {
       color: theme.palette.default.text,
-      fontWeight: theme.palette.default.isLowContrast ? '500' : undefined,
+      fontWeight: theme.palette.default.isLowContrast ? '600' : undefined,
     },
   })
   return (

src/view/com/util/post-embeds/GifEmbed.tsx

@@ -13,10 +13,10 @@ import {useLingui} from '@lingui/react'
 
 import {HITSLOP_20} from '#/lib/constants'
 import {parseAltFromGIFDescription} from '#/lib/gif-alt-text'
+import {EmbedPlayerParams} from '#/lib/strings/embed-player'
 import {isWeb} from '#/platform/detection'
+import {useAutoplayDisabled} from '#/state/preferences'
 import {useLargeAltBadgeEnabled} from '#/state/preferences/large-alt-badge'
-import {EmbedPlayerParams} from 'lib/strings/embed-player'
-import {useAutoplayDisabled} from 'state/preferences'
 import {atoms as a, useTheme} from '#/alf'
 import {Fill} from '#/components/Fill'
 import {Loader} from '#/components/Loader'
@@ -210,6 +210,6 @@ const styles = StyleSheet.create({
   alt: {
     color: 'white',
     fontSize: isWeb ? 10 : 7,
-    fontWeight: 'bold',
+    fontWeight: '600',
   },
 })

src/view/com/util/post-embeds/index.tsx

@@ -20,10 +20,10 @@ import {
   ModerationDecision,
 } from '@atproto/api'
 
+import {usePalette} from '#/lib/hooks/usePalette'
 import {ImagesLightbox, useLightboxControls} from '#/state/lightbox'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
-import {usePalette} from 'lib/hooks/usePalette'
-import {FeedSourceCard} from 'view/com/feeds/FeedSourceCard'
+import {FeedSourceCard} from '#/view/com/feeds/FeedSourceCard'
 import {atoms as a, useTheme} from '#/alf'
 import * as ListCard from '#/components/ListCard'
 import {Embed as StarterPackCard} from '#/components/StarterPack/StarterPackCard'
@@ -259,7 +259,7 @@ const styles = StyleSheet.create({
   alt: {
     color: 'white',
     fontSize: 7,
-    fontWeight: 'bold',
+    fontWeight: '600',
   },
   customFeedOuter: {
     borderWidth: StyleSheet.hairlineWidth,

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>

src/view/shell/Drawer.tsx

@@ -14,25 +14,25 @@ import {msg, Plural, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {StackActions, useNavigation} from '@react-navigation/native'
 
+import {useAnalytics} from '#/lib/analytics/analytics'
+import {FEEDBACK_FORM_URL, HELP_DESK_URL} from '#/lib/constants'
+import {useNavigationTabState} from '#/lib/hooks/useNavigationTabState'
+import {usePalette} from '#/lib/hooks/usePalette'
+import {getTabState, TabState} from '#/lib/routes/helpers'
+import {NavigationProp} from '#/lib/routes/types'
+import {colors, s} from '#/lib/styles'
+import {useTheme} from '#/lib/ThemeContext'
+import {isWeb} from '#/platform/detection'
 import {emitSoftReset} from '#/state/events'
 import {useKawaiiMode} from '#/state/preferences/kawaii'
 import {useUnreadNotifications} from '#/state/queries/notifications/unread'
 import {useProfileQuery} from '#/state/queries/profile'
 import {SessionAccount, useSession} from '#/state/session'
 import {useSetDrawerOpen} from '#/state/shell'
-import {useAnalytics} from 'lib/analytics/analytics'
-import {FEEDBACK_FORM_URL, HELP_DESK_URL} from 'lib/constants'
-import {useNavigationTabState} from 'lib/hooks/useNavigationTabState'
-import {usePalette} from 'lib/hooks/usePalette'
-import {getTabState, TabState} from 'lib/routes/helpers'
-import {NavigationProp} from 'lib/routes/types'
-import {colors, s} from 'lib/styles'
-import {useTheme} from 'lib/ThemeContext'
-import {isWeb} from 'platform/detection'
+import {formatCount} from '#/view/com/util/numeric/format'
+import {Text} from '#/view/com/util/text/Text'
+import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {NavSignupCard} from '#/view/shell/NavSignupCard'
-import {formatCount} from 'view/com/util/numeric/format'
-import {Text} from 'view/com/util/text/Text'
-import {UserAvatar} from 'view/com/util/UserAvatar'
 import {atoms as a} from '#/alf'
 import {useTheme as useAlfTheme} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
@@ -674,7 +674,7 @@ const styles = StyleSheet.create({
   },
   menuItemCountLabel: {
     fontSize: 12,
-    fontWeight: 'bold',
+    fontWeight: '600',
     fontVariant: ['tabular-nums'],
     color: colors.white,
   },

src/view/shell/bottom-bar/BottomBarStyles.tsx

@@ -1,6 +1,6 @@
 import {StyleSheet} from 'react-native'
 
-import {colors} from 'lib/styles'
+import {colors} from '#/lib/styles'
 
 export const styles = StyleSheet.create({
   bottomBar: {
@@ -40,7 +40,7 @@ export const styles = StyleSheet.create({
   },
   notificationCountLabel: {
     fontSize: 12,
-    fontWeight: 'bold',
+    fontWeight: '600',
     color: colors.white,
     fontVariant: ['tabular-nums'],
   },

src/view/shell/desktop/Feeds.tsx

@@ -4,13 +4,13 @@ import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useNavigation, useNavigationState} from '@react-navigation/native'
 
+import {usePalette} from '#/lib/hooks/usePalette'
+import {getCurrentRoute} from '#/lib/routes/helpers'
+import {NavigationProp} from '#/lib/routes/types'
 import {emitSoftReset} from '#/state/events'
 import {usePinnedFeedsInfos} from '#/state/queries/feed'
 import {useSelectedFeed, useSetSelectedFeed} from '#/state/shell/selected-feed'
-import {usePalette} from 'lib/hooks/usePalette'
-import {getCurrentRoute} from 'lib/routes/helpers'
-import {NavigationProp} from 'lib/routes/types'
-import {TextLink} from 'view/com/util/Link'
+import {TextLink} from '#/view/com/util/Link'
 
 export function DesktopFeeds() {
   const pal = usePalette('default')
@@ -81,7 +81,7 @@ function FeedItem({
         onPress={onPress}
         style={[
           current ? pal.text : pal.textLight,
-          {letterSpacing: 0.15, fontWeight: current ? '500' : 'normal'},
+          {letterSpacing: 0.15, fontWeight: current ? '600' : '400'},
         ]}
       />
     </View>

src/view/shell/desktop/LeftNav.tsx

@@ -12,7 +12,13 @@ import {
   useNavigationState,
 } from '@react-navigation/native'
 
+import {usePalette} from '#/lib/hooks/usePalette'
+import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
+import {getCurrentRoute, isStateAtTabRoot, isTab} from '#/lib/routes/helpers'
+import {makeProfileLink} from '#/lib/routes/links'
+import {CommonNavigatorParams, NavigationProp} from '#/lib/routes/types'
 import {isInvalidHandle} from '#/lib/strings/handles'
+import {colors, s} from '#/lib/styles'
 import {emitSoftReset} from '#/state/events'
 import {useFetchHandle} from '#/state/queries/handle'
 import {useUnreadMessageCount} from '#/state/queries/messages/list-converations'
@@ -20,18 +26,12 @@ import {useUnreadNotifications} from '#/state/queries/notifications/unread'
 import {useProfileQuery} from '#/state/queries/profile'
 import {useSession} from '#/state/session'
 import {useComposerControls} from '#/state/shell/composer'
-import {usePalette} from 'lib/hooks/usePalette'
-import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {getCurrentRoute, isStateAtTabRoot, isTab} from 'lib/routes/helpers'
-import {makeProfileLink} from 'lib/routes/links'
-import {CommonNavigatorParams, NavigationProp} from 'lib/routes/types'
-import {colors, s} from 'lib/styles'
+import {Link} from '#/view/com/util/Link'
+import {LoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
+import {PressableWithHover} from '#/view/com/util/PressableWithHover'
+import {Text} from '#/view/com/util/text/Text'
+import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {NavSignupCard} from '#/view/shell/NavSignupCard'
-import {Link} from 'view/com/util/Link'
-import {LoadingPlaceholder} from 'view/com/util/LoadingPlaceholder'
-import {PressableWithHover} from 'view/com/util/PressableWithHover'
-import {Text} from 'view/com/util/text/Text'
-import {UserAvatar} from 'view/com/util/UserAvatar'
 import {
   Bell_Filled_Corner0_Rounded as BellFilled,
   Bell_Stroke2_Corner0_Rounded as Bell,
@@ -468,7 +468,7 @@ const styles = StyleSheet.create({
     backgroundColor: colors.blue3,
     color: colors.white,
     fontSize: 12,
-    fontWeight: 'bold',
+    fontWeight: '600',
     paddingHorizontal: 4,
     borderRadius: 6,
   },