MM-13525 Fix alignment of jewel on channel drawer icon (#2473)

* MM-13525 Fix alignement of jewel on channel drawer icon
Fix position of dot
Fix snapshot
Change unread indicator to be View instead of . text

* Fix position of dot for unread indicator in badge

* Update snapshot

app/components/__snapshots__/badge.test.js.snap

@@ -30,6 +30,7 @@ exports[`Badge should match snapshot 1`] = `
         "alignItems": "center",
         "flex": 1,
         "justifyContent": "center",
+        "marginBottom": -1,
       }
     }
   >
@@ -45,7 +46,6 @@ exports[`Badge should match snapshot 1`] = `
             "color": "#145dbf",
             "fontSize": 10,
           },
-          Object {},
         ]
       }
     >

app/components/badge.js

@@ -96,13 +96,26 @@ export default class Badge extends PureComponent {
 
     renderText = () => {
         const {count} = this.props;
-        let text = count.toString();
-        const extra = {};
+        let unreadCount = null;
+        let unreadIndicator = null;
         if (count < 0) {
-            text = '•';
-
-            //the extra margin is to align to the center?
-            extra.marginBottom = 1;
+            unreadIndicator = (
+                <View
+                    style={[styles.text, this.props.countStyle]}
+                    onLayout={this.onLayout}
+                >
+                    <View style={[styles.unreadIndicator, {backgroundColor: this.props.countStyle.color}]}/>
+                </View>
+            );
+        } else {
+            unreadCount = (
+                <Text
+                    style={[styles.text, this.props.countStyle]}
+                    onLayout={this.onLayout}
+                >
+                    {count.toString()}
+                </Text>
+            );
         }
         return (
             <View
@@ -110,12 +123,8 @@ export default class Badge extends PureComponent {
                 style={[styles.badge, this.props.style, {opacity: 0}]}
             >
                 <View style={styles.wrapper}>
-                    <Text
-                        style={[styles.text, this.props.countStyle, extra]}
-                        onLayout={this.onLayout}
-                    >
-                        {text}
-                    </Text>
+                    {unreadCount}
+                    {unreadIndicator}
                 </View>
             </View>
         );
@@ -153,9 +162,16 @@ const styles = StyleSheet.create({
         alignItems: 'center',
         flex: 1,
         justifyContent: 'center',
+        marginBottom: -1,
     },
     text: {
         fontSize: 14,
         color: 'white',
     },
+    unreadIndicator: {
+        height: 4,
+        width: 4,
+        backgroundColor: '#444',
+        borderRadius: 4,
+    },
 });

app/screens/channel/channel_nav_bar/channel_drawer_button.js

@@ -6,7 +6,6 @@ import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import {
     PanResponder,
-    Platform,
     TouchableOpacity,
     View,
 } from 'react-native';
@@ -131,8 +130,10 @@ class ChannelDrawerButton extends PureComponent {
                 style={style.container}
             >
                 <View style={[style.wrapper, {opacity: this.state.opacity}]}>
-                    {icon}
-                    {badge}
+                    <View>
+                        {icon}
+                        {badge}
+                    </View>
                 </View>
             </TouchableOpacity>
         );
@@ -157,22 +158,19 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
             borderRadius: 10,
             borderWidth: 1,
             flexDirection: 'row',
-            left: 3,
+            left: -13,
             padding: 3,
             position: 'absolute',
             right: 0,
-            ...Platform.select({
-                android: {
-                    top: 10,
-                },
-                ios: {
-                    top: 5,
-                },
-            }),
+            top: -4,
+            justifyContent: 'center',
+            alignItems: 'center',
         },
         mention: {
             color: theme.mentionColor,
             fontSize: 10,
+            textAlign: 'center',
+            lineHeight: 12,
         },
     };
 });