aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/components/moments/Moment.tsx12
-rw-r--r--src/components/moments/MomentTile.tsx1
-rw-r--r--src/components/profile/ProfileBody.tsx27
-rw-r--r--src/components/profile/ProfileHeader.tsx1
-rw-r--r--src/components/profile/ToggleButton.tsx3
-rw-r--r--src/components/taggs/Tagg.tsx28
-rw-r--r--src/components/taggs/TaggsBar.tsx69
-rw-r--r--src/constants/constants.ts8
8 files changed, 68 insertions, 81 deletions
diff --git a/src/components/moments/Moment.tsx b/src/components/moments/Moment.tsx
index 0c8febcf..e928f7e0 100644
--- a/src/components/moments/Moment.tsx
+++ b/src/components/moments/Moment.tsx
@@ -80,7 +80,7 @@ const Moment: React.FC<MomentProps> = ({
<LinearGradient
colors={['rgba(105, 141, 211, 1)', 'rgba(105, 141, 211, 0.3)']}>
<View style={styles.defaultImage}>
- <BigPlusIcon width={50} height={50} />
+ <BigPlusIcon width={24} height={24} />
<Text style={styles.defaultImageText}>
Add a moment of your {title.toLowerCase()}!
</Text>
@@ -101,7 +101,7 @@ const styles = StyleSheet.create({
},
header: {
flex: 1,
- paddingHorizontal: 10,
+ paddingLeft: '3%',
padding: 5,
paddingTop: 20,
backgroundColor: 'white',
@@ -115,7 +115,7 @@ const styles = StyleSheet.create({
color: TAGG_TEXT_LIGHT_BLUE,
},
scrollContainer: {
- height: SCREEN_WIDTH / 2,
+ height: SCREEN_WIDTH / 3.25,
backgroundColor: '#eee',
},
defaultImage: {
@@ -126,11 +126,11 @@ const styles = StyleSheet.create({
flexDirection: 'column',
},
defaultImageText: {
- fontSize: 20,
- paddingTop: 20,
+ fontSize: 14,
+ paddingTop: 10,
color: 'white',
fontWeight: 'bold',
- width: '75%',
+ width: '80%',
textAlign: 'center',
},
});
diff --git a/src/components/moments/MomentTile.tsx b/src/components/moments/MomentTile.tsx
index cc24c531..05ccfa15 100644
--- a/src/components/moments/MomentTile.tsx
+++ b/src/components/moments/MomentTile.tsx
@@ -39,6 +39,7 @@ const styles = StyleSheet.create({
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'column',
+ marginRight: 5,
},
});
export default MomentTile;
diff --git a/src/components/profile/ProfileBody.tsx b/src/components/profile/ProfileBody.tsx
index dbaf78c9..57800578 100644
--- a/src/components/profile/ProfileBody.tsx
+++ b/src/components/profile/ProfileBody.tsx
@@ -33,20 +33,19 @@ const ProfileBody: React.FC<ProfileBodyProps> = ({
} = userXId
? useSelector((state: RootState) => state.userX[screenType][userXId])
: useSelector((state: RootState) => state.user);
-
+
const {biography, website} = profile;
-
return (
<View onLayout={onLayout} style={styles.container}>
<Text style={styles.username}>{`@${username}`}</Text>
- <Text style={styles.biography}>{`${biography}`}</Text>
- <Text
- style={styles.website}
- onPress={() => {
+ {biography.length > 0 && (
+ <Text style={styles.biography}>{`${biography}`}</Text>
+ )}
+ {website.length > 0 && <Text style={styles.website} onPress={() => {
Linking.openURL(
website.startsWith('http') ? website : 'http://' + website,
);
- }}>{`${website}`}</Text>
+ }}>{`${website}`}</Text>}
{userXId && !isOwnProfile ? (
<View style={styles.toggleButtonContainer}>
{!isBlocked && (
@@ -73,26 +72,26 @@ const styles = StyleSheet.create({
toggleButtonContainer: {
flexDirection: 'row',
flex: 1,
+ paddingVertical: '1%',
},
container: {
- paddingVertical: 5,
- paddingHorizontal: 20,
+ paddingVertical: '1%',
+ paddingHorizontal: 18,
backgroundColor: 'white',
},
username: {
fontWeight: '600',
- fontSize: 16,
- marginBottom: 5,
+ fontSize: 16.5,
+ marginBottom: '1%',
},
biography: {
fontSize: 16,
- lineHeight: 22,
- marginBottom: 5,
+ marginBottom: '0.5%',
},
website: {
fontSize: 16,
color: TAGG_DARK_BLUE,
- marginBottom: 5,
+ marginBottom: '1%',
},
});
diff --git a/src/components/profile/ProfileHeader.tsx b/src/components/profile/ProfileHeader.tsx
index 677728d2..b622510e 100644
--- a/src/components/profile/ProfileHeader.tsx
+++ b/src/components/profile/ProfileHeader.tsx
@@ -74,6 +74,7 @@ const styles = StyleSheet.create({
},
avatar: {
bottom: SCREEN_HEIGHT / 80,
+ left: '10%',
},
name: {
fontSize: 20,
diff --git a/src/components/profile/ToggleButton.tsx b/src/components/profile/ToggleButton.tsx
index 4c8cb5b9..88eb9f8a 100644
--- a/src/components/profile/ToggleButton.tsx
+++ b/src/components/profile/ToggleButton.tsx
@@ -31,11 +31,10 @@ const styles = StyleSheet.create({
width: SCREEN_WIDTH * 0.25,
height: SCREEN_WIDTH * 0.1,
borderRadius: 8,
- marginTop: '3%',
borderColor: TAGG_TEXT_LIGHT_BLUE,
backgroundColor: 'white',
borderWidth: 3,
- marginHorizontal: '1%',
+ marginRight: '2%',
},
text: {
fontWeight: 'bold',
diff --git a/src/components/taggs/Tagg.tsx b/src/components/taggs/Tagg.tsx
index 8158cbac..4c8f8226 100644
--- a/src/components/taggs/Tagg.tsx
+++ b/src/components/taggs/Tagg.tsx
@@ -8,7 +8,6 @@ import Ring from '../../assets/icons/ring.svg';
import {
INTEGRATED_SOCIAL_LIST,
SOCIAL_ICON_SIZE_ADJUSTMENT,
- TAGG_ICON_DIM,
TAGG_RING_DIM,
} from '../../constants';
import {
@@ -17,9 +16,7 @@ import {
registerNonIntegratedSocialLink,
} from '../../services';
import {SmallSocialIcon, SocialIcon, SocialLinkModal} from '../common';
-import {useSelector} from 'react-redux';
-import {RootState} from '../../store/rootreducer';
-import {ScreenType} from '../../types';
+import {UserType} from '../../types';
interface TaggProps {
social: string;
@@ -28,7 +25,7 @@ interface TaggProps {
setTaggsNeedUpdate: (_: boolean) => void;
setSocialDataNeedUpdate: (social: string, username: string) => void;
userXId: string;
- screenType: ScreenType;
+ user: UserType;
}
const Tagg: React.FC<TaggProps> = ({
@@ -38,14 +35,12 @@ const Tagg: React.FC<TaggProps> = ({
setTaggsNeedUpdate,
setSocialDataNeedUpdate,
userXId,
- screenType,
+ user,
}) => {
const navigation = useNavigation();
const [modalVisible, setModalVisible] = useState(false);
const youMayPass = isLinked || userXId;
- const {user} = userXId
- ? useSelector((state: RootState) => state.userX[screenType][userXId])
- : useSelector((state: RootState) => state.user);
+
/*
case isProfileView:
case linked:
@@ -160,27 +155,28 @@ const Tagg: React.FC<TaggProps> = ({
const styles = StyleSheet.create({
container: {
- justifyContent: 'center',
+ justifyContent: 'space-between',
alignItems: 'center',
marginHorizontal: 15,
+ height: 90,
},
iconTap: {
justifyContent: 'center',
alignItems: 'center',
},
icon: {
- width: TAGG_ICON_DIM,
- height: TAGG_ICON_DIM,
- borderRadius: TAGG_ICON_DIM / 2,
+ width: '77%',
+ height: '77%',
+ borderRadius: 30,
position: 'absolute',
},
smallIconContainer: {
- height: 35,
- width: 35,
+ height: 20,
+ width: 20,
position: 'absolute',
justifyContent: 'center',
alignItems: 'center',
- bottom: -35,
+ bottom: 0,
},
smallIcon: {
borderRadius: 1000,
diff --git a/src/components/taggs/TaggsBar.tsx b/src/components/taggs/TaggsBar.tsx
index 082743d0..68061e03 100644
--- a/src/components/taggs/TaggsBar.tsx
+++ b/src/components/taggs/TaggsBar.tsx
@@ -1,4 +1,4 @@
-import React, {useEffect, useState, useContext} from 'react';
+import React, {useEffect, useState} from 'react';
import {StyleSheet} from 'react-native';
import Animated from 'react-native-reanimated';
import {useDispatch, useSelector} from 'react-redux';
@@ -8,7 +8,6 @@ import {
SOCIAL_LIST,
} from '../../constants';
import {getLinkedSocials} from '../../services';
-import {StatusBarHeight} from '../../utils';
import Tagg from './Tagg';
import {RootState} from '../../store/rootReducer';
import {ScreenType} from '../../types';
@@ -67,7 +66,7 @@ const TaggsBar: React.FC<TaggsBarProps> = ({
key={i}
social={social}
userXId={userXId}
- screenType={screenType}
+ user={user}
isLinked={true}
isIntegrated={INTEGRATED_SOCIAL_LIST.indexOf(social) !== -1}
setTaggsNeedUpdate={setTaggsNeedUpdate}
@@ -76,27 +75,30 @@ const TaggsBar: React.FC<TaggsBarProps> = ({
);
i++;
}
- for (let social of unlinkedSocials) {
- new_taggs.push(
- <Tagg
- key={i}
- social={social}
- userXId={userXId}
- screenType={screenType}
- isLinked={false}
- isIntegrated={INTEGRATED_SOCIAL_LIST.indexOf(social) !== -1}
- setTaggsNeedUpdate={setTaggsNeedUpdate}
- setSocialDataNeedUpdate={handleSocialUpdate}
- />,
- );
- i++;
+ if (!userXId) {
+ for (let social of unlinkedSocials) {
+ new_taggs.push(
+ <Tagg
+ key={i}
+ social={social}
+ isLinked={false}
+ isIntegrated={INTEGRATED_SOCIAL_LIST.indexOf(social) !== -1}
+ setTaggsNeedUpdate={setTaggsNeedUpdate}
+ setSocialDataNeedUpdate={handleSocialUpdate}
+ userXId={userXId}
+ user={user}
+ />,
+ );
+ i++;
+ }
}
setTaggs(new_taggs);
setTaggsNeedUpdate(false);
});
};
-
- loadData();
+ if (user.userId) {
+ loadData();
+ }
}, [taggsNeedUpdate, user]);
const shadowOpacity: Animated.Node<number> = interpolate(y, {
@@ -107,34 +109,18 @@ const TaggsBar: React.FC<TaggsBarProps> = ({
outputRange: [0, 0.2],
extrapolate: Extrapolate.CLAMP,
});
- const paddingTop: Animated.Node<number> = interpolate(y, {
- inputRange: [
- 0,
- PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight - 30,
- PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight,
- ],
- outputRange: [20, 20, StatusBarHeight],
- extrapolate: Extrapolate.CLAMP,
- });
- const paddingBottom: Animated.Node<number> = interpolate(y, {
- inputRange: [
- 0,
- PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight - 30,
- PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight,
- ],
- outputRange: [30, 30, 15],
- extrapolate: Extrapolate.CLAMP,
- });
- return (
+
+ return taggs.length > 0 ? (
<View style={[styles.container, {shadowOpacity}]}>
<ScrollView
horizontal
showsHorizontalScrollIndicator={false}
- style={{paddingTop, paddingBottom}}
contentContainerStyle={styles.contentContainer}>
{taggs}
</ScrollView>
</View>
+ ) : (
+ <View style={{height: 0, backgroundColor: 'lightpink'}} />
);
};
@@ -145,10 +131,13 @@ const styles = StyleSheet.create({
shadowRadius: 10,
shadowOffset: {width: 0, height: 2},
zIndex: 1,
+ paddingBottom: 5,
+ paddingTop: 10,
},
contentContainer: {
alignItems: 'center',
- paddingHorizontal: 10,
+ paddingHorizontal: 5,
+ paddingBottom: 5,
},
});
diff --git a/src/constants/constants.ts b/src/constants/constants.ts
index 570018b2..c14068c1 100644
--- a/src/constants/constants.ts
+++ b/src/constants/constants.ts
@@ -1,9 +1,11 @@
-import {SCREEN_WIDTH, SCREEN_HEIGHT} from '../utils';
+import {SCREEN_WIDTH, SCREEN_HEIGHT, isIPhoneX} from '../utils';
export const CHIN_HEIGHT = 34;
export const PROFILE_CUTOUT_TOP_Y = SCREEN_HEIGHT / 2.3;
-export const PROFILE_CUTOUT_BOTTOM_Y = SCREEN_HEIGHT / 1.8;
+export const PROFILE_CUTOUT_BOTTOM_Y = isIPhoneX()
+ ? SCREEN_HEIGHT / 1.86
+ : SCREEN_HEIGHT / 1.76;
export const PROFILE_CUTOUT_CORNER_X = SCREEN_WIDTH / 2.9;
export const PROFILE_CUTOUT_CORNER_Y = SCREEN_HEIGHT / 1.95;
@@ -15,7 +17,7 @@ export const AVATAR_DIM = 44;
export const AVATAR_GRADIENT_DIM = 50;
export const TAGG_ICON_DIM = 58;
-export const TAGG_RING_DIM = 75;
+export const TAGG_RING_DIM = 65;
export const INTEGRATED_SOCIAL_LIST: string[] = [
'Instagram',
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 13:50:31 +0000