Followups from #4679

src/common/Icons.js

@@ -52,7 +52,6 @@ const makeIcon = <Glyphs: string>(
   return <FixedIcon name={name} {...props} />;
 };
 
-export const IconBrowser = makeIcon(Feather, 'chrome');
 export const IconInbox = makeIcon(Feather, 'inbox');
 export const IconMention = makeIcon(Feather, 'at-sign');
 export const IconSearch = makeIcon(Feather, 'search');
@@ -72,7 +71,6 @@ export const IconWindows = makeIcon(IoniconsIcon, 'logo-windows');
 export const IconDiagnostics = makeIcon(Feather, 'activity');
 export const IconNotifications = makeIcon(Feather, 'bell');
 export const IconLanguage = makeIcon(Feather, 'globe');
-export const IconNight = makeIcon(Feather, 'moon');
 export const IconSettings = makeIcon(Feather, 'settings');
 export const IconRight = makeIcon(Feather, 'chevron-right');
 export const IconPlusCircle = makeIcon(Feather, 'plus-circle');

src/common/OptionRow.js

@@ -23,13 +23,16 @@ export default class OptionRow extends PureComponent<Props> {
 
   styles = {
     icon: styles.settingsIcon,
+    container: {
+      height: 56,
+    },
   };
 
   render() {
     const { label, value, onValueChange, style, Icon } = this.props;
 
     return (
-      <View style={[styles.listItem, style]}>
+      <View style={[this.styles.container, styles.listItem, style]}>
         {!!Icon && <Icon size={18} style={[this.styles.icon, { color: this.context.color }]} />}
         <Label text={label} style={styles.flexed} />
         <View style={styles.rightItem}>

src/common/ServerCompatBanner.js

@@ -4,12 +4,11 @@ import React from 'react';
 import { View } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
-import store from '../boot/store';
 import { createStyleSheet, HALF_COLOR } from '../styles';
 import { useSelector, useDispatch } from '../react-redux';
 import Label from './Label';
 import { getActiveAccount } from '../account/accountsSelectors';
-import { getIsAdmin, getSession } from '../directSelectors';
+import { getIsAdmin, getSession, getSettings } from '../directSelectors';
 import { dismissCompatNotice } from '../session/sessionActions';
 import ZulipTextButton from './ZulipTextButton';
 import { openLinkWithUserPreference } from '../utils/openLink';
@@ -58,6 +57,7 @@ export default function ServerCompatBanner(props: Props) {
   const zulipVersion = useSelector(state => getActiveAccount(state).zulipVersion);
   const realm = useSelector(state => getActiveAccount(state).realm);
   const isAdmin = useSelector(getIsAdmin);
+  const settings = useSelector(getSettings);
 
   if (!zulipVersion || zulipVersion.isAtLeast(minSupportedVersion)) {
     return null;
@@ -98,7 +98,7 @@ export default function ServerCompatBanner(props: Props) {
           onPress={() => {
             openLinkWithUserPreference(
               'https://zulip.readthedocs.io/en/stable/overview/release-lifecycle.html#compatibility-and-upgrading',
-              store.getState,
+              settings,
             );
           }}
         />

src/message/messagesActions.js

@@ -35,10 +35,10 @@ export const messageLinkPress = (href: string) => async (
     const anchor = getMessageIdFromLink(href, auth.realm);
     dispatch(doNarrow(narrow, anchor));
   } else if (!isUrlOnRealm(href, auth.realm)) {
-    openLinkWithUserPreference(href, getState);
+    openLinkWithUserPreference(href, state.settings);
   } else {
     const url =
       (await api.tryGetFileTemporaryUrl(href, auth)) ?? new URL(href, auth.realm).toString();
-    openLinkWithUserPreference(url, getState);
+    openLinkWithUserPreference(url, state.settings);
   }
 };

src/reduxTypes.js

@@ -263,8 +263,7 @@ export type RealmState = {|
 // https://github.com/zulip/zulip-mobile/issues/4009#issuecomment-619280681.
 export type ThemeName = 'default' | 'night';
 
-/**
- * The values for this mean:
+/** What browser the user has set to use for opening links in messages.
  *
  * * embedded: The in-app browser
  * * external: The user's default browser app

src/settings/SettingsScreen.js

@@ -12,10 +12,8 @@ import { connect } from '../react-redux';
 import { getSettings } from '../selectors';
 import { OptionButton, OptionRow } from '../common';
 import {
-  IconBrowser,
   IconDiagnostics,
   IconNotifications,
-  IconNight,
   IconLanguage,
   IconMoreHorizontal,
 } from '../common/Icons';
@@ -55,13 +53,11 @@ class SettingsScreen extends PureComponent<Props> {
     return (
       <ScrollView style={styles.optionWrapper}>
         <OptionRow
-          Icon={IconNight}
           label="Night mode"
           value={theme === 'night'}
           onValueChange={this.handleThemeChange}
         />
         <OptionRow
-          Icon={IconBrowser}
           label="Open links with in-app browser"
           value={shouldUseInAppBrowser(browser)}
           onValueChange={value => {

src/utils/openLink.js

@@ -2,9 +2,9 @@
 import { NativeModules, Platform, Linking } from 'react-native';
 import SafariView from 'react-native-safari-view';
 
-import type { BrowserPreference, GetState } from '../types';
-import { getSettings } from '../selectors';
+import type { BrowserPreference, SettingsState } from '../types';
 
+/** Open a URL in the in-app browser. */
 export function openLinkEmbedded(url: string): void {
   if (Platform.OS === 'ios') {
     SafariView.show({ url: encodeURI(url) });
@@ -13,6 +13,7 @@ export function openLinkEmbedded(url: string): void {
   }
 }
 
+/** Open a URL in the user's default browser app. */
 export function openLinkExternal(url: string): void {
   Linking.openURL(url);
 }
@@ -25,12 +26,9 @@ export function shouldUseInAppBrowser(browser: BrowserPreference): boolean {
   }
 }
 
-// TODO: We may want to turn this into a thunk action creator.
-// See https://github.com/zulip/zulip-mobile/pull/4679#discussion_r625991786
-export function openLinkWithUserPreference(url: string, getState: GetState): void {
-  const state = getState();
-  const browser = getSettings(state).browser;
-  if (shouldUseInAppBrowser(browser)) {
+/** Open a URL using whichever browser the user has configured in the Zulip settings. */
+export function openLinkWithUserPreference(url: string, settings: SettingsState): void {
+  if (shouldUseInAppBrowser(settings.browser)) {
     openLinkEmbedded(url);
   } else {
     openLinkExternal(url);