feat: Add app version & server to account menu (#682)

* feat: Add app version & server to account menu * fix: Fix email bottom margin * fix: Fix spacing of email & server in account menu * feat: Move version to right of "Help & Feedback" button
standardnotes · Oct 15, 2021 · 3953713 · 3953713
1 parent 29b72c7
commit 3953713
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 6 deletions.
diff --git a/app/assets/javascripts/components/AccountMenu/GeneralAccountMenu.tsx b/app/assets/javascripts/components/AccountMenu/GeneralAccountMenu.tsx
@@ -8,6 +8,7 @@ import { STRING_GENERIC_SYNC_ERROR } from '@/strings';
 import { useState } from 'preact/hooks';
 import { AccountMenuPane } from '.';
 import { FunctionComponent } from 'preact';
+import { AppVersion } from '@/version';
 
 type Props = {
   appState: AppState;
@@ -54,17 +55,18 @@ export const GeneralAccountMenu: FunctionComponent<Props> = observer(
 
     return (
       <>
-        <div className="flex items-center justify-between px-3 mt-1 mb-3">
+        <div className="flex items-center justify-between px-3 mt-1 mb-2">
           <div className="sn-account-menu-headline">Account</div>
           <div className="flex cursor-pointer" onClick={closeMenu}>
             <Icon type="close" className="color-grey-1" />
           </div>
         </div>
         {user ? (
           <>
-            <div className="px-3 mb-2 color-foreground text-sm">
+            <div className="px-3 mb-3 color-foreground text-sm">
               <div>You're signed in as:</div>
-              <div className="font-bold">{user.email}</div>
+              <div className="my-0.5 font-bold">{user.email}</div>
+              <span className="color-neutral">{application.getHost()}</span>
             </div>
             <div className="flex items-center justify-between px-3 mb-2">
               {isSyncingInProgress ? (
@@ -136,15 +138,18 @@ export const GeneralAccountMenu: FunctionComponent<Props> = observer(
           </>
         )}
         <button
-          className="sn-dropdown-item"
+          className="sn-dropdown-item justify-between"
           onClick={() => {
             appState.accountMenu.closeAccountMenu();
             appState.preferences.setCurrentPane('help-feedback');
             appState.preferences.openPreferences();
           }}
         >
-          <Icon type="help" className={iconClassName} />
-          Help &amp; feedback
+          <div className="flex items-center">
+            <Icon type="help" className={iconClassName} />
+            Help &amp; feedback
+          </div>
+          <span className="color-neutral">v{AppVersion}</span>
         </button>
         {user ? (
           <>

diff --git a/app/assets/stylesheets/_sn.scss b/app/assets/stylesheets/_sn.scss
@@ -219,6 +219,11 @@
   margin-right: 0.75rem;
 }
 
+.my-0\.5 {
+  margin-top: 0.125rem;
+  margin-bottom: 0.125rem;
+}
+
 .my-1\.5 {
   margin-top: 0.375rem;
   margin-bottom: 0.375rem;