Fix alignment of count on channel drawer (#2569)

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

@@ -28,29 +28,41 @@ exports[`Badge should match snapshot 1`] = `
     style={
       Object {
         "alignItems": "center",
+        "alignSelf": "center",
         "flex": 1,
         "justifyContent": "center",
-        "marginBottom": -1,
       }
     }
   >
-    <Text
-      onLayout={[Function]}
+    <View
       style={
-        Array [
-          Object {
-            "color": "white",
-            "fontSize": 14,
-          },
-          Object {
-            "color": "#145dbf",
-            "fontSize": 10,
-          },
-        ]
+        Object {
+          "alignItems": "center",
+          "flex": 1,
+          "flexDirection": "row",
+          "justifyContent": "center",
+          "textAlignVertical": "center",
+        }
       }
     >
-      1
-    </Text>
+      <Text
+        onLayout={[Function]}
+        style={
+          Array [
+            Object {
+              "color": "white",
+              "fontSize": 14,
+            },
+            Object {
+              "color": "#145dbf",
+              "fontSize": 10,
+            },
+          ]
+        }
+      >
+        1
+      </Text>
+    </View>
   </View>
 </View>
 `;

app/components/badge.js

@@ -104,17 +104,21 @@ export default class Badge extends PureComponent {
                     style={[styles.text, this.props.countStyle]}
                     onLayout={this.onLayout}
                 >
-                    <View style={[styles.unreadIndicator, {backgroundColor: this.props.countStyle.color}]}/>
+                    <View style={styles.verticalAlign}>
+                        <View style={[styles.unreadIndicator, {backgroundColor: this.props.countStyle.color}]}/>
+                    </View>
                 </View>
             );
         } else {
             unreadCount = (
-                <Text
-                    style={[styles.text, this.props.countStyle]}
-                    onLayout={this.onLayout}
-                >
-                    {count.toString()}
-                </Text>
+                <View style={styles.verticalAlign}>
+                    <Text
+                        style={[styles.text, this.props.countStyle]}
+                        onLayout={this.onLayout}
+                    >
+                        {count.toString()}
+                    </Text>
+                </View>
             );
         }
         return (
@@ -159,10 +163,10 @@ const styles = StyleSheet.create({
         top: 2,
     },
     wrapper: {
-        alignItems: 'center',
         flex: 1,
+        alignItems: 'center',
         justifyContent: 'center',
-        marginBottom: -1,
+        alignSelf: 'center',
     },
     text: {
         fontSize: 14,
@@ -174,4 +178,11 @@ const styles = StyleSheet.create({
         backgroundColor: '#444',
         borderRadius: 4,
     },
+    verticalAlign: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        textAlignVertical: 'center',
+    },
 });

app/screens/channel/channel_nav_bar/channel_drawer_button.js

@@ -152,20 +152,15 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
             borderColor: theme.sidebarHeaderBg,
             borderRadius: 10,
             borderWidth: 1,
-            flexDirection: 'row',
             left: -13,
             padding: 3,
             position: 'absolute',
             right: 0,
             top: -4,
-            justifyContent: 'center',
-            alignItems: 'center',
         },
         mention: {
             color: theme.mentionColor,
             fontSize: 10,
-            textAlign: 'center',
-            lineHeight: 12,
         },
     };
 });