diff --git a/src/alf/atoms.ts b/src/alf/atoms.ts index 9f75d305ae..0c8eb330d7 100644 --- a/src/alf/atoms.ts +++ b/src/alf/atoms.ts @@ -276,16 +276,13 @@ export const atoms = { letterSpacing: tokens.TRACKING, }, font_normal: { - fontWeight: tokens.fontWeight.normal, - }, - font_semibold: { - fontWeight: tokens.fontWeight.semibold, + fontWeight: tokens.fontWeight.regular, }, font_bold: { - fontWeight: tokens.fontWeight.bold, + fontWeight: tokens.fontWeight.semibold, }, font_heavy: { - fontWeight: tokens.fontWeight.heavy, + fontWeight: tokens.fontWeight.extrabold, }, italic: { fontStyle: 'italic', diff --git a/src/alf/tokens.ts b/src/alf/tokens.ts index d43d2b67dd..3f30702e85 100644 --- a/src/alf/tokens.ts +++ b/src/alf/tokens.ts @@ -47,11 +47,16 @@ export const borderRadius = { full: 999, } as const +/** + * These correspond to Inter font files we actually load. + */ export const fontWeight = { - normal: '400', - semibold: '500', - bold: '600', - heavy: '700', + regular: '400', + // medium: '500', + semibold: '600', + // bold: '700', + extrabold: '800', + // black: '900', } as const export const gradients = { diff --git a/src/components/LabelingServiceCard/index.tsx b/src/components/LabelingServiceCard/index.tsx index ff32c36bc9..851645a48c 100644 --- a/src/components/LabelingServiceCard/index.tsx +++ b/src/components/LabelingServiceCard/index.tsx @@ -86,7 +86,7 @@ export function LikeCount({count}: {count: number}) { a.mt_sm, a.text_sm, t.atoms.text_contrast_medium, - {fontWeight: '500'}, + {fontWeight: '600'}, ]}> diff --git a/src/components/MediaPreview.tsx b/src/components/MediaPreview.tsx index 28609c6f49..9a05b54dff 100644 --- a/src/components/MediaPreview.tsx +++ b/src/components/MediaPreview.tsx @@ -170,6 +170,6 @@ const styles = StyleSheet.create({ alt: { color: 'white', fontSize: 7, - fontWeight: 'bold', + fontWeight: '600', }, }) diff --git a/src/components/Pills.tsx b/src/components/Pills.tsx index 742a11667c..6c8084743f 100644 --- a/src/components/Pills.tsx +++ b/src/components/Pills.tsx @@ -132,7 +132,7 @@ export function Label({ }) { diff --git a/src/components/ProgressGuide/Task.tsx b/src/components/ProgressGuide/Task.tsx index a83715a425..f2ceba52ac 100644 --- a/src/components/ProgressGuide/Task.tsx +++ b/src/components/ProgressGuide/Task.tsx @@ -35,9 +35,7 @@ export function ProgressGuideTask({ )} - - {title} - + {title} {subtitle && ( diff --git a/src/components/ProgressGuide/Toast.tsx b/src/components/ProgressGuide/Toast.tsx index 346312af51..69e0082606 100644 --- a/src/components/ProgressGuide/Toast.tsx +++ b/src/components/ProgressGuide/Toast.tsx @@ -154,7 +154,7 @@ export const ProgressGuideToast = React.forwardRef< ref={animatedCheckRef} /> - {title} + {title} {subtitle && ( {subtitle} diff --git a/src/components/ReportDialog/SelectLabelerView.tsx b/src/components/ReportDialog/SelectLabelerView.tsx index dd07cafa38..f7a8139ea5 100644 --- a/src/components/ReportDialog/SelectLabelerView.tsx +++ b/src/components/ReportDialog/SelectLabelerView.tsx @@ -77,8 +77,7 @@ function LabelerButton({ handle: labeler.creator.handle, })} /> - + @{labeler.creator.handle} diff --git a/src/components/dialogs/PostInteractionSettingsDialog.tsx b/src/components/dialogs/PostInteractionSettingsDialog.tsx index d1828e4c86..47eefae6f9 100644 --- a/src/components/dialogs/PostInteractionSettingsDialog.tsx +++ b/src/components/dialogs/PostInteractionSettingsDialog.tsx @@ -491,9 +491,7 @@ function Selectable({ }, style, ]}> - - {label} - + {label} {isSelected ? ( ) : ( diff --git a/src/components/dialogs/nuxs/NeueTypography.tsx b/src/components/dialogs/nuxs/NeueTypography.tsx index fa3936d259..f160c87743 100644 --- a/src/components/dialogs/nuxs/NeueTypography.tsx +++ b/src/components/dialogs/nuxs/NeueTypography.tsx @@ -48,7 +48,7 @@ export function NeueTypography() { - + New font settings ✨ diff --git a/src/components/dialogs/nuxs/TenMillion/index.tsx b/src/components/dialogs/nuxs/TenMillion/index.tsx index 8960824094..21e775a108 100644 --- a/src/components/dialogs/nuxs/TenMillion/index.tsx +++ b/src/components/dialogs/nuxs/TenMillion/index.tsx @@ -19,10 +19,10 @@ import {isIOS, isNative} from '#/platform/detection' import {useModerationOpts} from '#/state/preferences/moderation-opts' import {useProfileQuery} from '#/state/queries/profile' import {useAgent, useSession} from '#/state/session' -import {useComposerControls} from 'state/shell' +import {useComposerControls} from '#/state/shell' import {formatCount} from '#/view/com/util/numeric/format' +import * as Toast from '#/view/com/util/Toast' import {Logomark} from '#/view/icons/Logomark' -import * as Toast from 'view/com/util/Toast' import { atoms as a, ThemeProvider, @@ -441,10 +441,10 @@ export function TenMillionInner({ allowFontScaling={false} style={[ a.absolute, + a.font_heavy, { color: t.palette.primary_500, fontSize: 32, - fontWeight: '900', width: 32, top: isNative ? -10 : 0, left: 0, @@ -462,11 +462,11 @@ export function TenMillionInner({ style={[ a.relative, a.text_center, + a.font_heavy, { fontStyle: 'italic', fontSize: getFontSize(userNumber), lineHeight: getFontSize(userNumber), - fontWeight: '900', letterSpacing: -2, }, ]}> @@ -536,7 +536,7 @@ export function TenMillionInner({ style={[ a.flex_1, a.text_sm, - a.font_semibold, + a.font_bold, a.leading_snug, lightTheme.atoms.text_contrast_medium, ]}> @@ -551,7 +551,7 @@ export function TenMillionInner({ style={[ a.flex_1, a.text_sm, - a.font_semibold, + a.font_bold, a.leading_snug, a.text_right, lightTheme.atoms.text_contrast_low, @@ -643,14 +643,7 @@ export function TenMillionInner({ + style={[a.text_5xl, a.leading_tight, a.pb_lg, a.font_heavy]}> Thanks for being one of our first 10 million users. diff --git a/src/components/moderation/ContentHider.tsx b/src/components/moderation/ContentHider.tsx index f2d13f6424..bf9bae5171 100644 --- a/src/components/moderation/ContentHider.tsx +++ b/src/components/moderation/ContentHider.tsx @@ -94,7 +94,7 @@ export function ContentHider({ a.text_left, a.font_bold, a.leading_snug, - gtMobile && [a.font_semibold], + gtMobile && [a.font_bold], t.atoms.text_contrast_medium, web({ marginBottom: 1, @@ -107,7 +107,7 @@ export function ContentHider({ style={[ a.font_bold, a.leading_snug, - gtMobile && [a.font_semibold], + gtMobile && [a.font_bold], t.atoms.text_contrast_high, web({ marginBottom: 1, diff --git a/src/components/moderation/LabelPreference.tsx b/src/components/moderation/LabelPreference.tsx index 78b50ff8b9..d6dc45d1a5 100644 --- a/src/components/moderation/LabelPreference.tsx +++ b/src/components/moderation/LabelPreference.tsx @@ -236,8 +236,7 @@ export function LabelerLabelPreference({ - + {adultDisabled ? ( Adult content is disabled. ) : isGlobalLabel ? ( diff --git a/src/components/moderation/ScreenHider.tsx b/src/components/moderation/ScreenHider.tsx index f855d63331..5680b60c2d 100644 --- a/src/components/moderation/ScreenHider.tsx +++ b/src/components/moderation/ScreenHider.tsx @@ -10,9 +10,9 @@ import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' import {useNavigation} from '@react-navigation/native' +import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' import {useModerationCauseDescription} from '#/lib/moderation/useModerationCauseDescription' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {NavigationProp} from 'lib/routes/types' +import {NavigationProp} from '#/lib/routes/types' import {CenteredView} from '#/view/com/util/Views' import {atoms as a, useTheme, web} from '#/alf' import {Button, ButtonText} from '#/components/Button' @@ -86,13 +86,7 @@ export function ScreenHider({ + style={[a.text_4xl, a.font_bold, a.text_center, a.mb_md, t.atoms.text]}> {isNoPwi ? ( Sign-in Required ) : ( @@ -118,7 +112,7 @@ export function ScreenHider({ - + Enable adult content + style={[t.atoms.text, a.text_4xl, a.self_start, {fontWeight: '600'}]}> {sanitizeDisplayName( profile.displayName || sanitizeHandle(profile.handle), moderation.ui('displayName'), diff --git a/src/screens/Signup/index.tsx b/src/screens/Signup/index.tsx index 0e1a2e61fa..3209800328 100644 --- a/src/screens/Signup/index.tsx +++ b/src/screens/Signup/index.tsx @@ -8,8 +8,8 @@ import {useLingui} from '@lingui/react' import {useAnalytics} from '#/lib/analytics/analytics' import {FEEDBACK_FORM_URL} from '#/lib/constants' import {useServiceQuery} from '#/state/queries/service' -import {useStarterPackQuery} from 'state/queries/starter-packs' -import {useActiveStarterPack} from 'state/shell/starter-pack' +import {useStarterPackQuery} from '#/state/queries/starter-packs' +import {useActiveStarterPack} from '#/state/shell/starter-pack' import {LoggedOutLayout} from '#/view/com/util/layouts/LoggedOutLayout' import { initialState, @@ -132,7 +132,7 @@ export function Signup({onPressBack}: {onPressBack: () => void}) { !gtMobile && {paddingBottom: 100}, ]}> - + Step {state.activeStep + 1} of{' '} {state.serviceDescription && diff --git a/src/screens/StarterPack/StarterPackLandingScreen.tsx b/src/screens/StarterPack/StarterPackLandingScreen.tsx index 4d7f9ace9d..68ff3aa7bc 100644 --- a/src/screens/StarterPack/StarterPackLandingScreen.tsx +++ b/src/screens/StarterPack/StarterPackLandingScreen.tsx @@ -11,22 +11,22 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' +import {isAndroidWeb} from '#/lib/browser' import {JOINED_THIS_WEEK} from '#/lib/constants' -import {isAndroidWeb} from 'lib/browser' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {logEvent} from 'lib/statsig/statsig' -import {createStarterPackGooglePlayUri} from 'lib/strings/starter-pack' -import {isWeb} from 'platform/detection' -import {useModerationOpts} from 'state/preferences/moderation-opts' -import {useStarterPackQuery} from 'state/queries/starter-packs' +import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' +import {logEvent} from '#/lib/statsig/statsig' +import {createStarterPackGooglePlayUri} from '#/lib/strings/starter-pack' +import {isWeb} from '#/platform/detection' +import {useModerationOpts} from '#/state/preferences/moderation-opts' +import {useStarterPackQuery} from '#/state/queries/starter-packs' import { useActiveStarterPack, useSetActiveStarterPack, -} from 'state/shell/starter-pack' +} from '#/state/shell/starter-pack' +import {LoggedOutScreenState} from '#/view/com/auth/LoggedOut' import {formatCount} from '#/view/com/util/numeric/format' -import {LoggedOutScreenState} from 'view/com/auth/LoggedOut' -import {CenteredView} from 'view/com/util/Views' -import {Logo} from 'view/icons/Logo' +import {CenteredView} from '#/view/com/util/Views' +import {Logo} from '#/view/icons/Logo' import {atoms as a, useTheme} from '#/alf' import {Button, ButtonText} from '#/components/Button' import {useDialogControl} from '#/components/Dialog' @@ -188,12 +188,7 @@ function LandingScreenLoaded({ {record.name} + style={[a.text_center, a.font_bold, a.text_md, {color: 'white'}]}> Starter pack by {`@${creator.handle}`} @@ -219,11 +214,7 @@ function LandingScreenLoaded({ color={t.atoms.text_contrast_medium.color} /> {formatCount(i18n, JOINED_THIS_WEEK)} joined this week diff --git a/src/view/com/auth/SplashScreen.tsx b/src/view/com/auth/SplashScreen.tsx index 8eac1ab82f..a18f17612e 100644 --- a/src/view/com/auth/SplashScreen.tsx +++ b/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 = ({ - + What's up? diff --git a/src/view/com/auth/SplashScreen.web.tsx b/src/view/com/auth/SplashScreen.web.tsx index 9ffcbfb9df..1fd62e1d3f 100644 --- a/src/view/com/auth/SplashScreen.web.tsx +++ b/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 = ({ )} + style={[a.text_md, a.font_bold, t.atoms.text_contrast_medium]}> What's up? diff --git a/src/view/com/composer/photos/Gallery.tsx b/src/view/com/composer/photos/Gallery.tsx index 7ff1b7b9ab..422a4dd937 100644 --- a/src/view/com/composer/photos/Gallery.tsx +++ b/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: { diff --git a/src/view/com/modals/CreateOrEditList.tsx b/src/view/com/modals/CreateOrEditList.tsx index 3088c92a1d..7717f597dd 100644 --- a/src/view/com/modals/CreateOrEditList.tsx +++ b/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, diff --git a/src/view/com/modals/EditImage.tsx b/src/view/com/modals/EditImage.tsx index e3a770db07..c921984d42 100644 --- a/src/view/com/modals/EditImage.tsx +++ b/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: { diff --git a/src/view/com/modals/EditProfile.tsx b/src/view/com/modals/EditProfile.tsx index 4b94aeb42f..beea3ca1a8 100644 --- a/src/view/com/modals/EditProfile.tsx +++ b/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, diff --git a/src/view/com/modals/InAppBrowserConsent.tsx b/src/view/com/modals/InAppBrowserConsent.tsx index 3fa5159346..37b039c605 100644 --- a/src/view/com/modals/InAppBrowserConsent.tsx +++ b/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, }, diff --git a/src/view/com/modals/UserAddRemoveLists.tsx b/src/view/com/modals/UserAddRemoveLists.tsx index f6db94ed85..29caf46609 100644 --- a/src/view/com/modals/UserAddRemoveLists.tsx +++ b/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, diff --git a/src/view/com/modals/lang-settings/ContentLanguagesSettings.tsx b/src/view/com/modals/lang-settings/ContentLanguagesSettings.tsx index 017b59db9e..360cc0e404 100644 --- a/src/view/com/modals/lang-settings/ContentLanguagesSettings.tsx +++ b/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, }, diff --git a/src/view/com/modals/lang-settings/PostLanguagesSettings.tsx b/src/view/com/modals/lang-settings/PostLanguagesSettings.tsx index a20458702e..2b0eb8cf24 100644 --- a/src/view/com/modals/lang-settings/PostLanguagesSettings.tsx +++ b/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, }, diff --git a/src/view/com/notifications/FeedItem.tsx b/src/view/com/notifications/FeedItem.tsx index b248bb4c54..5f4f7740aa 100644 --- a/src/view/com/notifications/FeedItem.tsx +++ b/src/view/com/notifications/FeedItem.tsx @@ -22,21 +22,21 @@ import {useLingui} from '@lingui/react' import {useNavigation} from '@react-navigation/native' import {useQueryClient} from '@tanstack/react-query' +import {useAnimatedValue} from '#/lib/hooks/useAnimatedValue' +import {usePalette} from '#/lib/hooks/usePalette' +import {makeProfileLink} from '#/lib/routes/links' +import {NavigationProp} from '#/lib/routes/types' +import {forceLTR} from '#/lib/strings/bidi' +import {sanitizeDisplayName} from '#/lib/strings/display-names' +import {sanitizeHandle} from '#/lib/strings/handles' +import {niceDate} from '#/lib/strings/time' +import {colors, s} from '#/lib/styles' import {logger} from '#/logger' +import {isWeb} from '#/platform/detection' +import {DM_SERVICE_HEADERS} from '#/state/queries/messages/const' import {FeedNotification} from '#/state/queries/notifications/feed' -import {useAnimatedValue} from 'lib/hooks/useAnimatedValue' -import {usePalette} from 'lib/hooks/usePalette' -import {makeProfileLink} from 'lib/routes/links' -import {NavigationProp} from 'lib/routes/types' -import {forceLTR} from 'lib/strings/bidi' -import {sanitizeDisplayName} from 'lib/strings/display-names' -import {sanitizeHandle} from 'lib/strings/handles' -import {niceDate} from 'lib/strings/time' -import {colors, s} from 'lib/styles' -import {isWeb} from 'platform/detection' -import {DM_SERVICE_HEADERS} from 'state/queries/messages/const' -import {precacheProfile} from 'state/queries/profile' -import {useAgent} from 'state/session' +import {precacheProfile} from '#/state/queries/profile' +import {useAgent} from '#/state/session' import {atoms as a, useTheme} from '#/alf' import {Button, ButtonText} from '#/components/Button' import { @@ -632,7 +632,7 @@ const styles = StyleSheet.create({ alignItems: 'center', }, aviExtraCount: { - fontWeight: 'bold', + fontWeight: '600', paddingLeft: 6, }, meta: { diff --git a/src/view/com/profile/ProfileSubpageHeader.tsx b/src/view/com/profile/ProfileSubpageHeader.tsx index e07acef281..d6995749bf 100644 --- a/src/view/com/profile/ProfileSubpageHeader.tsx +++ b/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} diff --git a/src/view/com/util/Html.tsx b/src/view/com/util/Html.tsx index 2e47194811..f77fb16034 100644 --- a/src/view/com/util/Html.tsx +++ b/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, diff --git a/src/view/com/util/ViewHeader.tsx b/src/view/com/util/ViewHeader.tsx index ca417034db..e5121b350a 100644 --- a/src/view/com/util/ViewHeader.tsx +++ b/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, diff --git a/src/view/com/util/forms/Button.tsx b/src/view/com/util/forms/Button.tsx index e6e05bb044..62ef2c4f1c 100644 --- a/src/view/com/util/forms/Button.tsx +++ b/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, }, }, ) diff --git a/src/view/com/util/forms/DropdownButton.tsx b/src/view/com/util/forms/DropdownButton.tsx index bfbafcad9d..a989cd5c5d 100644 --- a/src/view/com/util/forms/DropdownButton.tsx +++ b/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', }, }) diff --git a/src/view/com/util/forms/NativeDropdown.web.tsx b/src/view/com/util/forms/NativeDropdown.web.tsx index 6668ac211f..364e10d104 100644 --- a/src/view/com/util/forms/NativeDropdown.web.tsx +++ b/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, }, }) diff --git a/src/view/com/util/forms/RadioButton.tsx b/src/view/com/util/forms/RadioButton.tsx index 6cecd318e7..e2bf3c9ac6 100644 --- a/src/view/com/util/forms/RadioButton.tsx +++ b/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>(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 ( diff --git a/src/view/com/util/forms/ToggleButton.tsx b/src/view/com/util/forms/ToggleButton.tsx index c98e846cd3..706796fc40 100644 --- a/src/view/com/util/forms/ToggleButton.tsx +++ b/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>(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 ( diff --git a/src/view/com/util/post-embeds/GifEmbed.tsx b/src/view/com/util/post-embeds/GifEmbed.tsx index 7b6c42fa4e..a1af6ab26b 100644 --- a/src/view/com/util/post-embeds/GifEmbed.tsx +++ b/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', }, }) diff --git a/src/view/com/util/post-embeds/index.tsx b/src/view/com/util/post-embeds/index.tsx index 090577a5e6..d4982b0e27 100644 --- a/src/view/com/util/post-embeds/index.tsx +++ b/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, diff --git a/src/view/screens/AccessibilitySettings.tsx b/src/view/screens/AccessibilitySettings.tsx index 2992e5c7e9..158dc8b8da 100644 --- a/src/view/screens/AccessibilitySettings.tsx +++ b/src/view/screens/AccessibilitySettings.tsx @@ -69,7 +69,7 @@ export function AccessibilitySettingsScreen({}: Props) { }, ]}> - + Accessibility Settings diff --git a/src/view/screens/LanguageSettings.tsx b/src/view/screens/LanguageSettings.tsx index 0f27db5229..bd69d7a550 100644 --- a/src/view/screens/LanguageSettings.tsx +++ b/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 @@ -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, diff --git a/src/view/screens/Lists.tsx b/src/view/screens/Lists.tsx index 9daeaba187..d6a86e5143 100644 --- a/src/view/screens/Lists.tsx +++ b/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 export function ListsScreen({}: Props) { @@ -61,7 +61,7 @@ export function ListsScreen({}: Props) { }, ]}> - + User Lists diff --git a/src/view/screens/ModerationModlists.tsx b/src/view/screens/ModerationModlists.tsx index b7d993acc7..39ba540b49 100644 --- a/src/view/screens/ModerationModlists.tsx +++ b/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 export function ModerationModlistsScreen({}: Props) { @@ -54,7 +55,7 @@ export function ModerationModlistsScreen({}: Props) { !isMobile && [pal.border, {borderLeftWidth: 1, borderRightWidth: 1}] }> - + Moderation Lists diff --git a/src/view/screens/PreferencesExternalEmbeds.tsx b/src/view/screens/PreferencesExternalEmbeds.tsx index ade7a53d90..8b3550d6b3 100644 --- a/src/view/screens/PreferencesExternalEmbeds.tsx +++ b/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]}> - + External Media Preferences diff --git a/src/view/screens/PreferencesFollowingFeed.tsx b/src/view/screens/PreferencesFollowingFeed.tsx index 8aa4221e6c..085250e3bd 100644 --- a/src/view/screens/PreferencesFollowingFeed.tsx +++ b/src/view/screens/PreferencesFollowingFeed.tsx @@ -44,7 +44,7 @@ export function PreferencesFollowingFeed({}: Props) { showBackButton={isTabletOrMobile} style={[pal.border, a.border_b]}> - + Following Feed Preferences diff --git a/src/view/screens/PreferencesThreads.tsx b/src/view/screens/PreferencesThreads.tsx index 4a311f91ce..7a5a88869d 100644 --- a/src/view/screens/PreferencesThreads.tsx +++ b/src/view/screens/PreferencesThreads.tsx @@ -47,7 +47,7 @@ export function PreferencesThreads({}: Props) { showBackButton={isTabletOrMobile} style={[pal.border, a.border_b]}> - + Thread Preferences diff --git a/src/view/screens/Search/Search.tsx b/src/view/screens/Search/Search.tsx index 30d16506e0..e1e412648b 100644 --- a/src/view/screens/Search/Search.tsx +++ b/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, }, diff --git a/src/view/screens/Settings/index.tsx b/src/view/screens/Settings/index.tsx index fe449fcdbc..737ca2d28a 100644 --- a/src/view/screens/Settings/index.tsx +++ b/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}, ]}> - + Settings diff --git a/src/view/shell/Drawer.tsx b/src/view/shell/Drawer.tsx index facead2c1e..226fe24966 100644 --- a/src/view/shell/Drawer.tsx +++ b/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, }, diff --git a/src/view/shell/bottom-bar/BottomBarStyles.tsx b/src/view/shell/bottom-bar/BottomBarStyles.tsx index c575e3d9b1..9255957cb4 100644 --- a/src/view/shell/bottom-bar/BottomBarStyles.tsx +++ b/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'], }, diff --git a/src/view/shell/desktop/Feeds.tsx b/src/view/shell/desktop/Feeds.tsx index 72e34ac469..2f5f954274 100644 --- a/src/view/shell/desktop/Feeds.tsx +++ b/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'}, ]} /> diff --git a/src/view/shell/desktop/LeftNav.tsx b/src/view/shell/desktop/LeftNav.tsx index ca8073f573..6cceaccd92 100644 --- a/src/view/shell/desktop/LeftNav.tsx +++ b/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, },