[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

3 files changed, 8 insertions, 3 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" />],
         ]}