feat: Add quick settings menu with theme switcher and other changes (#673)

Co-authored-by: Mo Bitar <mo@standardnotes.org>
Co-authored-by: Antonella Sgarlatta <antsgar@gmail.com>

app/assets/javascripts/components/AccountMenu/index.tsx

@@ -9,6 +9,7 @@ import { SignInPane } from './SignIn';
 import { CreateAccount } from './CreateAccount';
 import { ConfirmSignoutContainer } from '../ConfirmSignoutModal';
 import { ConfirmPassword } from './ConfirmPassword';
+import { JSXInternal } from 'preact/src/jsx';
 
 export enum AccountMenuPane {
   GeneralMenu,
@@ -87,14 +88,31 @@ const AccountMenu: FunctionComponent<Props> = observer(
       closeAccountMenu,
     } = appState.accountMenu;
 
+    const handleKeyDown: JSXInternal.KeyboardEventHandler<HTMLDivElement> = (
+      event
+    ) => {
+      switch (event.key) {
+        case 'Escape':
+          if (currentPane === AccountMenuPane.GeneralMenu) {
+            closeAccountMenu();
+          } else if (currentPane === AccountMenuPane.ConfirmPassword) {
+            setCurrentPane(AccountMenuPane.Register);
+          } else {
+            setCurrentPane(AccountMenuPane.GeneralMenu);
+          }
+          break;
+      }
+    };
+
     return (
       <div className="sn-component">
         <div
-          className={`sn-account-menu sn-dropdown ${
+          className={`sn-menu-border sn-account-menu sn-dropdown ${
             shouldAnimateCloseMenu
               ? 'slide-up-animation'
               : 'sn-dropdown--animated'
           } min-w-80 max-h-120 max-w-xs flex flex-col py-2 overflow-y-auto absolute`}
+          onKeyDown={handleKeyDown}
         >
           <MenuPaneSelector
             appState={appState}