diff --git a/src/components/FeedSuggestedFollows/index.tsx b/src/components/FeedSuggestedFollows/index.tsx index 9d36a524be..1973cbd721 100644 --- a/src/components/FeedSuggestedFollows/index.tsx +++ b/src/components/FeedSuggestedFollows/index.tsx @@ -58,7 +58,7 @@ export function SuggestedFollowCardSkeleton() { - + - + diff --git a/src/screens/Home/EmptyTimeline.tsx b/src/screens/Home/EmptyTimeline.tsx index b4f538c61e..90f756a706 100644 --- a/src/screens/Home/EmptyTimeline.tsx +++ b/src/screens/Home/EmptyTimeline.tsx @@ -1,24 +1,46 @@ import React from 'react' -import {View} from 'react-native' +import {useWindowDimensions, View} from 'react-native' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import {CenteredView} from '#/view/com/util/Views' import {atoms as a} from '#/alf' import {Button, ButtonIcon, ButtonText} from '#/components/Button' +import {Divider} from '#/components/Divider' import {FeedSuggestedFollowsCards} from '#/components/FeedSuggestedFollows' import {IconCircle} from '#/components/IconCircle' import {ArrowRotateCounterClockwise_Stroke2_Corner0_Rounded as Refresh} from '#/components/icons/ArrowRotateCounterClockwise' import {FilterTimeline_Stroke2_Corner0_Rounded as FilterTimeline} from '#/components/icons/FilterTimeline' -import {Divider} from '#/components/Menu' import {Text} from '#/components/Typography' +// TODO replace this with new shared hook +function useHeaderOffset() { + const {isDesktop, isTablet} = useWebMediaQueries() + const {fontScale} = useWindowDimensions() + if (isDesktop || isTablet) { + return 0 + } + const navBarHeight = 42 + const tabBarPad = 10 + 10 + 3 // padding + border + const normalLineHeight = 1.2 + const tabBarText = 16 * normalLineHeight * fontScale + return navBarHeight + tabBarPad + tabBarText +} + export function EmptyTimeline() { const {_} = useLingui() + const offset = useHeaderOffset() return ( - + @@ -47,7 +69,7 @@ export function EmptyTimeline() { a.align_center, a.justify_end, a.pt_md, - a.gap_lg, + a.gap_md, ]}> When you're done: @@ -59,7 +81,7 @@ export function EmptyTimeline() { variant="solid" color="primary"> - Click to view your timeline + View your timeline