diff options
| author | Eric Bailey <git@esb.lol> | 2024-09-20 17:29:58 -0500 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2024-09-20 17:29:58 -0500 |
| commit | 7e2456b906563464c8e43867e62f07df9109bc2b (patch) | |
| tree | 8dfca319f8b96190b7e83eb9ba37b17c24a2cb46 /src | |
| parent | 4161e233200cc1d111faef47f05881e44ab4e731 (diff) | |
| download | voidsky-7e2456b906563464c8e43867e62f07df9109bc2b.tar.zst | |
[Neue] Font weights (#5442)
* Align all font weights * Only load necessary fonts * Also comment out from hook
Diffstat (limited to 'src')
56 files changed, 338 insertions, 367 deletions
diff --git a/src/alf/atoms.ts b/src/alf/atoms.ts index 9f75d305a..0c8eb330d 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/fonts.ts b/src/alf/fonts.ts index 7f6bde5fa..08cfd9f42 100644 --- a/src/alf/fonts.ts +++ b/src/alf/fonts.ts @@ -54,16 +54,16 @@ export function DO_NOT_USE() { // 'Inter-LightItalic': require('../../assets/fonts/inter/Inter-LightItalic.otf'), 'Inter-Regular': require('../../assets/fonts/inter/Inter-Regular.otf'), 'Inter-Italic': require('../../assets/fonts/inter/Inter-Italic.otf'), - 'Inter-Medium': require('../../assets/fonts/inter/Inter-Medium.otf'), - 'Inter-MediumItalic': require('../../assets/fonts/inter/Inter-MediumItalic.otf'), + // 'Inter-Medium': require('../../assets/fonts/inter/Inter-Medium.otf'), + // 'Inter-MediumItalic': require('../../assets/fonts/inter/Inter-MediumItalic.otf'), 'Inter-SemiBold': require('../../assets/fonts/inter/Inter-SemiBold.otf'), 'Inter-SemiBoldItalic': require('../../assets/fonts/inter/Inter-SemiBoldItalic.otf'), - 'Inter-Bold': require('../../assets/fonts/inter/Inter-Bold.otf'), - 'Inter-BoldItalic': require('../../assets/fonts/inter/Inter-BoldItalic.otf'), + // 'Inter-Bold': require('../../assets/fonts/inter/Inter-Bold.otf'), + // 'Inter-BoldItalic': require('../../assets/fonts/inter/Inter-BoldItalic.otf'), 'Inter-ExtraBold': require('../../assets/fonts/inter/Inter-ExtraBold.otf'), 'Inter-ExtraBoldItalic': require('../../assets/fonts/inter/Inter-ExtraBoldItalic.otf'), - 'Inter-Black': require('../../assets/fonts/inter/Inter-Black.otf'), - 'Inter-BlackItalic': require('../../assets/fonts/inter/Inter-BlackItalic.otf'), + // 'Inter-Black': require('../../assets/fonts/inter/Inter-Black.otf'), + // 'Inter-BlackItalic': require('../../assets/fonts/inter/Inter-BlackItalic.otf'), }) } diff --git a/src/alf/tokens.ts b/src/alf/tokens.ts index d43d2b67d..3f30702e8 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 ff32c36bc..851645a48 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'}, ]}> <Plural value={count} one="Liked by # user" other="Liked by # users" /> </Text> diff --git a/src/components/MediaPreview.tsx b/src/components/MediaPreview.tsx index 28609c6f4..9a05b54df 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 742a11667..6c8084743 100644 --- a/src/components/Pills.tsx +++ b/src/components/Pills.tsx @@ -132,7 +132,7 @@ export function Label({ <Text style={[ text, - a.font_semibold, + a.font_bold, a.leading_tight, t.atoms.text_contrast_medium, {paddingRight: 3}, diff --git a/src/components/ProgressGuide/List.tsx b/src/components/ProgressGuide/List.tsx index f68445d2b..d0fd55d9c 100644 --- a/src/components/ProgressGuide/List.tsx +++ b/src/components/ProgressGuide/List.tsx @@ -26,7 +26,7 @@ export function ProgressGuideList({style}: {style?: StyleProp<ViewStyle>}) { <Text style={[ t.atoms.text_contrast_medium, - a.font_semibold, + a.font_bold, a.text_sm, {textTransform: 'uppercase'}, ]}> diff --git a/src/components/ProgressGuide/Task.tsx b/src/components/ProgressGuide/Task.tsx index a83715a42..f2ceba52a 100644 --- a/src/components/ProgressGuide/Task.tsx +++ b/src/components/ProgressGuide/Task.tsx @@ -35,9 +35,7 @@ export function ProgressGuideTask({ )} <View style={[a.flex_col, a.gap_2xs, {marginTop: -2}]}> - <Text style={[a.text_sm, a.font_semibold, a.leading_tight]}> - {title} - </Text> + <Text style={[a.text_sm, a.font_bold, a.leading_tight]}>{title}</Text> {subtitle && ( <Text style={[a.text_sm, t.atoms.text_contrast_medium, a.leading_tight]}> diff --git a/src/components/ProgressGuide/Toast.tsx b/src/components/ProgressGuide/Toast.tsx index 346312af5..69e008260 100644 --- a/src/components/ProgressGuide/Toast.tsx +++ b/src/components/ProgressGuide/Toast.tsx @@ -154,7 +154,7 @@ export const ProgressGuideToast = React.forwardRef< ref={animatedCheckRef} /> <View> - <Text style={[a.text_md, a.font_semibold]}>{title}</Text> + <Text style={[a.text_md, a.font_bold]}>{title}</Text> {subtitle && ( <Text style={[a.text_sm, t.atoms.text_contrast_medium]}> {subtitle} diff --git a/src/components/ReportDialog/SelectLabelerView.tsx b/src/components/ReportDialog/SelectLabelerView.tsx index dd07cafa3..f7a8139ea 100644 --- a/src/components/ReportDialog/SelectLabelerView.tsx +++ b/src/components/ReportDialog/SelectLabelerView.tsx @@ -77,8 +77,7 @@ function LabelerButton({ handle: labeler.creator.handle, })} /> - <Text - style={[t.atoms.text_contrast_medium, a.text_sm, a.font_semibold]}> + <Text style={[t.atoms.text_contrast_medium, a.text_sm, a.font_bold]}> @{labeler.creator.handle} </Text> </LabelingServiceCard.Content> diff --git a/src/components/dialogs/PostInteractionSettingsDialog.tsx b/src/components/dialogs/PostInteractionSettingsDialog.tsx index d1828e4c8..47eefae6f 100644 --- a/src/components/dialogs/PostInteractionSettingsDialog.tsx +++ b/src/components/dialogs/PostInteractionSettingsDialog.tsx @@ -491,9 +491,7 @@ function Selectable({ }, style, ]}> - <Text style={[a.text_sm, isSelected && a.font_semibold]}> - {label} - </Text> + <Text style={[a.text_sm, isSelected && a.font_bold]}>{label}</Text> {isSelected ? ( <Check size="sm" fill={t.palette.primary_500} /> ) : ( diff --git a/src/components/dialogs/nuxs/NeueTypography.tsx b/src/components/dialogs/nuxs/NeueTypography.tsx index fa3936d25..f160c8774 100644 --- a/src/components/dialogs/nuxs/NeueTypography.tsx +++ b/src/components/dialogs/nuxs/NeueTypography.tsx @@ -48,7 +48,7 @@ export function NeueTypography() { <Dialog.ScrollableInner label={_(msg`Introducing new font settings`)}> <View style={[a.gap_xl]}> <View style={[a.gap_md]}> - <Text style={[a.text_3xl, {fontWeight: '900'}]}> + <Text style={[a.text_3xl, a.font_heavy]}> <Trans>New font settings ✨</Trans> </Text> <Text style={[a.text_lg, a.leading_snug, {maxWidth: 400}]}> diff --git a/src/components/dialogs/nuxs/TenMillion/index.tsx b/src/components/dialogs/nuxs/TenMillion/index.tsx index 896082409..21e775a10 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({ <View style={[gtMobile ? a.p_2xl : a.p_xl]}> <Text allowFontScaling={false} - style={[ - a.text_5xl, - a.leading_tight, - a.pb_lg, - { - fontWeight: '900', - }, - ]}> + style={[a.text_5xl, a.leading_tight, a.pb_lg, a.font_heavy]}> <Trans>Thanks for being one of our first 10 million users.</Trans> </Text> diff --git a/src/components/moderation/ContentHider.tsx b/src/components/moderation/ContentHider.tsx index f2d13f642..bf9bae517 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 78b50ff8b..d6dc45d1a 100644 --- a/src/components/moderation/LabelPreference.tsx +++ b/src/components/moderation/LabelPreference.tsx @@ -236,8 +236,7 @@ export function LabelerLabelPreference({ <View style={[a.flex_row, a.gap_xs, a.align_center, a.mt_xs]}> <CircleInfo size="sm" fill={t.atoms.text_contrast_high.color} /> - <Text - style={[t.atoms.text_contrast_medium, a.font_semibold, a.italic]}> + <Text style={[t.atoms.text_contrast_medium, a.font_bold, a.italic]}> {adultDisabled ? ( <Trans>Adult content is disabled.</Trans> ) : isGlobalLabel ? ( diff --git a/src/components/moderation/ScreenHider.tsx b/src/components/moderation/ScreenHider.tsx index f855d6333..5680b60c2 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({ </View> </View> <Text - style={[ - a.text_4xl, - a.font_semibold, - a.text_center, - a.mb_md, - t.atoms.text, - ]}> + style={[a.text_4xl, a.font_bold, a.text_center, a.mb_md, t.atoms.text]}> {isNoPwi ? ( <Trans>Sign-in Required</Trans> ) : ( @@ -118,7 +112,7 @@ export function ScreenHider({ <Text style={[ a.text_lg, - a.font_semibold, + a.font_bold, a.leading_snug, t.atoms.text, a.ml_xs, diff --git a/src/lib/styles.ts b/src/lib/styles.ts index 6a3d79611..55fb1a844 100644 --- a/src/lib/styles.ts +++ b/src/lib/styles.ts @@ -1,6 +1,6 @@ import {Dimensions, StyleProp, StyleSheet, TextStyle} from 'react-native' -import {isWeb} from 'platform/detection' +import {isWeb} from '#/platform/detection' import {Theme, TypographyVariant} from './ThemeContext' // 1 is lightest, 2 is light, 3 is mid, 4 is dark, 5 is darkest @@ -79,14 +79,13 @@ export const s = StyleSheet.create({ // font weights fw600: {fontWeight: '600'}, - bold: {fontWeight: '700'}, - fw500: {fontWeight: '500'}, - semiBold: {fontWeight: '500'}, + bold: {fontWeight: '600'}, + fw500: {fontWeight: '600'}, + semiBold: {fontWeight: '600'}, fw400: {fontWeight: '400'}, normal: {fontWeight: '400'}, fw300: {fontWeight: '400'}, light: {fontWeight: '400'}, - fw200: {fontWeight: '200'}, // text decoration underline: {textDecorationLine: 'underline'}, diff --git a/src/lib/themes.ts b/src/lib/themes.ts index d16f9f632..503079993 100644 --- a/src/lib/themes.ts +++ b/src/lib/themes.ts @@ -100,12 +100,12 @@ export const defaultTheme: Theme = { '2xl-medium': { fontSize: 18, letterSpacing: tokens.TRACKING, - fontWeight: '500', + fontWeight: '600', }, '2xl-bold': { fontSize: 18, letterSpacing: tokens.TRACKING, - fontWeight: '700', + fontWeight: '600', }, '2xl-heavy': { fontSize: 18, @@ -125,12 +125,12 @@ export const defaultTheme: Theme = { 'xl-medium': { fontSize: 17, letterSpacing: tokens.TRACKING, - fontWeight: '500', + fontWeight: '600', }, 'xl-bold': { fontSize: 17, letterSpacing: tokens.TRACKING, - fontWeight: '700', + fontWeight: '600', }, 'xl-heavy': { fontSize: 17, @@ -150,12 +150,12 @@ export const defaultTheme: Theme = { 'lg-medium': { fontSize: 16, letterSpacing: tokens.TRACKING, - fontWeight: '500', + fontWeight: '600', }, 'lg-bold': { fontSize: 16, letterSpacing: tokens.TRACKING, - fontWeight: '700', + fontWeight: '600', }, 'lg-heavy': { fontSize: 16, @@ -175,12 +175,12 @@ export const defaultTheme: Theme = { 'md-medium': { fontSize: 15, letterSpacing: tokens.TRACKING, - fontWeight: '500', + fontWeight: '600', }, 'md-bold': { fontSize: 15, letterSpacing: tokens.TRACKING, - fontWeight: '700', + fontWeight: '600', }, 'md-heavy': { fontSize: 15, @@ -200,12 +200,12 @@ export const defaultTheme: Theme = { 'sm-medium': { fontSize: 14, letterSpacing: tokens.TRACKING, - fontWeight: '500', + fontWeight: '600', }, 'sm-bold': { fontSize: 14, letterSpacing: tokens.TRACKING, - fontWeight: '700', + fontWeight: '600', }, 'sm-heavy': { fontSize: 14, @@ -225,12 +225,12 @@ export const defaultTheme: Theme = { 'xs-medium': { fontSize: 13, letterSpacing: tokens.TRACKING, - fontWeight: '500', + fontWeight: '600', }, 'xs-bold': { fontSize: 13, letterSpacing: tokens.TRACKING, - fontWeight: '700', + fontWeight: '600', }, 'xs-heavy': { fontSize: 13, @@ -241,24 +241,24 @@ export const defaultTheme: Theme = { 'title-2xl': { fontSize: 34, letterSpacing: tokens.TRACKING, - fontWeight: '500', + fontWeight: '600', }, 'title-xl': { fontSize: 28, letterSpacing: tokens.TRACKING, - fontWeight: '500', + fontWeight: '600', }, 'title-lg': { fontSize: 22, - fontWeight: '500', + fontWeight: '600', }, title: { - fontWeight: '500', + fontWeight: '600', fontSize: 20, letterSpacing: tokens.TRACKING, }, 'title-sm': { - fontWeight: 'bold', + fontWeight: '600', fontSize: 17, letterSpacing: tokens.TRACKING, }, @@ -273,12 +273,12 @@ export const defaultTheme: Theme = { fontWeight: '400', }, 'button-lg': { - fontWeight: '500', + fontWeight: '600', fontSize: 18, letterSpacing: tokens.TRACKING, }, button: { - fontWeight: '500', + fontWeight: '600', fontSize: 14, letterSpacing: tokens.TRACKING, }, diff --git a/src/screens/Moderation/index.tsx b/src/screens/Moderation/index.tsx index ad59c42dc..9bfe6c3fa 100644 --- a/src/screens/Moderation/index.tsx +++ b/src/screens/Moderation/index.tsx @@ -339,7 +339,7 @@ export function ModerationScreenInner({ a.justify_between, disabledOnIOS && {opacity: 0.5}, ]}> - <Text style={[a.font_semibold, t.atoms.text_contrast_high]}> + <Text style={[a.font_bold, t.atoms.text_contrast_high]}> <Trans>Enable adult content</Trans> </Text> <Toggle.Item diff --git a/src/screens/Profile/Header/DisplayName.tsx b/src/screens/Profile/Header/DisplayName.tsx index 955e3d72c..ca966a01f 100644 --- a/src/screens/Profile/Header/DisplayName.tsx +++ b/src/screens/Profile/Header/DisplayName.tsx @@ -2,9 +2,9 @@ import React from 'react' import {View} from 'react-native' import {AppBskyActorDefs, ModerationDecision} from '@atproto/api' +import {sanitizeDisplayName} from '#/lib/strings/display-names' +import {sanitizeHandle} from '#/lib/strings/handles' import {Shadow} from '#/state/cache/types' -import {sanitizeDisplayName} from 'lib/strings/display-names' -import {sanitizeHandle} from 'lib/strings/handles' import {atoms as a, useTheme} from '#/alf' import {Text} from '#/components/Typography' @@ -20,7 +20,7 @@ export function ProfileHeaderDisplayName({ <View pointerEvents="none"> <Text testID="profileHeaderDisplayName" - style={[t.atoms.text, a.text_4xl, a.self_start, {fontWeight: '500'}]}> + 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 0e1a2e61f..320980032 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}, ]}> <View style={[a.gap_sm, a.pb_3xl]}> - <Text style={[a.font_semibold, t.atoms.text_contrast_medium]}> + <Text style={[a.font_bold, t.atoms.text_contrast_medium]}> <Trans> Step {state.activeStep + 1} of{' '} {state.serviceDescription && diff --git a/src/screens/StarterPack/StarterPackLandingScreen.tsx b/src/screens/StarterPack/StarterPackLandingScreen.tsx index 4d7f9ace9..68ff3aa7b 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} </Text> <Text - style={[ - a.text_center, - a.font_semibold, - a.text_md, - {color: 'white'}, - ]}> + style={[a.text_center, a.font_bold, a.text_md, {color: 'white'}]}> Starter pack by {`@${creator.handle}`} </Text> </LinearGradientBackground> @@ -219,11 +214,7 @@ function LandingScreenLoaded({ color={t.atoms.text_contrast_medium.color} /> <Text - style={[ - a.font_semibold, - a.text_sm, - t.atoms.text_contrast_medium, - ]} + style={[a.font_bold, a.text_sm, t.atoms.text_contrast_medium]} numberOfLines={1}> <Trans> {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 8eac1ab82..a18f17612 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 = ({ <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> diff --git a/src/view/com/auth/SplashScreen.web.tsx b/src/view/com/auth/SplashScreen.web.tsx index 9ffcbfb9d..1fd62e1d3 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 = ({ )} <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> diff --git a/src/view/com/composer/photos/Gallery.tsx b/src/view/com/composer/photos/Gallery.tsx index 7ff1b7b9a..422a4dd93 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 3088c92a1..7717f597d 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 e3a770db0..c921984d4 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 4b94aeb42..beea3ca1a 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 3fa515934..37b039c60 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 f6db94ed8..29caf4660 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 017b59db9..360cc0e40 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 a20458702..2b0eb8cf2 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 bcf5db03d..5dd328062 100644 --- a/src/view/com/notifications/FeedItem.tsx +++ b/src/view/com/notifications/FeedItem.tsx @@ -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 e07acef28..d6995749b 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 2e4719481..f77fb1603 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 ca417034d..e5121b350 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 e6e05bb04..62ef2c4f1 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 bfbafcad9..a989cd5c5 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 6668ac211..364e10d10 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 6cecd318e..e2bf3c9ac 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<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 ( diff --git a/src/view/com/util/forms/ToggleButton.tsx b/src/view/com/util/forms/ToggleButton.tsx index c98e846cd..706796fc4 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<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 ( diff --git a/src/view/com/util/post-embeds/GifEmbed.tsx b/src/view/com/util/post-embeds/GifEmbed.tsx index 7b6c42fa4..a1af6ab26 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 090577a5e..d4982b0e2 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 2992e5c7e..158dc8b8d 100644 --- a/src/view/screens/AccessibilitySettings.tsx +++ b/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> diff --git a/src/view/screens/LanguageSettings.tsx b/src/view/screens/LanguageSettings.tsx index 0f27db522..bd69d7a55 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<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, diff --git a/src/view/screens/Lists.tsx b/src/view/screens/Lists.tsx index 9daeaba18..d6a86e514 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<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}> diff --git a/src/view/screens/ModerationModlists.tsx b/src/view/screens/ModerationModlists.tsx index b7d993acc..39ba540b4 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<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}> diff --git a/src/view/screens/PreferencesExternalEmbeds.tsx b/src/view/screens/PreferencesExternalEmbeds.tsx index ade7a53d9..8b3550d6b 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]}> <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}> diff --git a/src/view/screens/PreferencesFollowingFeed.tsx b/src/view/screens/PreferencesFollowingFeed.tsx index 8aa4221e6..085250e3b 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]}> <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}> diff --git a/src/view/screens/PreferencesThreads.tsx b/src/view/screens/PreferencesThreads.tsx index 4a311f91c..7a5a88869 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]}> <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}> diff --git a/src/view/screens/Search/Search.tsx b/src/view/screens/Search/Search.tsx index 30d16506e..e1e412648 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 fe449fcdb..737ca2d28 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}, ]}> <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> diff --git a/src/view/shell/Drawer.tsx b/src/view/shell/Drawer.tsx index facead2c1..226fe2496 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 c575e3d9b..9255957cb 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 72e34ac46..2f5f95427 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'}, ]} /> </View> diff --git a/src/view/shell/desktop/LeftNav.tsx b/src/view/shell/desktop/LeftNav.tsx index ca8073f57..6cceaccd9 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, }, |