Remove header subtitle from list-related screens (#7154)

* rm subtitle, add admonition

* rm top border from empty state

* Minimal approach

* Revert uneeded change

* Even more minimal

---------

Co-authored-by: Eric Bailey <git@esb.lol>

src/components/StarterPack/ProfileStarterPacks.tsx

@@ -228,7 +228,7 @@ function Empty() {
         a.justify_between,
         a.gap_lg,
         a.shadow_lg,
-        {marginTop: 2},
+        {marginTop: 1},
       ]}>
       <View style={[a.gap_xs]}>
         <Text

src/view/com/lists/MyLists.tsx

@@ -8,8 +8,7 @@ import {
   ViewStyle,
 } from 'react-native'
 import {AppBskyGraphDefs as GraphDefs} from '@atproto/api'
-import {msg} from '@lingui/macro'
+import {Trans} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
 
 import {usePalette} from '#/lib/hooks/usePalette'
 import {cleanError} from '#/lib/strings/errors'
@@ -17,9 +16,10 @@ import {s} from '#/lib/styles'
 import {logger} from '#/logger'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {MyListsFilter, useMyListsQuery} from '#/state/queries/my-lists'
-import {EmptyState} from '#/view/com/util/EmptyState'
 import {atoms as a, useTheme} from '#/alf'
+import {BulletList_Stroke2_Corner0_Rounded as ListIcon} from '#/components/icons/BulletList'
 import * as ListCard from '#/components/ListCard'
+import {Text} from '#/components/Typography'
 import {ErrorMessage} from '../util/error/ErrorMessage'
 import {List} from '../util/List'
 
@@ -42,7 +42,6 @@ export function MyLists({
 }) {
   const pal = usePalette('default')
   const t = useTheme()
-  const {_} = useLingui()
   const moderationOpts = useModerationOpts()
   const [isPTRing, setIsPTRing] = React.useState(false)
   const {data, isFetching, isFetched, isError, error, refetch} =
@@ -84,11 +83,43 @@ export function MyLists({
     ({item, index}: {item: any; index: number}) => {
       if (item === EMPTY) {
         return (
-          <EmptyState
+          <View style={[a.flex_1, a.align_center, a.gap_sm, a.px_xl, a.pt_xl]}>
-            icon="list-ul"
+            <View
-            message={_(msg`You have no lists.`)}
+              style={[
-            testID="listsEmpty"
+                a.align_center,
-          />
+                a.justify_center,
+                a.rounded_full,
+                t.atoms.bg_contrast_25,
+                {
+                  width: 32,
+                  height: 32,
+                },
+              ]}>
+              <ListIcon size="md" fill={t.atoms.text_contrast_low.color} />
+            </View>
+            <Text
+              style={[
+                a.text_center,
+                a.flex_1,
+                a.text_sm,
+                a.leading_snug,
+                t.atoms.text_contrast_medium,
+                {
+                  maxWidth: 200,
+                },
+              ]}>
+              {filter === 'curate' && (
+                <Trans>
+                  Public, sharable lists which can be used to drive feeds.
+                </Trans>
+              )}
+              {filter === 'mod' && (
+                <Trans>
+                  Public, sharable lists of users to mute or block in bulk.
+                </Trans>
+              )}
+            </Text>
+          </View>
         )
       } else if (item === ERROR_ITEM) {
         return (
@@ -118,7 +149,7 @@ export function MyLists({
         </View>
       )
     },
-    [renderItem, t.atoms.border_contrast_low, _, error, onRefresh],
+    [t, renderItem, error, onRefresh, filter],
   )
 
   if (inline) {

src/view/com/util/EmptyState.tsx

@@ -8,7 +8,6 @@ import {
 import {usePalette} from '#/lib/hooks/usePalette'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 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'
 
@@ -25,16 +24,11 @@ export function EmptyState({
 }) {
   const pal = usePalette('default')
   const {isTabletOrDesktop} = useWebMediaQueries()
-  const iconSize = isTabletOrDesktop ? 80 : 64
+  const iconSize = isTabletOrDesktop ? 64 : 48
   return (
     <View
       testID={testID}
-      style={[
+      style={[isTabletOrDesktop && {paddingRight: 20}, style]}>
-        styles.container,
-        isWeb && pal.border,
-        isTabletOrDesktop && {paddingRight: 20},
-        style,
-      ]}>
       <View
         style={[
           styles.iconContainer,
@@ -61,23 +55,20 @@ export function EmptyState({
 }
 
 const styles = StyleSheet.create({
-  container: {
-    borderTopWidth: isWeb ? 1 : undefined,
-  },
   iconContainer: {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
-    height: 100,
+    height: 80,
-    width: 100,
+    width: 80,
     marginLeft: 'auto',
     marginRight: 'auto',
     borderRadius: 80,
     marginTop: 30,
   },
   iconContainerBig: {
-    width: 140,
+    width: 100,
-    height: 140,
+    height: 100,
     marginTop: 50,
   },
   text: {

src/view/screens/Lists.tsx

@@ -61,9 +61,6 @@ export function ListsScreen({}: Props) {
           <Layout.Header.TitleText>
             <Trans>Lists</Trans>
           </Layout.Header.TitleText>
-          <Layout.Header.SubtitleText>
-            <Trans>Public, shareable lists which can drive feeds.</Trans>
-          </Layout.Header.SubtitleText>
         </Layout.Header.Content>
         <Button
           label={_(msg`New list`)}

src/view/screens/ModerationModlists.tsx

@@ -61,11 +61,6 @@ export function ModerationModlistsScreen({}: Props) {
           <Layout.Header.TitleText>
             <Trans>Moderation Lists</Trans>
           </Layout.Header.TitleText>
-          <Layout.Header.SubtitleText>
-            <Trans>
-              Public, shareable lists of users to mute or block in bulk.
-            </Trans>
-          </Layout.Header.SubtitleText>
         </Layout.Header.Content>
         <Button
           label={_(msg`New list`)}