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;

app/assets/javascripts/views/footer/footer-view.pug

@@ -1,28 +1,37 @@
 .sn-component
   #footer-bar.sk-app-bar.no-edges.no-bottom-edge
     .left
-      .sk-app-bar-item(
+      .sk-app-bar-item.ml-0(
         click-outside='ctrl.clickOutsideAccountMenu()',
         is-open='ctrl.showAccountMenu',
         ng-click='ctrl.accountMenuPressed()'
-        )
-        .sk-app-bar-item-column
-          .sk-circle.small(
-            ng-class="ctrl.hasError ? 'danger' : (ctrl.user ? 'info' : 'neutral')"
+      )
+        .w-8.h-8.flex.items-center.justify-center.cursor-pointer.rounded-full(
+            ng-class="ctrl.showAccountMenu ? 'bg-border' : '' "
+          )
+            .w-5.h-5(
+              ng-class="ctrl.hasError ? 'danger' : (ctrl.user ? 'info' : 'neutral')"
             )
-        .sk-app-bar-item-column
-          .sk-label.title(ng-class='{red: ctrl.hasError}') Account
+              icon(
+                type="account-circle"
+                class-name="hover:color-info w-5 h-5 max-h-5"
+              )
         account-menu(
           ng-click='$event.stopPropagation()',
           app-state='ctrl.appState'
           application='ctrl.application'
           ng-if='ctrl.showAccountMenu',
         )
-      .sk-app-bar-item(
+      .sk-app-bar-item.ml-0-important(
         ng-click='ctrl.clickPreferences()'
         ng-if='ctrl.appState.enableUnfinishedFeatures'
       )
-        .sk-label.title Preferences
+        .w-8.h-8.flex.items-center.justify-center.cursor-pointer
+          .h-5
+            icon(
+              type="tune"
+              class-name="rounded hover:color-info"
+            )
       .sk-app-bar-item
         a.no-decoration.sk-label.title(
           href='https://standardnotes.com/help',