styled outline input submit button

4 files changed, 62 insertions, 28 deletions

diff --git a/src/components/messages/ChatInput.tsx b/src/components/messages/ChatInput.tsx
index 9aeb9c62..a73d4869 100644
--- a/src/components/messages/ChatInput.tsx
+++ b/src/components/messages/ChatInput.tsx
@@ -1,18 +1,11 @@
 import React from 'react';
-import {
-  Image,
-  StyleSheet,
-  TextInput,
-  TouchableOpacity,
-  View,
-} from 'react-native';
+import {Image, StyleSheet, TextInput, View} from 'react-native';
 import {useStore} from 'react-redux';
 import {
   MessageInputProps,
   useMessageInputContext,
 } from 'stream-chat-react-native';
-import UpArrowIcon from '../../assets/icons/up_arrow.svg';
-import {TAGG_LIGHT_BLUE} from '../../constants';
+import {ChatInputSubmit} from '../messages';
 import {RootState} from '../../store/rootReducer';
 import {
   LocalAttachmentType,
@@ -58,11 +51,7 @@ const ChatInput: React.FC<
           value={text}
           onChangeText={setText}
         />
-        <View style={styles.submitButton}>
-          <TouchableOpacity style={styles.submitButton} onPress={sendMessage}>
-            <UpArrowIcon width={35} height={35} color={'white'} />
-          </TouchableOpacity>
-        </View>
+        <ChatInputSubmit onPress={sendMessage} outlined={text.length === 0} />
       </View>
     </View>
   );
@@ -96,17 +85,6 @@ const styles = StyleSheet.create({
     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',
   },
diff --git a/src/components/messages/ChatInputSubmit.tsx b/src/components/messages/ChatInputSubmit.tsx
new file mode 100644
index 00000000..6180ef20
--- /dev/null
+++ b/src/components/messages/ChatInputSubmit.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import {StyleSheet, TouchableOpacity} from 'react-native';
+import UpArrowIcon from '../../assets/icons/up_arrow.svg';
+import {TAGG_LIGHT_BLUE} from '../../constants';
+import {normalize} from '../../utils';
+
+interface ChatInputSubmitProps {
+  outlined: boolean;
+  onPress: () => void;
+}
+
+const SIZE = normalize(30);
+
+const ChatInputSubmit: React.FC<ChatInputSubmitProps> = (props) => {
+  const {outlined, onPress} = props;
+
+  return outlined ? (
+    <TouchableOpacity
+      style={[styles.submitButton, styles.outline]}
+      onPress={onPress}>
+      <UpArrowIcon width={SIZE} height={SIZE} color={TAGG_LIGHT_BLUE} />
+    </TouchableOpacity>
+  ) : (
+    <TouchableOpacity
+      style={[styles.submitButton, styles.background]}
+      onPress={onPress}>
+      <UpArrowIcon width={SIZE} height={SIZE} color={'white'} />
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  submitButton: {
+    height: SIZE,
+    aspectRatio: 1,
+    borderRadius: 999,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: '3%',
+    marginVertical: '2%',
+    alignSelf: 'flex-end',
+  },
+  background: {
+    backgroundColor: TAGG_LIGHT_BLUE,
+  },
+  outline: {
+    borderWidth: 1,
+    borderColor: TAGG_LIGHT_BLUE,
+  },
+});
+
+export default ChatInputSubmit;
diff --git a/src/components/messages/index.ts b/src/components/messages/index.ts
index 83ecd2ad..c809d3d1 100644
--- a/src/components/messages/index.ts
+++ b/src/components/messages/index.ts
@@ -1,3 +1,5 @@
 export {default as MessagesHeader} from './MessagesHeader';
 export {default as ChannelPreview} from './ChannelPreview';
 export {default as ChatInput} from './ChatInput';
+export {default as ChatHeader} from './ChatHeader';
+export {default as ChatInputSubmit} from './ChatInputSubmit';
diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx
index 957b1189..02330527 100644
--- a/src/screens/chat/ChatScreen.tsx
+++ b/src/screens/chat/ChatScreen.tsx
@@ -11,7 +11,7 @@ import {
   OverlayProvider,
 } from 'stream-chat-react-native';
 import {ChatContext} from '../../App';
-import ChatHeader from '../../components/messages/ChatHeader';
+import {ChatInput, ChatHeader} from '../../components';
 import {TAGG_LIGHT_BLUE} from '../../constants';
 import {MainStackParams} from '../../routes';
 import {ScreenType} from '../../types';
@@ -38,7 +38,9 @@ const ChatScreen: React.FC<ChatScreenProps> = () => {
   };
 
   return (
-    <OverlayProvider bottomInset={80} topInset={insets.top + HeaderHeight}>
+    <OverlayProvider
+      bottomInset={isIPhoneX() ? 80 : 50}
+      topInset={insets.top + HeaderHeight}>
       <SafeAreaView
         style={[
           styles.container,
@@ -56,7 +58,7 @@ const ChatScreen: React.FC<ChatScreenProps> = () => {
               deleteMessage,
             ]}>
             <MessageList onThreadSelect={() => {}} />
-            <MessageInput />
+            <MessageInput Input={ChatInput} />
           </Channel>
         </Chat>
       </SafeAreaView>