diff options
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/common/AvatarTitle.tsx | 45 | ||||
-rw-r--r-- | src/components/profile/FollowUnfollow.tsx | 2 | ||||
-rw-r--r-- | src/components/profile/ProfileHeader.tsx | 12 | ||||
-rw-r--r-- | src/components/profile/ProfilePreview.tsx | 2 |
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; |