Remove icons from MenuView (expo#3089)

* [menu] Remove icons in favor of images * [exponent] Add necessary dependencies to make Prettier and ESLint work * publish dev home fbshipit-source-id: 3cdd4e3
lautaro-osacar · Aug 31, 2018 · 1913310 · 1913310
1 parent a1be06b
commit 1913310
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 39 deletions.
diff --git a/dev-home-config.json b/dev-home-config.json
@@ -1,3 +1,3 @@
 {
-  "url": "exp://expo.io/@expo-home-dev/exponent-home-dev-999c7a734bd0c2fafda9b0c6b7d69a2c8556c55e"
+  "url": "exp://expo.io/@expo-home-dev/exponent-home-dev-554b6369fdfee16db72c370e30a619f365929fb4"
 }
diff --git a/home/assets/ios-menu-information-circle.png b/home/assets/ios-menu-information-circle.png
diff --git a/home/assets/menu-md-close.png b/home/assets/menu-md-close.png
diff --git a/home/menu/MenuView.js b/home/menu/MenuView.js
@@ -1,12 +1,11 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
 import {
   Alert,
   AppRegistry,
   Clipboard,
   Dimensions,
   Image,
   NativeModules,
-  Platform,
   PixelRatio,
   ScrollView,
   StatusBar,
@@ -18,7 +17,6 @@ import {
 } from 'react-native';
 
 import Expo, { Constants } from 'expo';
-import { Ionicons } from '@expo/vector-icons';
 import ResponsiveImage from '@expo/react-native-responsive-image';
 
 import DevIndicator from '../components/DevIndicator';
@@ -73,7 +71,7 @@ export default class MenuView extends React.Component {
         });
       }
     });
-  }
+  };
 
   forceStatusBarUpdateAsync = async () => {
     if (NativeModules.StatusBarManager._captureProperties) {
@@ -95,9 +93,9 @@ export default class MenuView extends React.Component {
   };
   render() {
     if (!this.state.isLoaded) {
-      return (<View />);
+      return <View />;
     }
-    
+
     let copyUrlButton;
     if (this.props.task && this.props.task.manifestUrl) {
       copyUrlButton = this._renderButton({
@@ -140,7 +138,10 @@ export default class MenuView extends React.Component {
             onPress={this._onPressClose}
             underlayColor="#eee"
             hitSlop={{ top: 15, bottom: 15, left: 15, right: 15 }}>
-            <Ionicons name="md-close" size={20} style={styles.closeButtonIcon} />
+            <Image
+              source={require('../assets/menu-md-close.png')}
+              style={{ width: 12, height: 20 }}
+            />
           </TouchableHighlight>
         </ScrollView>
       </View>
@@ -224,7 +225,8 @@ export default class MenuView extends React.Component {
 
   _maybeRenderDevServerName() {
     let { task } = this.props;
-    let devServerName = (task.manifest && task.manifest.developer) ? task.manifest.developer.tool : null;
+    let devServerName =
+      task.manifest && task.manifest.developer ? task.manifest.developer.tool : null;
     if (devServerName) {
       // XDE is upper
       if (devServerName === 'xde') {
@@ -286,37 +288,32 @@ export default class MenuView extends React.Component {
         onPress={() => {
           Alert.alert(title, detail);
         }}>
-        <Ionicons
-          name="ios-information-circle"
-          size={20}
-          style={{ color: '#9ca0a6', marginVertical: 10 }}
+        <Image
+          style={{ width: 16, height: 20, marginVertical: 10 }}
+          source={require('../assets/ios-menu-information-circle.png')}
         />
       </TouchableOpacity>
     );
   }
 
   _renderButton(options) {
-    const { key, text, onPress, iconSource, svgName, withSeparator } = options;
+    const { key, text, onPress, iconSource, withSeparator } = options;
 
     let icon;
     if (iconSource) {
       icon = <Image style={styles.buttonIcon} source={iconSource} />;
-    } else if (svgName) {
-      icon = <Ionicons style={styles.buttonSvgIcon} size={20} name={svgName} color="#4e9bde" />;
     } else {
       icon = <View style={styles.buttonIcon} />;
     }
 
-    const buttonTextStyles = svgName ? styles.buttonSvgText : styles.buttonText;
-
     const buttonStyles = withSeparator
       ? [styles.button, styles.buttonWithSeparator]
       : styles.button;
 
     return (
       <TouchableOpacity key={key} style={buttonStyles} onPress={onPress}>
         {icon}
-        <Text style={buttonTextStyles}>{text}</Text>
+        <Text style={styles.buttonText}>{text}</Text>
       </TouchableOpacity>
     );
   }
@@ -360,9 +357,6 @@ let styles = StyleSheet.create({
     backgroundColor: '#ffffff',
     marginTop: Constants.statusBarHeight,
   },
-  closeButtonIcon: {
-    color: '#49a7e8',
-  },
   closeButton: {
     position: 'absolute',
     right: 10,
@@ -441,13 +435,6 @@ let styles = StyleSheet.create({
     marginLeft: 20,
     alignSelf: 'flex-start',
   },
-  buttonSvgIcon: {
-    width: 20,
-    height: 20,
-    marginVertical: 10,
-    marginLeft: 20,
-    alignSelf: 'flex-start',
-  },
   buttonText: {
     color: '#595c68',
     fontSize: 14,
@@ -457,16 +444,6 @@ let styles = StyleSheet.create({
     paddingHorizontal: 12,
     fontWeight: '700',
   },
-  buttonSvgText: {
-    color: '#595c68',
-    fontSize: 14,
-    textAlign: 'left',
-    marginVertical: 12,
-    marginRight: 5,
-    paddingLeft: 9,
-    paddingRight: 12,
-    fontWeight: '700',
-  },
   nuxRow: {
     paddingHorizontal: 12,
   },