theme: Fix latent bug with colors not updating on rerender.

Compute theme-dependent styles in the render method.

As foreshadowed in a previous commit that touched
src/common/Screen.js, fix the remaining latent bugs where the
placement of theme-dependent styles in a class initializer, instead
of the `render` method, meant that these styles don't live-update
when the theme changes, unless the component is unmounted and a new
instance is created to replace it.

The `key={theme}` hack accomplished this replacement, so this bug
hasn't been visible. But that hack will disappear in an upcoming
commit, so this change needs to be made before then.

These bugs were introduced in

51dd1b3: LineSeparator.js
a4e0f23: OptionButton.js and OptionRow.js
f6ddc2d: OptionDivider.js

src/common/LineSeparator.js

@@ -12,12 +12,13 @@ export default class LineSeparator extends PureComponent<{||}> {
   styles = {
     lineSeparator: {
       height: 1,
-      backgroundColor: this.context.cardColor,
       margin: 4,
     },
   };
 
   render() {
-    return <View style={this.styles.lineSeparator} />;
+    return (
+      <View style={[this.styles.lineSeparator, { backgroundColor: this.context.cardColor }]} />
+    );
   }
 }

src/common/OptionButton.js

@@ -20,10 +20,7 @@ export default class OptionButton extends PureComponent<Props> {
   context: ThemeColors;
 
   styles = {
-    icon: {
-      ...styles.settingsIcon,
-      color: this.context.color,
-    },
+    icon: styles.settingsIcon,
   };
 
   render() {
@@ -32,10 +29,10 @@ export default class OptionButton extends PureComponent<Props> {
     return (
       <Touchable onPress={onPress}>
         <View style={styles.listItem}>
-          {!!Icon && <Icon size={18} style={this.styles.icon} />}
+          {!!Icon && <Icon size={18} style={[this.styles.icon, { color: this.context.color }]} />}
           <Label text={label} />
           <View style={styles.rightItem}>
-            <IconRight size={18} style={this.styles.icon} />
+            <IconRight size={18} style={[this.styles.icon, { color: this.context.color }]} />
           </View>
         </View>
       </Touchable>

src/common/OptionDivider.js

@@ -12,11 +12,10 @@ export default class OptionDivider extends PureComponent<{||}> {
   styles = {
     divider: {
       borderBottomWidth: 1,
-      borderBottomColor: this.context.dividerColor,
     },
   };
 
   render() {
-    return <View style={this.styles.divider} />;
+    return <View style={[this.styles.divider, { borderBottomColor: this.context.dividerColor }]} />;
   }
 }

src/common/OptionRow.js

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