diff --git a/app/screens/global_threads/threads_list/empty_state.tsx b/app/screens/global_threads/threads_list/empty_state.tsx index 5f3618c698..e9bfa11427 100644 --- a/app/screens/global_threads/threads_list/empty_state.tsx +++ b/app/screens/global_threads/threads_list/empty_state.tsx @@ -5,7 +5,8 @@ import {useIntl} from 'react-intl'; import {Text, View} from 'react-native'; import {useTheme} from '@context/theme'; -import {makeStyleSheetFromTheme} from '@utils/theme'; +import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme'; +import {typography} from '@utils/typography'; import EmptyStateIllustration from './illustrations/empty_state'; @@ -16,26 +17,26 @@ type Props = { const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => { return { container: { + flex: 1, alignItems: 'center', - flexGrow: 1, justifyContent: 'center', + paddingHorizontal: 40, + top: -40, + maxWidth: 480, }, textContainer: { - padding: 32, + marginTop: 24, }, title: { color: theme.centerChannelColor, - fontSize: 20, - fontWeight: '600', textAlign: 'center', + ...typography('Heading', 400, 'SemiBold'), }, - subTitle: { - color: theme.centerChannelColor, - fontSize: 16, - fontWeight: '400', - lineHeight: 24, - marginTop: 16, + paragraph: { + marginTop: 8, textAlign: 'center', + color: changeOpacity(theme.centerChannelColor, 0.72), + ...typography('Body', 200), }, }; }); @@ -75,7 +76,7 @@ function EmptyState({isUnreads}: Props) { {title} - + {subTitle} diff --git a/app/screens/global_threads/threads_list/threads_list.tsx b/app/screens/global_threads/threads_list/threads_list.tsx index 018148f379..90de8c8b0c 100644 --- a/app/screens/global_threads/threads_list/threads_list.tsx +++ b/app/screens/global_threads/threads_list/threads_list.tsx @@ -31,6 +31,11 @@ const styles = StyleSheet.create({ messagesContainer: { flexGrow: 1, }, + empty: { + alignItems: 'center', + flexGrow: 1, + justifyContent: 'center', + }, loadingStyle: { alignItems: 'center', flex: 1, @@ -154,7 +159,7 @@ const ThreadsList = ({ ({ alignItems: 'center', justifyContent: 'center', paddingHorizontal: 40, + maxWidth: 480, }, title: { color: theme.centerChannelColor, + textAlign: 'center', ...typography('Heading', 400, 'SemiBold'), }, paragraph: { diff --git a/app/screens/saved_posts/components/empty.tsx b/app/screens/saved_posts/components/empty.tsx index 3c82bf3b36..49b6b550c3 100644 --- a/app/screens/saved_posts/components/empty.tsx +++ b/app/screens/saved_posts/components/empty.tsx @@ -16,9 +16,11 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => ({ alignItems: 'center', justifyContent: 'center', paddingHorizontal: 40, + maxWidth: 480, }, title: { color: theme.centerChannelColor, + textAlign: 'center', ...typography('Heading', 400), }, paragraph: {