From 85b20aaf0d8f64a2449410e0ee943ed310478c75 Mon Sep 17 00:00:00 2001
From: Chris Bobbe <cbobbe@zulip.com>
Date: Tue, 14 Feb 2023 13:30:56 -0800
Subject: [PATCH] ProfileScreen: Use `NavRow`s and a `TextRow` instead of
 `ZulipButton`s

We've been using a `NavRow` and a `SwitchRow` for the first two
interactive items ("Set your status" and "Invisible mode"), and I
think the screen looks more coherent if we use `NavRow`s and a
`TextRow` for these other interactive items too. For one thing, now
all the text on the screen is the same color.
---
 src/account-info/ProfileScreen.js | 138 +++++++++---------------------
 1 file changed, 42 insertions(+), 96 deletions(-)

diff --git a/src/account-info/ProfileScreen.js b/src/account-info/ProfileScreen.js
index c7e24000c95..c5c6667aa4c 100644
--- a/src/account-info/ProfileScreen.js
+++ b/src/account-info/ProfileScreen.js
@@ -1,16 +1,13 @@
 /* @flow strict-local */
 import React, { useContext } from 'react';
 import type { Node } from 'react';
-import { ScrollView, View } from 'react-native';
+import { ScrollView } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
-import { type UserId } from '../api/idTypes';
 import { TranslationContext } from '../boot/TranslationProvider';
 import type { RouteProp } from '../react-navigation';
 import type { MainTabsNavigationProp } from '../main/MainTabsScreen';
-import { createStyleSheet } from '../styles';
 import { useDispatch, useSelector } from '../react-redux';
-import ZulipButton from '../common/ZulipButton';
 import { logout } from '../account/logoutActions';
 import { tryStopNotifications } from '../notification/notifTokens';
 import AccountDetails from './AccountDetails';
@@ -26,88 +23,7 @@ import * as api from '../api';
 import { identityOfAccount } from '../account/accountMisc';
 import NavRow from '../common/NavRow';
 import { emojiTypeFromReactionType } from '../emoji/data';
-
-const styles = createStyleSheet({
-  buttonRow: {
-    flexDirection: 'row',
-    marginHorizontal: 8,
-  },
-  button: {
-    flex: 1,
-    margin: 8,
-  },
-});
-
-function ProfileButton(props: {| +ownUserId: UserId |}) {
-  const navigation = useNavigation();
-  return (
-    <ZulipButton
-      style={styles.button}
-      secondary
-      text="Full profile"
-      onPress={() => {
-        navigation.push('account-details', { userId: props.ownUserId });
-      }}
-    />
-  );
-}
-
-function SettingsButton(props: {||}) {
-  const navigation = useNavigation();
-  return (
-    <ZulipButton
-      style={styles.button}
-      secondary
-      text="Settings"
-      onPress={() => {
-        navigation.push('settings');
-      }}
-    />
-  );
-}
-
-function SwitchAccountButton(props: {||}) {
-  const navigation = useNavigation();
-  return (
-    <ZulipButton
-      style={styles.button}
-      secondary
-      text="Switch account"
-      onPress={() => {
-        navigation.push('account-pick');
-      }}
-    />
-  );
-}
-
-function LogoutButton(props: {||}) {
-  const dispatch = useDispatch();
-  const _ = useContext(TranslationContext);
-  const account = useSelector(getAccount);
-  const identity = identityOfAccount(account);
-  return (
-    <ZulipButton
-      style={styles.button}
-      secondary
-      text="Log out"
-      onPress={() => {
-        showConfirmationDialog({
-          destructive: true,
-          title: 'Log out',
-          message: {
-            text: 'This will log out {email} on {realmUrl} from the mobile app on this device.',
-            values: { email: identity.email, realmUrl: identity.realm.toString() },
-          },
-          onPressConfirm: () => {
-            dispatch(tryStopNotifications(account));
-            dispatch(logout());
-          },
-          _,
-        });
-      }}
-    />
-  );
-}
+import TextRow from '../common/TextRow';
 
 type Props = $ReadOnly<{|
   navigation: MainTabsNavigationProp<'profile'>,
@@ -119,7 +35,11 @@ type Props = $ReadOnly<{|
  */
 export default function ProfileScreen(props: Props): Node {
   const navigation = useNavigation();
+  const dispatch = useDispatch();
+  const _ = useContext(TranslationContext);
 
+  const account = useSelector(getAccount);
+  const identity = identityOfAccount(account);
   const auth = useSelector(getAuth);
   const zulipFeatureLevel = useSelector(getZulipFeatureLevel);
   const ownUser = useSelector(getOwnUser);
@@ -171,16 +91,42 @@ export default function ProfileScreen(props: Props): Node {
             }}
           />
         )}
-        <View style={styles.buttonRow}>
-          <ProfileButton ownUserId={ownUser.user_id} />
-        </View>
-        <View style={styles.buttonRow}>
-          <SettingsButton />
-        </View>
-        <View style={styles.buttonRow}>
-          <SwitchAccountButton />
-          <LogoutButton />
-        </View>
+        <NavRow
+          title="Full profile"
+          onPress={() => {
+            navigation.push('account-details', { userId: ownUserId });
+          }}
+        />
+        <NavRow
+          title="Settings"
+          onPress={() => {
+            navigation.push('settings');
+          }}
+        />
+        <NavRow
+          title="Switch account"
+          onPress={() => {
+            navigation.push('account-pick');
+          }}
+        />
+        <TextRow
+          title="Log out"
+          onPress={() => {
+            showConfirmationDialog({
+              destructive: true,
+              title: 'Log out',
+              message: {
+                text: 'This will log out {email} on {realmUrl} from the mobile app on this device.',
+                values: { email: identity.email, realmUrl: identity.realm.toString() },
+              },
+              onPressConfirm: () => {
+                dispatch(tryStopNotifications(account));
+                dispatch(logout());
+              },
+              _,
+            });
+          }}
+        />
       </ScrollView>
     </SafeAreaView>
   );