styles: Move styles for ComposeBox to component file.

These are used in just this one place, and they're closely bound up
with the sub-component tree in the `render` method.  Move them there
to make both the styles and the `render` code easier to understand and
to modify.

Author: gnprice

src/compose/ComposeBox.js

@@ -1,6 +1,6 @@
 /* @flow strict-local */
 import React, { PureComponent } from 'react';
-import { View, TextInput, findNodeHandle } from 'react-native';
+import { Platform, View, TextInput, findNodeHandle } from 'react-native';
 import { connect } from 'react-redux';
 import TextInputReset from 'react-native-text-input-reset';
 
@@ -251,10 +251,43 @@ class ComposeBox extends PureComponent<Props, State> {
     }
   }
 
+  inputMarginPadding = {
+    paddingHorizontal: 8,
+    paddingVertical: Platform.select({
+      ios: 8,
+      android: 2,
+    }),
+  };
+
   styles = {
-    topicInput: [styles.topicInput, this.context.styles.backgroundColor],
+    composeBox: {
+      flexDirection: 'row',
+      backgroundColor: 'rgba(127, 127, 127, 0.1)',
+    },
+    composeText: {
+      flex: 1,
+      paddingVertical: 8,
+      justifyContent: 'center',
+    },
+    composeSendButton: {
+      padding: 8,
+    },
+    topicInput: [
+      {
+        borderWidth: 0,
+        borderRadius: 5,
+        marginBottom: 8,
+        ...this.inputMarginPadding,
+      },
+      this.context.styles.backgroundColor,
+    ],
     composeTextInput: [
-      styles.composeTextInput,
+      {
+        borderWidth: 0,
+        borderRadius: 5,
+        fontSize: 15,
+        ...this.inputMarginPadding,
+      },
       this.context.styles.backgroundColor,
       this.context.styles.color,
     ],
@@ -298,15 +331,15 @@ class ComposeBox extends PureComponent<Props, State> {
           onMessageAutocomplete={this.handleMessageAutocomplete}
           onTopicAutocomplete={this.handleTopicAutocomplete}
         />
-        <View style={styles.composeBox} onLayout={this.handleLayoutChange}>
+        <View style={this.styles.composeBox} onLayout={this.handleLayoutChange}>
           <View style={styles.alignBottom}>
             <ComposeMenu
               destinationNarrow={this.getDestinationNarrow()}
               expanded={isMenuExpanded}
               onExpandContract={this.handleComposeMenuToggle}
             />
           </View>
-          <View style={styles.composeText}>
+          <View style={this.styles.composeText}>
             {this.getCanSelectTopic() && (
               <Input
                 style={this.styles.topicInput}
@@ -341,7 +374,7 @@ class ComposeBox extends PureComponent<Props, State> {
           </View>
           <View style={styles.alignBottom}>
             <FloatingActionButton
-              style={styles.composeSendButton}
+              style={this.styles.composeSendButton}
               Icon={editMessage === null ? IconSend : IconDone}
               size={32}
               disabled={message.trim().length === 0}

src/styles/composeBoxStyles.js

@@ -1,33 +1,8 @@
 /* @flow strict-local */
-import { Platform } from 'react-native';
 
 import { BRAND_COLOR } from './constants';
 
-const inputMarginPadding = {
-  paddingHorizontal: 8,
-  ...Platform.select({
-    ios: {
-      paddingVertical: 8,
-    },
-    android: {
-      paddingVertical: 2,
-    },
-  }),
-};
-
 export default {
-  composeBox: {
-    flexDirection: 'row',
-    backgroundColor: 'rgba(127, 127, 127, 0.1)',
-  },
-  composeText: {
-    flex: 1,
-    paddingVertical: 8,
-    justifyContent: 'center',
-  },
-  composeSendButton: {
-    padding: 8,
-  },
   composeMenu: {
     flexDirection: 'row',
     overflow: 'hidden',
@@ -56,16 +31,4 @@ export default {
     flex: 1,
     color: 'white',
   },
-  composeTextInput: {
-    borderWidth: 0,
-    borderRadius: 5,
-    fontSize: 15,
-    ...inputMarginPadding,
-  },
-  topicInput: {
-    borderWidth: 0,
-    borderRadius: 5,
-    marginBottom: 8,
-    ...inputMarginPadding,
-  },
 };