diff --git a/src/screens/Profile/Sections/Feed.tsx b/src/screens/Profile/Sections/Feed.tsx index cc52eef3..201c8f7e 100644 --- a/src/screens/Profile/Sections/Feed.tsx +++ b/src/screens/Profile/Sections/Feed.tsx @@ -56,7 +56,7 @@ export const ProfileFeedSection = React.forwardRef< })) const renderPostsEmpty = React.useCallback(() => { - return + return }, [_]) React.useEffect(() => { diff --git a/src/view/com/util/EmptyState.tsx b/src/view/com/util/EmptyState.tsx index 150a16aa..42f0ab6d 100644 --- a/src/view/com/util/EmptyState.tsx +++ b/src/view/com/util/EmptyState.tsx @@ -5,10 +5,13 @@ import { FontAwesomeIcon, FontAwesomeIconStyle, } from '@fortawesome/react-native-fontawesome' -import {Text} from './text/Text' -import {UserGroupIcon} from 'lib/icons' + +import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' import {usePalette} from 'lib/hooks/usePalette' +import {UserGroupIcon} from 'lib/icons' import {isWeb} from 'platform/detection' +import {Growth_Stroke2_Corner0_Rounded as Growth} from '#/components/icons/Growth' +import {Text} from './text/Text' export function EmptyState({ testID, @@ -17,32 +20,41 @@ export function EmptyState({ style, }: { testID?: string - icon: IconProp | 'user-group' + icon: IconProp | 'user-group' | 'growth' message: string style?: StyleProp }) { const pal = usePalette('default') + const {isTabletOrDesktop} = useWebMediaQueries() + const iconSize = isTabletOrDesktop ? 80 : 64 return ( - + style={[ + styles.container, + isWeb && pal.border, + isTabletOrDesktop && {paddingRight: 20}, + style, + ]}> + {icon === 'user-group' ? ( - + + ) : icon === 'growth' ? ( + ) : ( )} - + {message} @@ -51,16 +63,23 @@ export function EmptyState({ const styles = StyleSheet.create({ container: { - paddingVertical: 24, - paddingHorizontal: 36, borderTopWidth: isWeb ? 1 : undefined, }, iconContainer: { flexDirection: 'row', - }, - icon: { + alignItems: 'center', + justifyContent: 'center', + height: 100, + width: 100, marginLeft: 'auto', marginRight: 'auto', + borderRadius: 80, + marginTop: 30, + }, + iconContainerBig: { + width: 140, + height: 140, + marginTop: 50, }, text: { textAlign: 'center', diff --git a/src/view/screens/ProfileFeed.tsx b/src/view/screens/ProfileFeed.tsx index 3dd8c3ac..f272b90a 100644 --- a/src/view/screens/ProfileFeed.tsx +++ b/src/view/screens/ProfileFeed.tsx @@ -468,7 +468,7 @@ const FeedSection = React.forwardRef( }, [onScrollToTop, isScreenFocused]) const renderPostsEmpty = useCallback(() => { - return + return }, [_]) return ( diff --git a/src/view/screens/ProfileList.tsx b/src/view/screens/ProfileList.tsx index 0c2cecbf..72de428f 100644 --- a/src/view/screens/ProfileList.tsx +++ b/src/view/screens/ProfileList.tsx @@ -726,7 +726,7 @@ const FeedSection = React.forwardRef( }, [onScrollToTop, isScreenFocused]) const renderPostsEmpty = useCallback(() => { - return + return }, [_]) return (