Left align title text in channel view navbar (#1327)

* Left align title text in channel view navbar

* UI feedback review

app/screens/channel/channel_nav_bar/channel_drawer_button.js

@@ -145,17 +145,14 @@ class ChannelDrawerButton extends PureComponent {
 const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
     return {
         container: {
-            width: 40,
-            zIndex: 45
+            width: 55
         },
         wrapper: {
             alignItems: 'center',
             flex: 1,
             flexDirection: 'column',
             justifyContent: 'center',
-            paddingHorizontal: 10,
-            paddingTop: 5,
-            zIndex: 30
+            paddingHorizontal: 10
         },
         badge: {
             backgroundColor: theme.mentionBj,

app/screens/channel/channel_nav_bar/channel_nav_bar.js

@@ -67,11 +67,7 @@ export default class ChannelNavBar extends PureComponent {
         return (
             <View style={[style.header, padding, {height}]}>
                 <ChannelDrawerButton openDrawer={openChannelDrawer}/>
-                <ChannelTitle
-                    onPress={onPress}
-                    height={height}
-                />
-                <View style={{flex: 1}}/>
+                <ChannelTitle onPress={onPress}/>
                 <ChannelSearchButton
                     navigator={navigator}
                     theme={theme}

app/screens/channel/channel_nav_bar/channel_search_button/channel_search_button.js

@@ -74,13 +74,14 @@ export default class ChannelSearchButton extends PureComponent {
 const getStyle = makeStyleSheetFromTheme((theme) => {
     return {
         container: {
-            width: 40,
-            zIndex: 45
+            width: 40
         },
         flex: {
             flex: 1
         },
         wrapper: {
+            position: 'relative',
+            top: -1,
             alignItems: 'flex-end',
             flex: 1,
             flexDirection: 'column',

app/screens/channel/channel_nav_bar/channel_title/channel_title.js

@@ -16,9 +16,7 @@ import {makeStyleSheetFromTheme} from 'app/utils/theme';
 export default class ChannelTitle extends PureComponent {
     static propTypes = {
         currentChannelName: PropTypes.string,
-        deviceWidth: PropTypes.number,
         displayName: PropTypes.string,
-        height: PropTypes.number,
         onPress: PropTypes.func,
         theme: PropTypes.object
     };
@@ -30,7 +28,7 @@ export default class ChannelTitle extends PureComponent {
     };
 
     render() {
-        const {currentChannelName, deviceWidth, displayName, height, onPress, theme} = this.props;
+        const {currentChannelName, displayName, onPress, theme} = this.props;
         const channelName = displayName || currentChannelName;
         const style = getStyle(theme);
         let icon;
@@ -46,20 +44,18 @@ export default class ChannelTitle extends PureComponent {
 
         return (
             <TouchableOpacity
-                style={[style.container, {height, width: deviceWidth}]}
+                style={style.container}
                 onPress={onPress}
             >
-                <View style={[style.wrapper, {width: deviceWidth}]}>
-                    <View style={style.innerContainer}>
-                        <Text
-                            ellipsizeMode='tail'
-                            numberOfLines={1}
-                            style={style.text}
-                        >
-                            {channelName}
-                        </Text>
-                        {icon}
-                    </View>
+                <View style={style.wrapper}>
+                    <Text
+                        ellipsizeMode='tail'
+                        numberOfLines={1}
+                        style={style.text}
+                    >
+                        {channelName}
+                    </Text>
+                    {icon}
                 </View>
             </TouchableOpacity>
         );
@@ -69,18 +65,15 @@ export default class ChannelTitle extends PureComponent {
 const getStyle = makeStyleSheetFromTheme((theme) => {
     return {
         container: {
-            position: 'absolute',
-            zIndex: 40
+            flex: 1
         },
         wrapper: {
             alignItems: 'center',
             flex: 1,
-            justifyContent: 'center'
-        },
-        innerContainer: {
-            alignItems: 'center',
+            position: 'relative',
+            top: -1,
             flexDirection: 'row',
-            marginHorizontal: 55
+            justifyContent: 'flex-start'
         },
         icon: {
             color: theme.sidebarHeaderTextColor,
@@ -88,7 +81,7 @@ const getStyle = makeStyleSheetFromTheme((theme) => {
         },
         text: {
             color: theme.sidebarHeaderTextColor,
-            fontSize: 17,
+            fontSize: 18,
             fontWeight: 'bold',
             textAlign: 'center'
         }

app/screens/channel/channel_nav_bar/channel_title/index.js

@@ -6,15 +6,12 @@ import {connect} from 'react-redux';
 import {getCurrentChannel} from 'mattermost-redux/selectors/entities/channels';
 import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
 
-import {getDimensions} from 'app/selectors/device';
-
 import ChannelTitle from './channel_title';
 
 function mapStateToProps(state) {
     const currentChannel = getCurrentChannel(state);
 
     return {
-        ...getDimensions(state),
         currentChannelName: currentChannel ? currentChannel.display_name : '',
         displayName: state.views.channel.displayName,
         theme: getTheme(state)

app/screens/channel/channel_nav_bar/settings_drawer_button.js

@@ -57,16 +57,14 @@ class SettingDrawerButton extends PureComponent {
 const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
     return {
         container: {
-            width: 44,
-            zIndex: 45
+            width: 44
         },
         wrapper: {
             alignItems: 'center',
             flex: 1,
             flexDirection: 'column',
             justifyContent: 'center',
-            marginLeft: 8,
-            zIndex: 30
+            marginLeft: 8
         },
         mention: {
             color: theme.mentionColor,