feat: slim account menu and icon buttons (#655)

* feat: footer icon for preferences menu

* feat: account footer icon

* feat: account menu icon and slimmed down account menu

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

@@ -1,6 +1,5 @@
 import { observer } from 'mobx-react-lite';
 import { AppState } from '@/ui_models/app_state';
-import { PasswordWizardType } from '@/types';
 import { WebApplication } from '@/ui_models/application';
 import { User } from '@standardnotes/snjs/dist/@types/services/api/responses';
 
@@ -10,22 +9,12 @@ type Props = {
 }
 
 const User = observer(({
-                         appState,
-                         application,
-                       }: Props) => {
-  const { server, closeAccountMenu } = appState.accountMenu;
+  appState,
+  application,
+}: Props) => {
+  const { server } = appState.accountMenu;
   const user = application.getUser();
 
-  const openPasswordWizard = () => {
-    closeAccountMenu();
-    application.presentPasswordWizard(PasswordWizardType.ChangePassword);
-  };
-
-  const openSessionsModal = () => {
-    closeAccountMenu();
-    appState.openSessionsModal();
-  };
-
   return (
     <div className="sk-panel-section">
       {appState.sync.errorMessage && (
@@ -56,12 +45,6 @@ const User = observer(({
         </div>
       </div>
       <div className="sk-panel-row" />
-      <a className="sk-a info sk-panel-row condensed" onClick={openPasswordWizard}>
-        Change Password
-      </a>
-      <a className="sk-a info sk-panel-row condensed" onClick={openSessionsModal}>
-        Manage Sessions
-      </a>
     </div>
   );
 });

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

@@ -51,25 +51,12 @@ const AccountMenu = observer(({ application, appState }: Props) => {
             application={application}
             appState={appState}
           />
-          {!showLogin && !showRegister && (
+          {!showLogin && !showRegister && user && (
             <div>
-              {user && (
-                <User
-                  application={application}
-                  appState={appState}
-                />
-              )}
-              <Encryption appState={appState} />
-              <Protections application={application} />
-              <PasscodeLock
+              <User
                 application={application}
                 appState={appState}
               />
-              <DataBackup
-                application={application}
-                appState={appState}
-              />
-              <ErrorReporting appState={appState} />
             </div>
           )}
         </div>

app/assets/javascripts/components/Icon.tsx

@@ -28,6 +28,7 @@ import DownloadIcon from '../../icons/ic-download.svg';
 import InfoIcon from '../../icons/ic-info.svg';
 import CheckIcon from '../../icons/ic-check.svg';
 import CheckBoldIcon from '../../icons/ic-check-bold.svg';
+import AccountCircleIcon from '../../icons/ic-account-circle.svg';
 
 import { toDirective } from './utils';
 import { FunctionalComponent } from 'preact';
@@ -61,7 +62,8 @@ const ICONS = {
   download: DownloadIcon,
   info: InfoIcon,
   check: CheckIcon,
-  "check-bold": CheckBoldIcon,
+  'check-bold': CheckBoldIcon,
+  'account-circle': AccountCircleIcon,
 };
 
 export type IconType = keyof typeof ICONS;