zulip · gnprice · Feb 2, 2021 · Jan 25, 2021 · Jan 25, 2021 · Jan 25, 2021
diff --git a/src/chat/ChatScreen.js b/src/chat/ChatScreen.js
@@ -22,7 +22,7 @@ import { canSendToNarrow } from '../utils/narrow';
 import { getLoading, getSession } from '../directSelectors';
 import { getFetchingForNarrow } from './fetchingSelectors';
 import { getShownMessagesForNarrow, isNarrowValid as getIsNarrowValid } from './narrowsSelectors';
-import { getTitleBackgroundColor } from '../title/titleSelectors';
+import { getStreamColorForNarrow } from '../subscriptions/subscriptionSelectors';
 
 type Props = $ReadOnly<{|
   navigation: AppNavigationProp<'chat'>,
@@ -114,13 +114,13 @@ export default function ChatScreen(props: Props) {
   const sayNoMessages = haveNoMessages && !isFetching;
   const showComposeBox = canSendToNarrow(narrow) && !showMessagePlaceholders;
 
-  const titleBackgroundColor = useSelector(state => getTitleBackgroundColor(state, narrow));
+  const streamColor = useSelector(state => getStreamColorForNarrow(state, narrow));
 
   return (
     <ActionSheetProvider>
       <View style={[componentStyles.screen, { backgroundColor }]}>
         <KeyboardAvoider style={styles.flexed} behavior="padding">
-          <ZulipStatusBar backgroundColor={titleBackgroundColor} />
+          <ZulipStatusBar backgroundColor={streamColor} />
           <ChatNavBar narrow={narrow} editMessage={editMessage} />
           <OfflineNotice />
           <UnreadNotice narrow={narrow} />

diff --git a/src/common/ZulipStatusBar.js b/src/common/ZulipStatusBar.js
@@ -1,26 +1,18 @@
 /* @flow strict-local */
 
 import React, { PureComponent } from 'react';
-import { Platform, StatusBar, View } from 'react-native';
+import { Platform, StatusBar } from 'react-native';
 import Color from 'color';
-import { compose } from 'redux';
-import { EdgeInsets } from 'react-native-safe-area-context';
 
-import { withSafeAreaInsets } from '../react-native-safe-area-context';
 import type { Orientation, ThemeName, Dispatch } from '../types';
 import { connect } from '../react-redux';
-import { DEFAULT_TITLE_BACKGROUND_COLOR } from '../title/titleSelectors';
 import { foregroundColorFromBackground } from '../utils/color';
 import { getSession, getSettings } from '../selectors';
 
 type BarStyle = $PropertyType<React$ElementConfig<typeof StatusBar>, 'barStyle'>;
 
-export const getStatusBarColor = (backgroundColor: string, theme: ThemeName): string =>
-  backgroundColor === DEFAULT_TITLE_BACKGROUND_COLOR
-    ? theme === 'night'
-      ? 'hsl(212, 28%, 18%)'
-      : 'white'
-    : backgroundColor;
+export const getStatusBarColor = (backgroundColor: string | void, theme: ThemeName): string =>
+  backgroundColor ?? (theme === 'night' ? 'hsl(212, 28%, 18%)' : 'white');
 
 export const getStatusBarStyle = (statusBarColor: string): BarStyle =>
   foregroundColorFromBackground(statusBarColor) === 'white' /* force newline */
@@ -33,9 +25,7 @@ type SelectorProps = $ReadOnly<{|
 |}>;
 
 type Props = $ReadOnly<{
-  insets: EdgeInsets,
-
-  backgroundColor: string,
+  backgroundColor?: string | void,
   hidden: boolean,
 
   dispatch: Dispatch,
@@ -44,38 +34,34 @@ type Props = $ReadOnly<{
 
 /**
  * Applies `hidden` and `backgroundColor` in platform-specific ways.
+ *
+ * Like `StatusBar`, which is the only thing it ever renders, this
+ * doesn't have any effect on the spatial layout of the UI.
  */
 class ZulipStatusBar extends PureComponent<Props> {
   static defaultProps = {
     hidden: false,
-    backgroundColor: DEFAULT_TITLE_BACKGROUND_COLOR,
   };
 
   render() {
-    const { theme, hidden, insets, orientation } = this.props;
+    const { theme, hidden, orientation } = this.props;
     const backgroundColor = this.props.backgroundColor;
-    const style = { height: hidden ? 0 : insets.top, backgroundColor };
     const statusBarColor = getStatusBarColor(backgroundColor, theme);
     return (
       orientation === 'PORTRAIT' && (
-        <View style={style}>
-          <StatusBar
-            animated
-            showHideTransition="slide"
-            hidden={hidden && Platform.OS !== 'android'}
-            backgroundColor={Color(statusBarColor).darken(0.1)}
-            barStyle={getStatusBarStyle(statusBarColor)}
-          />
-        </View>
+        <StatusBar
+          animated
+          showHideTransition="slide"
+          hidden={hidden && Platform.OS !== 'android'}
+          backgroundColor={Color(statusBarColor).darken(0.1)}
+          barStyle={getStatusBarStyle(statusBarColor)}
+        />
       )
     );
   }
 }
 
-export default compose(
-  connect<SelectorProps, _, _>((state, props) => ({
-    theme: getSettings(state).theme,
-    orientation: getSession(state).orientation,
-  })),
-  withSafeAreaInsets,
-)(ZulipStatusBar);
+export default connect<SelectorProps, _, _>((state, props) => ({
+  theme: getSettings(state).theme,
+  orientation: getSession(state).orientation,
+}))(ZulipStatusBar);
diff --git a/src/common/__tests__/getStatusBarColor-test.js b/src/common/__tests__/getStatusBarColor-test.js
@@ -1,5 +1,4 @@
 /* @flow strict-local */
-import { DEFAULT_TITLE_BACKGROUND_COLOR } from '../../title/titleSelectors';
 import { getStatusBarColor } from '../ZulipStatusBar';
 
 const themeNight = 'night';
@@ -12,9 +11,7 @@ describe('getStatusBarColor', () => {
   });
 
   test('returns color according to theme for default case', () => {
-    expect(getStatusBarColor(DEFAULT_TITLE_BACKGROUND_COLOR, themeDefault)).toEqual('white');
-    expect(getStatusBarColor(DEFAULT_TITLE_BACKGROUND_COLOR, themeNight)).toEqual(
-      'hsl(212, 28%, 18%)',
-    );
+    expect(getStatusBarColor(undefined, themeDefault)).toEqual('white');
+    expect(getStatusBarColor(undefined, themeNight)).toEqual('hsl(212, 28%, 18%)');
   });
 });
diff --git a/src/lightbox/LightboxScreen.js b/src/lightbox/LightboxScreen.js
@@ -26,6 +26,7 @@ type Props = $ReadOnly<{|
 
 export default function LightboxScreen(props: Props) {
   const { src, message } = props.route.params;
+
   return (
     <View style={styles.screen}>
       <ZulipStatusBar hidden backgroundColor="black" />

diff --git a/src/main/MainTabsScreen.js b/src/main/MainTabsScreen.js
@@ -5,11 +5,11 @@ import {
   createBottomTabNavigator,
   type BottomTabNavigationProp,
 } from '@react-navigation/bottom-tabs';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import type { RouteProp, RouteParamsOf } from '../react-navigation';
 import type { AppNavigationProp } from '../nav/AppNavigator';
 import type { GlobalParamList } from '../nav/globalTypes';
-
 import { bottomTabNavigatorConfig } from '../styles/tabs';
 import HomeScreen from './HomeScreen';
 import StreamTabsScreen from './StreamTabsScreen';
@@ -50,6 +50,8 @@ export default function MainTabsScreen(props: Props) {
   const { backgroundColor } = useContext(ThemeContext);
   const haveServerData = useSelector(getHaveServerData);
 
+  const insets = useSafeAreaInsets();
+
   if (!haveServerData) {
     // This can happen if the user has just logged out; this screen
     // is still visible for the duration of the nav transition, and
@@ -63,6 +65,7 @@ export default function MainTabsScreen(props: Props) {
 
   return (
     <View style={[styles.flexed, { backgroundColor }]}>
+      <View style={{ height: insets.top }} />
       <ZulipStatusBar />
       <OfflineNotice />
       <Tab.Navigator

diff --git a/src/nav/ChatNavBar.js b/src/nav/ChatNavBar.js
@@ -3,14 +3,15 @@
 import React from 'react';
 import { View } from 'react-native';
 import Color from 'color';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 import type { Narrow, EditMessage } from '../types';
 import { LoadingBanner } from '../common';
 import { useSelector } from '../react-redux';
 import { BRAND_COLOR, NAVBAR_SIZE } from '../styles';
 import Title from '../title/Title';
 import NavBarBackButton from './NavBarBackButton';
-import { DEFAULT_TITLE_BACKGROUND_COLOR, getTitleBackgroundColor } from '../title/titleSelectors';
+import { getStreamColorForNarrow } from '../subscriptions/subscriptionSelectors';
 import { foregroundColorFromBackground } from '../utils/color';
 import { ExtraButton, InfoButton } from '../title-buttons/titleButtonFromNarrow';
 
@@ -21,46 +22,36 @@ type Props = $ReadOnly<{|
 
 export default function ChatNavBar(props: Props) {
   const { narrow, editMessage } = props;
-  const backgroundColor = useSelector(state => getTitleBackgroundColor(state, narrow));
+  const streamColor = useSelector(state => getStreamColorForNarrow(state, narrow));
   const color =
-    backgroundColor === DEFAULT_TITLE_BACKGROUND_COLOR
-      ? BRAND_COLOR
-      : foregroundColorFromBackground(backgroundColor);
+    streamColor === undefined ? BRAND_COLOR : foregroundColorFromBackground(streamColor);
   const spinnerColor =
-    backgroundColor === DEFAULT_TITLE_BACKGROUND_COLOR
-      ? 'default'
-      : foregroundColorFromBackground(backgroundColor);
+    streamColor === undefined ? 'default' : foregroundColorFromBackground(streamColor);
 
   return (
-    <View
+    <SafeAreaView
+      mode="padding"
+      edges={['top', 'right', 'left']}
       style={{
         borderColor:
-          backgroundColor === 'transparent'
-            ? 'hsla(0, 0%, 50%, 0.25)'
-            : Color(backgroundColor).darken(0.1),
+          streamColor === undefined ? 'hsla(0, 0%, 50%, 0.25)' : Color(streamColor).darken(0.1),
         borderBottomWidth: 1,
+        backgroundColor: streamColor,
       }}
     >
       <View
-        style={[
-          {
-            flexDirection: 'row',
-            height: NAVBAR_SIZE,
-            alignItems: 'center',
-          },
-          { backgroundColor },
-        ]}
+        style={{
+          flexDirection: 'row',
+          height: NAVBAR_SIZE,
+          alignItems: 'center',
+        }}
       >
         <NavBarBackButton color={color} />
         <Title color={color} narrow={narrow} editMessage={editMessage} />
         <ExtraButton color={color} narrow={narrow} />
         <InfoButton color={color} narrow={narrow} />
       </View>
-      <LoadingBanner
-        spinnerColor={spinnerColor}
-        backgroundColor={backgroundColor}
-        textColor={color}
-      />
-    </View>
+      <LoadingBanner spinnerColor={spinnerColor} backgroundColor={streamColor} textColor={color} />
+    </SafeAreaView>
   );
 }
diff --git a/src/nav/ModalNavBar.js b/src/nav/ModalNavBar.js
@@ -2,6 +2,7 @@
 
 import React, { useContext } from 'react';
 import { View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 import type { LocalizableText } from '../types';
 import styles, { ThemeContext, NAVBAR_SIZE } from '../styles';
@@ -22,12 +23,13 @@ export default function ModalNavBar(props: Props) {
   ];
 
   return (
-    <View
+    <SafeAreaView
+      mode="padding"
+      edges={['top', 'right', 'left']}
       style={[
         {
           borderColor: 'hsla(0, 0%, 50%, 0.25)',
           flexDirection: 'row',
-          height: NAVBAR_SIZE,
           alignItems: 'center',
           borderBottomWidth: 1,
           backgroundColor,
@@ -38,6 +40,6 @@ export default function ModalNavBar(props: Props) {
       <View style={styles.flexedLeftAlign}>
         <Label style={textStyle} text={title} numberOfLines={1} ellipsizeMode="tail" />
       </View>
-    </View>
+    </SafeAreaView>
   );
 }
diff --git a/src/nav/ModalSearchNavBar.js b/src/nav/ModalSearchNavBar.js
@@ -1,8 +1,8 @@
 /* @flow strict-local */
 import React, { useContext } from 'react';
-import { View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
-import { ThemeContext, NAVBAR_SIZE } from '../styles';
+import { ThemeContext } from '../styles';
 import SearchInput from '../common/SearchInput';
 import NavBarBackButton from './NavBarBackButton';
 
@@ -16,18 +16,19 @@ export default function ModalSearchNavBar(props: Props) {
   const { autoFocus, searchBarOnChange, canGoBack = true } = props;
   const { backgroundColor } = useContext(ThemeContext);
   return (
-    <View
+    <SafeAreaView
+      mode="padding"
+      edges={['top', 'right', 'left']}
       style={{
         borderColor: 'hsla(0, 0%, 50%, 0.25)',
         flexDirection: 'row',
-        height: NAVBAR_SIZE,
         alignItems: 'center',
         borderBottomWidth: 1,
         backgroundColor,
       }}
     >
       {canGoBack && <NavBarBackButton />}
       <SearchInput autoFocus={autoFocus} onChangeText={searchBarOnChange} />
-    </View>
+    </SafeAreaView>
   );
 }
diff --git a/src/selectors.js b/src/selectors.js
@@ -9,7 +9,6 @@ export * from './emoji/emojiSelectors';
 export * from './message/messageSelectors';
 export * from './nav/navSelectors';
 export * from './subscriptions/subscriptionSelectors';
-export * from './title/titleSelectors';
 export * from './topics/topicSelectors';
 export * from './typing/typingSelectors';
 export * from './unread/unreadSelectors';

diff --git a/src/settings/SettingsScreen.js b/src/settings/SettingsScreen.js
@@ -18,7 +18,6 @@ import {
   IconLanguage,
   IconMoreHorizontal,
 } from '../common/Icons';
-import ModalNavBar from '../nav/ModalNavBar';
 import {
   settingsChange,
   navigateToNotifications,
@@ -52,7 +51,6 @@ class SettingsScreen extends PureComponent<Props> {
 
     return (
       <ScrollView style={styles.optionWrapper}>
-        <ModalNavBar canGoBack={false} title="Settings" />
         <OptionRow
           Icon={IconNight}
           label="Night mode"

diff --git a/src/start/LoadingScreen.js b/src/start/LoadingScreen.js
@@ -1,6 +1,7 @@
 /* @flow strict-local */
 import React from 'react';
 import { View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import type { RouteProp } from '../react-navigation';
 import type { AppNavigationProp } from '../nav/AppNavigator';
@@ -27,8 +28,16 @@ type Props = $ReadOnly<{|
 |}>;
 
 export default function LoadingScreen(props: Props) {
+  const insets = useSafeAreaInsets();
+
   return (
     <View style={componentStyles.center}>
+      <View
+        style={{
+          height: insets.top,
+          backgroundColor: BRAND_COLOR,
+        }}
+      />
       <ZulipStatusBar backgroundColor={BRAND_COLOR} />
       <LoadingIndicator color="black" size={80} showLogo />
     </View>