diff --git a/src/Navigation.tsx b/src/Navigation.tsx index 323f668b79..81d08c7da3 100644 --- a/src/Navigation.tsx +++ b/src/Navigation.tsx @@ -17,7 +17,6 @@ import { import {timeout} from '#/lib/async/timeout' import {useColorSchemeStyle} from '#/lib/hooks/useColorSchemeStyle' -import {usePalette} from '#/lib/hooks/usePalette' import {useWebScrollRestoration} from '#/lib/hooks/useWebScrollRestoration' import {buildStateObject} from '#/lib/routes/helpers' import { @@ -93,6 +92,7 @@ import { StarterPackScreenShort, } from '#/screens/StarterPack/StarterPackScreen' import {Wizard} from '#/screens/StarterPack/Wizard' +import {useTheme} from '#/alf' import {router} from '#/routes' import {Referrer} from '../modules/expo-bluesky-swiss-army' @@ -412,7 +412,7 @@ function TabsNavigator() { } function HomeTabNavigator() { - const pal = usePalette('default') + const t = useTheme() return ( HomeScreen} /> HomeScreen} /> @@ -432,7 +432,7 @@ function HomeTabNavigator() { } function SearchTabNavigator() { - const pal = usePalette('default') + const t = useTheme() return ( SearchScreen} /> {commonScreens(SearchTab as typeof HomeTab)} @@ -450,7 +450,7 @@ function SearchTabNavigator() { } function NotificationsTabNavigator() { - const pal = usePalette('default') + const t = useTheme() return ( { - const pal = usePalette('default') + const t = useTheme() const numUnread = useUnreadNotifications() const screenListeners = useWebScrollRestoration() const title = (page: MessageDescriptor) => bskyTitle(i18n._(page), numUnread) @@ -541,7 +541,7 @@ const FlatNavigator = () => { gestureEnabled: true, fullScreenGestureEnabled: true, headerShown: false, - contentStyle: pal.view, + contentStyle: t.atoms.bg, }}> & { + disableTopPadding?: boolean + style?: StyleProp +}): React.ReactNode => { + const {top} = useSafeAreaInsets() + return ( + + ) +} +Screen = React.memo(Screen) +export {Screen} diff --git a/src/screens/E2E/SharedPreferencesTesterScreen.tsx b/src/screens/E2E/SharedPreferencesTesterScreen.tsx index 06bf538ea6..5a9e6cd22d 100644 --- a/src/screens/E2E/SharedPreferencesTesterScreen.tsx +++ b/src/screens/E2E/SharedPreferencesTesterScreen.tsx @@ -1,9 +1,10 @@ import React from 'react' import {View} from 'react-native' -import {ScrollView} from 'view/com/util/Views' +import {ScrollView} from '#/view/com/util/Views' import {atoms as a} from '#/alf' import {Button, ButtonText} from '#/components/Button' +import * as Layout from '#/components/Layout' import {Text} from '#/components/Typography' import {SharedPrefs} from '../../../modules/expo-bluesky-swiss-army' @@ -11,103 +12,105 @@ export function SharedPreferencesTesterScreen() { const [currentTestOutput, setCurrentTestOutput] = React.useState('') return ( - - - - {currentTestOutput} + + + + + {currentTestOutput} + + + + + + + + + - - - - - - - - - - + + ) } diff --git a/src/screens/Hashtag.tsx b/src/screens/Hashtag.tsx index 964cb0191f..adf5f00801 100644 --- a/src/screens/Hashtag.tsx +++ b/src/screens/Hashtag.tsx @@ -6,23 +6,24 @@ import {useLingui} from '@lingui/react' import {useFocusEffect} from '@react-navigation/native' import {NativeStackScreenProps} from '@react-navigation/native-stack' -import {HITSLOP_10} from 'lib/constants' -import {useInitialNumToRender} from 'lib/hooks/useInitialNumToRender' -import {CommonNavigatorParams} from 'lib/routes/types' -import {shareUrl} from 'lib/sharing' -import {cleanError} from 'lib/strings/errors' -import {sanitizeHandle} from 'lib/strings/handles' -import {enforceLen} from 'lib/strings/helpers' -import {isNative, isWeb} from 'platform/detection' -import {useSearchPostsQuery} from 'state/queries/search-posts' -import {useSetDrawerSwipeDisabled, useSetMinimalShellMode} from 'state/shell' +import {HITSLOP_10} from '#/lib/constants' +import {useInitialNumToRender} from '#/lib/hooks/useInitialNumToRender' +import {CommonNavigatorParams} from '#/lib/routes/types' +import {shareUrl} from '#/lib/sharing' +import {cleanError} from '#/lib/strings/errors' +import {sanitizeHandle} from '#/lib/strings/handles' +import {enforceLen} from '#/lib/strings/helpers' +import {isNative, isWeb} from '#/platform/detection' +import {useSearchPostsQuery} from '#/state/queries/search-posts' +import {useSetDrawerSwipeDisabled, useSetMinimalShellMode} from '#/state/shell' import {Pager} from '#/view/com/pager/Pager' import {TabBar} from '#/view/com/pager/TabBar' +import {Post} from '#/view/com/post/Post' +import {List} from '#/view/com/util/List' +import {ViewHeader} from '#/view/com/util/ViewHeader' import {CenteredView} from '#/view/com/util/Views' -import {Post} from 'view/com/post/Post' -import {List} from 'view/com/util/List' -import {ViewHeader} from 'view/com/util/ViewHeader' import {ArrowOutOfBox_Stroke2_Corner0_Rounded} from '#/components/icons/ArrowOutOfBox' +import * as Layout from '#/components/Layout' import {ListFooter, ListMaybePlaceholder} from '#/components/Lists' const renderItem = ({item}: ListRenderItemInfo) => { @@ -108,7 +109,7 @@ export default function HashtagScreen({ }, [_, fullTag, author, activeTab]) return ( - <> + {section.component} ))} - + ) } diff --git a/src/screens/Messages/ChatList.tsx b/src/screens/Messages/ChatList.tsx index 9912456e13..45b3bf14fa 100644 --- a/src/screens/Messages/ChatList.tsx +++ b/src/screens/Messages/ChatList.tsx @@ -28,6 +28,7 @@ import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/ico import {Message_Stroke2_Corner0_Rounded as Message} from '#/components/icons/Message' import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus' import {SettingsSliderVertical_Stroke2_Corner0_Rounded as SettingsSlider} from '#/components/icons/SettingsSlider' +import * as Layout from '#/components/Layout' import {Link} from '#/components/Link' import {ListFooter} from '#/components/Lists' import {Loader} from '#/components/Loader' @@ -149,7 +150,7 @@ export function MessagesScreen({navigation, route}: Props) { if (conversations.length < 1) { return ( - + {gtMobile ? ( )} - + ) } return ( - + {!gtMobile && ( - + ) } diff --git a/src/screens/Messages/Conversation.tsx b/src/screens/Messages/Conversation.tsx index 21fdfe0ea9..651915738a 100644 --- a/src/screens/Messages/Conversation.tsx +++ b/src/screens/Messages/Conversation.tsx @@ -18,10 +18,11 @@ import {useProfileQuery} from '#/state/queries/profile' import {useSetMinimalShellMode} from '#/state/shell' import {CenteredView} from '#/view/com/util/Views' import {MessagesList} from '#/screens/Messages/components/MessagesList' -import {atoms as a, useBreakpoints, useTheme} from '#/alf' +import {atoms as a, useBreakpoints, useTheme, web} from '#/alf' import {MessagesListBlockedFooter} from '#/components/dms/MessagesListBlockedFooter' import {MessagesListHeader} from '#/components/dms/MessagesListHeader' import {Error} from '#/components/Error' +import * as Layout from '#/components/Layout' import {Loader} from '#/components/Loader' type Props = NativeStackScreenProps< @@ -64,9 +65,11 @@ export function MessagesConversationScreen({route}: Props) { ) return ( - - - + + + + + ) } @@ -100,7 +103,7 @@ function Inner() { if (convoState.status === ConvoStatus.Error) { return ( - + - - - - Allow new messages from - - - - - - Everyone - - - - - - Users I follow - - - - - - No one - - - - - - - - You can continue ongoing conversations regardless of which setting - you choose. - - - {isNative && ( - <> - - - Notification Sounds - - - - - - Enabled - - - - - - Disabled - - - - - - - )} - - + + + + + + Allow new messages from + + + + + + Everyone + + + + + + Users I follow + + + + + + No one + + + + + + + + You can continue ongoing conversations regardless of which setting + you choose. + + + {isNative && ( + <> + + + Notification Sounds + + + + + + Enabled + + + + + + Disabled + + + + + + + )} + + + ) } diff --git a/src/screens/Moderation/index.tsx b/src/screens/Moderation/index.tsx index 070b879508..222774e053 100644 --- a/src/screens/Moderation/index.tsx +++ b/src/screens/Moderation/index.tsx @@ -41,6 +41,7 @@ import {Filter_Stroke2_Corner0_Rounded as Filter} from '#/components/icons/Filte import {Group3_Stroke2_Corner0_Rounded as Group} from '#/components/icons/Group' import {Person_Stroke2_Corner0_Rounded as Person} from '#/components/icons/Person' import * as LabelingService from '#/components/LabelingServiceCard' +import * as Layout from '#/components/Layout' import {InlineLinkText, Link} from '#/components/Link' import {Loader} from '#/components/Loader' import {GlobalLabelPreference} from '#/components/moderation/LabelPreference' @@ -94,31 +95,33 @@ export function ModerationScreen( const error = preferencesError return ( - - + + + - {isLoading ? ( - - - - ) : error || !preferences ? ( - - ) : ( - - )} - + {isLoading ? ( + + + + ) : error || !preferences ? ( + + ) : ( + + )} + + ) } diff --git a/src/screens/Post/PostLikedBy.tsx b/src/screens/Post/PostLikedBy.tsx index ea522488cc..6fc485f34b 100644 --- a/src/screens/Post/PostLikedBy.tsx +++ b/src/screens/Post/PostLikedBy.tsx @@ -5,12 +5,12 @@ import {useFocusEffect} from '@react-navigation/native' import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types' import {makeRecordUri} from '#/lib/strings/url-helpers' +import {isWeb} from '#/platform/detection' import {useSetMinimalShellMode} from '#/state/shell' -import {isWeb} from 'platform/detection' import {PostLikedBy as PostLikedByComponent} from '#/view/com/post-thread/PostLikedBy' import {ViewHeader} from '#/view/com/util/ViewHeader' -import {CenteredView} from 'view/com/util/Views' -import {atoms as a} from '#/alf' +import {CenteredView} from '#/view/com/util/Views' +import * as Layout from '#/components/Layout' import {ListHeaderDesktop} from '#/components/Lists' type Props = NativeStackScreenProps @@ -27,10 +27,12 @@ export const PostLikedByScreen = ({route}: Props) => { ) return ( - - - - - + + + + + + + ) } diff --git a/src/screens/Post/PostQuotes.tsx b/src/screens/Post/PostQuotes.tsx index 0d59418f15..71dd8ad8d7 100644 --- a/src/screens/Post/PostQuotes.tsx +++ b/src/screens/Post/PostQuotes.tsx @@ -5,12 +5,12 @@ import {useFocusEffect} from '@react-navigation/native' import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types' import {makeRecordUri} from '#/lib/strings/url-helpers' +import {isWeb} from '#/platform/detection' import {useSetMinimalShellMode} from '#/state/shell' -import {isWeb} from 'platform/detection' import {PostQuotes as PostQuotesComponent} from '#/view/com/post-thread/PostQuotes' import {ViewHeader} from '#/view/com/util/ViewHeader' -import {CenteredView} from 'view/com/util/Views' -import {atoms as a} from '#/alf' +import {CenteredView} from '#/view/com/util/Views' +import * as Layout from '#/components/Layout' import {ListHeaderDesktop} from '#/components/Lists' type Props = NativeStackScreenProps @@ -27,10 +27,12 @@ export const PostQuotesScreen = ({route}: Props) => { ) return ( - - - - - + + + + + + + ) } diff --git a/src/screens/Post/PostRepostedBy.tsx b/src/screens/Post/PostRepostedBy.tsx index f8c058ff79..c1e8b29878 100644 --- a/src/screens/Post/PostRepostedBy.tsx +++ b/src/screens/Post/PostRepostedBy.tsx @@ -5,12 +5,12 @@ import {useFocusEffect} from '@react-navigation/native' import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types' import {makeRecordUri} from '#/lib/strings/url-helpers' +import {isWeb} from '#/platform/detection' import {useSetMinimalShellMode} from '#/state/shell' -import {isWeb} from 'platform/detection' import {PostRepostedBy as PostRepostedByComponent} from '#/view/com/post-thread/PostRepostedBy' import {ViewHeader} from '#/view/com/util/ViewHeader' -import {CenteredView} from 'view/com/util/Views' -import {atoms as a} from '#/alf' +import {CenteredView} from '#/view/com/util/Views' +import * as Layout from '#/components/Layout' import {ListHeaderDesktop} from '#/components/Lists' type Props = NativeStackScreenProps @@ -27,10 +27,12 @@ export const PostRepostedByScreen = ({route}: Props) => { ) return ( - - - - - + + + + + + + ) } diff --git a/src/screens/Profile/KnownFollowers.tsx b/src/screens/Profile/KnownFollowers.tsx index 5cb45a11e1..7e396c350f 100644 --- a/src/screens/Profile/KnownFollowers.tsx +++ b/src/screens/Profile/KnownFollowers.tsx @@ -1,20 +1,20 @@ import React from 'react' -import {View} from 'react-native' import {AppBskyActorDefs} from '@atproto/api' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' import {useFocusEffect} from '@react-navigation/native' +import {useInitialNumToRender} from '#/lib/hooks/useInitialNumToRender' +import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types' import {cleanError} from '#/lib/strings/errors' import {logger} from '#/logger' import {useProfileKnownFollowersQuery} from '#/state/queries/known-followers' import {useResolveDidQuery} from '#/state/queries/resolve-uri' import {useSetMinimalShellMode} from '#/state/shell' -import {useInitialNumToRender} from 'lib/hooks/useInitialNumToRender' -import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' import {ProfileCardWithFollowBtn} from '#/view/com/profile/ProfileCard' import {List} from '#/view/com/util/List' import {ViewHeader} from '#/view/com/util/ViewHeader' +import * as Layout from '#/components/Layout' import { ListFooter, ListHeaderDesktop, @@ -92,19 +92,21 @@ export const ProfileKnownFollowersScreen = ({route}: Props) => { if (followers.length < 1) { return ( - + + + ) } return ( - + { initialNumToRender={initialNumToRender} windowSize={11} /> - + ) } diff --git a/src/screens/Profile/ProfileLabelerLikedBy.tsx b/src/screens/Profile/ProfileLabelerLikedBy.tsx index 8650ac2e64..ccc2700847 100644 --- a/src/screens/Profile/ProfileLabelerLikedBy.tsx +++ b/src/screens/Profile/ProfileLabelerLikedBy.tsx @@ -1,5 +1,4 @@ import React from 'react' -import {View} from 'react-native' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' import {useFocusEffect} from '@react-navigation/native' @@ -8,6 +7,7 @@ import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types' import {makeRecordUri} from '#/lib/strings/url-helpers' import {useSetMinimalShellMode} from '#/state/shell' import {ViewHeader} from '#/view/com/util/ViewHeader' +import * as Layout from '#/components/Layout' import {LikedByList} from '#/components/LikedByList' export function ProfileLabelerLikedByScreen({ @@ -25,9 +25,9 @@ export function ProfileLabelerLikedByScreen({ ) return ( - + - + ) } diff --git a/src/screens/Settings/AppearanceSettings.tsx b/src/screens/Settings/AppearanceSettings.tsx index 69e04f4af1..c317c930fa 100644 --- a/src/screens/Settings/AppearanceSettings.tsx +++ b/src/screens/Settings/AppearanceSettings.tsx @@ -10,7 +10,6 @@ import {useLingui} from '@lingui/react' import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types' -import {s} from '#/lib/styles' import {useSetThemePrefs, useThemePrefs} from '#/state/shell' import {SimpleViewHeader} from '#/view/com/util/SimpleViewHeader' import {ScrollView} from '#/view/com/util/Views' @@ -21,6 +20,7 @@ import {Moon_Stroke2_Corner0_Rounded as MoonIcon} from '#/components/icons/Moon' import {Phone_Stroke2_Corner0_Rounded as PhoneIcon} from '#/components/icons/Phone' import {TextSize_Stroke2_Corner0_Rounded as TextSize} from '#/components/icons/TextSize' import {TitleCase_Stroke2_Corner0_Rounded as Aa} from '#/components/icons/TitleCase' +import * as Layout from '#/components/Layout' import {Text} from '#/components/Typography' type Props = NativeStackScreenProps @@ -76,7 +76,7 @@ export function AppearanceSettingsScreen({}: Props) { return ( - + - + ) } diff --git a/src/screens/StarterPack/StarterPackScreen.tsx b/src/screens/StarterPack/StarterPackScreen.tsx index 68803ac005..4baec9ec13 100644 --- a/src/screens/StarterPack/StarterPackScreen.tsx +++ b/src/screens/StarterPack/StarterPackScreen.tsx @@ -53,6 +53,7 @@ import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/ico import {DotGrid_Stroke2_Corner0_Rounded as Ellipsis} from '#/components/icons/DotGrid' import {Pencil_Stroke2_Corner0_Rounded as Pencil} from '#/components/icons/Pencil' import {Trash_Stroke2_Corner0_Rounded as Trash} from '#/components/icons/Trash' +import * as Layout from '#/components/Layout' import {ListMaybePlaceholder} from '#/components/Lists' import {Loader} from '#/components/Loader' import * as Menu from '#/components/Menu' @@ -76,7 +77,11 @@ type StarterPackScreenShortProps = NativeStackScreenProps< > export function StarterPackScreen({route}: StarterPackScreeProps) { - return + return ( + + + + ) } export function StarterPackScreenShort({route}: StarterPackScreenShortProps) { @@ -91,15 +96,21 @@ export function StarterPackScreenShort({route}: StarterPackScreenShortProps) { if (isLoading || isError || !resolvedStarterPack) { return ( - + + + ) } - return + return ( + + + + ) } export function StarterPackScreenInner({ diff --git a/src/screens/StarterPack/Wizard/index.tsx b/src/screens/StarterPack/Wizard/index.tsx index 29ef44ee09..f8d503274f 100644 --- a/src/screens/StarterPack/Wizard/index.tsx +++ b/src/screens/StarterPack/Wizard/index.tsx @@ -19,32 +19,32 @@ import {useLingui} from '@lingui/react' import {useFocusEffect, useNavigation} from '@react-navigation/native' import {NativeStackScreenProps} from '@react-navigation/native-stack' -import {logger} from '#/logger' -import {HITSLOP_10, STARTER_PACK_MAX_SIZE} from 'lib/constants' -import {createSanitizedDisplayName} from 'lib/moderation/create-sanitized-display-name' -import {CommonNavigatorParams, NavigationProp} from 'lib/routes/types' -import {logEvent} from 'lib/statsig/statsig' -import {sanitizeDisplayName} from 'lib/strings/display-names' -import {sanitizeHandle} from 'lib/strings/handles' -import {enforceLen} from 'lib/strings/helpers' +import {HITSLOP_10, STARTER_PACK_MAX_SIZE} from '#/lib/constants' +import {createSanitizedDisplayName} from '#/lib/moderation/create-sanitized-display-name' +import {CommonNavigatorParams, NavigationProp} from '#/lib/routes/types' +import {logEvent} from '#/lib/statsig/statsig' +import {sanitizeDisplayName} from '#/lib/strings/display-names' +import {sanitizeHandle} from '#/lib/strings/handles' +import {enforceLen} from '#/lib/strings/helpers' import { getStarterPackOgCard, parseStarterPackUri, -} from 'lib/strings/starter-pack' -import {isAndroid, isNative, isWeb} from 'platform/detection' -import {useModerationOpts} from 'state/preferences/moderation-opts' -import {useAllListMembersQuery} from 'state/queries/list-members' -import {useProfileQuery} from 'state/queries/profile' +} from '#/lib/strings/starter-pack' +import {logger} from '#/logger' +import {isAndroid, isNative, isWeb} from '#/platform/detection' +import {useModerationOpts} from '#/state/preferences/moderation-opts' +import {useAllListMembersQuery} from '#/state/queries/list-members' +import {useProfileQuery} from '#/state/queries/profile' import { useCreateStarterPackMutation, useEditStarterPackMutation, useStarterPackQuery, -} from 'state/queries/starter-packs' -import {useSession} from 'state/session' -import {useSetMinimalShellMode} from 'state/shell' +} from '#/state/queries/starter-packs' +import {useSession} from '#/state/session' +import {useSetMinimalShellMode} from '#/state/shell' import * as Toast from '#/view/com/util/Toast' -import {UserAvatar} from 'view/com/util/UserAvatar' -import {CenteredView} from 'view/com/util/Views' +import {UserAvatar} from '#/view/com/util/UserAvatar' +import {CenteredView} from '#/view/com/util/Views' import {useWizardState, WizardStep} from '#/screens/StarterPack/Wizard/State' import {StepDetails} from '#/screens/StarterPack/Wizard/StepDetails' import {StepFeeds} from '#/screens/StarterPack/Wizard/StepFeeds' @@ -52,6 +52,7 @@ import {StepProfiles} from '#/screens/StarterPack/Wizard/StepProfiles' import {atoms as a, useTheme} from '#/alf' import {Button, ButtonText} from '#/components/Button' import {useDialogControl} from '#/components/Dialog' +import * as Layout from '#/components/Layout' import {ListMaybePlaceholder} from '#/components/Lists' import {Loader} from '#/components/Loader' import {WizardEditListDialog} from '#/components/StarterPack/Wizard/WizardEditListDialog' @@ -97,33 +98,39 @@ export function Wizard({ if (!isReady) { return ( - + + + ) } else if (isEdit && starterPack?.creator.did !== currentAccount?.did) { return ( - + + + ) } return ( - - - + + + + + ) } diff --git a/src/view/screens/AccessibilitySettings.tsx b/src/view/screens/AccessibilitySettings.tsx index 5d314e8e69..bf9f5fcb5e 100644 --- a/src/view/screens/AccessibilitySettings.tsx +++ b/src/view/screens/AccessibilitySettings.tsx @@ -27,6 +27,7 @@ import {SimpleViewHeader} from '#/view/com/util/SimpleViewHeader' import {Text} from '#/view/com/util/text/Text' import {ScrollView} from '#/view/com/util/Views' import {atoms as a} from '#/alf' +import * as Layout from '#/components/Layout' type Props = NativeStackScreenProps< CommonNavigatorParams, @@ -54,7 +55,7 @@ export function AccessibilitySettingsScreen({}: Props) { ) return ( - + )} - + ) } diff --git a/src/view/screens/AppPasswords.tsx b/src/view/screens/AppPasswords.tsx index 21a9cb0eb7..48abd964f9 100644 --- a/src/view/screens/AppPasswords.tsx +++ b/src/view/screens/AppPasswords.tsx @@ -30,10 +30,19 @@ import {ViewHeader} from '#/view/com/util/ViewHeader' import {CenteredView} from '#/view/com/util/Views' import {atoms as a} from '#/alf' import {useDialogControl} from '#/components/Dialog' +import * as Layout from '#/components/Layout' import * as Prompt from '#/components/Prompt' type Props = NativeStackScreenProps export function AppPasswords({}: Props) { + return ( + + + + ) +} + +function AppPasswordsInner() { const pal = usePalette('default') const {_} = useLingui() const setMinimalShellMode = useSetMinimalShellMode() diff --git a/src/view/screens/CommunityGuidelines.tsx b/src/view/screens/CommunityGuidelines.tsx index f6c29a3b8d..76993d5b72 100644 --- a/src/view/screens/CommunityGuidelines.tsx +++ b/src/view/screens/CommunityGuidelines.tsx @@ -1,16 +1,18 @@ import React from 'react' import {View} from 'react-native' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {useFocusEffect} from '@react-navigation/native' -import {Text} from 'view/com/util/text/Text' -import {TextLink} from 'view/com/util/Link' -import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' -import {ViewHeader} from '../com/util/ViewHeader' -import {ScrollView} from 'view/com/util/Views' -import {usePalette} from 'lib/hooks/usePalette' -import {s} from 'lib/styles' + +import {usePalette} from '#/lib/hooks/usePalette' +import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types' +import {s} from '#/lib/styles' import {useSetMinimalShellMode} from '#/state/shell' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' +import {TextLink} from '#/view/com/util/Link' +import {Text} from '#/view/com/util/text/Text' +import {ScrollView} from '#/view/com/util/Views' +import * as Layout from '#/components/Layout' +import {ViewHeader} from '../com/util/ViewHeader' type Props = NativeStackScreenProps< CommonNavigatorParams, @@ -28,7 +30,7 @@ export const CommunityGuidelinesScreen = (_props: Props) => { ) return ( - + @@ -45,6 +47,6 @@ export const CommunityGuidelinesScreen = (_props: Props) => { - + ) } diff --git a/src/view/screens/CopyrightPolicy.tsx b/src/view/screens/CopyrightPolicy.tsx index 522a9e4dba..fe2731c539 100644 --- a/src/view/screens/CopyrightPolicy.tsx +++ b/src/view/screens/CopyrightPolicy.tsx @@ -1,16 +1,18 @@ import React from 'react' import {View} from 'react-native' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {useFocusEffect} from '@react-navigation/native' -import {Text} from 'view/com/util/text/Text' -import {TextLink} from 'view/com/util/Link' -import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' -import {ViewHeader} from '../com/util/ViewHeader' -import {ScrollView} from 'view/com/util/Views' -import {usePalette} from 'lib/hooks/usePalette' -import {s} from 'lib/styles' + +import {usePalette} from '#/lib/hooks/usePalette' +import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types' +import {s} from '#/lib/styles' import {useSetMinimalShellMode} from '#/state/shell' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' +import {TextLink} from '#/view/com/util/Link' +import {Text} from '#/view/com/util/text/Text' +import {ScrollView} from '#/view/com/util/Views' +import * as Layout from '#/components/Layout' +import {ViewHeader} from '../com/util/ViewHeader' type Props = NativeStackScreenProps export const CopyrightPolicyScreen = (_props: Props) => { @@ -25,7 +27,7 @@ export const CopyrightPolicyScreen = (_props: Props) => { ) return ( - + @@ -42,6 +44,6 @@ export const CopyrightPolicyScreen = (_props: Props) => { - + ) } diff --git a/src/view/screens/Debug.tsx b/src/view/screens/Debug.tsx index f26b1505a8..60dc089dd8 100644 --- a/src/view/screens/Debug.tsx +++ b/src/view/screens/Debug.tsx @@ -1,24 +1,29 @@ import React from 'react' import {ScrollView, View} from 'react-native' -import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' -import {ViewHeader} from '../com/util/ViewHeader' -import {ThemeProvider, PaletteColorName} from 'lib/ThemeContext' -import {usePalette} from 'lib/hooks/usePalette' -import {s} from 'lib/styles' -import * as Toast from 'view/com/util/Toast' -import {Text} from '../com/util/text/Text' -import {ViewSelector} from '../com/util/ViewSelector' -import {EmptyState} from '../com/util/EmptyState' -import * as LoadingPlaceholder from '../com/util/LoadingPlaceholder' -import {Button, ButtonType} from '../com/util/forms/Button' -import {DropdownButton, DropdownItem} from '../com/util/forms/DropdownButton' -import {ToggleButton} from '../com/util/forms/ToggleButton' -import {RadioGroup} from '../com/util/forms/RadioGroup' -import {ErrorScreen} from '../com/util/error/ErrorScreen' -import {ErrorMessage} from '../com/util/error/ErrorMessage' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' +import {usePalette} from '#/lib/hooks/usePalette' +import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types' +import {s} from '#/lib/styles' +import {PaletteColorName, ThemeProvider} from '#/lib/ThemeContext' +import {EmptyState} from '#/view/com/util/EmptyState' +import {ErrorMessage} from '#/view/com/util/error/ErrorMessage' +import {ErrorScreen} from '#/view/com/util/error/ErrorScreen' +import {Button, ButtonType} from '#/view/com/util/forms/Button' +import { + DropdownButton, + DropdownItem, +} from '#/view/com/util/forms/DropdownButton' +import {RadioGroup} from '#/view/com/util/forms/RadioGroup' +import {ToggleButton} from '#/view/com/util/forms/ToggleButton' +import * as LoadingPlaceholder from '#/view/com/util/LoadingPlaceholder' +import {Text} from '#/view/com/util/text/Text' +import * as Toast from '#/view/com/util/Toast' +import {ViewHeader} from '#/view/com/util/ViewHeader' +import {ViewSelector} from '#/view/com/util/ViewSelector' +import * as Layout from '#/components/Layout' + const MAIN_VIEWS = ['Base', 'Controls', 'Error', 'Notifs'] export const DebugScreen = ({}: NativeStackScreenProps< @@ -33,10 +38,12 @@ export const DebugScreen = ({}: NativeStackScreenProps< } return ( - + + + ) } diff --git a/src/view/screens/DebugMod.tsx b/src/view/screens/DebugMod.tsx index d83623adc1..b87fc8683a 100644 --- a/src/view/screens/DebugMod.tsx +++ b/src/view/screens/DebugMod.tsx @@ -21,6 +21,7 @@ import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' import {useGlobalLabelStrings} from '#/lib/moderation/useGlobalLabelStrings' +import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types' import {moderationOptsOverrideContext} from '#/state/preferences/moderation-opts' import {FeedNotification} from '#/state/queries/notifications/types' import { @@ -28,7 +29,6 @@ import { shouldFilterNotif, } from '#/state/queries/notifications/util' import {useSession} from '#/state/session' -import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' import {CenteredView, ScrollView} from '#/view/com/util/Views' import {ProfileHeaderStandard} from '#/screens/Profile/Header/ProfileHeaderStandard' import {atoms as a, useTheme} from '#/alf' @@ -41,6 +41,7 @@ import { ChevronBottom_Stroke2_Corner0_Rounded as ChevronBottom, ChevronTop_Stroke2_Corner0_Rounded as ChevronTop, } from '#/components/icons/Chevron' +import * as Layout from '#/components/Layout' import {H1, H3, P, Text} from '#/components/Typography' import {ScreenHider} from '../../components/moderation/ScreenHider' import {FeedItem as NotifFeedItem} from '../com/notifications/FeedItem' @@ -264,309 +265,325 @@ export const DebugModScreen = ({}: NativeStackScreenProps< }, [post, modOpts]) return ( - - - -

Moderation states

- - - - - Label - - - Block - - - Mute - - - - {scenario[0] === 'label' && ( - <> - - - - {LABEL_VALUES.map(labelValue => { - let targetFixed = target[0] - if ( - targetFixed !== 'account' && - targetFixed !== 'profile' - ) { - targetFixed = 'content' - } - const disabled = - isSelfLabel && - LABELS[labelValue].flags.includes('no-self') - return ( - - - {labelValue} - - ) - })} - - - Custom label - - - - - {label[0] === 'custom' ? ( - - ) : ( - <> - - - - )} - - - - + + + + +

+ Moderation states +

+ + + + + Label + + + Block + + + Mute + + + + {scenario[0] === 'label' && ( + <> + - - - - Target is me - - - - Following target - - - - Self label - - - - Adult disabled - - - - Logged out + type="radio" + values={label} + onChange={setLabel}> + + {LABEL_VALUES.map(labelValue => { + let targetFixed = target[0] + if ( + targetFixed !== 'account' && + targetFixed !== 'profile' + ) { + targetFixed = 'content' + } + const disabled = + isSelfLabel && + LABELS[labelValue].flags.includes('no-self') + return ( + + + {labelValue} + + ) + })} + + + Custom label - {LABELS[label[0] as keyof typeof LABELS]?.configurable !== - false && ( - - - Preference - - - + ) : ( + <> + + + + )} + + + + + + + + + Target is me + + + + Following target + + + + Self label + + + + Adult disabled + + + + Logged out + + + + + {LABELS[label[0] as keyof typeof LABELS]?.configurable !== + false && ( + + - + Preference + + + + + + Hide + + + + Warn + + + + Ignore + + + + + )} + + + + + + + Target + + + + + + + Account + + - Hide + Profile - + - Warn + Post - + - Ignore + Embed - )} - - - - - - - Target - - - - - - - Account - - - - Profile - - - - Post - - - - Embed - - - - - - )} - - - - - - - - Post - - - Notifications - - - Account - - - Data - - - - - {view[0] === 'post' && ( - <> - - - - - - - - - - )} - - {view[0] === 'notifications' && ( - <> - - - - - )} - {view[0] === 'account' && ( - <> - - - - - - - )} + + + + + + + Post + + + Notifications + + + Account + + + Data + + + + + {view[0] === 'post' && ( + <> + + + + + + + + + + )} + + {view[0] === 'notifications' && ( + <> + + + + + + + )} + + {view[0] === 'account' && ( + <> + + - {view[0] === 'data' && ( - <> - - - - - - - )} - + + + + )} + + {view[0] === 'data' && ( + <> + + + + + + + )} + - - - - + + + + + ) } diff --git a/src/view/screens/Feeds.tsx b/src/view/screens/Feeds.tsx index 87af59f7f6..404145714a 100644 --- a/src/view/screens/Feeds.tsx +++ b/src/view/screens/Feeds.tsx @@ -40,6 +40,7 @@ import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components import {FilterTimeline_Stroke2_Corner0_Rounded as FilterTimeline} from '#/components/icons/FilterTimeline' import {ListMagnifyingGlass_Stroke2_Corner0_Rounded} from '#/components/icons/ListMagnifyingGlass' import {ListSparkle_Stroke2_Corner0_Rounded} from '#/components/icons/ListSparkle' +import * as Layout from '#/components/Layout' import * as ListCard from '#/components/ListCard' type Props = NativeStackScreenProps @@ -545,7 +546,7 @@ export function FeedsScreen(_props: Props) { ) return ( - + {isMobile && ( )} - + ) } @@ -768,9 +769,6 @@ function FeedsAboutHeader() { } const styles = StyleSheet.create({ - container: { - flex: 1, - }, list: { height: '100%', }, diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx index 4172d64089..2374493838 100644 --- a/src/view/screens/Home.tsx +++ b/src/view/screens/Home.tsx @@ -1,5 +1,5 @@ import React from 'react' -import {ActivityIndicator, StyleSheet, View} from 'react-native' +import {ActivityIndicator, StyleSheet} from 'react-native' import {useFocusEffect} from '@react-navigation/native' import {PROD_DEFAULT_FEED} from '#/lib/constants' @@ -23,12 +23,13 @@ import {useSetDrawerSwipeDisabled, useSetMinimalShellMode} from '#/state/shell' import {useLoggedOutViewControls} from '#/state/shell/logged-out' import {useSelectedFeed, useSetSelectedFeed} from '#/state/shell/selected-feed' import {FeedPage} from '#/view/com/feeds/FeedPage' +import {HomeHeader} from '#/view/com/home/HomeHeader' import {Pager, PagerRef, RenderTabBarFnProps} from '#/view/com/pager/Pager' import {CustomFeedEmptyState} from '#/view/com/posts/CustomFeedEmptyState' import {FollowingEmptyState} from '#/view/com/posts/FollowingEmptyState' import {FollowingEndOfFeed} from '#/view/com/posts/FollowingEndOfFeed' import {NoFeedsPinned} from '#/screens/Home/NoFeedsPinned' -import {HomeHeader} from '../com/home/HomeHeader' +import * as Layout from '#/components/Layout' type Props = NativeStackScreenProps export function HomeScreen(props: Props) { @@ -70,17 +71,19 @@ export function HomeScreen(props: Props) { if (preferences && pinnedFeedInfos && !isPinnedFeedsLoading) { return ( - + + + ) } else { return ( - + - + ) } } diff --git a/src/view/screens/LanguageSettings.tsx b/src/view/screens/LanguageSettings.tsx index c1daa54e6c..6af18103c1 100644 --- a/src/view/screens/LanguageSettings.tsx +++ b/src/view/screens/LanguageSettings.tsx @@ -19,9 +19,10 @@ import {useModalControls} from '#/state/modals' import {useLanguagePrefs, useLanguagePrefsApi} from '#/state/preferences' import {useSetMinimalShellMode} from '#/state/shell' import {Button} from '#/view/com/util/forms/Button' +import {Text} from '#/view/com/util/text/Text' import {ViewHeader} from '#/view/com/util/ViewHeader' import {CenteredView} from '#/view/com/util/Views' -import {Text} from '../com/util/text/Text' +import * as Layout from '#/components/Layout' type Props = NativeStackScreenProps @@ -76,232 +77,234 @@ export function LanguageSettingsScreen(_props: Props) { }, [langPrefs.contentLanguages]) return ( - - + + + - - {/* APP LANGUAGE */} - - - App Language - - - - Select your app language for the default text to display in the - app. - - + + {/* APP LANGUAGE */} + + + App Language + + + + Select your app language for the default text to display in the + app. + + - - Boolean(l.code2)).map(l => ({ - label: l.name, - value: l.code2, - key: l.code2, - }))} - style={{ - inputAndroid: { - backgroundColor: pal.viewLight.backgroundColor, - color: pal.text.color, - fontSize: 14, - letterSpacing: 0.5, - fontWeight: '600', - paddingHorizontal: 14, - paddingVertical: 8, - borderRadius: 24, - }, - inputIOS: { - backgroundColor: pal.viewLight.backgroundColor, - color: pal.text.color, - fontSize: 14, - letterSpacing: 0.5, - fontWeight: '600', - paddingHorizontal: 14, - paddingVertical: 8, - borderRadius: 24, - }, + + Boolean(l.code2)).map(l => ({ + label: l.name, + value: l.code2, + key: l.code2, + }))} + style={{ + inputAndroid: { + backgroundColor: pal.viewLight.backgroundColor, + color: pal.text.color, + fontSize: 14, + letterSpacing: 0.5, + fontWeight: '600', + paddingHorizontal: 14, + paddingVertical: 8, + borderRadius: 24, + }, + inputIOS: { + backgroundColor: pal.viewLight.backgroundColor, + color: pal.text.color, + fontSize: 14, + letterSpacing: 0.5, + fontWeight: '600', + paddingHorizontal: 14, + paddingVertical: 8, + borderRadius: 24, + }, + + inputWeb: { + cursor: 'pointer', + // @ts-ignore web only + '-moz-appearance': 'none', + '-webkit-appearance': 'none', + appearance: 'none', + outline: 0, + borderWidth: 0, + backgroundColor: pal.viewLight.backgroundColor, + color: pal.text.color, + fontSize: 14, + fontFamily: 'inherit', + letterSpacing: 0.5, + fontWeight: '600', + paddingHorizontal: 14, + paddingVertical: 8, + borderRadius: 24, + }, + }} + /> - inputWeb: { - cursor: 'pointer', - // @ts-ignore web only - '-moz-appearance': 'none', - '-webkit-appearance': 'none', - appearance: 'none', - outline: 0, - borderWidth: 0, + - - - + pointerEvents: 'none', + alignItems: 'center', + justifyContent: 'center', + }}> + + - - + - {/* PRIMARY LANGUAGE */} - - - Primary Language - - - - Select your preferred language for translations in your feed. - - + {/* PRIMARY LANGUAGE */} + + + Primary Language + + + + Select your preferred language for translations in your feed. + + - - Boolean(l.code2)).map(l => ({ - label: l.name, - value: l.code2, - key: l.code2 + l.code3, - }))} - style={{ - inputAndroid: { - backgroundColor: pal.viewLight.backgroundColor, - color: pal.text.color, - fontSize: 14, - letterSpacing: 0.5, - fontWeight: '600', - paddingHorizontal: 14, - paddingVertical: 8, - borderRadius: 24, - }, - inputIOS: { - backgroundColor: pal.viewLight.backgroundColor, - color: pal.text.color, - fontSize: 14, - letterSpacing: 0.5, - fontWeight: '600', - paddingHorizontal: 14, - paddingVertical: 8, - borderRadius: 24, - }, - inputWeb: { - cursor: 'pointer', - // @ts-ignore web only - '-moz-appearance': 'none', - '-webkit-appearance': 'none', - appearance: 'none', - outline: 0, - borderWidth: 0, + + Boolean(l.code2)).map(l => ({ + label: l.name, + value: l.code2, + key: l.code2 + l.code3, + }))} + style={{ + inputAndroid: { + backgroundColor: pal.viewLight.backgroundColor, + color: pal.text.color, + fontSize: 14, + letterSpacing: 0.5, + fontWeight: '600', + paddingHorizontal: 14, + paddingVertical: 8, + borderRadius: 24, + }, + inputIOS: { + backgroundColor: pal.viewLight.backgroundColor, + color: pal.text.color, + fontSize: 14, + letterSpacing: 0.5, + fontWeight: '600', + paddingHorizontal: 14, + paddingVertical: 8, + borderRadius: 24, + }, + inputWeb: { + cursor: 'pointer', + // @ts-ignore web only + '-moz-appearance': 'none', + '-webkit-appearance': 'none', + appearance: 'none', + outline: 0, + borderWidth: 0, + backgroundColor: pal.viewLight.backgroundColor, + color: pal.text.color, + fontSize: 14, + fontFamily: 'inherit', + letterSpacing: 0.5, + fontWeight: '600', + paddingHorizontal: 14, + paddingVertical: 8, + borderRadius: 24, + }, + }} + /> + + - - - + pointerEvents: 'none', + alignItems: 'center', + justifyContent: 'center', + }}> + + - - - - {/* CONTENT LANGUAGES */} - - - Content Languages - - - - Select which languages you want your subscribed feeds to include. - If none are selected, all languages will be shown. - - + - + + + Select which languages you want your subscribed feeds to + include. If none are selected, all languages will be shown. + + + + + - - + + ) } diff --git a/src/view/screens/Lists.tsx b/src/view/screens/Lists.tsx index d6a86e5143..b79da6d540 100644 --- a/src/view/screens/Lists.tsx +++ b/src/view/screens/Lists.tsx @@ -16,6 +16,7 @@ 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 * as Layout from '#/components/Layout' type Props = NativeStackScreenProps export function ListsScreen({}: Props) { @@ -48,7 +49,7 @@ export function ListsScreen({}: Props) { }, [openModal, navigation]) return ( - + - + ) } diff --git a/src/view/screens/Log.tsx b/src/view/screens/Log.tsx index e6040b77e2..026319baf6 100644 --- a/src/view/screens/Log.tsx +++ b/src/view/screens/Log.tsx @@ -5,16 +5,17 @@ import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' import {useFocusEffect} from '@react-navigation/native' +import {usePalette} from '#/lib/hooks/usePalette' import {useGetTimeAgo} from '#/lib/hooks/useTimeAgo' +import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types' +import {s} from '#/lib/styles' import {getEntries} from '#/logger/logDump' import {useTickEveryMinute} from '#/state/shell' import {useSetMinimalShellMode} from '#/state/shell' -import {usePalette} from 'lib/hooks/usePalette' -import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' -import {s} from 'lib/styles' -import {Text} from '../com/util/text/Text' -import {ViewHeader} from '../com/util/ViewHeader' -import {ScrollView} from '../com/util/Views' +import {Text} from '#/view/com/util/text/Text' +import {ViewHeader} from '#/view/com/util/ViewHeader' +import {ScrollView} from '#/view/com/util/Views' +import * as Layout from '#/components/Layout' export function LogScreen({}: NativeStackScreenProps< CommonNavigatorParams, @@ -42,7 +43,7 @@ export function LogScreen({}: NativeStackScreenProps< } return ( - + {getEntries() @@ -91,7 +92,7 @@ export function LogScreen({}: NativeStackScreenProps< })} - + ) } diff --git a/src/view/screens/ModerationBlockedAccounts.tsx b/src/view/screens/ModerationBlockedAccounts.tsx index 88a5df7ece..53e31d1d2e 100644 --- a/src/view/screens/ModerationBlockedAccounts.tsx +++ b/src/view/screens/ModerationBlockedAccounts.tsx @@ -20,10 +20,11 @@ import {logger} from '#/logger' import {useMyBlockedAccountsQuery} from '#/state/queries/my-blocked-accounts' import {useSetMinimalShellMode} from '#/state/shell' import {ProfileCard} from '#/view/com/profile/ProfileCard' +import {ErrorScreen} from '#/view/com/util/error/ErrorScreen' +import {Text} from '#/view/com/util/text/Text' +import {ViewHeader} from '#/view/com/util/ViewHeader' import {CenteredView} from '#/view/com/util/Views' -import {ErrorScreen} from '../com/util/error/ErrorScreen' -import {Text} from '../com/util/text/Text' -import {ViewHeader} from '../com/util/ViewHeader' +import * as Layout from '#/components/Layout' type Props = NativeStackScreenProps< CommonNavigatorParams, @@ -95,76 +96,78 @@ export function ModerationBlockedAccounts({}: Props) { /> ) return ( - - - + - - Blocked accounts cannot reply in your threads, mention you, or - otherwise interact with you. You will not see their content and they - will be prevented from seeing yours. - - - {isEmpty ? ( - - {isError ? ( - - ) : ( - - - - You have not blocked any accounts yet. To block an account, go - to their profile and select "Block account" from the menu on - their account. - - - - )} - - ) : ( - item.did} - refreshControl={ - - } - onEndReached={onEndReached} - renderItem={renderItem} - initialNumToRender={15} - // FIXME(dan) + styles.container, + isTabletOrDesktop && styles.containerDesktop, + pal.view, + pal.border, + ]} + testID="blockedAccountsScreen"> + + + + Blocked accounts cannot reply in your threads, mention you, or + otherwise interact with you. You will not see their content and they + will be prevented from seeing yours. + + + {isEmpty ? ( + + {isError ? ( + + ) : ( + + + + You have not blocked any accounts yet. To block an account, + go to their profile and select "Block account" from the menu + on their account. + + + + )} + + ) : ( + item.did} + refreshControl={ + + } + onEndReached={onEndReached} + renderItem={renderItem} + initialNumToRender={15} + // FIXME(dan) - ListFooterComponent={() => ( - - {(isFetching || isFetchingNextPage) && } - - )} - // @ts-ignore our .web version only -prf - desktopFixedHeight - /> - )} - + ListFooterComponent={() => ( + + {(isFetching || isFetchingNextPage) && } + + )} + // @ts-ignore our .web version only -prf + desktopFixedHeight + /> + )} + + ) } diff --git a/src/view/screens/ModerationModlists.tsx b/src/view/screens/ModerationModlists.tsx index 39ba540b49..b147ba502d 100644 --- a/src/view/screens/ModerationModlists.tsx +++ b/src/view/screens/ModerationModlists.tsx @@ -16,6 +16,7 @@ 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 * as Layout from '#/components/Layout' type Props = NativeStackScreenProps export function ModerationModlistsScreen({}: Props) { @@ -48,7 +49,7 @@ export function ModerationModlistsScreen({}: Props) { }, [openModal, navigation]) return ( - + - + ) } diff --git a/src/view/screens/ModerationMutedAccounts.tsx b/src/view/screens/ModerationMutedAccounts.tsx index bd29cb2d93..6d34c8a5f4 100644 --- a/src/view/screens/ModerationMutedAccounts.tsx +++ b/src/view/screens/ModerationMutedAccounts.tsx @@ -20,10 +20,11 @@ import {logger} from '#/logger' import {useMyMutedAccountsQuery} from '#/state/queries/my-muted-accounts' import {useSetMinimalShellMode} from '#/state/shell' import {ProfileCard} from '#/view/com/profile/ProfileCard' +import {ErrorScreen} from '#/view/com/util/error/ErrorScreen' +import {Text} from '#/view/com/util/text/Text' +import {ViewHeader} from '#/view/com/util/ViewHeader' import {CenteredView} from '#/view/com/util/Views' -import {ErrorScreen} from '../com/util/error/ErrorScreen' -import {Text} from '../com/util/text/Text' -import {ViewHeader} from '../com/util/ViewHeader' +import * as Layout from '#/components/Layout' type Props = NativeStackScreenProps< CommonNavigatorParams, @@ -95,75 +96,77 @@ export function ModerationMutedAccounts({}: Props) { /> ) return ( - - - + - - Muted accounts have their posts removed from your feed and from your - notifications. Mutes are completely private. - - - {isEmpty ? ( - - {isError ? ( - - ) : ( - - - - You have not muted any accounts yet. To mute an account, go to - their profile and select "Mute account" from the menu on their - account. - - - - )} - - ) : ( - item.did} - refreshControl={ - - } - onEndReached={onEndReached} - renderItem={renderItem} - initialNumToRender={15} - // FIXME(dan) + styles.container, + isTabletOrDesktop && styles.containerDesktop, + pal.view, + pal.border, + ]} + testID="mutedAccountsScreen"> + + + + Muted accounts have their posts removed from your feed and from your + notifications. Mutes are completely private. + + + {isEmpty ? ( + + {isError ? ( + + ) : ( + + + + You have not muted any accounts yet. To mute an account, go + to their profile and select "Mute account" from the menu on + their account. + + + + )} + + ) : ( + item.did} + refreshControl={ + + } + onEndReached={onEndReached} + renderItem={renderItem} + initialNumToRender={15} + // FIXME(dan) - ListFooterComponent={() => ( - - {(isFetching || isFetchingNextPage) && } - - )} - // @ts-ignore our .web version only -prf - desktopFixedHeight - /> - )} - + ListFooterComponent={() => ( + + {(isFetching || isFetchingNextPage) && } + + )} + // @ts-ignore our .web version only -prf + desktopFixedHeight + /> + )} + + ) } diff --git a/src/view/screens/NotFound.tsx b/src/view/screens/NotFound.tsx index 7d51619b37..90d5e17ddc 100644 --- a/src/view/screens/NotFound.tsx +++ b/src/view/screens/NotFound.tsx @@ -1,19 +1,21 @@ import React from 'react' import {StyleSheet, View} from 'react-native' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' import { - useNavigation, StackActions, useFocusEffect, + useNavigation, } from '@react-navigation/native' -import {ViewHeader} from '../com/util/ViewHeader' -import {Text} from '../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 {s} from 'lib/styles' + +import {usePalette} from '#/lib/hooks/usePalette' +import {NavigationProp} from '#/lib/routes/types' +import {s} from '#/lib/styles' import {useSetMinimalShellMode} from '#/state/shell' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' +import {Button} from '#/view/com/util/forms/Button' +import {Text} from '#/view/com/util/text/Text' +import {ViewHeader} from '#/view/com/util/ViewHeader' +import * as Layout from '#/components/Layout' export const NotFoundScreen = () => { const pal = usePalette('default') @@ -38,7 +40,7 @@ export const NotFoundScreen = () => { }, [navigation, canGoBack]) return ( - + @@ -61,7 +63,7 @@ export const NotFoundScreen = () => { onPress={onPressHome} /> - + ) } diff --git a/src/view/screens/Notifications.tsx b/src/view/screens/Notifications.tsx index 818d3d0ed4..531d10a7f8 100644 --- a/src/view/screens/Notifications.tsx +++ b/src/view/screens/Notifications.tsx @@ -34,6 +34,7 @@ import {CenteredView} from '#/view/com/util/Views' import {atoms as a, useTheme} from '#/alf' import {Button} from '#/components/Button' import {SettingsGear2_Stroke2_Corner0_Rounded as SettingsIcon} from '#/components/icons/SettingsGear2' +import * as Layout from '#/components/Layout' import {Link} from '#/components/Link' import {Loader} from '#/components/Loader' import {Text} from '#/components/Typography' @@ -192,39 +193,38 @@ export function NotificationsScreen({route: {params}}: Props) { }, [renderButton, isLoadingLatest]) return ( - - - - + + - - {(isScrolledDown || hasNew) && ( - + + + {(isScrolledDown || hasNew) && ( + + )} + openComposer({})} + icon={} + accessibilityRole="button" + accessibilityLabel={_(msg`New post`)} + accessibilityHint="" /> - )} - openComposer({})} - icon={} - accessibilityRole="button" - accessibilityLabel={_(msg`New post`)} - accessibilityHint="" - /> - + + ) } diff --git a/src/view/screens/NotificationsSettings.tsx b/src/view/screens/NotificationsSettings.tsx index f395941df9..f8d848a626 100644 --- a/src/view/screens/NotificationsSettings.tsx +++ b/src/view/screens/NotificationsSettings.tsx @@ -13,6 +13,7 @@ import {atoms as a, useTheme} from '#/alf' import {Admonition} from '#/components/Admonition' import {Error} from '#/components/Error' import * as Toggle from '#/components/forms/Toggle' +import * as Layout from '#/components/Layout' import {Loader} from '#/components/Loader' import {Text} from '#/components/Typography' @@ -35,52 +36,54 @@ export function NotificationsSettingsScreen({}: Props) { : serverPriority return ( - - - {isQueryError ? ( - + + - ) : ( - - - {' '} - Notification filters - - - - - - Enable priority notifications - - {!data ? : } - - - - - - Experimental: When this preference is enabled, you'll only receive - reply and quote notifications from users you follow. We'll - continue to add more controls here over time. - - - - )} - + {isQueryError ? ( + + ) : ( + + + {' '} + Notification filters + + + + + + Enable priority notifications + + {!data ? : } + + + + + + Experimental: When this preference is enabled, you'll only + receive reply and quote notifications from users you follow. + We'll continue to add more controls here over time. + + + + )} + + ) } diff --git a/src/view/screens/PostThread.tsx b/src/view/screens/PostThread.tsx index 88d0726c12..c183569b74 100644 --- a/src/view/screens/PostThread.tsx +++ b/src/view/screens/PostThread.tsx @@ -2,11 +2,12 @@ import React from 'react' import {View} from 'react-native' import {useFocusEffect} from '@react-navigation/native' +import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types' +import {makeRecordUri} from '#/lib/strings/url-helpers' import {useSetMinimalShellMode} from '#/state/shell' -import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' -import {makeRecordUri} from 'lib/strings/url-helpers' -import {s} from 'lib/styles' -import {PostThread as PostThreadComponent} from '../com/post-thread/PostThread' +import {PostThread as PostThreadComponent} from '#/view/com/post-thread/PostThread' +import {atoms as a} from '#/alf' +import * as Layout from '#/components/Layout' type Props = NativeStackScreenProps export function PostThreadScreen({route}: Props) { @@ -22,10 +23,10 @@ export function PostThreadScreen({route}: Props) { ) return ( - - + + - + ) } diff --git a/src/view/screens/PreferencesExternalEmbeds.tsx b/src/view/screens/PreferencesExternalEmbeds.tsx index ae23b6e950..5a657ce845 100644 --- a/src/view/screens/PreferencesExternalEmbeds.tsx +++ b/src/view/screens/PreferencesExternalEmbeds.tsx @@ -10,17 +10,17 @@ import { EmbedPlayerSource, externalEmbedLabels, } from '#/lib/strings/embed-player' -import {s} from '#/lib/styles' import { useExternalEmbedsPrefs, useSetExternalEmbedPref, } from '#/state/preferences' import {useSetMinimalShellMode} from '#/state/shell' import {ToggleButton} from '#/view/com/util/forms/ToggleButton' +import {SimpleViewHeader} from '#/view/com/util/SimpleViewHeader' +import {Text} from '#/view/com/util/text/Text' +import {ScrollView} from '#/view/com/util/Views' import {atoms as a} from '#/alf' -import {SimpleViewHeader} from '../com/util/SimpleViewHeader' -import {Text} from '../com/util/text/Text' -import {ScrollView} from '../com/util/Views' +import * as Layout from '#/components/Layout' type Props = NativeStackScreenProps< CommonNavigatorParams, @@ -38,7 +38,7 @@ export function PreferencesExternalEmbeds({}: Props) { ) return ( - + ))} - + ) } diff --git a/src/view/screens/PreferencesFollowingFeed.tsx b/src/view/screens/PreferencesFollowingFeed.tsx index 085250e3bd..3d9928901a 100644 --- a/src/view/screens/PreferencesFollowingFeed.tsx +++ b/src/view/screens/PreferencesFollowingFeed.tsx @@ -17,6 +17,7 @@ import {SimpleViewHeader} from '#/view/com/util/SimpleViewHeader' import {Text} from '#/view/com/util/text/Text' import {ScrollView} from '#/view/com/util/Views' import {atoms as a} from '#/alf' +import * as Layout from '#/components/Layout' type Props = NativeStackScreenProps< CommonNavigatorParams, @@ -35,7 +36,7 @@ export function PreferencesFollowingFeed({}: Props) { ) return ( - + - + ) } diff --git a/src/view/screens/PreferencesThreads.tsx b/src/view/screens/PreferencesThreads.tsx index 7a5a88869d..c3992276a9 100644 --- a/src/view/screens/PreferencesThreads.tsx +++ b/src/view/screens/PreferencesThreads.tsx @@ -18,6 +18,7 @@ import {SimpleViewHeader} from '#/view/com/util/SimpleViewHeader' import {Text} from '#/view/com/util/text/Text' import {ScrollView} from '#/view/com/util/Views' import {atoms as a} from '#/alf' +import * as Layout from '#/components/Layout' type Props = NativeStackScreenProps export function PreferencesThreads({}: Props) { @@ -38,7 +39,7 @@ export function PreferencesThreads({}: Props) { ) return ( - + )} - + ) } diff --git a/src/view/screens/PrivacyPolicy.tsx b/src/view/screens/PrivacyPolicy.tsx index 776d83918c..57e4652b54 100644 --- a/src/view/screens/PrivacyPolicy.tsx +++ b/src/view/screens/PrivacyPolicy.tsx @@ -1,16 +1,18 @@ import React from 'react' import {View} from 'react-native' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {useFocusEffect} from '@react-navigation/native' -import {Text} from 'view/com/util/text/Text' -import {TextLink} from 'view/com/util/Link' -import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' -import {ViewHeader} from '../com/util/ViewHeader' -import {ScrollView} from 'view/com/util/Views' -import {usePalette} from 'lib/hooks/usePalette' -import {s} from 'lib/styles' + +import {usePalette} from '#/lib/hooks/usePalette' +import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types' +import {s} from '#/lib/styles' import {useSetMinimalShellMode} from '#/state/shell' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' +import {TextLink} from '#/view/com/util/Link' +import {Text} from '#/view/com/util/text/Text' +import {ScrollView} from '#/view/com/util/Views' +import * as Layout from '#/components/Layout' +import {ViewHeader} from '../com/util/ViewHeader' type Props = NativeStackScreenProps export const PrivacyPolicyScreen = (_props: Props) => { @@ -25,7 +27,7 @@ export const PrivacyPolicyScreen = (_props: Props) => { ) return ( - + @@ -42,6 +44,6 @@ export const PrivacyPolicyScreen = (_props: Props) => { - + ) } diff --git a/src/view/screens/Profile.tsx b/src/view/screens/Profile.tsx index 7726256952..677fe09f47 100644 --- a/src/view/screens/Profile.tsx +++ b/src/view/screens/Profile.tsx @@ -45,6 +45,7 @@ import {ProfileHeader, ProfileHeaderLoading} from '#/screens/Profile/Header' import {ProfileFeedSection} from '#/screens/Profile/Sections/Feed' import {ProfileLabelsSection} from '#/screens/Profile/Sections/Labels' import {web} from '#/alf' +import * as Layout from '#/components/Layout' import {ScreenHider} from '#/components/moderation/ScreenHider' import {ProfileStarterPacks} from '#/components/StarterPack/ProfileStarterPacks' import {navigate} from '#/Navigation' @@ -55,7 +56,15 @@ interface SectionRef { } type Props = NativeStackScreenProps -export function ProfileScreen({route}: Props) { +export function ProfileScreen(props: Props) { + return ( + + + + ) +} + +function ProfileScreenInner({route}: Props) { const {_} = useLingui() const {currentAccount} = useSession() const queryClient = useQueryClient() diff --git a/src/view/screens/ProfileFeed.tsx b/src/view/screens/ProfileFeed.tsx index a094cc3dd0..6b9288f3bb 100644 --- a/src/view/screens/ProfileFeed.tsx +++ b/src/view/screens/ProfileFeed.tsx @@ -61,6 +61,7 @@ import { } from '#/components/icons/Heart2' import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus' import {Trash_Stroke2_Corner0_Rounded as Trash} from '#/components/icons/Trash' +import * as Layout from '#/components/Layout' import {InlineLinkText} from '#/components/Link' import * as Menu from '#/components/Menu' import {ReportDialog, useReportDialogControl} from '#/components/ReportDialog' @@ -96,36 +97,42 @@ export function ProfileFeedScreen(props: Props) { if (error) { return ( - - - - Could not load feed - - - {error.toString()} - - - - + + + + + Could not load feed + + + {error.toString()} + + + + + - - + + ) } return resolvedUri ? ( - + + + ) : ( - + + + ) } diff --git a/src/view/screens/ProfileFeedLikedBy.tsx b/src/view/screens/ProfileFeedLikedBy.tsx index bb9ec2baeb..b796480f34 100644 --- a/src/view/screens/ProfileFeedLikedBy.tsx +++ b/src/view/screens/ProfileFeedLikedBy.tsx @@ -1,14 +1,14 @@ import React from 'react' -import {View} from 'react-native' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' import {useFocusEffect} from '@react-navigation/native' +import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types' +import {makeRecordUri} from '#/lib/strings/url-helpers' import {useSetMinimalShellMode} from '#/state/shell' -import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' -import {makeRecordUri} from 'lib/strings/url-helpers' -import {PostLikedBy as PostLikedByComponent} from '../com/post-thread/PostLikedBy' -import {ViewHeader} from '../com/util/ViewHeader' +import {PostLikedBy as PostLikedByComponent} from '#/view/com/post-thread/PostLikedBy' +import {ViewHeader} from '#/view/com/util/ViewHeader' +import * as Layout from '#/components/Layout' type Props = NativeStackScreenProps export const ProfileFeedLikedByScreen = ({route}: Props) => { @@ -24,9 +24,9 @@ export const ProfileFeedLikedByScreen = ({route}: Props) => { ) return ( - + - + ) } diff --git a/src/view/screens/ProfileFollowers.tsx b/src/view/screens/ProfileFollowers.tsx index 3a01edff5a..9fa98cb1a8 100644 --- a/src/view/screens/ProfileFollowers.tsx +++ b/src/view/screens/ProfileFollowers.tsx @@ -3,14 +3,14 @@ import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' import {useFocusEffect} from '@react-navigation/native' +import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types' +import {isWeb} from '#/platform/detection' import {useSetMinimalShellMode} from '#/state/shell' -import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' -import {isWeb} from 'platform/detection' -import {CenteredView} from 'view/com/util/Views' -import {atoms as a} from '#/alf' +import {ProfileFollowers as ProfileFollowersComponent} from '#/view/com/profile/ProfileFollowers' +import {ViewHeader} from '#/view/com/util/ViewHeader' +import {CenteredView} from '#/view/com/util/Views' +import * as Layout from '#/components/Layout' import {ListHeaderDesktop} from '#/components/Lists' -import {ProfileFollowers as ProfileFollowersComponent} from '../com/profile/ProfileFollowers' -import {ViewHeader} from '../com/util/ViewHeader' type Props = NativeStackScreenProps export const ProfileFollowersScreen = ({route}: Props) => { @@ -25,10 +25,12 @@ export const ProfileFollowersScreen = ({route}: Props) => { ) return ( - - - - - + + + + + + + ) } diff --git a/src/view/screens/ProfileFollows.tsx b/src/view/screens/ProfileFollows.tsx index 762a84a374..483ee93ecc 100644 --- a/src/view/screens/ProfileFollows.tsx +++ b/src/view/screens/ProfileFollows.tsx @@ -3,14 +3,14 @@ import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' import {useFocusEffect} from '@react-navigation/native' +import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types' +import {isWeb} from '#/platform/detection' import {useSetMinimalShellMode} from '#/state/shell' -import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' -import {isWeb} from 'platform/detection' -import {CenteredView} from 'view/com/util/Views' -import {atoms as a} from '#/alf' +import {ProfileFollows as ProfileFollowsComponent} from '#/view/com/profile/ProfileFollows' +import {ViewHeader} from '#/view/com/util/ViewHeader' +import {CenteredView} from '#/view/com/util/Views' +import * as Layout from '#/components/Layout' import {ListHeaderDesktop} from '#/components/Lists' -import {ProfileFollows as ProfileFollowsComponent} from '../com/profile/ProfileFollows' -import {ViewHeader} from '../com/util/ViewHeader' type Props = NativeStackScreenProps export const ProfileFollowsScreen = ({route}: Props) => { @@ -25,10 +25,12 @@ export const ProfileFollowsScreen = ({route}: Props) => { ) return ( - - - - - + + + + + + + ) } diff --git a/src/view/screens/ProfileList.tsx b/src/view/screens/ProfileList.tsx index e0fd18ae9a..cb333befa4 100644 --- a/src/view/screens/ProfileList.tsx +++ b/src/view/screens/ProfileList.tsx @@ -73,6 +73,7 @@ import {CenteredView} from '#/view/com/util/Views' import {ListHiddenScreen} from '#/screens/List/ListHiddenScreen' import {atoms as a, useTheme} from '#/alf' import {useDialogControl} from '#/components/Dialog' +import * as Layout from '#/components/Layout' import * as Hider from '#/components/moderation/Hider' import * as Prompt from '#/components/Prompt' import {ReportDialog, useReportDialogControl} from '#/components/ReportDialog' @@ -87,6 +88,14 @@ interface SectionRef { type Props = NativeStackScreenProps export function ProfileListScreen(props: Props) { + return ( + + + + ) +} + +function ProfileListScreenInner(props: Props) { const {_} = useLingui() const {name: handleOrDid, rkey} = props.route.params const {data: resolvedUri, error: resolveError} = useResolveUriQuery( diff --git a/src/view/screens/SavedFeeds.tsx b/src/view/screens/SavedFeeds.tsx index 2334abb5db..e88866f5b4 100644 --- a/src/view/screens/SavedFeeds.tsx +++ b/src/view/screens/SavedFeeds.tsx @@ -32,6 +32,7 @@ import {NoSavedFeedsOfAnyType} from '#/screens/Feeds/NoSavedFeedsOfAnyType' import {atoms as a, useTheme} from '#/alf' import {Button, ButtonIcon, ButtonText} from '#/components/Button' import {FilterTimeline_Stroke2_Corner0_Rounded as FilterTimeline} from '#/components/icons/FilterTimeline' +import * as Layout from '#/components/Layout' import {Loader} from '#/components/Loader' type Props = NativeStackScreenProps @@ -106,120 +107,117 @@ function SavedFeedsInner({ }, [_, isDesktop, onSaveChanges, hasUnsavedChanges, isOverwritePending]) return ( - - - - {noSavedFeedsOfAnyType && ( - - + + + + + {noSavedFeedsOfAnyType && ( + + + + )} + + + + Pinned Feeds + - )} - - - Pinned Feeds - - + {preferences ? ( + !pinnedFeeds.length ? ( + + + You don't have any pinned feeds. + + + ) : ( + pinnedFeeds.map(f => ( + + )) + ) + ) : ( + + )} - {preferences ? ( - !pinnedFeeds.length ? ( - - - You don't have any pinned feeds. - + {noFollowingFeed && ( + + - ) : ( - pinnedFeeds.map(f => ( - - )) - ) - ) : ( - - )} + )} - {noFollowingFeed && ( - - + + + Saved Feeds + - )} - - - - Saved Feeds - - - {preferences ? ( - !unpinnedFeeds.length ? ( - - - You don't have any saved feeds. - - + {preferences ? ( + !unpinnedFeeds.length ? ( + + + You don't have any saved feeds. + + + ) : ( + unpinnedFeeds.map(f => ( + + )) + ) ) : ( - unpinnedFeeds.map(f => ( - - )) - ) - ) : ( - - )} + + )} - - - - Feeds are custom algorithms that users build with a little coding - expertise.{' '} - {' '} - for more information. - - - - - - + + + + Feeds are custom algorithms that users build with a little + coding expertise.{' '} + {' '} + for more information. + + + + + + + ) } @@ -434,12 +432,6 @@ function FollowingFeedCard() { } const styles = StyleSheet.create({ - desktopContainer: { - borderLeftWidth: 1, - borderRightWidth: 1, - // @ts-ignore only rendered on web - minHeight: '100vh', - }, empty: { paddingHorizontal: 20, paddingVertical: 20, @@ -463,10 +455,4 @@ const styles = StyleSheet.create({ paddingTop: 22, paddingBottom: 100, }, - noBorder: { - borderBottomWidth: 0, - borderRightWidth: 0, - borderLeftWidth: 0, - borderTopWidth: 0, - }, }) diff --git a/src/view/screens/Search/Explore.tsx b/src/view/screens/Search/Explore.tsx index 650fd43548..6aff9b88ad 100644 --- a/src/view/screens/Search/Explore.tsx +++ b/src/view/screens/Search/Explore.tsx @@ -10,20 +10,20 @@ import { import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' +import {cleanError} from '#/lib/strings/errors' import {logger} from '#/logger' import {isWeb} from '#/platform/detection' import {useModerationOpts} from '#/state/preferences/moderation-opts' import {useGetPopularFeedsQuery} from '#/state/queries/feed' import {usePreferencesQuery} from '#/state/queries/preferences' import {useSuggestedFollowsQuery} from '#/state/queries/suggested-follows' -import {cleanError} from 'lib/strings/errors' import {ProfileCardWithFollowBtn} from '#/view/com/profile/ProfileCard' import {List} from '#/view/com/util/List' -import {UserAvatar} from '#/view/com/util/UserAvatar' import { FeedFeedLoadingPlaceholder, ProfileCardFeedLoadingPlaceholder, -} from 'view/com/util/LoadingPlaceholder' +} from '#/view/com/util/LoadingPlaceholder' +import {UserAvatar} from '#/view/com/util/UserAvatar' import {atoms as a, useTheme, ViewStyleProp} from '#/alf' import {Button} from '#/components/Button' import * as FeedCard from '#/components/FeedCard' @@ -564,6 +564,8 @@ export function Explore() { [t, moderationOpts], ) + // note: actually not a screen, instead it's nested within + // the search screen. so we don't need Layout.Screen return ( + - + ) } diff --git a/src/view/screens/Settings/index.tsx b/src/view/screens/Settings/index.tsx index a40cc4f26a..ce21a043b7 100644 --- a/src/view/screens/Settings/index.tsx +++ b/src/view/screens/Settings/index.tsx @@ -57,6 +57,7 @@ import {atoms as a, useTheme} from '#/alf' import {useDialogControl} from '#/components/Dialog' import {BirthDateSettingsDialog} from '#/components/dialogs/BirthDateSettings' import {VerifyEmailDialog} from '#/components/dialogs/VerifyEmailDialog' +import * as Layout from '#/components/Layout' import {Email2FAToggle} from './Email2FAToggle' import {ExportCarDialog} from './ExportCarDialog' @@ -286,7 +287,7 @@ export function SettingsScreen({}: Props) { const {mutate: onPressDeleteChatDeclaration} = useDeleteActorDeclaration() return ( - + @@ -919,7 +920,7 @@ export function SettingsScreen({}: Props) { - + ) } diff --git a/src/view/screens/Storybook/index.tsx b/src/view/screens/Storybook/index.tsx index c737dad5b7..f1152fb7e4 100644 --- a/src/view/screens/Storybook/index.tsx +++ b/src/view/screens/Storybook/index.tsx @@ -7,6 +7,7 @@ import {CenteredView} from '#/view/com/util/Views' import {ListContained} from '#/view/screens/Storybook/ListContained' import {atoms as a, ThemeProvider, useTheme} from '#/alf' import {Button, ButtonText} from '#/components/Button' +import * as Layout from '#/components/Layout' import {Admonitions} from './Admonitions' import {Breakpoints} from './Breakpoints' import {Buttons} from './Buttons' @@ -21,12 +22,16 @@ import {Theming} from './Theming' import {Typography} from './Typography' export function Storybook() { - if (isWeb) return - return ( - - - + + {isWeb ? ( + + ) : ( + + + + )} + ) } diff --git a/src/view/screens/Support.tsx b/src/view/screens/Support.tsx index 9e7d36ec7a..8782e911b7 100644 --- a/src/view/screens/Support.tsx +++ b/src/view/screens/Support.tsx @@ -1,17 +1,18 @@ import React from 'react' -import {View} from 'react-native' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {useFocusEffect} from '@react-navigation/native' -import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' -import {ViewHeader} from '../com/util/ViewHeader' -import {Text} from 'view/com/util/text/Text' -import {TextLink} from 'view/com/util/Link' -import {CenteredView} from 'view/com/util/Views' -import {usePalette} from 'lib/hooks/usePalette' -import {s} from 'lib/styles' -import {HELP_DESK_URL} from 'lib/constants' + +import {HELP_DESK_URL} from '#/lib/constants' +import {usePalette} from '#/lib/hooks/usePalette' +import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types' +import {s} from '#/lib/styles' import {useSetMinimalShellMode} from '#/state/shell' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' +import {TextLink} from '#/view/com/util/Link' +import {Text} from '#/view/com/util/text/Text' +import {ViewHeader} from '#/view/com/util/ViewHeader' +import {CenteredView} from '#/view/com/util/Views' +import * as Layout from '#/components/Layout' type Props = NativeStackScreenProps export const SupportScreen = (_props: Props) => { @@ -26,7 +27,7 @@ export const SupportScreen = (_props: Props) => { ) return ( - + @@ -44,6 +45,6 @@ export const SupportScreen = (_props: Props) => { - + ) } diff --git a/src/view/screens/TermsOfService.tsx b/src/view/screens/TermsOfService.tsx index 47aa9f2688..fa40fbca30 100644 --- a/src/view/screens/TermsOfService.tsx +++ b/src/view/screens/TermsOfService.tsx @@ -1,16 +1,18 @@ import React from 'react' import {View} from 'react-native' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {useFocusEffect} from '@react-navigation/native' -import {Text} from 'view/com/util/text/Text' -import {TextLink} from 'view/com/util/Link' -import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' -import {ViewHeader} from '../com/util/ViewHeader' -import {ScrollView} from 'view/com/util/Views' -import {usePalette} from 'lib/hooks/usePalette' -import {s} from 'lib/styles' + +import {usePalette} from '#/lib/hooks/usePalette' +import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types' +import {s} from '#/lib/styles' import {useSetMinimalShellMode} from '#/state/shell' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' +import {TextLink} from '#/view/com/util/Link' +import {Text} from '#/view/com/util/text/Text' +import {ScrollView} from '#/view/com/util/Views' +import * as Layout from '#/components/Layout' +import {ViewHeader} from '../com/util/ViewHeader' type Props = NativeStackScreenProps export const TermsOfServiceScreen = (_props: Props) => { @@ -25,7 +27,7 @@ export const TermsOfServiceScreen = (_props: Props) => { ) return ( - + @@ -40,6 +42,6 @@ export const TermsOfServiceScreen = (_props: Props) => { - + ) } diff --git a/src/view/shell/index.tsx b/src/view/shell/index.tsx index 79fc1a0694..43f8ee6566 100644 --- a/src/view/shell/index.tsx +++ b/src/view/shell/index.tsx @@ -1,14 +1,7 @@ import React from 'react' -import { - BackHandler, - DimensionValue, - StyleSheet, - useWindowDimensions, - View, -} from 'react-native' +import {BackHandler, StyleSheet, useWindowDimensions, View} from 'react-native' import {Drawer} from 'react-native-drawer-layout' import Animated from 'react-native-reanimated' -import {useSafeAreaInsets} from 'react-native-safe-area-context' import * as NavigationBar from 'expo-navigation-bar' import {StatusBar} from 'expo-status-bar' import {useNavigation, useNavigationState} from '@react-navigation/native' @@ -32,6 +25,7 @@ import {useCloseAnyActiveElement} from '#/state/util' import {Lightbox} from '#/view/com/lightbox/Lightbox' import {ModalsContainer} from '#/view/com/modals/Modal' import {ErrorBoundary} from '#/view/com/util/ErrorBoundary' +import {atoms as a} from '#/alf' import {MutedWordsDialog} from '#/components/dialogs/MutedWords' import {SigninDialog} from '#/components/dialogs/Signin' import {Outlet as PortalOutlet} from '#/components/Portal' @@ -46,11 +40,7 @@ function ShellInner() { const isDrawerSwipeDisabled = useIsDrawerSwipeDisabled() const setIsDrawerOpen = useSetDrawerOpen() const winDim = useWindowDimensions() - const safeAreaInsets = useSafeAreaInsets() - const containerPadding = React.useMemo( - () => ({height: '100%' as DimensionValue, paddingTop: safeAreaInsets.top}), - [safeAreaInsets], - ) + const renderDrawerContent = React.useCallback(() => , []) const onOpenDrawer = React.useCallback( () => setIsDrawerOpen(true), @@ -68,14 +58,14 @@ function ShellInner() { useNotificationsHandler() React.useEffect(() => { - let listener = {remove() {}} if (isAndroid) { - listener = BackHandler.addEventListener('hardwareBackPress', () => { + const listener = BackHandler.addEventListener('hardwareBackPress', () => { return closeAnyActiveElement() }) - } - return () => { - listener.remove() + + return () => { + listener.remove() + } } }, [closeAnyActiveElement]) @@ -102,7 +92,7 @@ function ShellInner() { return ( <> - + +