created initial styling

6 files changed, 130 insertions, 14 deletions

diff --git a/ios/Frontend.app.dSYM.zip b/ios/Frontend.app.dSYM.zip
new file mode 100644
index 00000000..f7228999
--- /dev/null
+++ b/ios/Frontend.app.dSYM.zip
diff --git a/src/components/messages/ChannelPreview.tsx b/src/components/messages/ChannelPreview.tsx
index 312f879a..a7a7268a 100644
--- a/src/components/messages/ChannelPreview.tsx
+++ b/src/components/messages/ChannelPreview.tsx
@@ -3,7 +3,6 @@ import React, {useContext} from 'react';
 import {Image, StyleSheet, Text, View} from 'react-native';
 import {TouchableOpacity} from 'react-native-gesture-handler';
 import {useStore} from 'react-redux';
-import {usernameRegex} from 'src/constants';
 import {ChannelPreviewMessengerProps} from 'stream-chat-react-native';
 import {ChatContext} from '../../App';
 import {
@@ -18,19 +17,21 @@ import {
 import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 import {getMember, isOnline} from '../../utils/messages';
 
-const ChannelPreview: React.FC<ChannelPreviewMessengerProps<
-  LocalAttachmentType,
-  LocalChannelType,
-  LocalCommandType,
-  LocalEventType,
-  LocalMessageType,
-  LocalReactionType,
-  LocalUserType
->> = (props) => {
+const ChannelPreview: React.FC<
+  ChannelPreviewMessengerProps<
+    LocalAttachmentType,
+    LocalChannelType,
+    LocalCommandType,
+    LocalEventType,
+    LocalMessageType,
+    LocalReactionType,
+    LocalUserType
+  >
+> = (props) => {
+  const {channel} = props;
   const {setChannel} = useContext(ChatContext);
   const state = useStore().getState();
   const navigation = useNavigation();
-  const {channel} = props;
   const member = getMember(channel, state);
   const online = isOnline(member?.user?.last_active);
   const unread = channel.state.unreadCount > 0;
diff --git a/src/components/messages/ChatInput.tsx b/src/components/messages/ChatInput.tsx
new file mode 100644
index 00000000..fe24b271
--- /dev/null
+++ b/src/components/messages/ChatInput.tsx
@@ -0,0 +1,111 @@
+import React from 'react';
+import {
+  Image,
+  StyleSheet,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {useStore} from 'react-redux';
+import {MessageInputProps} from 'stream-chat-react-native';
+import UpArrowIcon from '../../assets/icons/up_arrow.svg';
+import {TAGG_LIGHT_BLUE} from '../../constants';
+import {RootState} from '../../store/rootReducer';
+import {
+  LocalAttachmentType,
+  LocalChannelType,
+  LocalCommandType,
+  LocalEventType,
+  LocalMessageType,
+  LocalReactionType,
+  LocalUserType,
+} from '../../types';
+
+const ChatInput: React.FC<
+  MessageInputProps<
+    LocalAttachmentType,
+    LocalChannelType,
+    LocalCommandType,
+    LocalEventType,
+    LocalMessageType,
+    LocalReactionType,
+    LocalUserType
+  >
+> = () => {
+  const state: RootState = useStore().getState();
+  // const {channel} = useContext(ChatContext);
+  const avatar = state.user.avatar;
+  // const member = getMember(channel, state);
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.textContainer}>
+        <Image
+          style={styles.avatar}
+          source={
+            avatar
+              ? {uri: avatar}
+              : require('../../assets/images/avatar-placeholder.png')
+          }
+        />
+        <TextInput
+          style={styles.text}
+          placeholder={'Message...'}
+          placeholderTextColor="grey"
+          multiline={true}
+        />
+        <View style={styles.submitButton}>
+          <TouchableOpacity style={styles.submitButton} onPress={() => {}}>
+            <UpArrowIcon width={35} height={35} color={'white'} />
+          </TouchableOpacity>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    width: '100%',
+  },
+  textContainer: {
+    width: '95%',
+    flexDirection: 'row',
+    backgroundColor: '#e8e8e8',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    margin: '3%',
+    borderRadius: 25,
+  },
+  text: {
+    flex: 1,
+    padding: '1%',
+    marginHorizontal: '1%',
+  },
+  avatar: {
+    height: 35,
+    width: 35,
+    borderRadius: 30,
+    marginRight: 10,
+    marginLeft: '3%',
+    marginVertical: '2%',
+    alignSelf: 'flex-end',
+  },
+  submitButton: {
+    height: 35,
+    width: 35,
+    backgroundColor: TAGG_LIGHT_BLUE,
+    borderRadius: 999,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: '3%',
+    marginVertical: '2%',
+    alignSelf: 'flex-end',
+  },
+  whiteBackround: {
+    backgroundColor: '#fff',
+  },
+});
+
+export default ChatInput;
diff --git a/src/components/messages/index.ts b/src/components/messages/index.ts
index e194093c..83ecd2ad 100644
--- a/src/components/messages/index.ts
+++ b/src/components/messages/index.ts
@@ -1,2 +1,3 @@
 export {default as MessagesHeader} from './MessagesHeader';
 export {default as ChannelPreview} from './ChannelPreview';
+export {default as ChatInput} from './ChatInput';
diff --git a/src/screens/chat/ChatListScreen.tsx b/src/screens/chat/ChatListScreen.tsx
index daea9984..61a16c93 100644
--- a/src/screens/chat/ChatListScreen.tsx
+++ b/src/screens/chat/ChatListScreen.tsx
@@ -1,4 +1,6 @@
 import AsyncStorage from '@react-native-community/async-storage';
+import type {DeepPartial, Theme} from 'stream-chat-react-native';
+import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs';
 import {StackNavigationProp} from '@react-navigation/stack';
 import React, {useContext, useEffect, useMemo, useState} from 'react';
 import {SafeAreaView, StatusBar, StyleSheet, View} from 'react-native';
@@ -30,8 +32,8 @@ interface ChatListScreenProps {
 /*
  * Screen that displays all of the user's active conversations.
  */
-const ChatListScreen: React.FC<ChatListScreenProps> = ({navigation}) => {
-  const {chatClient, setChannel} = useContext(ChatContext);
+const ChatListScreen: React.FC<ChatListScreenProps> = () => {
+  const {chatClient} = useContext(ChatContext);
   const [modalVisible, setChatModalVisible] = useState(false);
 
   const [clientReady, setClientReady] = useState(false);
diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx
index 59c53c99..feb95b83 100644
--- a/src/screens/chat/ChatScreen.tsx
+++ b/src/screens/chat/ChatScreen.tsx
@@ -10,6 +10,7 @@ import {
   MessageList,
 } from 'stream-chat-react-native';
 import {ChatContext} from '../../App';
+import {ChatInput} from '../../components';
 import ChatHeader from '../../components/messages/ChatHeader';
 import {MainStackParams} from '../../routes';
 import {isIPhoneX} from '../../utils';
@@ -36,7 +37,7 @@ const ChatScreen: React.FC<ChatScreenProps> = () => {
       <Chat client={chatClient}>
         <Channel channel={channel} keyboardVerticalOffset={0}>
           <MessageList onThreadSelect={() => {}} />
-          <MessageInput />
+          <MessageInput Input={ChatInput} />
         </Channel>
       </Chat>
     </SafeAreaView>