Refactor DashboardNavigation and WebAppSwitcher components to improve layout and user interaction. Adjust padding in DashboardNavigation and replace Tooltip with KeyboardShortcut in WebAppSwitcher for enhanced accessibility and streamlined code.

src/components/Dashboard/common/DashboardNavigation.jsx

@@ -225,7 +225,7 @@ const DashboardNavigation = () => {
         align='center'
         style={{ marginTop: '-2px', marginRight: '6px' }}
       >
-        <Space>
+        <Space style={{ paddingTop: '2px' }}>
           <WebAppSwitcher />
           <KeyboardShortcut
             shortcut='alt+q'

src/components/Dashboard/common/WebAppSwitcher.jsx

@@ -1,10 +1,11 @@
 import { useContext } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
-import { Button, Tooltip } from 'antd'
+import { Button } from 'antd'
 import { ElectronContext } from '../context/ElectronContext'
 import OpenInAppIcon from '../../Icons/OpenInAppIcon'
 import OpenInBrowserIcon from '../../Icons/OpenInBrowserIcon'
 import config from '../../../config'
+import KeyboardShortcut from './KeyboardShortcut'
 
 const WebAppSwitcher = () => {
   const { isElectron, openExternalUrl } = useContext(ElectronContext)
@@ -42,17 +43,14 @@ const WebAppSwitcher = () => {
   }
 
   return (
-    <Tooltip
-      title={isElectron ? 'Open in browser' : 'Open in app'}
-      arrow={false}
-    >
+    <KeyboardShortcut shortcut='alt+w' hint='ALT W' onTrigger={handleClick}>
       <Button
         icon={isElectron ? <OpenInBrowserIcon /> : <OpenInAppIcon />}
         type='text'
         style={{ marginTop: '4px' }}
         onClick={handleClick}
       />
-    </Tooltip>
+    </KeyboardShortcut>
   )
 }