1 files changed, 73 insertions, 20 deletions

diff --git a/src/components/comments/MentionInputControlled.tsx b/src/components/comments/MentionInputControlled.tsx
index 2fd2b41d..c52f3286 100644
--- a/src/components/comments/MentionInputControlled.tsx
+++ b/src/components/comments/MentionInputControlled.tsx
@@ -1,11 +1,15 @@
 import React, {FC, MutableRefObject, useMemo, useRef, useState} from 'react';
 import {
   NativeSyntheticEvent,
+  StyleSheet,
   Text,
   TextInput,
   TextInputSelectionChangeEventData,
+  TouchableOpacity,
   View,
 } from 'react-native';
+import {useDispatch, useSelector} from 'react-redux';
+import {TAGG_LIGHT_BLUE} from '../../constants';
 import {
   MentionInputProps,
   MentionPartType,
@@ -19,6 +23,10 @@ import {
   isMentionPartType,
   parseValue,
 } from 'react-native-controlled-mentions/dist/utils';
+import {Avatar} from '../common';
+import {normalize} from 'react-native-elements';
+
+import UpArrowIcon from '../../assets/icons/up_arrow.svg';
 
 const MentionInputControlled: FC<MentionInputProps> = ({
   value,
@@ -32,6 +40,8 @@ const MentionInputControlled: FC<MentionInputProps> = ({
 
   onSelectionChange,
 
+  addComment,
+
   ...textInputProps
 }) => {
   const textInput = useRef<TextInput | null>(null);
@@ -40,6 +50,8 @@ const MentionInputControlled: FC<MentionInputProps> = ({
 
   const [keyboardText, setKeyboardText] = useState<string>('');
 
+  const {avatar} = useSelector((state: RootState) => state.user);
+
   const validRegex = () => {
     if (partTypes.length === 0) {
       return /.*@[^ ]*$/;
@@ -160,26 +172,35 @@ const MentionInputControlled: FC<MentionInputProps> = ({
           ).map(renderMentionSuggestions)
         : null}
 
-      <TextInput
-        multiline
-        {...textInputProps}
-        ref={handleTextInputRef}
-        onChangeText={onChangeInput}
-        onSelectionChange={handleSelectionChange}>
-        <Text>
-          {parts.map(({text, partType, data}, index) =>
-            partType ? (
-              <Text
-                key={`${index}-${data?.trigger ?? 'pattern'}`}
-                style={partType.textStyle ?? defaultMentionTextStyle}>
-                {text}
-              </Text>
-            ) : (
-              <Text key={index}>{text}</Text>
-            ),
-          )}
-        </Text>
-      </TextInput>
+      <View style={styles.containerStyle}>
+        <Avatar style={styles.avatar} uri={avatar} />
+        <TextInput
+          multiline
+          {...textInputProps}
+          ref={handleTextInputRef}
+          onChangeText={onChangeInput}
+          onSelectionChange={handleSelectionChange}
+          style={styles.text}>
+          <Text>
+            {parts.map(({text, partType, data}, index) =>
+              partType ? (
+                <Text
+                  key={`${index}-${data?.trigger ?? 'pattern'}`}
+                  style={partType.textStyle ?? defaultMentionTextStyle}>
+                  {text}
+                </Text>
+              ) : (
+                <Text key={index}>{text}</Text>
+              ),
+            )}
+          </Text>
+        </TextInput>
+        <View style={styles.submitButton}>
+          <TouchableOpacity style={styles.submitButton} onPress={addComment}>
+            <UpArrowIcon width={35} height={35} color={'white'} />
+          </TouchableOpacity>
+        </View>
+      </View>
 
       {validateInput(keyboardText)
         ? (
@@ -195,4 +216,36 @@ const MentionInputControlled: FC<MentionInputProps> = ({
   );
 };
 
+const styles = StyleSheet.create({
+  avatar: {
+    height: 35,
+    width: 35,
+    borderRadius: 30,
+    marginRight: 10,
+    marginLeft: '3%',
+    marginVertical: '2%',
+    // alignSelf: 'flex-end',
+  },
+  containerStyle: {
+    flexDirection: 'row',
+    alignSelf: 'center',
+    alignItems: 'center',
+    justifyContent: 'center',
+    // borderWidth: 1,
+    height: normalize(40),
+  },
+  submitButton: {
+    height: 35,
+    width: 35,
+    backgroundColor: TAGG_LIGHT_BLUE,
+    borderRadius: 999,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: '3%',
+    marginVertical: '2%',
+    alignSelf: 'flex-end',
+  },
+  text: {flex: 1},
+});
+
 export {MentionInputControlled};