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: {