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/common/Avatar.tsx       |  29 +++++----
 src/components/profile/TaggAvatar.tsx  |   4 +-
 src/components/taggs/TaggDraggable.tsx | 113 +++++++++++++--------------------
 3 files changed, 60 insertions(+), 86 deletions(-)

(limited to 'src')

diff --git a/src/components/common/Avatar.tsx b/src/components/common/Avatar.tsx
index 86ebedf3..46a3814c 100644
--- a/src/components/common/Avatar.tsx
+++ b/src/components/common/Avatar.tsx
@@ -4,27 +4,28 @@ import {Image, ImageStyle, StyleProp, ImageBackground} from 'react-native';
 type AvatarProps = {
   style: StyleProp<ImageStyle>;
   uri: string | undefined;
-  loading: boolean;
-  loadingStyle: StyleProp<ImageStyle> | undefined;
+  // loading: boolean;
+  // loadingStyle: StyleProp<ImageStyle> | undefined;
 };
 const Avatar: FC<AvatarProps> = ({
   style,
   uri,
-  loading = false,
-  loadingStyle,
+  // loading = false,
+  // loadingStyle,
 }) => {
   return (
-    <ImageBackground
-      style={style}
+    // <ImageBackground
+    //   style={style}
+    //   defaultSource={require('../../assets/images/avatar-placeholder.png')}
+    //   source={{uri, cache: 'reload'}}>
+    //   {loading && (
+    <Image
       defaultSource={require('../../assets/images/avatar-placeholder.png')}
-      source={{uri, cache: 'reload'}}>
-      {loading && (
-        <Image
-          source={require('../../assets/gifs/loading-animation.gif')}
-          style={loadingStyle}
-        />
-      )}
-    </ImageBackground>
+      source={{uri, cache: 'reload'}}
+      style={style}
+    />
+    //   )}
+    // </ImageBackground>
   );
 };
 
diff --git a/src/components/profile/TaggAvatar.tsx b/src/components/profile/TaggAvatar.tsx
index 8cd52a2f..7b0f0d6f 100644
--- a/src/components/profile/TaggAvatar.tsx
+++ b/src/components/profile/TaggAvatar.tsx
@@ -79,8 +79,8 @@ const TaggAvatar: React.FC<TaggAvatarProps> = ({
       <Avatar
         style={[styles.image, style]}
         uri={avatar}
-        loading={loading}
-        loadingStyle={styles.loadingLarge}
+        // loading={loading}
+        // loadingStyle={styles.loadingLarge}
       />
       {editable &&
         !validImage &&
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