[TMA-447] Natural Transitions (#145)

* edit profile text now is back to black

* changed default style to card and added custom modal transitions

* resolved linter error

8 files changed, 58 insertions, 39 deletions

diff --git a/src/components/common/GenericMoreInfoDrawer.tsx b/src/components/common/GenericMoreInfoDrawer.tsx
index 3607ef8f..098482ae 100644
--- a/src/components/common/GenericMoreInfoDrawer.tsx
+++ b/src/components/common/GenericMoreInfoDrawer.tsx
@@ -20,12 +20,13 @@ interface GenericMoreInfoDrawerProps extends ViewProps {
   isOpen: boolean;
   setIsOpen: (visible: boolean) => void;
   showIcons: boolean;
+  textColor: string;
   // An array of title, onPressHandler, and icon component
   buttons: [string, OnPressHandler, JSX.Element?][];
 }
 
 const GenericMoreInfoDrawer: React.FC<GenericMoreInfoDrawerProps> = (props) => {
-  const {buttons, showIcons} = props;
+  const {buttons, showIcons, textColor} = props;
   // each button is 80px high, cancel button is always there
   const initialSnapPosition =
     (buttons.length + 1) * 80 + useSafeAreaInsets().bottom;
@@ -47,7 +48,9 @@ const GenericMoreInfoDrawer: React.FC<GenericMoreInfoDrawerProps> = (props) => {
           <View key={index}>
             <TouchableOpacity style={panelButtonStyle} onPress={action}>
               {showIcons && <View style={styles.icon}>{icon}</View>}
-              <Text style={styles.panelButtonTitle}>{title}</Text>
+              <Text style={[styles.panelButtonTitle, {color: textColor}]}>
+                {title}
+              </Text>
             </TouchableOpacity>
             <View style={styles.divider} />
           </View>
@@ -74,7 +77,6 @@ const styles = StyleSheet.create({
   panelButtonTitle: {
     fontSize: 18,
     fontWeight: 'bold',
-    color: 'red',
   },
   icon: {
     height: 25,
diff --git a/src/components/profile/MomentMoreInfoDrawer.tsx b/src/components/profile/MomentMoreInfoDrawer.tsx
index 91fb3d2b..e127e05c 100644
--- a/src/components/profile/MomentMoreInfoDrawer.tsx
+++ b/src/components/profile/MomentMoreInfoDrawer.tsx
@@ -77,12 +77,14 @@ const MomentMoreInfoDrawer: React.FC<MomentMoreInfoDrawerProps> = (props) => {
         <GenericMoreInfoDrawer
           {...props}
           showIcons={false}
+          textColor={'red'}
           buttons={[['Delete Moment', handleDeleteMoment]]}
         />
       ) : (
         <GenericMoreInfoDrawer
           {...props}
           showIcons={false}
+          textColor={'red'}
           buttons={[['Report an Issue', handleReportMoment]]}
         />
       )}
diff --git a/src/components/profile/ProfileMoreInfoDrawer.tsx b/src/components/profile/ProfileMoreInfoDrawer.tsx
index 4fe24128..80ad9bba 100644
--- a/src/components/profile/ProfileMoreInfoDrawer.tsx
+++ b/src/components/profile/ProfileMoreInfoDrawer.tsx
@@ -41,6 +41,7 @@ const ProfileMoreInfoDrawer: React.FC<ProfileMoreInfoDrawerProps> = (props) => {
       <GenericMoreInfoDrawer
         {...props}
         showIcons={true}
+        textColor={'black'}
         buttons={[
           ['Edit Profile', goToEditProfile, <PersonOutline color="black" />],
         ]}
diff --git a/src/routes/profile/ProfileStack.tsx b/src/routes/profile/ProfileStackNavigator.tsx
index bc0a9560..bc0a9560 100644
--- a/src/routes/profile/ProfileStack.tsx
+++ b/src/routes/profile/ProfileStackNavigator.tsx
diff --git a/src/routes/profile/Profile.tsx b/src/routes/profile/ProfileStackScreen.tsx
index 4c93b1ee..4fc9f0c7 100644
--- a/src/routes/profile/Profile.tsx
+++ b/src/routes/profile/ProfileStackScreen.tsx
@@ -10,9 +10,11 @@ import {
   EditProfile,
   CategorySelection,
 } from '../../screens';
-import {ProfileStack, ProfileStackParams} from './ProfileStack';
+import {ProfileStack, ProfileStackParams} from './ProfileStackNavigator';
 import {RouteProp} from '@react-navigation/native';
 import {ScreenType} from '../../types';
+import {AvatarHeaderHeight} from '../../utils';
+import {StackNavigationOptions} from '@react-navigation/stack';
 
 /**
  * Trying to explain the purpose of each route on the stack (ACTUALLY A STACK)
@@ -31,42 +33,51 @@ interface ProfileStackProps {
   route: ProfileStackRouteProps;
 }
 
-const Profile: React.FC<ProfileStackProps> = ({route}) => {
+const ProfileStackScreen: React.FC<ProfileStackProps> = ({route}) => {
   const {screenType} = route.params;
 
-  /**
-   * This parameter isProfileStack acts as a switch between Search and Profile Stacks
-   */
   const isProfileStack = screenType === ScreenType.Profile;
+
+  const modalStyle: StackNavigationOptions = {
+    cardStyle: {backgroundColor: 'transparent'},
+    gestureDirection: 'vertical',
+    cardOverlayEnabled: true,
+    cardStyleInterpolator: ({current: {progress}}) => ({
+      cardStyle: {
+        opacity: progress.interpolate({
+          inputRange: [0, 0.5, 0.9, 1],
+          outputRange: [0, 0.25, 0.7, 1],
+        }),
+      },
+      overlayStyle: {
+        backgroundColor: '#505050',
+        opacity: progress.interpolate({
+          inputRange: [0, 1],
+          outputRange: [0, 0.9],
+          extrapolate: 'clamp',
+        }),
+      },
+    }),
+  };
+
   return (
     <ProfileStack.Navigator
       screenOptions={{
         headerShown: false,
-        cardStyle: {backgroundColor: 'white'},
-        cardOverlayEnabled: true,
-        cardStyleInterpolator: ({current: {progress}}) => ({
-          cardStyle: {
-            opacity: progress.interpolate({
-              inputRange: [0, 0.5, 0.9, 1],
-              outputRange: [0, 0.25, 0.7, 1],
-            }),
-          },
-          overlayStyle: {
-            backgroundColor: '#505050',
-            opacity: progress.interpolate({
-              inputRange: [0, 1],
-              outputRange: [0, 0.9],
-              extrapolate: 'clamp',
-            }),
-          },
-        }),
       }}
-      mode="modal"
+      mode="card"
       initialRouteName={isProfileStack ? 'Profile' : 'Search'}>
       <ProfileStack.Screen
         name="Profile"
         component={ProfileScreen}
-        options={{headerShown: false}}
+        options={{
+          headerShown: true,
+          headerTransparent: true,
+          headerBackTitleVisible: false,
+          headerTitle: '',
+          headerTintColor: 'white',
+          headerStyle: {height: AvatarHeaderHeight},
+        }}
         initialParams={{
           screenType,
         }}
@@ -87,7 +98,9 @@ const Profile: React.FC<ProfileStackProps> = ({route}) => {
           headerShown: true,
           headerTransparent: true,
           headerBackTitleVisible: false,
+          headerTitle: '',
           headerTintColor: 'white',
+          headerStyle: {height: AvatarHeaderHeight},
         }}
         initialParams={{screenType}}
       />
@@ -103,7 +116,11 @@ const Profile: React.FC<ProfileStackProps> = ({route}) => {
         }}
       />
       {isProfileStack ? (
-        <ProfileStack.Screen name="CaptionScreen" component={CaptionScreen} />
+        <ProfileStack.Screen
+          name="CaptionScreen"
+          component={CaptionScreen}
+          options={{...modalStyle, gestureEnabled: false}}
+        />
       ) : (
         <React.Fragment />
       )}
@@ -111,8 +128,7 @@ const Profile: React.FC<ProfileStackProps> = ({route}) => {
         name="IndividualMoment"
         component={IndividualMoment}
         options={{
-          headerShown: false,
-          cardStyle: {backgroundColor: 'transparent'},
+          ...modalStyle,
         }}
         initialParams={{screenType}}
       />
@@ -120,8 +136,7 @@ const Profile: React.FC<ProfileStackProps> = ({route}) => {
         name="MomentCommentsScreen"
         component={MomentCommentsScreen}
         options={{
-          headerShown: false,
-          cardStyle: {backgroundColor: 'transparent'},
+          ...modalStyle,
         }}
         initialParams={{screenType}}
       />
@@ -129,7 +144,7 @@ const Profile: React.FC<ProfileStackProps> = ({route}) => {
         name="FollowersListScreen"
         component={FollowersListScreen}
         options={{
-          cardStyle: {backgroundColor: 'transparent'},
+          ...modalStyle,
         }}
         initialParams={{screenType}}
       />
@@ -148,4 +163,4 @@ const Profile: React.FC<ProfileStackProps> = ({route}) => {
   );
 };
 
-export default Profile;
+export default ProfileStackScreen;
diff --git a/src/routes/profile/index.ts b/src/routes/profile/index.ts
index eed5c6b4..05a6b24a 100644
--- a/src/routes/profile/index.ts
+++ b/src/routes/profile/index.ts
@@ -1,2 +1,2 @@
-export * from './ProfileStack';
-export * from './Profile';
+export * from './ProfileStackNavigator';
+export * from './ProfileStackScreen';
diff --git a/src/routes/tabs/NavigationBar.tsx b/src/routes/tabs/NavigationBar.tsx
index e6c30134..f3043696 100644
--- a/src/routes/tabs/NavigationBar.tsx
+++ b/src/routes/tabs/NavigationBar.tsx
@@ -2,7 +2,7 @@ import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
 import React, {Fragment} from 'react';
 import {NavigationIcon} from '../../components';
 import {ScreenType} from '../../types';
-import Profile from '../profile/Profile';
+import Profile from '../profile/ProfileStackScreen';
 
 const Tabs = createBottomTabNavigator();
 
diff --git a/src/screens/profile/SocialMediaTaggs.tsx b/src/screens/profile/SocialMediaTaggs.tsx
index b058e38d..81d271d1 100644
--- a/src/screens/profile/SocialMediaTaggs.tsx
+++ b/src/screens/profile/SocialMediaTaggs.tsx
@@ -70,7 +70,6 @@ const SocialMediaTaggs: React.FC<SocialMediaTaggsProps> = ({
       headerTitle: () => {
         return <AvatarTitle avatar={avatar} />;
       },
-      headerStyle: {height: AvatarHeaderHeight},
     });
   }, [avatar, navigation]);