1 files changed, 52 insertions, 0 deletions
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;