nav [nfc]: Remove DEFAULT_TITLE_BACKGROUND_COLOR.

We're only using this as a sentinel value [1], so `undefined` works
just as well and is less to think about.

[1] zulip#4443 (comment)

src/common/ZulipStatusBar.js

@@ -6,14 +6,13 @@ import Color from 'color';
 
 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
+export const getStatusBarColor = (backgroundColor: string | void, theme: ThemeName): string =>
+  backgroundColor === undefined
     ? theme === 'night'
       ? 'hsl(212, 28%, 18%)'
       : 'white'
@@ -30,7 +29,7 @@ type SelectorProps = $ReadOnly<{|
 |}>;
 
 type Props = $ReadOnly<{
-  backgroundColor: string,
+  backgroundColor: string | void,
   hidden: boolean,
 
   dispatch: Dispatch,
@@ -46,7 +45,7 @@ type Props = $ReadOnly<{
 class ZulipStatusBar extends PureComponent<Props> {
   static defaultProps = {
     hidden: false,
-    backgroundColor: DEFAULT_TITLE_BACKGROUND_COLOR,
+    backgroundColor: undefined,
   };
 
   render() {

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%)');
   });
 });

src/nav/ChatNavBar.js

@@ -11,7 +11,7 @@ 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 { getTitleBackgroundColor } from '../title/titleSelectors';
 import { foregroundColorFromBackground } from '../utils/color';
 import { ExtraButton, InfoButton } from '../title-buttons/titleButtonFromNarrow';
 
@@ -24,26 +24,21 @@ export default function ChatNavBar(props: Props) {
   const { narrow, editMessage } = props;
   const backgroundColor = useSelector(state => getTitleBackgroundColor(state, narrow));
   const color =
-    backgroundColor === DEFAULT_TITLE_BACKGROUND_COLOR
-      ? BRAND_COLOR
-      : foregroundColorFromBackground(backgroundColor);
+    backgroundColor === undefined ? BRAND_COLOR : foregroundColorFromBackground(backgroundColor);
   const spinnerColor =
-    backgroundColor === DEFAULT_TITLE_BACKGROUND_COLOR
-      ? 'default'
-      : foregroundColorFromBackground(backgroundColor);
+    backgroundColor === undefined ? 'default' : foregroundColorFromBackground(backgroundColor);
 
   return (
     <SafeAreaView
       mode="padding"
       edges={['top', 'right', 'left']}
       style={{
         borderColor:
-          backgroundColor === DEFAULT_TITLE_BACKGROUND_COLOR
+          backgroundColor === undefined
             ? 'hsla(0, 0%, 50%, 0.25)'
             : Color(backgroundColor).darken(0.1),
         borderBottomWidth: 1,
-        backgroundColor:
-          backgroundColor === DEFAULT_TITLE_BACKGROUND_COLOR ? undefined : backgroundColor,
+        backgroundColor: backgroundColor === undefined ? undefined : backgroundColor,
       }}
     >
       <View

src/title/__tests__/titleSelectors-test.js

@@ -1,6 +1,6 @@
 /* @flow strict-local */
 
-import { DEFAULT_TITLE_BACKGROUND_COLOR, getTitleBackgroundColor } from '../titleSelectors';
+import { getTitleBackgroundColor } from '../titleSelectors';
 import { pmNarrowFromUsersUnsafe, streamNarrow, pm1to1NarrowFromUser } from '../../utils/narrow';
 import * as eg from '../../__tests__/lib/exampleData';
 
@@ -20,11 +20,9 @@ describe('getTitleBackgroundColor', () => {
   });
 
   test('return default for non topic/stream narrow', () => {
-    expect(getTitleBackgroundColor(state, pm1to1NarrowFromUser(eg.otherUser))).toEqual(
-      DEFAULT_TITLE_BACKGROUND_COLOR,
-    );
+    expect(getTitleBackgroundColor(state, pm1to1NarrowFromUser(eg.otherUser))).toEqual(undefined);
     expect(
       getTitleBackgroundColor(state, pmNarrowFromUsersUnsafe([eg.otherUser, eg.thirdUser])),
-    ).toEqual(DEFAULT_TITLE_BACKGROUND_COLOR);
+    ).toEqual(undefined);
   });
 });

src/title/titleSelectors.js

@@ -3,8 +3,6 @@ import type { Narrow, GlobalState } from '../types';
 import { isStreamOrTopicNarrow, streamNameOfNarrow } from '../utils/narrow';
 import { getSubscriptionsByName } from '../subscriptions/subscriptionSelectors';
 
-export const DEFAULT_TITLE_BACKGROUND_COLOR = 'transparent';
-
 /**
  * Background color to use for the app bar in narrow `narrow`.
  *
@@ -14,7 +12,7 @@ export const DEFAULT_TITLE_BACKGROUND_COLOR = 'transparent';
 export const getTitleBackgroundColor = (state: GlobalState, narrow: Narrow) => {
   const subscriptionsByName = getSubscriptionsByName(state);
   if (!isStreamOrTopicNarrow(narrow)) {
-    return DEFAULT_TITLE_BACKGROUND_COLOR;
+    return undefined;
   }
   const streamName = streamNameOfNarrow(narrow);
   return subscriptionsByName.get(streamName)?.color ?? 'gray';