styles: Rename uses of context styles, for distinctness.

Mostly this is to help further steps of automated refactoring.

Done with:

  perl -i -0pe 'if (s(const \{ styles \} = this\.context)
                     (const { styles: contextStyles } = this.context)) {
                  s/\bstyles\./contextStyles./g
                }' \
    src/**/*.js

  tools/test prettier --fix

and then a manual fixup for the one case that didn't fit the pattern,
a `this.context.styles.color` in SmartUrlInput.js .

Author: gnprice

src/account-info/AccountDetails.js

@@ -31,7 +31,7 @@ export default class AccountDetails extends PureComponent<Props, void> {
   };
 
   render() {
-    const { styles } = this.context;
+    const { styles: contextStyles } = this.context;
     const { user, presence } = this.props;
     const screenWidth = Dimensions.get('window').width;
 
@@ -44,18 +44,21 @@ export default class AccountDetails extends PureComponent<Props, void> {
           size={screenWidth}
           shape="square"
         />
-        <ComponentList outerSpacing itemStyle={[styles.row, styles.center]}>
+        <ComponentList outerSpacing itemStyle={[contextStyles.row, contextStyles.center]}>
           <View>
             <UserStatusIndicator presence={presence} hideIfOffline={false} />
-            <RawLabel style={[styles.largerText, styles.halfMarginLeft]} text={user.email} />
+            <RawLabel
+              style={[contextStyles.largerText, contextStyles.halfMarginLeft]}
+              text={user.email}
+            />
           </View>
           <View>
-            <ActivityText style={styles.largerText} email={user.email} />
+            <ActivityText style={contextStyles.largerText} email={user.email} />
           </View>
           {user.timezone ? (
             <View>
               <RawLabel
-                style={styles.largerText}
+                style={contextStyles.largerText}
                 text={`${nowInTimeZone(user.timezone)} Local time`}
               />
             </View>

src/chat/Chat.js

@@ -32,12 +32,12 @@ export default class Chat extends PureComponent<Props> {
   scrollOffset: number = 0;
 
   render() {
-    const { styles } = this.context;
+    const { styles: contextStyles } = this.context;
     const { narrow } = this.props;
 
     return (
-      <KeyboardAvoider style={styles.flexed} behavior="padding">
-        <View style={styles.flexed}>
+      <KeyboardAvoider style={contextStyles.flexed} behavior="padding">
+        <View style={contextStyles.flexed}>
           <View style={componentStyles.reverse}>
             <MessageList narrow={narrow} />
             <NoMessages narrow={narrow} />

src/chat/ChatScreen.js

@@ -35,12 +35,12 @@ export default class ChatScreen extends PureComponent<Props> {
   };
 
   render() {
-    const { styles } = this.context;
+    const { styles: contextStyles } = this.context;
     const { narrow } = this.props.navigation.state.params;
 
     return (
       <ActionSheetProvider>
-        <View style={styles.screen}>
+        <View style={contextStyles.screen}>
           <ZulipStatusBar narrow={narrow} />
           <View style={componentStyles.reverse}>
             <Chat narrow={narrow} />

src/common/Centerer.js

@@ -43,11 +43,11 @@ export default class Centerer extends PureComponent<Props> {
   };
 
   render() {
-    const { styles } = this.context;
+    const { styles: contextStyles } = this.context;
     const { children, padding, style } = this.props;
 
     return (
-      <View style={[componentStyles.centerer, padding && styles.padding, style]}>
+      <View style={[componentStyles.centerer, padding && contextStyles.padding, style]}>
         <View style={componentStyles.inner}>{children}</View>
       </View>
     );

src/common/Input.js

@@ -66,7 +66,7 @@ export default class Input extends PureComponent<Props, State> {
   };
 
   render() {
-    const { styles } = this.context;
+    const { styles: contextStyles } = this.context;
     const { style, placeholder, textInputRef, ...restProps } = this.props;
     const { isFocused } = this.state;
     const fullPlaceholder =
@@ -82,7 +82,7 @@ export default class Input extends PureComponent<Props, State> {
       >
         {(text: string) => (
           <TextInput
-            style={[styles.input, style]}
+            style={[contextStyles.input, style]}
             placeholder={text}
             placeholderTextColor={HALF_COLOR}
             underlineColorAndroid={isFocused ? BORDER_COLOR : HALF_COLOR}

src/common/InputWithClearButton.js

@@ -58,11 +58,11 @@ export default class InputWithClearButton extends PureComponent<Props, State> {
   };
 
   render() {
-    const { styles } = this.context;
+    const { styles: contextStyles } = this.context;
     const { canBeCleared, text } = this.state;
 
     return (
-      <View style={styles.row}>
+      <View style={contextStyles.row}>
         <Input
           {...this.props}
           textInputRef={textInput => {

src/common/Label.js

@@ -31,11 +31,11 @@ export default class Label extends PureComponent<Props> {
   };
 
   render() {
-    const { styles } = this.context;
+    const { styles: contextStyles } = this.context;
     const { text, style, ...restProps } = this.props;
 
     return (
-      <Text style={[styles.label, style]} {...restProps}>
+      <Text style={[contextStyles.label, style]} {...restProps}>
         <TranslatedText text={text} />
       </Text>
     );

src/common/OptionButton.js

@@ -22,15 +22,15 @@ export default class OptionButton extends PureComponent<Props> {
 
   render() {
     const { label, onPress, Icon } = this.props;
-    const { styles } = this.context;
+    const { styles: contextStyles } = this.context;
 
     return (
       <Touchable onPress={onPress}>
-        <View style={styles.listItem}>
-          {Icon && <Icon size={18} style={[styles.icon, styles.settingsIcon]} />}
+        <View style={contextStyles.listItem}>
+          {Icon && <Icon size={18} style={[contextStyles.icon, contextStyles.settingsIcon]} />}
           <Label text={label} />
-          <View style={styles.rightItem}>
-            <IconRight size={18} style={[styles.icon, styles.settingsIcon]} />
+          <View style={contextStyles.rightItem}>
+            <IconRight size={18} style={[contextStyles.icon, contextStyles.settingsIcon]} />
           </View>
         </View>
       </Touchable>

src/common/OptionDivider.js

@@ -12,8 +12,8 @@ export default class OptionDivider extends PureComponent<{}> {
   };
 
   render() {
-    const { styles } = this.context;
+    const { styles: contextStyles } = this.context;
 
-    return <View style={styles.divider} />;
+    return <View style={contextStyles.divider} />;
   }
 }

src/common/OptionRow.js

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