aboutsummaryrefslogtreecommitdiff
path: root/src/components/profile
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/profile')
-rw-r--r--src/components/profile/MoreInfoDrawer.tsx88
-rw-r--r--src/components/profile/ProfileBody.tsx4
-rw-r--r--src/components/profile/ProfileHeader.tsx39
-rw-r--r--src/components/profile/ToggleButton.tsx5
-rw-r--r--src/components/profile/index.ts5
5 files changed, 128 insertions, 13 deletions
diff --git a/src/components/profile/MoreInfoDrawer.tsx b/src/components/profile/MoreInfoDrawer.tsx
new file mode 100644
index 00000000..719c1894
--- /dev/null
+++ b/src/components/profile/MoreInfoDrawer.tsx
@@ -0,0 +1,88 @@
+import {useNavigation} from '@react-navigation/native';
+import React, {useContext} from 'react';
+import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
+import {TAGG_TEXT_LIGHT_BLUE} from '../../constants';
+import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import {AuthContext} from '../../routes';
+import {BottomDrawer} from '../common';
+import PersonOutline from '../../assets/ionicons/person-outline.svg';
+
+interface MoreInfoDrawerProps {
+ isOpen: boolean;
+ setIsOpen: (visible: boolean) => void;
+ isProfileView: boolean;
+}
+
+const MoreInfoDrawer: React.FC<MoreInfoDrawerProps> = (props) => {
+ const insets = useSafeAreaInsets();
+ const initialSnapPosition = 160 + insets.bottom;
+ const navigation = useNavigation();
+ const {
+ user: {userId, username},
+ } = useContext(AuthContext);
+
+ const goToEditProfile = () => {
+ navigation.push('EditProfile', {
+ userId: userId,
+ username: username,
+ });
+ props.setIsOpen(false);
+ };
+
+ return (
+ <BottomDrawer
+ {...props}
+ showHeader={false}
+ initialSnapPosition={initialSnapPosition}>
+ <View style={styles.panel}>
+ <TouchableOpacity style={styles.panelButton} onPress={goToEditProfile}>
+ <PersonOutline style={styles.icon} />
+ <Text style={styles.panelButtonTitle}>Edit Profile</Text>
+ </TouchableOpacity>
+ <View style={styles.divider} />
+ <TouchableOpacity
+ style={styles.panelButton}
+ onPress={() => props.setIsOpen(false)}>
+ {/* Just a placeholder "icon" for easier alignment */}
+ <View style={styles.icon} />
+ <Text style={styles.panelButtonTitleCancel}>Cancel</Text>
+ </TouchableOpacity>
+ </View>
+ </BottomDrawer>
+ );
+};
+
+const styles = StyleSheet.create({
+ panel: {
+ height: SCREEN_HEIGHT,
+ backgroundColor: 'white',
+ borderTopLeftRadius: 20,
+ borderTopRightRadius: 20,
+ },
+ panelButton: {
+ height: 80,
+ flexDirection: 'row',
+ alignItems: 'center',
+ },
+ panelButtonTitle: {
+ fontSize: 18,
+ fontWeight: 'bold',
+ color: 'black',
+ },
+ icon: {
+ height: 25,
+ width: 25,
+ color: 'black',
+ marginLeft: SCREEN_WIDTH * 0.3,
+ marginRight: 25,
+ },
+ panelButtonTitleCancel: {
+ fontSize: 18,
+ fontWeight: 'bold',
+ color: TAGG_TEXT_LIGHT_BLUE,
+ },
+ divider: {height: 1, borderWidth: 1, borderColor: '#e7e7e7'},
+});
+
+export default MoreInfoDrawer;
diff --git a/src/components/profile/ProfileBody.tsx b/src/components/profile/ProfileBody.tsx
index db8c6e0b..c0253533 100644
--- a/src/components/profile/ProfileBody.tsx
+++ b/src/components/profile/ProfileBody.tsx
@@ -1,6 +1,6 @@
import React from 'react';
import {StyleSheet, View, Text, LayoutChangeEvent} from 'react-native';
-import {TOGGLE_BUTTON_TYPE} from '../../constants';
+import {TAGG_DARK_BLUE, TOGGLE_BUTTON_TYPE} from '../../constants';
import {AuthContext, ProfileContext} from '../../routes/';
import ToggleButton from './ToggleButton';
@@ -80,7 +80,7 @@ const styles = StyleSheet.create({
},
website: {
fontSize: 16,
- color: '#4E699C',
+ color: TAGG_DARK_BLUE,
marginBottom: 5,
},
});
diff --git a/src/components/profile/ProfileHeader.tsx b/src/components/profile/ProfileHeader.tsx
index 6f11e806..62949746 100644
--- a/src/components/profile/ProfileHeader.tsx
+++ b/src/components/profile/ProfileHeader.tsx
@@ -1,10 +1,12 @@
-import React from 'react';
-
+import React, {useState} from 'react';
+import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import MoreIcon from '../../assets/icons/more_horiz-24px.svg';
+import {TAGG_DARK_BLUE} from '../../constants';
+import {AuthContext, ProfileContext} from '../../routes/';
+import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
import Avatar from './Avatar';
+import MoreInfoDrawer from './MoreInfoDrawer';
import FollowCount from './FollowCount';
-import {View, Text, StyleSheet} from 'react-native';
-import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
-import {AuthContext, ProfileContext} from '../../routes/';
type ProfileHeaderProps = {
isProfileView: boolean;
@@ -22,8 +24,26 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({
} = isProfileView
? React.useContext(ProfileContext)
: React.useContext(AuthContext);
+ const [drawerVisible, setDrawerVisible] = useState(false);
+
return (
<View style={styles.container}>
+ {!isProfileView && (
+ <>
+ <TouchableOpacity
+ style={styles.more}
+ onPress={() => {
+ setDrawerVisible(true);
+ }}>
+ <MoreIcon height={30} width={30} color={TAGG_DARK_BLUE} />
+ </TouchableOpacity>
+ <MoreInfoDrawer
+ isOpen={drawerVisible}
+ setIsOpen={setDrawerVisible}
+ isProfileView={isProfileView}
+ />
+ </>
+ )}
<View style={styles.row}>
<Avatar style={styles.avatar} isProfileView={isProfileView} />
<View style={styles.header}>
@@ -51,8 +71,7 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({
const styles = StyleSheet.create({
container: {
top: SCREEN_HEIGHT / 2.4,
- paddingHorizontal: SCREEN_WIDTH / 20,
- marginBottom: SCREEN_HEIGHT / 10,
+ width: '100%',
position: 'absolute',
},
row: {
@@ -76,6 +95,12 @@ const styles = StyleSheet.create({
follows: {
marginHorizontal: SCREEN_HEIGHT / 50,
},
+ more: {
+ position: 'absolute',
+ right: '5%',
+ marginTop: '4%',
+ zIndex: 1,
+ },
});
export default ProfileHeader;
diff --git a/src/components/profile/ToggleButton.tsx b/src/components/profile/ToggleButton.tsx
index ff14cdde..4c8cb5b9 100644
--- a/src/components/profile/ToggleButton.tsx
+++ b/src/components/profile/ToggleButton.tsx
@@ -1,6 +1,7 @@
import * as React from 'react';
import {StyleSheet, Text} from 'react-native';
import {TouchableOpacity} from 'react-native-gesture-handler';
+import { TAGG_TEXT_LIGHT_BLUE } from '../../constants';
import {getToggleButtonText, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
type ToggleButtonProps = {
@@ -31,14 +32,14 @@ const styles = StyleSheet.create({
height: SCREEN_WIDTH * 0.1,
borderRadius: 8,
marginTop: '3%',
- borderColor: '#698dd3',
+ borderColor: TAGG_TEXT_LIGHT_BLUE,
backgroundColor: 'white',
borderWidth: 3,
marginHorizontal: '1%',
},
text: {
fontWeight: 'bold',
- color: '#698dd3',
+ color: TAGG_TEXT_LIGHT_BLUE,
},
});
export default ToggleButton;
diff --git a/src/components/profile/index.ts b/src/components/profile/index.ts
index 2e9c23ea..0f57347b 100644
--- a/src/components/profile/index.ts
+++ b/src/components/profile/index.ts
@@ -3,5 +3,6 @@ export {default as Content} from './Content';
export {default as ProfileCutout} from './ProfileCutout';
export {default as ProfileBody} from './ProfileBody';
export {default as ProfileHeader} from './ProfileHeader';
-export {default as ProfilePreview} from '../profile/ProfilePreview';
-export {default as Followers} from '../profile/Followers';
+export {default as ProfilePreview} from './ProfilePreview';
+export {default as Followers} from './Followers';
+export {default as MoreInfoDrawer} from './MoreInfoDrawer';
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-17 14:37:01 +0000