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

1 files changed, 17 insertions, 10 deletions

diff --git a/webapp/components/sidebar.jsx b/webapp/components/sidebar.jsx
index b998700d8..f87c3944c 100644
--- a/webapp/components/sidebar.jsx
+++ b/webapp/components/sidebar.jsx
@@ -806,11 +806,13 @@ export default class Sidebar extends React.Component {
             );
         }
 
-        let quickSwitchText = 'sidebar.switch_channels';
-        let quickSwitchDefault = 'Switch Channels (CTRL + K)';
+        const quickSwitchText = 'channel_switch_modal.title';
+
+        let quickSwitchTextShortcut = 'quick_switch_modal.channelsShortcut.windows';
+        let quickSwitchDefault = '- CTRL+K';
         if (Utils.isMac()) {
-            quickSwitchText += '.mac';
-            quickSwitchDefault = 'Switch Channels (CMD + K)';
+            quickSwitchTextShortcut = 'quick_switch_modal.channelsShortcut.mac';
+            quickSwitchDefault = '- ⌘K';
         }
 
         return (
@@ -913,17 +915,22 @@ export default class Sidebar extends React.Component {
                         {directMessageMore}
                     </ul>
                 </div>
-                <div style={{height: '20px', width: '100%'}}>
-                    <a
-                        href='#'
-                        className='sidebar__switcher'
+                <div className='sidebar__switcher'>
+                    <button
+                        className='btn btn-link'
                         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>
         );