From 3fd9c10aadb874a0fd0c0c206c8a4a9d83e939a0 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Thu, 20 May 2021 16:19:04 -0400
Subject: Remove loading style, Clean up styling

---
 src/components/taggs/TaggDraggable.tsx | 113 +++++++++++++--------------------
 1 file changed, 43 insertions(+), 70 deletions(-)

(limited to 'src/components/taggs')

diff --git a/src/components/taggs/TaggDraggable.tsx b/src/components/taggs/TaggDraggable.tsx
index bb9949e4..e31f69c2 100644
--- a/src/components/taggs/TaggDraggable.tsx
+++ b/src/components/taggs/TaggDraggable.tsx
@@ -8,12 +8,12 @@ import {
   TouchableWithoutFeedback,
   View,
 } from 'react-native';
+import {useDispatch, useSelector} from 'react-redux';
+import {RootState} from 'src/store/rootReducer';
+import Avatar from '../../components/common/Avatar';
 import {ProfilePreviewType, ScreenType, UserType} from '../../types';
 import {normalize} from '../../utils';
-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: ProfilePreviewType;
@@ -27,14 +27,6 @@ const TaggDraggable: React.FC<TaggDraggableProps> = (
 ) => {
   const navigation = useNavigation();
 
-  const gotoTaggedProfile = (userID: string) => {
-    //Since the logged In User is navigating to own profile, useXId is not required
-    navigation.navigate('Profile', {
-      ScreenType,
-      userXId: userID,
-    });
-  };
-
   const {taggedUser, editingView, deleteFromList, setStart} = props;
   const state = useSelector((rs: RootState) => rs);
 
@@ -62,56 +54,50 @@ const TaggDraggable: React.FC<TaggDraggableProps> = (
 
   return (
     <TouchableWithoutFeedback>
-      <View
-        style={{
-          height: 55,
-          flexDirection: 'column',
-          alignItems: 'center',
-          borderWidth: 1,
-        }}>
+      <View style={styles.container}>
         <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>
+        <TouchableOpacity
+          onPressIn={() =>
+            navigateToProfile(
+              state,
+              dispatch,
+              navigation,
+              ScreenType.Profile,
+              user,
+            )
+          }
+          disabled={editingView}
+          style={styles.content}
+          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()}
+              style={styles.imageX}>
+              <Image style={styles.imageX} source={uriX} />
+            </TouchableOpacity>
+          )}
+        </TouchableOpacity>
       </View>
     </TouchableWithoutFeedback>
   );
 };
 
 const styles = StyleSheet.create({
+  imageTip: {
+    height: normalize(12),
+    aspectRatio: 12 / 8,
+  },
   container: {
-    borderWidth: 1,
-    flexDirection: 'row',
+    flexDirection: 'column',
     alignItems: 'center',
-    justifyContent: 'space-between',
+    justifyContent: 'center',
   },
   buttonTitle: {
-    borderWidth: 1,
     color: 'white',
     fontSize: normalize(11),
     fontWeight: '700',
@@ -126,36 +112,23 @@ const styles = StyleSheet.create({
     lineHeight: normalize(13.13),
     letterSpacing: normalize(0.6),
     paddingHorizontal: '1%',
-    marginRight: '-10%',
   },
   avatar: {
-    borderWidth: 1,
-    borderRadius: 100 / 2,
-    overflow: 'hidden',
-    marginLeft: '4%',
-    marginRight: '-1%',
-    flex: 0.45,
-    aspectRatio: 1,
+    height: normalize(20),
+    width: normalize(20),
+    borderRadius: normalize(20) / 2,
   },
   imageX: {
-    borderWidth: 1,
     width: normalize(15),
     height: normalize(15),
   },
-  imageTip: {
-    borderWidth: 1,
-    bottom: -5,
-    width: normalize(15),
-    height: normalize(15),
-  },
-  button: {
-    borderWidth: 1,
-    paddingTop: 3,
-    paddingBottom: 3,
+  content: {
     justifyContent: 'space-evenly',
     alignItems: 'center',
-    borderRadius: 20,
     flexDirection: 'row',
+    borderRadius: 20,
+    paddingVertical: normalize(5),
+    paddingHorizontal: normalize(8),
     backgroundColor: 'rgba(0, 0, 0, 0.8)',
   },
 });
-- 
cgit v1.2.3-70-g09d2