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
This commit is contained in:
Aman Harwara
2021-10-15 19:46:08 +05:30
committed by GitHub
parent 29b72c71cf
commit 3953713f45
2 changed files with 16 additions and 6 deletions

View File

@@ -8,6 +8,7 @@ import { STRING_GENERIC_SYNC_ERROR } from '@/strings';
import { useState } from 'preact/hooks'; import { useState } from 'preact/hooks';
import { AccountMenuPane } from '.'; import { AccountMenuPane } from '.';
import { FunctionComponent } from 'preact'; import { FunctionComponent } from 'preact';
import { AppVersion } from '@/version';
type Props = { type Props = {
appState: AppState; appState: AppState;
@@ -54,7 +55,7 @@ export const GeneralAccountMenu: FunctionComponent<Props> = observer(
return ( 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="sn-account-menu-headline">Account</div>
<div className="flex cursor-pointer" onClick={closeMenu}> <div className="flex cursor-pointer" onClick={closeMenu}>
<Icon type="close" className="color-grey-1" /> <Icon type="close" className="color-grey-1" />
@@ -62,9 +63,10 @@ export const GeneralAccountMenu: FunctionComponent<Props> = observer(
</div> </div>
{user ? ( {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>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>
<div className="flex items-center justify-between px-3 mb-2"> <div className="flex items-center justify-between px-3 mb-2">
{isSyncingInProgress ? ( {isSyncingInProgress ? (
@@ -136,15 +138,18 @@ export const GeneralAccountMenu: FunctionComponent<Props> = observer(
</> </>
)} )}
<button <button
className="sn-dropdown-item" className="sn-dropdown-item justify-between"
onClick={() => { onClick={() => {
appState.accountMenu.closeAccountMenu(); appState.accountMenu.closeAccountMenu();
appState.preferences.setCurrentPane('help-feedback'); appState.preferences.setCurrentPane('help-feedback');
appState.preferences.openPreferences(); appState.preferences.openPreferences();
}} }}
> >
<Icon type="help" className={iconClassName} /> <div className="flex items-center">
Help &amp; feedback <Icon type="help" className={iconClassName} />
Help &amp; feedback
</div>
<span className="color-neutral">v{AppVersion}</span>
</button> </button>
{user ? ( {user ? (
<> <>

View File

@@ -219,6 +219,11 @@
margin-right: 0.75rem; margin-right: 0.75rem;
} }
.my-0\.5 {
margin-top: 0.125rem;
margin-bottom: 0.125rem;
}
.my-1\.5 { .my-1\.5 {
margin-top: 0.375rem; margin-top: 0.375rem;
margin-bottom: 0.375rem; margin-bottom: 0.375rem;