From 007c2e728c152aa2b038d3e30ce637960189cf25 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Mon, 12 Apr 2021 16:04:32 -0400
Subject: styled outline input submit button

---
 src/components/messages/ChatInputSubmit.tsx | 52 +++++++++++++++++++++++++++++
 1 file changed, 52 insertions(+)
 create mode 100644 src/components/messages/ChatInputSubmit.tsx

(limited to 'src/components/messages/ChatInputSubmit.tsx')

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;
-- 
cgit v1.2.3-70-g09d2