Skip to content

Commit

Permalink
Remove header subtitle from list-related screens (#7154)
Browse files Browse the repository at this point in the history
* rm subtitle, add admonition

* rm top border from empty state

* Minimal approach

* Revert uneeded change

* Even more minimal

---------

Co-authored-by: Eric Bailey <[email protected]>
  • Loading branch information
mozzius and estrattonbailey authored Dec 18, 2024
1 parent 2d82743 commit 3481d16
Show file tree
Hide file tree
Showing 5 changed files with 48 additions and 34 deletions.
2 changes: 1 addition & 1 deletion src/components/StarterPack/ProfileStarterPacks.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
51 changes: 41 additions & 10 deletions src/view/com/lists/MyLists.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,18 @@ import {
ViewStyle,
} from 'react-native'
import {AppBskyGraphDefs as GraphDefs} from '@atproto/api'
import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {Trans} from '@lingui/macro'

import {usePalette} from '#/lib/hooks/usePalette'
import {cleanError} from '#/lib/strings/errors'
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'

Expand All @@ -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} =
Expand Down Expand Up @@ -84,11 +83,43 @@ export function MyLists({
({item, index}: {item: any; index: number}) => {
if (item === EMPTY) {
return (
<EmptyState
icon="list-ul"
message={_(msg`You have no lists.`)}
testID="listsEmpty"
/>
<View style={[a.flex_1, a.align_center, a.gap_sm, a.px_xl, a.pt_xl]}>
<View
style={[
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 (
Expand Down Expand Up @@ -118,7 +149,7 @@ export function MyLists({
</View>
)
},
[renderItem, t.atoms.border_contrast_low, _, error, onRefresh],
[t, renderItem, error, onRefresh, filter],
)

if (inline) {
Expand Down
21 changes: 6 additions & 15 deletions src/view/com/util/EmptyState.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'

Expand All @@ -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={[
styles.container,
isWeb && pal.border,
isTabletOrDesktop && {paddingRight: 20},
style,
]}>
style={[isTabletOrDesktop && {paddingRight: 20}, style]}>
<View
style={[
styles.iconContainer,
Expand All @@ -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,
width: 100,
height: 80,
width: 80,
marginLeft: 'auto',
marginRight: 'auto',
borderRadius: 80,
marginTop: 30,
},
iconContainerBig: {
width: 140,
height: 140,
width: 100,
height: 100,
marginTop: 50,
},
text: {
Expand Down
3 changes: 0 additions & 3 deletions src/view/screens/Lists.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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`)}
Expand Down
5 changes: 0 additions & 5 deletions src/view/screens/ModerationModlists.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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`)}
Expand Down

0 comments on commit 3481d16

Please sign in to comment.