Visually improve the empty state of feeds (#4466)

src/screens/Profile/Sections/Feed.tsx

@@ -56,7 +56,7 @@ export const ProfileFeedSection = React.forwardRef<
   }))
 
   const renderPostsEmpty = React.useCallback(() => {
-    return <EmptyState icon="feed" message={_(msg`This feed is empty!`)} />
+    return <EmptyState icon="growth" message={_(msg`No posts yet.`)} />
   }, [_])
 
   React.useEffect(() => {

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<ViewStyle>
 }) {
   const pal = usePalette('default')
+  const {isTabletOrDesktop} = useWebMediaQueries()
+  const iconSize = isTabletOrDesktop ? 80 : 64
   return (
     <View
       testID={testID}
-      style={[styles.container, isWeb && pal.border, style]}>
+      style={[
-      <View style={styles.iconContainer}>
+        styles.container,
+        isWeb && pal.border,
+        isTabletOrDesktop && {paddingRight: 20},
+        style,
+      ]}>
+      <View
+        style={[
+          styles.iconContainer,
+          isTabletOrDesktop && styles.iconContainerBig,
+          pal.viewLight,
+        ]}>
         {icon === 'user-group' ? (
-          <UserGroupIcon size="64" style={styles.icon} />
+          <UserGroupIcon size={iconSize} />
+        ) : icon === 'growth' ? (
+          <Growth width={iconSize} fill={pal.colors.emptyStateIcon} />
         ) : (
           <FontAwesomeIcon
             icon={icon}
-            size={64}
+            size={iconSize}
-            style={[
+            style={[{color: pal.colors.emptyStateIcon} as FontAwesomeIconStyle]}
-              styles.icon,
-              {color: pal.colors.emptyStateIcon} as FontAwesomeIconStyle,
-            ]}
           />
         )}
       </View>
-      <Text
+      <Text type="xl" style={[{color: pal.colors.textLight}, styles.text]}>
-        type="xl-medium"
-        style={[{color: pal.colors.textVeryLight}, styles.text]}>
         {message}
       </Text>
     </View>
@@ -51,16 +63,23 @@ export function EmptyState({
 
 const styles = StyleSheet.create({
   container: {
-    paddingVertical: 24,
-    paddingHorizontal: 36,
     borderTopWidth: isWeb ? 1 : undefined,
   },
   iconContainer: {
     flexDirection: 'row',
-  },
+    alignItems: 'center',
-  icon: {
+    justifyContent: 'center',
+    height: 100,
+    width: 100,
     marginLeft: 'auto',
     marginRight: 'auto',
+    borderRadius: 80,
+    marginTop: 30,
+  },
+  iconContainerBig: {
+    width: 140,
+    height: 140,
+    marginTop: 50,
   },
   text: {
     textAlign: 'center',

src/view/screens/ProfileFeed.tsx

@@ -468,7 +468,7 @@ const FeedSection = React.forwardRef<SectionRef, FeedSectionProps>(
     }, [onScrollToTop, isScreenFocused])
 
     const renderPostsEmpty = useCallback(() => {
-      return <EmptyState icon="feed" message={_(msg`This feed is empty!`)} />
+      return <EmptyState icon="hashtag" message={_(msg`This feed is empty.`)} />
     }, [_])
 
     return (

src/view/screens/ProfileList.tsx

@@ -726,7 +726,7 @@ const FeedSection = React.forwardRef<SectionRef, FeedSectionProps>(
     }, [onScrollToTop, isScreenFocused])
 
     const renderPostsEmpty = useCallback(() => {
-      return <EmptyState icon="feed" message={_(msg`This feed is empty!`)} />
+      return <EmptyState icon="hashtag" message={_(msg`This feed is empty.`)} />
     }, [_])
 
     return (