YellowBox: Use Feather Icons for Navigation

Summary: Changes YellowBox to use feather icons for the left and right navigation so that we are not dependent on the system's (sometimes funky) unicode icons. Reviewed By: ejanzer Differential Revision: D9759134 fbshipit-source-id: b957c24afdccc04bfe78ae4750777c387c2acef4
javascripter · Sep 12, 2018 · 5e6e5e9 · 5e6e5e9
1 parent 686ff70
commit 5e6e5e9
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 10 deletions.
diff --git a/Libraries/YellowBox/UI/YellowBoxImageSource.js b/Libraries/YellowBox/UI/YellowBoxImageSource.js
@@ -41,6 +41,18 @@ const YellowBoxImageSource = {
       : scale > 1
         ? 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAf0lEQVRYhe2UvQ2AIBQGL3EBR3AESkv3bxxFN8DmWUgwvkI+En1X0cBd+IMg+DuDyDMCs413kfMiX4EMbD3l8oCaPIU85B4mYLEF5XJscrYFPRGvb/sZ4IlocubJGdH0wj1FSG77XYT0qdUi5O+8jOjyyZQRUnkZ0UUeBMF3OQC/0VsyGlxligAAAABJRU5ErkJggg=='
         : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAASElEQVQ4jWNgGJHAgIGBIYESze8ZGBjWU6L5PAMDgwBNNCdAFZJt83qoQmRDSHK2AFQhzBCy/IxsCNkBJsDAwLAfiknWPBIBAETPFeuA4fr6AAAAAElFTkSuQmCC',
+  chevronLeft:
+    scale > 2
+      ? 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAgElEQVRoge3YMQ6DQBAEwRYvnf8nPAECbAnkyATsrt0lXUyPdAE6kCRJ/yXA+jopLbkhwHY6a2nNl8I1ftSA8Bm/MeQKBeNrBONrBONrBONrhMHxcPwOlMUvT32oszD8CoEj+giO6CE4oofgiB7Cj44Y86zyFoYPgOFPi5Ik6WwHji+QVIOyhqgAAAAASUVORK5CYII='
+      : scale > 1
+        ? 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAaUlEQVRYhe3WsQ2AMAwAwRcs5LEYg3HpYANoQKKgcEEUI/6adM5LbgySfmZsNDeACdiApdEfaQGswH6+Xd1jugc9xYQxxhjz9RhaxwxvDuul3MrAqDyjsozKKnWgXUqdsJcAZgqsTFJ5B7gjUNw0n0HHAAAAAElFTkSuQmCC'
+        : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAARklEQVQ4jWNgGPKAmUh1AQwMDBIMDAwPyLEkgYGB4T/UELI1J9BdcwCxmpnIMZ1YkECsK+hmCNZoZCHCgAUMDAwfoHg4AgDJuQ/bcLyV+QAAAABJRU5ErkJggg==',
+  chevronRight:
+    scale > 2
+      ? 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAeElEQVRoge3YMQ6AIBQE0Ykn3fs3HEEbC6MdFp+v8xJaspNQAZIkqbcA4zwpXTJpAPvlpHTNhHtAu4jwDDCiQjBiDcGINQQj1hCMWEN4Boy3l25vL/iL0PgJBcfXCI6vERxfIzi+Rmg8Hj7wrdL+Yys0/1qUJEmzDvSAkFQ8EOdJAAAAAElFTkSuQmCC'
+      : scale > 1
+        ? 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAZElEQVRYhe3WsQmAQAxA0Y8ulLEcw3HtdANtBNvzCJjD/5pUgQ9pApJ+Zu7YCWABDmDLzemzA+c94+MW4AkqExUY1caoVka1GibqlSm7qJJSJzPGGGMylYqBgi9sACtFYiQN7wKC6VDcJ7tlpQAAAABJRU5ErkJggg=='
+        : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAANUlEQVQ4jWNgGLbAgYGBIYASAwIYGBj+MzAwJFBiSMLQMISJEpMptp2mmimORgcGChPSEAIAHGENPH8gqdYAAAAASUVORK5CYII=',
   loader:
     scale > 2
       ? 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABXElEQVRoge2a3W3DMAyEr+0CHkGjaISOcKN4k6zQETpCR+gGzgbpQ10kcamIpKQ6avQBBPxg3pHwL2UDg/8LASxrcNdKnCwATmssrUyeWgnju/DmXs8tRP+Sh2kgAJga1rFlWj2rcMD5YqQh77QJLbzIORjyRIJQCJW5ngYo5AVlrsgkCGqbsDbAhFfxqZsSZibP0oDXQ43HQPsg82i7sBoR+VcJq2YxKcPo0IoJLRZXmYGC6ezQmQUdVqhPBVH/CNBTSMkLVlzjA8Bbocb7GoPBoADi+umZilYzbrG/JrnljOvy734iu4To/BQaDB6Rl4LciPPF9Lmjhgvi+s7w6tCIGw3WKS0P8fvWNjt0ZkGHFeq7CQXTbkZKGg2JOxrqPUZ3s6ziNdju38IjS/dLi0EQpDLX2gDQYHEX6Hx5/YcA+6H0NgAYPnCMj3x7Mxq4wTGx3Q1E578aDDR8AX0mOGD6BEN/AAAAAElFTkSuQmCC'

diff --git a/Libraries/YellowBox/UI/YellowBoxInspectorHeader.js b/Libraries/YellowBox/UI/YellowBoxInspectorHeader.js
@@ -10,13 +10,14 @@
 
 'use strict';
 
+const Image = require('Image');
 const Platform = require('Platform');
 const React = require('React');
 const SafeAreaView = require('SafeAreaView');
 const StyleSheet = require('StyleSheet');
 const Text = require('Text');
-const UTFSequence = require('UTFSequence');
 const View = require('View');
+const YellowBoxImageSource = require('YellowBoxImageSource');
 const YellowBoxPressable = require('YellowBoxPressable');
 const YellowBoxStyle = require('YellowBoxStyle');
 
@@ -42,15 +43,15 @@ const YellowBoxInspectorHeader = (props: Props): React.Node => {
       <View style={styles.header}>
         <YellowBoxInspectorHeaderButton
           disabled={props.warnings[prevIndex] == null}
-          label={UTFSequence.TRIANGLE_LEFT}
+          image={YellowBoxImageSource.chevronLeft}
           onPress={() => props.onSelectIndex(prevIndex)}
         />
         <View style={styles.headerTitle}>
           <Text style={styles.headerTitleText}>{titleText}</Text>
         </View>
         <YellowBoxInspectorHeaderButton
           disabled={props.warnings[nextIndex] == null}
-          label={UTFSequence.TRIANGLE_RIGHT}
+          image={YellowBoxImageSource.chevronRight}
           onPress={() => props.onSelectIndex(nextIndex)}
         />
       </View>
@@ -61,7 +62,7 @@ const YellowBoxInspectorHeader = (props: Props): React.Node => {
 const YellowBoxInspectorHeaderButton = (
   props: $ReadOnly<{|
     disabled: boolean,
-    label: React.Node,
+    image: string,
     onPress?: ?() => void,
   |}>,
 ): React.Node => (
@@ -73,7 +74,10 @@ const YellowBoxInspectorHeaderButton = (
     onPress={props.disabled ? null : props.onPress}
     style={styles.headerButton}>
     {props.disabled ? null : (
-      <Text style={styles.headerButtonText}>{props.label}</Text>
+      <Image
+        source={{height: 16, uri: props.image, width: 16}}
+        style={styles.headerButtonImage}
+      />
     )}
   </YellowBoxPressable>
 );
@@ -94,11 +98,8 @@ const styles = StyleSheet.create({
     aspectRatio: 1,
     justifyContent: 'center',
   },
-  headerButtonText: {
-    color: YellowBoxStyle.getTextColor(1),
-    fontSize: 16,
-    includeFontPadding: false,
-    lineHeight: 20,
+  headerButtonImage: {
+    tintColor: YellowBoxStyle.getTextColor(1),
   },
   headerTitle: {
     alignItems: 'center',