From 96c46ac20f062aaf814f02184ce8c05ffc860a15 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@thetaggid.com>
Date: Thu, 5 Nov 2020 22:13:49 -0500
Subject: [TMA-344] Tabs bar margin, Social Taggs margin (#108)

* fixed margin for smaller screen

* fixed header avatar

* cleaned up code, improved logic

* yarn lint

* dynamically calculate avatar and header

* changed back tint color and use 1% for tabs bar margin

* last edit to avatar size

Co-authored-by: Husam Salhab <47015061+hsalhab@users.noreply.github.com>
---
 src/components/common/AvatarTitle.tsx     | 45 ++++++++++++++++++-------------
 src/components/profile/FollowUnfollow.tsx |  2 +-
 src/components/profile/ProfileHeader.tsx  | 12 ++++++---
 src/components/profile/ProfilePreview.tsx |  2 +-
 4 files changed, 36 insertions(+), 25 deletions(-)

(limited to 'src/components')

diff --git a/src/components/common/AvatarTitle.tsx b/src/components/common/AvatarTitle.tsx
index e9998113..f3105f70 100644
--- a/src/components/common/AvatarTitle.tsx
+++ b/src/components/common/AvatarTitle.tsx
@@ -1,27 +1,26 @@
 import React from 'react';
-import {Image, StyleSheet} from 'react-native';
+import {Image, StyleSheet, View} from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
-import {AVATAR_DIM, AVATAR_GRADIENT_DIM, TAGGS_GRADIENT} from '../../constants';
+import {TAGGS_GRADIENT} from '../../constants';
 import {AuthContext, ProfileContext} from '../../routes/';
 
-/**
- * An image component that returns the <Image> of the icon for a specific social media platform.
- */
-
 type AvatarTitleProps = {
   isProfileView: boolean;
 };
+
 const AvatarTitle: React.FC<AvatarTitleProps> = ({isProfileView}) => {
   const {avatar} = isProfileView
     ? React.useContext(ProfileContext)
     : React.useContext(AuthContext);
   return (
-    <LinearGradient
-      colors={[TAGGS_GRADIENT.start, TAGGS_GRADIENT.end]}
-      useAngle={true}
-      angle={154.72}
-      angleCenter={{x: 0.5, y: 0.5}}
-      style={[styles.gradient]}>
+    <View style={[styles.container]}>
+      <LinearGradient
+        colors={[TAGGS_GRADIENT.start, TAGGS_GRADIENT.end]}
+        useAngle={true}
+        angle={154.72}
+        angleCenter={{x: 0.5, y: 0.5}}
+        style={styles.gradient}
+      />
       <Image
         style={styles.avatar}
         source={
@@ -30,22 +29,30 @@ const AvatarTitle: React.FC<AvatarTitleProps> = ({isProfileView}) => {
             : require('../../assets/images/avatar-placeholder.png')
         }
       />
-    </LinearGradient>
+    </View>
   );
 };
 
 const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    height: '100%',
+    aspectRatio: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
   gradient: {
-    width: AVATAR_GRADIENT_DIM,
-    height: AVATAR_GRADIENT_DIM,
-    borderRadius: AVATAR_GRADIENT_DIM / 2,
+    width: '82%',
+    height: '82%',
+    borderRadius: 1000,
     justifyContent: 'center',
     alignItems: 'center',
   },
   avatar: {
-    width: AVATAR_DIM,
-    height: AVATAR_DIM,
-    borderRadius: AVATAR_DIM / 2,
+    position: 'absolute',
+    width: '73%',
+    height: '73%',
+    borderRadius: 1000,
   },
 });
 
diff --git a/src/components/profile/FollowUnfollow.tsx b/src/components/profile/FollowUnfollow.tsx
index bb1e9ef7..fa224be3 100644
--- a/src/components/profile/FollowUnfollow.tsx
+++ b/src/components/profile/FollowUnfollow.tsx
@@ -15,7 +15,7 @@ const FollowUnfollow: React.FC<FollowUnfollowProps> = ({
     <TouchableOpacity
       style={styles.button}
       onPress={() => handleFollowUnfollow()}>
-      <Text style={styles.text}>{!followed ? `Follow` : `Unfollow`}</Text>
+      <Text style={styles.text}>{!followed ? 'Follow' : 'Unfollow'}</Text>
     </TouchableOpacity>
   );
 };
diff --git a/src/components/profile/ProfileHeader.tsx b/src/components/profile/ProfileHeader.tsx
index f3ef5dfa..0b56a787 100644
--- a/src/components/profile/ProfileHeader.tsx
+++ b/src/components/profile/ProfileHeader.tsx
@@ -5,15 +5,19 @@ import FollowCount from './FollowCount';
 import {View, Text, StyleSheet} from 'react-native';
 import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 import {AuthContext, ProfileContext} from '../../routes/';
-import { ProfilePreviewType } from 'src/types';
+import {ProfilePreviewType} from 'src/types';
 
 type ProfileHeaderProps = {
-  isProfileView: boolean,
-  numFollowing: number,
+  isProfileView: boolean;
+  numFollowing: number;
   numFollowers: number;
 };
 
-const ProfileHeader: React.FC<ProfileHeaderProps> = ({isProfileView, numFollowing, numFollowers}) => {
+const ProfileHeader: React.FC<ProfileHeaderProps> = ({
+  isProfileView,
+  numFollowing,
+  numFollowers,
+}) => {
   const {
     profile: {name},
   } = isProfileView
diff --git a/src/components/profile/ProfilePreview.tsx b/src/components/profile/ProfilePreview.tsx
index 6848f993..7bbc3fb6 100644
--- a/src/components/profile/ProfilePreview.tsx
+++ b/src/components/profile/ProfilePreview.tsx
@@ -149,7 +149,7 @@ const ProfilePreview: React.FC<ProfilePreviewProps> = ({
   };
 
   //With @ sign if on search screen.
-  const usernameToDisplay = !isComment ? `@` + username : username;
+  const usernameToDisplay = !isComment ? '@' + username : username;
   const usernameStyle = isComment
     ? styles.commentUsername
     : styles.searchUsername;
-- 
cgit v1.2.3-70-g09d2