added initial styling

4 files changed, 75 insertions, 32 deletions

diff --git a/src/components/index.ts b/src/components/index.ts
index d5649323..47dc583b 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -6,3 +6,4 @@ export * from './taggs';
 export * from './comments';
 export * from './moments';
 export * from './suggestedPeople';
+export * from './messages';
diff --git a/src/components/messages/MessagesHeader.tsx b/src/components/messages/MessagesHeader.tsx
new file mode 100644
index 00000000..47a84bf3
--- /dev/null
+++ b/src/components/messages/MessagesHeader.tsx
@@ -0,0 +1,51 @@
+import * as React from 'react';
+import {Alert, StyleSheet, View} from 'react-native';
+import {Text} from 'react-native-animatable';
+import {TouchableOpacity} from 'react-native-gesture-handler';
+import {normalize} from '../../utils';
+
+type MessagesHeaderProps = {};
+
+const MessagesHeader: React.FC<MessagesHeaderProps> = () => {
+  return (
+    <View style={styles.header}>
+      <Text style={styles.headerText}>Messages</Text>
+      <Text style={styles.unreadText}>2 unread</Text>
+      <View style={styles.flex} />
+      <TouchableOpacity
+        style={styles.compose}
+        onPress={() => {
+          Alert.alert('hi');
+        }}>
+        <Text>Compose</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  flex: {
+    flex: 1,
+  },
+  header: {
+    marginHorizontal: '8%',
+    marginTop: '5%',
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  headerText: {
+    fontWeight: '700',
+    fontSize: normalize(18),
+    lineHeight: normalize(21),
+  },
+  unreadText: {
+    color: '#8F01FF',
+    marginLeft: 10,
+    fontWeight: '700',
+    lineHeight: normalize(17),
+    fontSize: normalize(14),
+  },
+  compose: {},
+});
+
+export default MessagesHeader;
diff --git a/src/components/messages/index.ts b/src/components/messages/index.ts
new file mode 100644
index 00000000..2d6bb581
--- /dev/null
+++ b/src/components/messages/index.ts
@@ -0,0 +1 @@
+export {default as MessagesHeader} from './MessagesHeader';
diff --git a/src/screens/chat/ChatListScreen.tsx b/src/screens/chat/ChatListScreen.tsx
index 416e7936..56493cf7 100644
--- a/src/screens/chat/ChatListScreen.tsx
+++ b/src/screens/chat/ChatListScreen.tsx
@@ -1,21 +1,9 @@
-import {StreamChat} from 'stream-chat';
-import React, {useEffect, useMemo, useState} from 'react';
-import {View, StyleSheet, Text, TouchableOpacity} from 'react-native';
 import {StackNavigationProp} from '@react-navigation/stack';
-import {
-  Channel,
-  ChannelList,
-  Chat,
-  MessageInput,
-  MessageList,
-  OverlayProvider,
-  Streami18n,
-  Thread,
-  ThreadContextValue,
-  useAttachmentPickerContext,
-  useOverlayContext,
-} from 'stream-chat-react-native';
-
+import React, {useEffect, useMemo, useState} from 'react';
+import {SafeAreaView, StatusBar, StyleSheet, View} from 'react-native';
+import {StreamChat} from 'stream-chat';
+import {ChannelList, Chat, Streami18n} from 'stream-chat-react-native';
+import {MessagesHeader} from '../../components/messages';
 import {MainStackParams} from '../../routes';
 
 type ChatListScreenNavigationProp = StackNavigationProp<
@@ -60,23 +48,17 @@ const ChatListScreen: React.FC<ChatListScreenProps> = ({navigation}) => {
   const memoizedFilters = useMemo(() => filters, []);
 
   return (
-    <View style={styles.container}>
-      <Text style={styles.placeholder}>I am the chat list.</Text>
-      <TouchableOpacity
-        style={styles.button}
-        onPress={() => navigation.navigate('Chat')}>
-        <Text>Let's go to a conversation!</Text>
-      </TouchableOpacity>
-      {clientReady && (
-        <>
-          <Text>Fooooo</Text>
+    <View style={styles.background}>
+      <SafeAreaView>
+        <StatusBar barStyle="dark-content" />
+        <MessagesHeader />
+        {clientReady && (
           <Chat client={chatClient} i18nInstance={streami18n}>
-            <View style={{height: '100%'}}>
+            <View style={styles.chatContainer}>
               <ChannelList
                 filters={memoizedFilters}
                 onSelect={(channel) => {
-                  // setChannel(channel);
-                  // navigation.navigate('Channel');
+                  console.log('Navigate to chat screen here');
                 }}
                 options={{
                   presence: true,
@@ -87,13 +69,17 @@ const ChatListScreen: React.FC<ChatListScreenProps> = ({navigation}) => {
               />
             </View>
           </Chat>
-        </>
-      )}
+        )}
+      </SafeAreaView>
     </View>
   );
 };
 
 const styles = StyleSheet.create({
+  background: {
+    flex: 1,
+    backgroundColor: 'white',
+  },
   container: {
     flex: 1,
     justifyContent: 'center',
@@ -109,6 +95,10 @@ const styles = StyleSheet.create({
     padding: 15,
     borderRadius: 5,
   },
+  chatContainer: {
+    height: '100%',
+    marginTop: 10,
+  },
 });
 
 export default ChatListScreen;