Rename profile page to details page

src/ROUTES.js

@@ -18,7 +18,7 @@ export default {
     SEARCH: 'search',
     SIGNIN: 'signin',
     SET_PASSWORD_WITH_VALIDATE_CODE: 'setpassword/:validateCode',
-    PROFILE: 'profile',
-    PROFILE_WITH_LOGIN: 'profile/:login',
-    getProfileRoute: login => `profile/${login}`,
+    DETAILS: 'details',
+    DETAILS_WITH_LOGIN: 'details/:login',
+    getDetailsRoute: login => `details/${login}`,
 };

src/libs/Navigation/AppNavigator/AuthScreens.js

@@ -33,7 +33,7 @@ import MainDrawerNavigator from './MainDrawerNavigator';
 import {
     IOUBillStackNavigator,
     IOURequestModalStackNavigator,
-    ProfileModalStackNavigator,
+    DetailsModalStackNavigator,
     SearchModalStackNavigator,
     NewGroupModalStackNavigator,
     NewChatModalStackNavigator,
@@ -158,9 +158,9 @@ class AuthScreens extends React.Component {
                     component={SearchModalStackNavigator}
                 />
                 <RootStack.Screen
-                    name="Profile"
+                    name="Details"
                     options={modalScreenOptions}
-                    component={ProfileModalStackNavigator}
+                    component={DetailsModalStackNavigator}
                 />
                 <RootStack.Screen
                     name="IOU_Request"

src/libs/Navigation/AppNavigator/ModalStackNavigators.js

@@ -7,14 +7,14 @@ import {
     NewChatModalStack,
     NewGroupModalStack,
     SearchModalStack,
-    ProfileModalStack,
+    DetailsModalStack,
     IOURequestModalStack,
     IOUBillModalStack,
 } from './ModalStacks';
 import NewChatPage from '../../../pages/NewChatPage';
 import NewGroupPage from '../../../pages/NewGroupPage';
 import SearchPage from '../../../pages/SearchPage';
-import ProfilePage from '../../../pages/ProfilePage';
+import DetailsPage from '../../../pages/DetailsPage';
 import IOURequestPage from '../../../pages/iou/IOURequestPage';
 import IOUBillPage from '../../../pages/iou/IOUBillPage';
 import SettingsInitialPage from '../../../pages/settings/InitialPage';
@@ -58,19 +58,19 @@ const IOURequestModalStackNavigator = () => (
     </IOURequestModalStack.Navigator>
 );
 
-const ProfileModalStackNavigator = () => (
-    <ProfileModalStack.Navigator
-        path={ROUTES.PROFILE}
+const DetailsModalStackNavigator = () => (
+    <DetailsModalStack.Navigator
+        path={ROUTES.DETAILS}
     >
-        <ProfileModalStack.Screen
-            name="Profile_Root"
-            component={ProfilePage}
+        <DetailsModalStack.Screen
+            name="Details_Root"
+            component={DetailsPage}
             options={{
                 ...defaultSubRouteOptions,
-                title: 'Profile',
+                title: 'Details',
             }}
         />
-    </ProfileModalStack.Navigator>
+    </DetailsModalStack.Navigator>
 );
 
 const SearchModalStackNavigator = () => (
@@ -168,7 +168,7 @@ const SettingsModalStackNavigator = () => (
 export {
     IOUBillStackNavigator,
     IOURequestModalStackNavigator,
-    ProfileModalStackNavigator,
+    DetailsModalStackNavigator,
     SearchModalStackNavigator,
     NewGroupModalStackNavigator,
     NewChatModalStackNavigator,

src/libs/Navigation/AppNavigator/ModalStacks/index.js

@@ -5,7 +5,7 @@ const SettingsModalStack = createCustomModalStackNavigator();
 const NewChatModalStack = createCustomModalStackNavigator();
 const NewGroupModalStack = createCustomModalStackNavigator();
 const SearchModalStack = createCustomModalStackNavigator();
-const ProfileModalStack = createCustomModalStackNavigator();
+const DetailsModalStack = createCustomModalStackNavigator();
 const IOURequestModalStack = createCustomModalStackNavigator();
 const IOUBillModalStack = createCustomModalStackNavigator();
 
@@ -14,7 +14,7 @@ export {
     NewChatModalStack,
     NewGroupModalStack,
     SearchModalStack,
-    ProfileModalStack,
+    DetailsModalStack,
     IOURequestModalStack,
     IOUBillModalStack,
 };

src/libs/Navigation/AppNavigator/ModalStacks/index.native.js

@@ -11,7 +11,7 @@ const SettingsModalStack = shouldUseCustomModalStack ? createCustomModalStackNav
 const NewChatModalStack = shouldUseCustomModalStack ? createCustomModalStackNavigator() : createStackNavigator();
 const NewGroupModalStack = shouldUseCustomModalStack ? createCustomModalStackNavigator() : createStackNavigator();
 const SearchModalStack = shouldUseCustomModalStack ? createCustomModalStackNavigator() : createStackNavigator();
-const ProfileModalStack = shouldUseCustomModalStack ? createCustomModalStackNavigator() : createStackNavigator();
+const DetailsModalStack = shouldUseCustomModalStack ? createCustomModalStackNavigator() : createStackNavigator();
 const IOURequestModalStack = shouldUseCustomModalStack ? createCustomModalStackNavigator() : createStackNavigator();
 const IOUBillModalStack = shouldUseCustomModalStack ? createCustomModalStackNavigator() : createStackNavigator();
 
@@ -20,7 +20,7 @@ export {
     NewChatModalStack,
     NewGroupModalStack,
     SearchModalStack,
-    ProfileModalStack,
+    DetailsModalStack,
     IOURequestModalStack,
     IOUBillModalStack,
 };

src/libs/Navigation/linkingConfig.js

@@ -64,10 +64,10 @@ export default {
                     Search_Root: '',
                 },
             },
-            Profile: {
-                initialRouteName: 'Profile_Root',
+            Details: {
+                initialRouteName: 'Details_Root',
                 screens: {
-                    Profile_Root: ROUTES.PROFILE_WITH_LOGIN,
+                    Details_Root: ROUTES.DETAILS_WITH_LOGIN,
                 },
             },
             IOU_Request: {

src/pages/ProfilePage.js → src/pages/DetailsPage.js

@@ -35,7 +35,7 @@ const personalDetailsType = PropTypes.shape({
 
 const matchType = PropTypes.shape({
     params: PropTypes.shape({
-        // login passed via route /profile/:login
+        // login passed via route /details/:login
         login: PropTypes.string,
     }),
 });
@@ -49,8 +49,8 @@ const propTypes = {
     route: matchType.isRequired,
 };
 
-const ProfilePage = ({personalDetails, route}) => {
-    const profileDetails = personalDetails[route.params.login];
+const DetailsPage = ({personalDetails, route}) => {
+    const details = personalDetails[route.params.login];
     return (
         <ScreenWrapper>
             <HeaderWithCloseButton
@@ -60,56 +60,56 @@ const ProfilePage = ({personalDetails, route}) => {
             <View
                 pointerEvents="box-none"
                 style={[
-                    styles.profilePageContainer,
+                    styles.detailsPageContainer,
                 ]}
             >
-                {profileDetails ? (
+                {details ? (
                     <View>
                         <View style={styles.pageWrapper}>
                             <View
                                 style={[styles.avatarLarge, styles.mb3]}
                             >
                                 <Avatar
                                     style={[styles.avatarLarge]}
-                                    source={profileDetails.avatar}
+                                    source={details.avatar}
                                 />
                             </View>
                             <Text style={[styles.displayName, styles.mt1, styles.mb6]} numberOfLines={1}>
-                                {profileDetails.displayName
-                                    ? profileDetails.displayName
+                                {details.displayName
+                                    ? details.displayName
                                     : null}
                             </Text>
-                            {profileDetails.login ? (
-                                <View style={[styles.mb6, styles.profilePageSectionContainer]}>
+                            {details.login ? (
+                                <View style={[styles.mb6, styles.detailsPageSectionContainer]}>
                                     <Text style={[styles.formLabel, styles.mb2]} numberOfLines={1}>
-                                        {Str.isSMSLogin(profileDetails.login) ? 'Phone Number' : 'Email'}
+                                        {Str.isSMSLogin(details.login) ? 'Phone Number' : 'Email'}
                                     </Text>
                                     <Text style={[styles.textP]} numberOfLines={1}>
-                                        {Str.isSMSLogin(profileDetails.login)
-                                            ? Str.removeSMSDomain(profileDetails.login)
-                                            : profileDetails.login}
+                                        {Str.isSMSLogin(details.login)
+                                            ? Str.removeSMSDomain(details.login)
+                                            : details.login}
                                     </Text>
                                 </View>
                             ) : null}
-                            {profileDetails.pronouns ? (
-                                <View style={[styles.mb6, styles.profilePageSectionContainer]}>
+                            {details.pronouns ? (
+                                <View style={[styles.mb6, styles.detailsPageSectionContainer]}>
                                     <Text style={[styles.formLabel, styles.mb2]} numberOfLines={1}>
                                         Preferred Pronouns
                                     </Text>
                                     <Text style={[styles.textP]} numberOfLines={1}>
-                                        {profileDetails.pronouns}
+                                        {details.pronouns}
                                     </Text>
                                 </View>
                             ) : null}
-                            {profileDetails.timezone ? (
-                                <View style={[styles.mb6, styles.profilePageSectionContainer]}>
+                            {details.timezone ? (
+                                <View style={[styles.mb6, styles.detailsPageSectionContainer]}>
                                     <Text style={[styles.formLabel, styles.mb2]} numberOfLines={1}>
                                         Local Time
                                     </Text>
                                     <Text style={[styles.textP]} numberOfLines={1}>
-                                        {moment().tz(profileDetails.timezone.selected).format('LT')}
+                                        {moment().tz(details.timezone.selected).format('LT')}
                                         {' '}
-                                        {moment().tz(profileDetails.timezone.selected).zoneAbbr()}
+                                        {moment().tz(details.timezone.selected).zoneAbbr()}
                                     </Text>
                                 </View>
                             ) : null}
@@ -121,11 +121,11 @@ const ProfilePage = ({personalDetails, route}) => {
     );
 };
 
-ProfilePage.propTypes = propTypes;
-ProfilePage.displayName = 'ProfilePage';
+DetailsPage.propTypes = propTypes;
+DetailsPage.displayName = 'DetailsPage';
 
 export default withOnyx({
     personalDetails: {
         key: ONYXKEYS.PERSONAL_DETAILS,
     },
-})(ProfilePage);
+})(DetailsPage);

src/pages/home/HeaderView.js

@@ -80,7 +80,7 @@ const HeaderView = (props) => {
                         <Pressable
                             onPress={() => {
                                 if (participants.length === 1) {
-                                    Navigation.navigate(ROUTES.getProfileRoute(participants[0]));
+                                    Navigation.navigate(ROUTES.getDetailsRoute(participants[0]));
                                 }
                             }}
                             style={[styles.flexRow, styles.alignItemsCenter]}

src/styles/styles.js

@@ -1089,17 +1089,17 @@ const styles = {
         opacity: 0,
     },
 
-    profilePageContainer: {
+    detailsPageContainer: {
         justifyContent: 'space-between',
         width: '100%',
         flex: 1,
     },
 
-    profilePageSectionContainer: {
+    detailsPageSectionContainer: {
         alignSelf: 'flex-start',
     },
 
-    profilePageSectionVersion: {
+    detailsPageSectionVersion: {
         alignSelf: 'center',
         color: themeColors.textSupporting,
         fontSize: variables.fontSizeSmall,