From 3953713f4533eaa5401d568c94dbc46188232a53 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Fri, 15 Oct 2021 19:46:08 +0530
Subject: [PATCH] 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
---
 .../AccountMenu/GeneralAccountMenu.tsx          | 17 +++++++++++------
 app/assets/stylesheets/_sn.scss                 |  5 +++++
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/components/AccountMenu/GeneralAccountMenu.tsx b/app/assets/javascripts/components/AccountMenu/GeneralAccountMenu.tsx
index 81fd0f5ea..1716c6319 100644
--- 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,7 +55,7 @@ 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" />
@@ -62,9 +63,10 @@ export const GeneralAccountMenu: FunctionComponent<Props> = observer(
         </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
index 6e724a42d..8f9f2cf73 100644
--- 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;