theme: Remove remaining consumers of legacy Context for styles.

Continuing the work of recent commits toward zulip#1946.

These last few consumers are simply using `background` or
`backgroundColor` from the old style context, and no
theme-independent styles, so, fix them together in one commit.

Then, to help verify that all consumers are removed:

Atomically, in this commit, remove the default-exported function of
`miscStyles`, and its only call site, at `stylesFromTheme`.
`stylesFromTheme` is the single point where all the data is
collected and distributed as `styles` via the legacy Context API. (A
similar removal, for `navStyles`, is bfdde6f.)

Author: Chris Bobbe

src/common/Popup.js

@@ -3,7 +3,8 @@ import React, { PureComponent } from 'react';
 import type { Node as React$Node } from 'react';
 import { View, StyleSheet } from 'react-native';
 
-import type { Context } from '../types';
+import type { ThemeColors } from '../styles';
+import { ThemeContext } from '../styles';
 
 const styles = StyleSheet.create({
   popup: {
@@ -22,15 +23,14 @@ type Props = $ReadOnly<{|
 |}>;
 
 export default class Popup extends PureComponent<Props> {
-  context: Context;
-
-  static contextTypes = {
-    styles: () => null,
-  };
+  static contextType = ThemeContext;
+  context: ThemeColors;
 
   render() {
     return (
-      <View style={[this.context.styles.backgroundColor, styles.popup]}>{this.props.children}</View>
+      <View style={[{ backgroundColor: this.context.backgroundColor }, styles.popup]}>
+        {this.props.children}
+      </View>
     );
   }
 }

src/common/SectionHeader.js

@@ -2,7 +2,8 @@
 import React, { PureComponent } from 'react';
 import { StyleSheet, View } from 'react-native';
 
-import type { Context } from '../types';
+import type { ThemeColors } from '../styles';
+import { ThemeContext } from '../styles';
 import Label from './Label';
 
 const styles = StyleSheet.create({
@@ -17,16 +18,13 @@ type Props = $ReadOnly<{|
 |}>;
 
 export default class SectionHeader extends PureComponent<Props> {
-  context: Context;
-
-  static contextTypes = {
-    styles: () => null,
-  };
+  static contextType = ThemeContext;
+  context: ThemeColors;
 
   render() {
     const { text } = this.props;
     return (
-      <View style={[styles.header, this.context.styles.backgroundColor]}>
+      <View style={[styles.header, { backgroundColor: this.context.backgroundColor }]}>
         <Label text={text} />
       </View>
     );

src/compose/ComposeBox.js

@@ -4,9 +4,10 @@ import { Platform, View, TextInput, findNodeHandle } from 'react-native';
 import type { LayoutEvent } from 'react-native/Libraries/Types/CoreEventTypes';
 import TextInputReset from 'react-native-text-input-reset';
 
+import type { ThemeColors } from '../styles';
+import { ThemeContext } from '../styles';
 import type {
   Auth,
-  Context,
   Narrow,
   EditMessage,
   InputSelection,
@@ -102,17 +103,14 @@ export const updateTextInput = (textInput: ?TextInput, text: string): void => {
 };
 
 class ComposeBox extends PureComponent<Props, State> {
-  context: Context;
+  static contextType = ThemeContext;
+  context: ThemeColors;
 
   messageInput: ?TextInput = null;
   topicInput: ?TextInput = null;
 
   inputBlurTimeoutId: ?TimeoutID = null;
 
-  static contextTypes = {
-    styles: () => null,
-  };
-
   state = {
     isMessageFocused: false,
     isTopicFocused: false,
@@ -322,15 +320,13 @@ class ComposeBox extends PureComponent<Props, State> {
       borderRadius: 5,
       marginBottom: 8,
       ...this.inputMarginPadding,
-      ...this.context.styles.backgroundColor,
     },
     composeTextInput: {
       borderWidth: 0,
       borderRadius: 5,
       fontSize: 15,
       flexShrink: 1,
       ...this.inputMarginPadding,
-      ...this.context.styles.backgroundColor,
     },
   };
 
@@ -384,7 +380,7 @@ class ComposeBox extends PureComponent<Props, State> {
           <View style={this.styles.composeText}>
             {this.getCanSelectTopic() && (
               <Input
-                style={this.styles.topicInput}
+                style={[this.styles.topicInput, { backgroundColor: this.context.backgroundColor }]}
                 underlineColorAndroid="transparent"
                 placeholder="Topic"
                 defaultValue={topic}
@@ -400,7 +396,10 @@ class ComposeBox extends PureComponent<Props, State> {
             )}
             <Input
               multiline={!isMenuExpanded}
-              style={this.styles.composeTextInput}
+              style={[
+                this.styles.composeTextInput,
+                { backgroundColor: this.context.backgroundColor },
+              ]}
               underlineColorAndroid="transparent"
               placeholder={placeholder}
               defaultValue={message}

src/main/MainScreenWithTabs.js

@@ -2,23 +2,18 @@
 import React, { PureComponent } from 'react';
 import { View } from 'react-native';
 
-import type { Context } from '../types';
+import type { ThemeColors } from '../styles';
+import styles, { ThemeContext } from '../styles';
 import { OfflineNotice, ZulipStatusBar } from '../common';
 import MainTabs from './MainTabs';
-import styles from '../styles';
 
 export default class MainScreenWithTabs extends PureComponent<{||}> {
-  context: Context;
-
-  static contextTypes = {
-    styles: () => null,
-  };
+  static contextType = ThemeContext;
+  context: ThemeColors;
 
   render() {
-    const { styles: contextStyles } = this.context;
-
     return (
-      <View style={[styles.flexed, contextStyles.backgroundColor]}>
+      <View style={[styles.flexed, { backgroundColor: this.context.backgroundColor }]}>
         <ZulipStatusBar />
         <OfflineNotice />
         <MainTabs />

src/pm-conversations/PmConversationsCard.js

@@ -3,7 +3,9 @@
 import React, { PureComponent } from 'react';
 import { View, StyleSheet } from 'react-native';
 
-import type { Context, Dispatch, PmConversationData, UserOrBot } from '../types';
+import type { ThemeColors } from '../styles';
+import { ThemeContext } from '../styles';
+import type { Dispatch, PmConversationData, UserOrBot } from '../types';
 import { connect } from '../react-redux';
 import { Label, ZulipButton, LoadingBanner } from '../common';
 import { IconPeople, IconSearch } from '../common/Icons';
@@ -40,18 +42,14 @@ type Props = $ReadOnly<{|
  * The "PMs" page in the main tabs navigation.
  * */
 class PmConversationsCard extends PureComponent<Props> {
-  context: Context;
-
-  static contextTypes = {
-    styles: () => null,
-  };
+  static contextType = ThemeContext;
+  context: ThemeColors;
 
   render() {
-    const { styles: contextStyles } = this.context;
     const { dispatch, conversations, usersByEmail } = this.props;
 
     return (
-      <View style={[styles.container, contextStyles.background]}>
+      <View style={[styles.container, { backgroundColor: this.context.backgroundColor }]}>
         <View style={styles.row}>
           <ZulipButton
             secondary

src/styles/miscStyles.js

@@ -1,5 +1,4 @@
 /* @flow strict-local */
-import type { ThemeColors } from './theme';
 import { CONTROL_SIZE } from './constants';
 
 export const statics = {
@@ -54,12 +53,3 @@ export const statics = {
     justifyContent: 'flex-end',
   },
 };
-
-export default ({ color, backgroundColor }: ThemeColors) => ({
-  backgroundColor: {
-    backgroundColor,
-  },
-  background: {
-    backgroundColor,
-  },
-});

src/styles/theme.js

@@ -4,7 +4,6 @@ import type { Context } from 'react';
 import { StyleSheet } from 'react-native';
 
 import type { ThemeName } from '../types';
-import miscStyles from './miscStyles';
 
 export type ThemeColors = {|
   color: string,
@@ -13,9 +12,7 @@ export type ThemeColors = {|
   dividerColor: string,
 |};
 
-export type AppStyles = $ReadOnly<{|
-  ...$Call<typeof miscStyles, ThemeColors>,
-|}>;
+export type AppStyles = $ReadOnly<{||}>;
 
 export const themeColors: { [string]: ThemeColors } = {
   night: {
@@ -39,9 +36,4 @@ themeColors.default = themeColors.light;
 
 export const ThemeContext: Context<ThemeColors> = React.createContext(themeColors.default);
 
-export const stylesFromTheme = (name: ThemeName) => {
-  const colors = themeColors[name];
-  return StyleSheet.create({
-    ...miscStyles(colors),
-  });
-};
+export const stylesFromTheme = (name: ThemeName) => StyleSheet.create({});