Channel switcher UI improvements (#6564)

* Channel switcher UI improvements

* Reverting mattermost theme

* Fixing spacing above the button

* Updating switcher button

* PLT-6691 - Fixing tablet header

webapp/components/quick_switch_modal/quick_switch_modal.jsx

@@ -301,7 +301,7 @@ export default class QuickSwitchModal extends React.PureComponent {
                 <Modal.Header closeButton={true}/>
                 <Modal.Body>
                     {header}
-                    <div className='modal__hint'>
+                    <div className='modal__hint hidden-xs'>
                         {help}
                     </div>
                     <SuggestionBox

webapp/components/sidebar.jsx

@@ -806,11 +806,13 @@ export default class Sidebar extends React.Component {
             );
         }
 
-        let quickSwitchText = 'sidebar.switch_channels';
+        const quickSwitchText = 'channel_switch_modal.title';
-        let quickSwitchDefault = 'Switch Channels (CTRL + K)';
+
+        let quickSwitchTextShortcut = 'quick_switch_modal.channelsShortcut.windows';
+        let quickSwitchDefault = '- CTRL+K';
         if (Utils.isMac()) {
-            quickSwitchText += '.mac';
+            quickSwitchTextShortcut = 'quick_switch_modal.channelsShortcut.mac';
-            quickSwitchDefault = 'Switch Channels (CMD + K)';
+            quickSwitchDefault = '- ⌘K';
         }
 
         return (
@@ -913,17 +915,22 @@ export default class Sidebar extends React.Component {
                         {directMessageMore}
                     </ul>
                 </div>
-                <div style={{height: '20px', width: '100%'}}>
+                <div className='sidebar__switcher'>
-                    <a
+                    <button
-                        href='#'
+                        className='btn btn-link'
-                        className='sidebar__switcher'
                         onClick={this.openQuickSwitcher}
                     >
                         <FormattedMessage
                             id={quickSwitchText}
-                            defaultMessage={quickSwitchDefault}
+                            defaultMessage='Switch Channels'
                         />
-                    </a>
+                        <span className='switch__shortcut'>
+                            <FormattedMessage
+                                id={quickSwitchTextShortcut}
+                                defaultMessage={quickSwitchDefault}
+                            />
+                        </span>
+                    </button>
                 </div>
             </div>
         );

webapp/i18n/en.json

@@ -1173,10 +1173,10 @@
   "quick_switch_modal.help_no_team": "Type a channel name. Use ↑↓ to browse, ↵ to confirm, ESC to dismiss",
   "quick_switch_modal.channels": "Channels",
   "quick_switch_modal.teams": "Teams",
-  "quick_switch_modal.teamsShortcut.mac": "(CMD+ALT+K)",
+  "quick_switch_modal.teamsShortcut.mac": "- ⌘⌥K",
-  "quick_switch_modal.teamsShortcut.windows": "(CTRL+ALT+K)",
+  "quick_switch_modal.teamsShortcut.windows": "- CTRL+ALT+K",
-  "quick_switch_modal.channelsShortcut.mac": "(CMD+K)",
+  "quick_switch_modal.channelsShortcut.mac": "- ⌘K",
-  "quick_switch_modal.channelsShortcut.windows": "(CTRL+K)",
+  "quick_switch_modal.channelsShortcut.windows": "- CTRL+K",
   "channel_switch_modal.not_found": "No matches found.",
   "channel_switch_modal.submit": "Switch",
   "channel_switch_modal.title": "Switch Channels",
@@ -1974,8 +1974,6 @@
   "sidebar.moreElips": "More...",
   "sidebar.otherMembers": "Outside this team",
   "sidebar.pg": "Private Channels",
-  "sidebar.switch_channels": "Switch Channels (CTRL + K)",
-  "sidebar.switch_channels.mac": "Switch Channels (CMD + K)",
   "sidebar.removeList": "Remove from list",
   "sidebar.tutorialScreen1": "<h4>Channels</h4><p><strong>Channels</strong> organize conversations across different topics. They’re open to everyone on your team. To send private communications use <strong>Direct Messages</strong> for a single person or <strong>Private Channel</strong> for multiple people.</p>",
   "sidebar.tutorialScreen2": "<h4>\"{townsquare}\" and \"{offtopic}\" channels</h4><p>Here are two public channels to start:</p><p><strong>{townsquare}</strong> is a place for team-wide communication. Everyone in your team is a member of this channel.</p><p><strong>{offtopic}</strong> is a place for fun and humor outside of work-related channels. You and your team can decide what other channels to create.</p>",

webapp/sass/components/_modal.scss

@@ -79,6 +79,7 @@
         .channel-switch-modal {
             .modal-header {
                 background: transparent;
+                border: none;
                 min-height: 0;
                 padding: 0;
 

webapp/sass/layout/_sidebar-left.scss

@@ -44,42 +44,37 @@
     }
 
     .sidebar__switcher {
-        border-top: 2px solid;
+        border-top: 1px solid;
         bottom: 0;
         display: block;
-        height: 45px;
-        line-height: 45px;
         position: absolute;
-        text-align: center;
-        text-decoration: none;
         width: 100%;
 
-        &:after {
+        button {
             @include single-transition(all, .15s, ease-in);
-            background: alpha-color($black, .1);
+            display: block;
-            content: '';
+            height: 42px;
-            display: none;
+            text-align: center;
-            height: 100%;
+            text-decoration: none;
-            left: 0;
-            position: absolute;
-            top: 0;
             width: 100%;
-        }
 
-        span {
+            > span {
-            @include single-transition(all, .15s, ease-in);
+                @include single-transition(all, .15s, ease-in);
-            @include opacity(.8);
+                @include opacity(.6);
-        }
+                position: relative;
-
+                z-index: 5;
-        &:hover {
-            &:after {
-                display: block;
             }
 
-            span {
+            &:hover {
-                @include opacity(1);
+                span {
+                    @include opacity(1);
+                }
             }
         }
+
+        .switch__shortcut {
+            margin-left: 4px;
+        }
     }
 
     .dropdown-menu {
@@ -105,7 +100,7 @@
 
     .nav-pills__container {
         -webkit-overflow-scrolling: touch;
-        height: calc(100% - 110px);
+        height: calc(100% - 99px);
         overflow: auto;
         position: relative;
     }
@@ -127,7 +122,7 @@
     }
 
     .nav-pills__unread-indicator-bottom {
-        bottom: 60px;
+        bottom: 50px;
     }
 
     .nav {

webapp/sass/responsive/_tablet.scss

@@ -10,7 +10,7 @@
 
     .channel-header {
         .heading {
-            max-width: 100px;
+            max-width: 90px;
         }
     }
 

webapp/utils/constants.jsx

@@ -481,28 +481,28 @@ export const Constants = {
         },
         mattermost: {
             type: 'Mattermost',
-            sidebarBg: '#1a1d1f',
+            sidebarBg: '#fafafa',
-            sidebarText: '#ffffff',
+            sidebarText: '#333333',
-            sidebarUnreadText: '#e8e8e8',
+            sidebarUnreadText: '#333333',
-            sidebarTextHoverBg: '#525252',
+            sidebarTextHoverBg: '#e6f2fa',
-            sidebarTextActiveBorder: '#27a1b2',
+            sidebarTextActiveBorder: '#378FD2',
-            sidebarTextActiveColor: '#ffffff',
+            sidebarTextActiveColor: '#111111',
-            sidebarHeaderBg: '#1a1d1f',
+            sidebarHeaderBg: '#3481B9',
             sidebarHeaderTextColor: '#ffffff',
-            onlineIndicator: '#1fc1d9',
+            onlineIndicator: '#7DBE00',
-            awayIndicator: '#c4c492',
+            awayIndicator: '#DCBD4E',
-            mentionBj: '#ba3939',
+            mentionBj: '#2389d7',
             mentionColor: '#ffffff',
             centerChannelBg: '#ffffff',
-            centerChannelColor: '#2d3138',
+            centerChannelColor: '#333333',
-            newMessageSeparator: '#1c8c99',
+            newMessageSeparator: '#FF8800',
-            linkColor: '#1c8c99',
+            linkColor: '#2389d7',
-            buttonBg: '#27a1b2',
+            buttonBg: '#23A2FF',
             buttonColor: '#FFFFFF',
-            errorTextColor: '#cc2d2d',
+            errorTextColor: '#a94442',
-            mentionHighlightBg: '#1c8c99',
+            mentionHighlightBg: '#f3e197',
-            mentionHighlightLink: '#ffffff',
+            mentionHighlightLink: '#2f81b7',
-            codeTheme: 'monokai',
+            codeTheme: 'github',
             image: mattermostThemeImage
         },
         mattermostDark: {

webapp/utils/utils.jsx

@@ -499,10 +499,10 @@ export function applyTheme(theme) {
     if (theme.sidebarText) {
         changeCss('.app__body .ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y', 'background:' + theme.sidebarText);
         changeCss('.app__body .ps-container:hover .ps-scrollbar-y-rail:hover', 'background:' + changeOpacity(theme.sidebarText, 0.15));
-        changeCss('.sidebar--left .nav-pills__container li>a, .app__body .sidebar--right, .app__body .modal .settings-modal .nav-pills>li a', 'color:' + changeOpacity(theme.sidebarText, 0.6));
+        changeCss('.sidebar--left .nav-pills__container li > a, .app__body .sidebar--right, .app__body .modal .settings-modal .nav-pills>li a', 'color:' + changeOpacity(theme.sidebarText, 0.6));
         changeCss('@media(max-width: 768px){.app__body .modal .settings-modal .settings-table .nav>li>a, .app__body .sidebar--menu', 'color:' + changeOpacity(theme.sidebarText, 0.8));
-        changeCss('.sidebar--left .nav-pills__container li>h4, .sidebar--left .add-channel-btn', 'color:' + changeOpacity(theme.sidebarText, 0.6));
+        changeCss('.sidebar--left .nav-pills__container li > h4, .sidebar--left .add-channel-btn', 'color:' + changeOpacity(theme.sidebarText, 0.6));
-        changeCss('.app__body .sidebar--left .sidebar__switcher, .sidebar--left .add-channel-btn:hover, .sidebar--left .add-channel-btn:focus', 'color:' + theme.sidebarText);
+        changeCss('.app__body .sidebar--left .sidebar__switcher button, .sidebar--left .add-channel-btn:hover, .sidebar--left .add-channel-btn:focus', 'color:' + theme.sidebarText);
         changeCss('.sidebar--left .status .offline--icon', 'fill:' + theme.sidebarText);
         changeCss('.sidebar--left .status.status--group', 'background:' + changeOpacity(theme.sidebarText, 0.3));
         changeCss('@media(max-width: 768px){.app__body .modal .settings-modal .settings-table .nav>li>a, .app__body .sidebar--menu .divider', 'border-color:' + changeOpacity(theme.sidebarText, 0.2));
@@ -515,7 +515,7 @@ export function applyTheme(theme) {
     }
 
     if (theme.sidebarTextHoverBg) {
-        changeCss('.sidebar--left .nav-pills__container li>a:hover, .app__body .modal .settings-modal .nav-pills>li:hover a', 'background:' + theme.sidebarTextHoverBg);
+        changeCss('.sidebar--left .nav-pills__container li > a:hover, .app__body .modal .settings-modal .nav-pills>li:hover a, .app__body .sidebar__switcher button:hover', 'background:' + theme.sidebarTextHoverBg);
     }
 
     if (theme.sidebarTextActiveBorder) {