[Gekidou] Align empty states (#6348)

* Align empty states

* Added maxWidth

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) {
                 <Text style={style.title}>
                     {title}
                 </Text>
-                <Text style={style.subTitle}>
+                <Text style={style.paragraph}>
                     {subTitle}
                 </Text>
             </View>

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 = ({
             <FlatList
                 ListEmptyComponent={listEmptyComponent}
                 ListFooterComponent={listFooterComponent}
-                contentContainerStyle={styles.messagesContainer}
+                contentContainerStyle={threads.length ? styles.messagesContainer : styles.empty}
                 data={threads}
                 maxToRenderPerBatch={10}
                 onEndReached={handleEndReached}

app/screens/pinned_messages/empty/index.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, 'SemiBold'),
     },
     paragraph: {

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