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 (