diff options
Diffstat (limited to 'src/view')
| -rw-r--r-- | src/view/com/notifications/NotificationFeedItem.tsx | 76 | ||||
| -rw-r--r-- | src/view/com/testing/TestCtrls.e2e.tsx | 6 | ||||
| -rw-r--r-- | src/view/screens/Storybook/Buttons.tsx | 212 | ||||
| -rw-r--r-- | src/view/screens/Storybook/index.tsx | 5 | ||||
| -rw-r--r-- | src/view/shell/createNativeStackNavigatorWithAuth.tsx | 4 | ||||
| -rw-r--r-- | src/view/shell/index.tsx | 18 | ||||
| -rw-r--r-- | src/view/shell/index.web.tsx | 15 |
7 files changed, 150 insertions, 186 deletions
diff --git a/src/view/com/notifications/NotificationFeedItem.tsx b/src/view/com/notifications/NotificationFeedItem.tsx index 4de21e598..dc048bd26 100644 --- a/src/view/com/notifications/NotificationFeedItem.tsx +++ b/src/view/com/notifications/NotificationFeedItem.tsx @@ -195,47 +195,51 @@ let NotificationFeedItem = ({ } const isHighlighted = highlightUnread && !item.notification.isRead return ( - <Post - post={item.subject} - style={ - isHighlighted && { - backgroundColor: pal.colors.unreadNotifBg, - borderColor: pal.colors.unreadNotifBorder, + <View testID={`feedItem-by-${item.notification.author.handle}`}> + <Post + post={item.subject} + style={ + isHighlighted && { + backgroundColor: pal.colors.unreadNotifBg, + borderColor: pal.colors.unreadNotifBorder, + } } - } - hideTopBorder={hideTopBorder} - /> + hideTopBorder={hideTopBorder} + /> + </View> ) } const firstAuthorLink = ( - <InlineLinkText - key={firstAuthor.href} - style={[t.atoms.text, a.font_bold, a.text_md, a.leading_tight]} - to={firstAuthor.href} - disableMismatchWarning - emoji - label={_(msg`Go to ${firstAuthorName}'s profile`)}> - {forceLTR(firstAuthorName)} - {firstAuthorVerification.showBadge && ( - <View - style={[ - a.relative, - { - paddingTop: platform({android: 2}), - marginBottom: platform({ios: -7}), - top: platform({web: 1}), - paddingLeft: 3, - paddingRight: 2, - }, - ]}> - <VerificationCheck - width={14} - verifier={firstAuthorVerification.role === 'verifier'} - /> - </View> - )} - </InlineLinkText> + <ProfileHoverCard did={firstAuthor.profile.did} inline> + <InlineLinkText + key={firstAuthor.href} + style={[t.atoms.text, a.font_bold, a.text_md, a.leading_tight]} + to={firstAuthor.href} + disableMismatchWarning + emoji + label={_(msg`Go to ${firstAuthorName}'s profile`)}> + {forceLTR(firstAuthorName)} + {firstAuthorVerification.showBadge && ( + <View + style={[ + a.relative, + { + paddingTop: platform({android: 2}), + marginBottom: platform({ios: -7}), + top: platform({web: 1}), + paddingLeft: 3, + paddingRight: 2, + }, + ]}> + <VerificationCheck + width={14} + verifier={firstAuthorVerification.role === 'verifier'} + /> + </View> + )} + </InlineLinkText> + </ProfileHoverCard> ) const additionalAuthorsCount = authors.length - 1 const hasMultipleAuthors = additionalAuthorsCount > 0 diff --git a/src/view/com/testing/TestCtrls.e2e.tsx b/src/view/com/testing/TestCtrls.e2e.tsx index 5c8b21373..3273cf195 100644 --- a/src/view/com/testing/TestCtrls.e2e.tsx +++ b/src/view/com/testing/TestCtrls.e2e.tsx @@ -96,6 +96,12 @@ export function TestCtrls() { style={BTN} /> <Pressable + testID="storybookBtn" + onPress={() => navigate('Debug')} + accessibilityRole="button" + style={BTN} + /> + <Pressable testID="e2eRefreshHome" onPress={() => queryClient.invalidateQueries({queryKey: ['post-feed']})} accessibilityRole="button" diff --git a/src/view/screens/Storybook/Buttons.tsx b/src/view/screens/Storybook/Buttons.tsx index eaf8bba7e..0db062913 100644 --- a/src/view/screens/Storybook/Buttons.tsx +++ b/src/view/screens/Storybook/Buttons.tsx @@ -1,3 +1,4 @@ +import {Fragment} from 'react' import {View} from 'react-native' import {atoms as a} from '#/alf' @@ -5,159 +6,82 @@ import { Button, type ButtonColor, ButtonIcon, + type ButtonSize, ButtonText, } from '#/components/Button' import {ChevronLeft_Stroke2_Corner0_Rounded as ChevronLeft} from '#/components/icons/Chevron' import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe' -import {H1} from '#/components/Typography' +import {Text} from '#/components/Typography' export function Buttons() { return ( <View style={[a.gap_md]}> - <H1>Buttons</H1> + <Text style={[a.font_heavy, a.text_5xl]}>Buttons</Text> - <View style={[a.flex_row, a.flex_wrap, a.gap_md, a.align_start]}> - {[ - 'primary', - 'secondary', - 'secondary_inverted', - 'negative', - 'negative_secondary', - ].map(color => ( - <View key={color} style={[a.gap_md, a.align_start]}> - <Button - color={color as ButtonColor} - size="large" - label="Click here"> - <ButtonText>Button</ButtonText> - </Button> - <Button - disabled - color={color as ButtonColor} - size="large" - label="Click here"> - <ButtonText>Button</ButtonText> - </Button> - </View> - ))} - </View> - - <View style={[a.flex_wrap, a.gap_md, a.align_start]}> - <Button color="primary" size="large" label="Link out"> - <ButtonText>Button</ButtonText> - </Button> - <Button color="primary" size="large" label="Link out"> - <ButtonText>Button</ButtonText> - <ButtonIcon icon={Globe} position="right" /> - </Button> - - <Button color="primary" size="small" label="Link out"> - <ButtonText>Button</ButtonText> - </Button> - <Button color="primary" size="small" label="Link out"> - <ButtonText>Button</ButtonText> - <ButtonIcon icon={Globe} position="right" /> - </Button> - - <Button color="primary" size="tiny" label="Link out"> - <ButtonIcon icon={Globe} position="left" /> - <ButtonText>Button</ButtonText> - </Button> - </View> - - <View style={[a.flex_row, a.gap_md, a.align_center]}> - <Button color="primary" size="large" label="Link out"> - <ButtonText>Button</ButtonText> - </Button> - <Button color="primary" size="large" label="Link out"> - <ButtonText>Button</ButtonText> - <ButtonIcon icon={Globe} position="right" /> - </Button> - <Button color="primary" size="large" label="Link out"> - <ButtonText>Button</ButtonText> - <ButtonIcon icon={Globe} position="right" size="lg" /> - </Button> - <Button color="primary" size="large" shape="round" label="Link out"> - <ButtonIcon icon={ChevronLeft} /> - </Button> - <Button color="primary" size="large" shape="round" label="Link out"> - <ButtonIcon icon={ChevronLeft} size="lg" /> - </Button> - </View> - - <View style={[a.flex_row, a.gap_md, a.align_center]}> - <Button color="primary" size="small" label="Link out"> - <ButtonText>Button</ButtonText> - </Button> - <Button color="primary" size="small" label="Link out"> - <ButtonText>Button</ButtonText> - <ButtonIcon icon={Globe} position="right" /> - </Button> - <Button color="primary" size="small" shape="round" label="Link out"> - <ButtonIcon icon={ChevronLeft} /> - </Button> - <Button color="primary" size="small" shape="round" label="Link out"> - <ButtonIcon icon={ChevronLeft} size="lg" /> - </Button> - </View> - - <View style={[a.flex_row, a.gap_md, a.align_center]}> - <Button color="primary" size="tiny" label="Link out"> - <ButtonText>Button</ButtonText> - </Button> - <Button color="primary" size="tiny" label="Link out"> - <ButtonText>Button</ButtonText> - <ButtonIcon icon={Globe} position="right" /> - </Button> - <Button color="primary" size="tiny" shape="round" label="Link out"> - <ButtonIcon icon={ChevronLeft} /> - </Button> - <Button color="primary" size="tiny" shape="round" label="Link out"> - <ButtonIcon icon={ChevronLeft} size="md" /> - </Button> - </View> - - <View style={[a.flex_row, a.gap_md, a.align_center]}> - <Button color="primary" size="large" shape="round" label="Link out"> - <ButtonIcon icon={ChevronLeft} /> - </Button> - <Button color="primary" size="small" shape="round" label="Link out"> - <ButtonIcon icon={ChevronLeft} /> - </Button> - <Button color="primary" size="tiny" shape="round" label="Link out"> - <ButtonIcon icon={ChevronLeft} /> - </Button> - <Button color="primary" size="large" shape="round" label="Link out"> - <ButtonIcon icon={ChevronLeft} /> - </Button> - <Button color="primary" size="small" shape="round" label="Link out"> - <ButtonIcon icon={ChevronLeft} /> - </Button> - <Button color="primary" size="tiny" shape="round" label="Link out"> - <ButtonIcon icon={ChevronLeft} /> - </Button> - </View> - - <View style={[a.flex_row, a.gap_md, a.align_start]}> - <Button color="primary" size="large" shape="square" label="Link out"> - <ButtonIcon icon={ChevronLeft} /> - </Button> - <Button color="primary" size="small" shape="square" label="Link out"> - <ButtonIcon icon={ChevronLeft} /> - </Button> - <Button color="primary" size="tiny" shape="square" label="Link out"> - <ButtonIcon icon={ChevronLeft} /> - </Button> - <Button color="primary" size="large" shape="square" label="Link out"> - <ButtonIcon icon={ChevronLeft} /> - </Button> - <Button color="primary" size="small" shape="square" label="Link out"> - <ButtonIcon icon={ChevronLeft} /> - </Button> - <Button color="primary" size="tiny" shape="square" label="Link out"> - <ButtonIcon icon={ChevronLeft} /> - </Button> - </View> + {[ + 'primary', + 'secondary', + 'secondary_inverted', + 'negative', + 'primary_subtle', + 'negative_subtle', + ].map(color => ( + <Fragment key={color}> + {['tiny', 'small', 'large'].map(size => ( + <Fragment key={size}> + <Text style={[a.font_heavy, a.text_2xl]}> + color={color} size={size} + </Text> + <View style={[a.flex_row, a.align_start, a.gap_md]}> + <Button + color={color as ButtonColor} + size={size as ButtonSize} + label="Click here"> + <ButtonText>Button</ButtonText> + </Button> + <Button + disabled + color={color as ButtonColor} + size={size as ButtonSize} + label="Click here"> + <ButtonText>Button</ButtonText> + </Button> + <Button + color={color as ButtonColor} + size={size as ButtonSize} + shape="round" + label="Click here"> + <ButtonIcon icon={ChevronLeft} /> + </Button> + <Button + color={color as ButtonColor} + size={size as ButtonSize} + shape="square" + label="Click here"> + <ButtonIcon icon={ChevronLeft} /> + </Button> + </View> + <View style={[a.flex_row, a.gap_md]}> + <Button + color={color as ButtonColor} + size={size as ButtonSize} + label="Click here"> + <ButtonIcon icon={Globe} position="left" /> + <ButtonText>Button</ButtonText> + </Button> + <Button + disabled + color={color as ButtonColor} + size={size as ButtonSize} + label="Click here"> + <ButtonText>Button</ButtonText> + <ButtonIcon icon={Globe} position="right" /> + </Button> + </View> + </Fragment> + ))} + </Fragment> + ))} </View> ) } diff --git a/src/view/screens/Storybook/index.tsx b/src/view/screens/Storybook/index.tsx index 1151d5a3c..870654761 100644 --- a/src/view/screens/Storybook/index.tsx +++ b/src/view/screens/Storybook/index.tsx @@ -87,8 +87,6 @@ function StorybookInner() { </Button> </View> - <Toasts /> - <Button color="primary" size="small" @@ -108,8 +106,9 @@ function StorybookInner() { <Theming /> </ThemeProvider> - <Forms /> + <Toasts /> <Buttons /> + <Forms /> <Typography /> <Spacing /> <Shadows /> diff --git a/src/view/shell/createNativeStackNavigatorWithAuth.tsx b/src/view/shell/createNativeStackNavigatorWithAuth.tsx index 1c32971d4..bb022a013 100644 --- a/src/view/shell/createNativeStackNavigatorWithAuth.tsx +++ b/src/view/shell/createNativeStackNavigatorWithAuth.tsx @@ -40,6 +40,7 @@ import {Onboarding} from '#/screens/Onboarding' import {SignupQueued} from '#/screens/SignupQueued' import {Takendown} from '#/screens/Takendown' import {atoms as a, useLayoutBreakpoints} from '#/alf' +import {PolicyUpdateOverlay} from '#/components/PolicyUpdateOverlay' import {BottomBarWeb} from './bottom-bar/BottomBarWeb' import {DesktopLeftNav} from './desktop/LeftNav' import {DesktopRightNav} from './desktop/RightNav' @@ -167,6 +168,9 @@ function NativeStackNavigator({ {!isMobile && <DesktopRightNav routeName={activeRoute.name} />} </> )} + + {/* Only shown after logged in and onboaring etc are complete */} + {hasSession && <PolicyUpdateOverlay />} </NavigationContent> ) } diff --git a/src/view/shell/index.tsx b/src/view/shell/index.tsx index 4d1a8c51b..543009a55 100644 --- a/src/view/shell/index.tsx +++ b/src/view/shell/index.tsx @@ -31,6 +31,10 @@ import {InAppBrowserConsentDialog} from '#/components/dialogs/InAppBrowserConsen import {LinkWarningDialog} from '#/components/dialogs/LinkWarning' import {MutedWordsDialog} from '#/components/dialogs/MutedWords' import {SigninDialog} from '#/components/dialogs/Signin' +import { + Outlet as PolicyUpdateOverlayPortalOutlet, + usePolicyUpdateContext, +} from '#/components/PolicyUpdateOverlay' import {Outlet as PortalOutlet} from '#/components/Portal' import {RoutesContainer, TabsNavigator} from '#/Navigation' import {BottomSheetOutlet} from '../../../modules/bottom-sheet' @@ -45,6 +49,7 @@ function ShellInner() { const setIsDrawerOpen = useSetDrawerOpen() const winDim = useWindowDimensions() const insets = useSafeAreaInsets() + const {state: policyUpdateState} = usePolicyUpdateContext() const renderDrawerContent = useCallback(() => <DrawerContent />, []) const onOpenDrawer = useCallback( @@ -151,6 +156,7 @@ function ShellInner() { </Drawer> </ErrorBoundary> </View> + <Composer winHeight={winDim.height} /> <ModalsContainer /> <MutedWordsDialog /> @@ -160,8 +166,16 @@ function ShellInner() { <InAppBrowserConsentDialog /> <LinkWarningDialog /> <Lightbox /> - <PortalOutlet /> - <BottomSheetOutlet /> + + {/* Until policy update has been completed by the user, don't render anything that is portaled */} + {policyUpdateState.completed && ( + <> + <PortalOutlet /> + <BottomSheetOutlet /> + </> + )} + + <PolicyUpdateOverlayPortalOutlet /> </> ) } diff --git a/src/view/shell/index.web.tsx b/src/view/shell/index.web.tsx index 77c3f45f6..3c2bc58ab 100644 --- a/src/view/shell/index.web.tsx +++ b/src/view/shell/index.web.tsx @@ -22,6 +22,10 @@ import {EmailDialog} from '#/components/dialogs/EmailDialog' import {LinkWarningDialog} from '#/components/dialogs/LinkWarning' import {MutedWordsDialog} from '#/components/dialogs/MutedWords' import {SigninDialog} from '#/components/dialogs/Signin' +import { + Outlet as PolicyUpdateOverlayPortalOutlet, + usePolicyUpdateContext, +} from '#/components/PolicyUpdateOverlay' import {Outlet as PortalOutlet} from '#/components/Portal' import {FlatNavigator, RoutesContainer} from '#/Navigation' import {Composer} from './Composer.web' @@ -37,6 +41,7 @@ function ShellInner() { const {_} = useLingui() const showDrawer = !isDesktop && isDrawerOpen const [showDrawerDelayedExit, setShowDrawerDelayedExit] = useState(showDrawer) + const {state: policyUpdateState} = usePolicyUpdateContext() useLayoutEffect(() => { if (showDrawer !== showDrawerDelayedExit) { @@ -74,7 +79,13 @@ function ShellInner() { <AgeAssuranceRedirectDialog /> <LinkWarningDialog /> <Lightbox /> - <PortalOutlet /> + + {/* Until policy update has been completed by the user, don't render anything that is portaled */} + {policyUpdateState.completed && ( + <> + <PortalOutlet /> + </> + )} {showDrawerDelayedExit && ( <> @@ -113,6 +124,8 @@ function ShellInner() { </TouchableWithoutFeedback> </> )} + + <PolicyUpdateOverlayPortalOutlet /> </> ) } |