aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/common/AvatarTitle.tsx45
-rw-r--r--src/components/profile/FollowUnfollow.tsx2
-rw-r--r--src/components/profile/ProfileHeader.tsx12
-rw-r--r--src/components/profile/ProfilePreview.tsx2
4 files changed, 36 insertions, 25 deletions
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;