Fix styling for tip,container

1 files changed, 64 insertions, 55 deletions

diff --git a/src/components/taggs/TaggDraggable.tsx b/src/components/taggs/TaggDraggable.tsx
index 6a93aee5..bb9949e4 100644
--- a/src/components/taggs/TaggDraggable.tsx
+++ b/src/components/taggs/TaggDraggable.tsx
@@ -8,12 +8,15 @@ import {
   TouchableWithoutFeedback,
   View,
 } from 'react-native';
-import {ScreenType, UserType} from '../../types';
+import {ProfilePreviewType, ScreenType, UserType} from '../../types';
 import {normalize} from '../../utils';
-import TaggAvatar from '../profile/TaggAvatar';
+import Avatar from '../../components/common/Avatar';
+import {navigateToProfile} from '../../utils/users';
+import {useDispatch, useSelector} from 'react-redux';
+import {RootState} from 'src/store/rootReducer';
 
 interface TaggDraggableProps {
-  taggedUser: UserType;
+  taggedUser: ProfilePreviewType;
   editingView: boolean;
   deleteFromList: () => void;
   setStart: Function;
@@ -33,10 +36,13 @@ const TaggDraggable: React.FC<TaggDraggableProps> = (
   };
 
   const {taggedUser, editingView, deleteFromList, setStart} = props;
+  const state = useSelector((rs: RootState) => rs);
+
+  const dispatch = useDispatch();
   let uriX = require('../../assets/images/draggableX.png');
+  let uriTip = require('../../assets/images/Tagg-Triangle.png');
 
   const draggableRef = useRef(null);
-
   useEffect(() => {
     draggableRef.current.measure((fx, fy, width, height, px, py) => {
       console.log('Drag Component width is: ' + width);
@@ -49,31 +55,49 @@ const TaggDraggable: React.FC<TaggDraggableProps> = (
     });
   }, []);
 
+  const user: UserType = {
+    userId: taggedUser.id,
+    username: taggedUser.username,
+  };
+
   return (
     <TouchableWithoutFeedback>
-      <View style={styles.container}>
-        <TouchableOpacity
-          onPressIn={() => gotoTaggedProfile(taggedUser.userId)}
-          disabled={editingView}
-          style={[styles.button]}
-          ref={draggableRef}>
-          <TaggAvatar
-            style={styles.avatar}
-            screenType={ScreenType.Profile}
-            editable={false}
-            userXId={taggedUser.userId}
-          />
-          <Text style={editingView ? styles.buttonTitle : styles.buttonTitleX}>
-            @{taggedUser.username}
-          </Text>
-          {editingView && (
-            <TouchableOpacity
-              disabled={false}
-              onPressIn={() => deleteFromList()}>
-              <Image style={styles.imageX} source={uriX} />
-            </TouchableOpacity>
-          )}
-        </TouchableOpacity>
+      <View
+        style={{
+          height: 55,
+          flexDirection: 'column',
+          alignItems: 'center',
+          borderWidth: 1,
+        }}>
+        <Image style={styles.imageTip} source={uriTip} />
+        <View style={styles.container}>
+          <TouchableOpacity
+            onPressIn={() =>
+              navigateToProfile(
+                state,
+                dispatch,
+                navigation,
+                ScreenType.Profile,
+                user,
+              )
+            }
+            disabled={editingView}
+            style={[styles.button]}
+            ref={draggableRef}>
+            <Avatar style={styles.avatar} uri={taggedUser.thumbnail_url} />
+            <Text
+              style={editingView ? styles.buttonTitle : styles.buttonTitleX}>
+              @{taggedUser.username}
+            </Text>
+            {editingView && (
+              <TouchableOpacity
+                disabled={false}
+                onPressIn={() => deleteFromList()}>
+                <Image style={styles.imageX} source={uriX} />
+              </TouchableOpacity>
+            )}
+          </TouchableOpacity>
+        </View>
       </View>
     </TouchableWithoutFeedback>
   );
@@ -81,24 +105,13 @@ const TaggDraggable: React.FC<TaggDraggableProps> = (
 
 const styles = StyleSheet.create({
   container: {
-    color: 'red',
+    borderWidth: 1,
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
-    height: normalize(42),
-    marginBottom: '5%',
-  },
-  bodyContainer: {
-    color: 'blue',
-    flexDirection: 'column',
-    height: normalize(42),
-    justifyContent: 'space-around',
-  },
-  label: {
-    fontWeight: '500',
-    fontSize: normalize(14),
   },
   buttonTitle: {
+    borderWidth: 1,
     color: 'white',
     fontSize: normalize(11),
     fontWeight: '700',
@@ -116,37 +129,33 @@ const styles = StyleSheet.create({
     marginRight: '-10%',
   },
   avatar: {
+    borderWidth: 1,
+    borderRadius: 100 / 2,
+    overflow: 'hidden',
     marginLeft: '4%',
     marginRight: '-1%',
     flex: 0.45,
     aspectRatio: 1,
   },
-  inviteButton: {
-    backgroundColor: 'transparent',
-  },
-  imageRectangle: {
-    backgroundColor: 'black',
-    borderWidth: 2,
-    borderRadius: 2,
-  },
   imageX: {
+    borderWidth: 1,
     width: normalize(15),
     height: normalize(15),
-    marginRight: '-15%',
   },
-  pendingButtonTitle: {
-    color: 'white',
+  imageTip: {
+    borderWidth: 1,
+    bottom: -5,
+    width: normalize(15),
+    height: normalize(15),
   },
   button: {
+    borderWidth: 1,
     paddingTop: 3,
     paddingBottom: 3,
-    // justifyContent: 'space-evenly',
-    alignSelf: 'flex-start',
+    justifyContent: 'space-evenly',
     alignItems: 'center',
-    borderWidth: 1.5,
     borderRadius: 20,
     flexDirection: 'row',
-    flexWrap: 'wrap',
     backgroundColor: 'rgba(0, 0, 0, 0.8)',
   },
 });