Improve side nav and UI

package.json

@@ -101,7 +101,7 @@
     "webpack-dev-server": "^3.8.1"
   },
   "dependencies": {
-    "@mdi/js": "^4.4.95",
+    "@mdi/js": "^5.1.45",
     "@mdi/react": "^1.2.1",
     "@svgr/cli": "^4.3.3",
     "@svgr/webpack": "^4.3.3",

src/components/App.tsx

@@ -1,9 +1,9 @@
 import React, { useMemo, useCallback } from 'react'
-import SideNavigator from './SideNavigator'
+import Navigator from './organisms/Navigator'
 import Router from './Router'
 import GlobalStyle from './GlobalStyle'
 import { ThemeProvider } from 'styled-components'
-import { defaultTheme } from '../themes/default'
+import { legacyTheme } from '../themes/legacy'
 import { darkTheme } from '../themes/dark'
 import { lightTheme } from '../themes/light'
 import { sepiaTheme } from '../themes/sepia'
@@ -19,7 +19,6 @@ import '../lib/i18n'
 import '../lib/analytics'
 import CodeMirrorStyle from './CodeMirrorStyle'
 import { useGeneralStatus } from '../lib/generalStatus'
-import Modal from './Modal'
 import ToastList from './Toast'
 import styled from '../lib/styled'
 import { useEffectOnce } from 'react-use'
@@ -62,7 +61,7 @@ const App = () => {
   }, [toggleClosed])
   useGlobalKeyDownHandler(keyboardHandler)
   const { generalStatus, setGeneralStatus } = useGeneralStatus()
-  const updateSideBarWidth = useCallback(
+  const updateNavWidth = useCallback(
     (leftWidth: number) => {
       setGeneralStatus({
         sideBarWidth: leftWidth,
@@ -80,9 +79,9 @@ const App = () => {
         {initialized ? (
           <TwoPaneLayout
             defaultLeftWidth={generalStatus.sideBarWidth}
-            left={<SideNavigator />}
+            left={<Navigator />}
             right={<Router />}
-            onResizeEnd={updateSideBarWidth}
+            onResizeEnd={updateNavWidth}
           />
         ) : (
           <LoadingText>Loading Data...</LoadingText>
@@ -91,7 +90,6 @@ const App = () => {
         <ContextMenu />
         <Dialog />
         <PreferencesModal />
-        <Modal />
         <ToastList />
         <CodeMirrorStyle />
       </AppContainer>
@@ -100,16 +98,17 @@ const App = () => {
 }
 function selectTheme(theme: string) {
   switch (theme) {
-    case 'dark':
-      return darkTheme
+    case 'legacy':
+      return legacyTheme
     case 'light':
       return lightTheme
     case 'sepia':
       return sepiaTheme
     case 'solarizedDark':
       return solarizedDarkTheme
+    case 'dark':
     default:
-      return defaultTheme
+      return darkTheme
   }
 }
 

src/components/GlobalStyle.tsx

@@ -7,8 +7,9 @@ export default createGlobalStyle<{ theme: BaseTheme }>`
     margin: 0;
     ${backgroundColor}
     ${textColor}
-    font-family: ${({ theme }) => theme.fontFamily};
-    font-size: ${({ theme }) => theme.fontSize}px;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Fira sans', Roboto, Helvetica,
+    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+    font-size: 15px;
     font-weight: 400;
   }
 
@@ -20,8 +21,8 @@ export default createGlobalStyle<{ theme: BaseTheme }>`
     outline: none;
   }
 
-  input {
-    font-size: ${({ theme }) => theme.fontSize}px;
+  input, button {
+    font-size: 15px;
   }
 
   h1,h2,h3,h4,h5,h6 {