From d8973d328cb3f7ea314aaa2ca42f775115133ec1 Mon Sep 17 00:00:00 2001
From: Nouman Tahir <nouman.hawkdev@gmail.com>
Date: Tue, 11 Oct 2022 16:58:07 +0500
Subject: [PATCH] added remove icon with ui fine tuning

---
 .../basicUIElements/view/tag/tagContainer.js         |  2 ++
 src/components/basicUIElements/view/tag/tagStyles.js |  2 ++
 src/components/basicUIElements/view/tag/tagView.js   | 12 ++++++++++++
 .../editorElements/tagInput/view/tagInputStyles.tsx  |  6 ++++--
 4 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/components/basicUIElements/view/tag/tagContainer.js b/src/components/basicUIElements/view/tag/tagContainer.js
index e613e3cf5..38898d2c2 100644
--- a/src/components/basicUIElements/view/tag/tagContainer.js
+++ b/src/components/basicUIElements/view/tag/tagContainer.js
@@ -31,6 +31,7 @@ const TagContainer = ({
   communityTitle,
   prefix,
   suffix,
+  removeEnabled,
 }) => {
   const [label, setLabel] = useState(value);
   const [isCommunity, setIsCommunity] = useState(false);
@@ -96,6 +97,7 @@ const TagContainer = ({
       disabled={disabled}
       prefix={prefix}
       suffix={suffix}
+      removeEnabled={removeEnabled}
     />
   );
 };
diff --git a/src/components/basicUIElements/view/tag/tagStyles.js b/src/components/basicUIElements/view/tag/tagStyles.js
index 70ff8475e..d42128de8 100644
--- a/src/components/basicUIElements/view/tag/tagStyles.js
+++ b/src/components/basicUIElements/view/tag/tagStyles.js
@@ -21,6 +21,8 @@ export default EStyleSheet.create({
     height: 22,
     backgroundColor: '$iconColor',
     borderRadius: 50,
+    flexDirection:'row',
+    alignItems:'center'
   },
   isFilter: {
     backgroundColor: 'transparent',
diff --git a/src/components/basicUIElements/view/tag/tagView.js b/src/components/basicUIElements/view/tag/tagView.js
index bef3f5f81..2e809d86c 100644
--- a/src/components/basicUIElements/view/tag/tagView.js
+++ b/src/components/basicUIElements/view/tag/tagView.js
@@ -1,6 +1,8 @@
 import React from 'react';
 import { Text, View, TouchableOpacity } from 'react-native';
+import EStyleSheet from 'react-native-extended-stylesheet';
 import styles from './tagStyles';
+import { Icon } from '../../../icon';
 
 const Tag = ({
   onPress,
@@ -14,6 +16,7 @@ const Tag = ({
   disabled,
   prefix,
   suffix,
+  removeEnabled
 }) => (
   <TouchableOpacity
     hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
@@ -39,6 +42,15 @@ const Tag = ({
       >
         {`${prefix ? prefix : ''} ${label}${suffix ? suffix : ''}`}
       </Text>
+      {removeEnabled && (
+        <Icon name="close"
+          iconType="MaterialCommunityIcons"
+          color={EStyleSheet.value('$primaryDarkText')}
+          size={12}
+          style={{paddingLeft:6}}
+          />
+      )}
+
     </View>
   </TouchableOpacity>
 );
diff --git a/src/components/editorElements/tagInput/view/tagInputStyles.tsx b/src/components/editorElements/tagInput/view/tagInputStyles.tsx
index 07cfa28ee..3f00c644d 100644
--- a/src/components/editorElements/tagInput/view/tagInputStyles.tsx
+++ b/src/components/editorElements/tagInput/view/tagInputStyles.tsx
@@ -12,11 +12,12 @@ export default EStyleSheet.create({
     borderBottomColor: '$primaryDarkGray',
   },
   tagContainer:{
-    borderWidth:EStyleSheet.hairlineWidth,
-    borderColor: '$primaryDarkGray',
+    marginLeft:0,
+    marginRight:12,
     backgroundColor: '$primaryLightBackground'
   } as ViewStyle,
   tagText:{
+    marginBottom:2,
     color: '$primaryDarkText',
   } as TextStyle,
   textInput: {
@@ -24,6 +25,7 @@ export default EStyleSheet.create({
     fontSize: 15,
     fontFamily: '$editorFont',
     height: isAndroidOreo() ? 36 : 40,
+    minWidth: 250
   } as TextStyle,
   warning: {
     color: '$primaryRed',