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:
@@ -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 & feedback
|
<Icon type="help" className={iconClassName} />
|
||||||
|
Help & feedback
|
||||||
|
</div>
|
||||||
|
<span className="color-neutral">v{AppVersion}</span>
|
||||||
</button>
|
</button>
|
||||||
{user ? (
|
{user ? (
|
||||||
<>
|
<>
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user