rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(mobile): increase font sizes and other mobile-centric improvements (#1907)

Browse Source
This commit is contained in:
Mo
2022-11-01 11:41:40 -05:00
committed by GitHub
parent f54b017f53
commit 994f824757
72 changed files with 543 additions and 283 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
packages/web/src/javascripts/Components/AccountMenu/GeneralAccountMenu.tsx
View File

@@ -14,6 +14,7 @@ import WorkspaceSwitcherOption from './WorkspaceSwitcher/WorkspaceSwitcherOption
import { ApplicationGroup } from '@/Application/ApplicationGroup'
import { formatLastSyncDate } from '@/Utils/DateUtils'
import Spinner from '@/Components/Spinner/Spinner'
import { MenuItemIconSize } from '@/Constants/TailwindClassNames'
type Props = {
viewControllerManager: ViewControllerManager
@@ -23,7 +24,7 @@ type Props = {
closeMenu: () => void
}
const iconClassName = 'text-neutral mr-2'
const iconClassName = `text-neutral mr-2 ${MenuItemIconSize}`
const GeneralAccountMenu: FunctionComponent<Props> = ({
application,
@@ -90,48 +91,48 @@ const GeneralAccountMenu: FunctionComponent<Props> = ({
return (
<>
<div className="mt-1 mb-1 flex items-center justify-between px-3">
<div className="text-base font-bold">Account</div>
<div className="text-lg font-bold lg:text-base">Account</div>
<div className="flex cursor-pointer" onClick={closeMenu}>
<Icon type="close" className="text-neutral" />
</div>
</div>
{user ? (
<>
<div className="mb-3 px-3 text-sm text-foreground">
<div className="mb-3 px-3 text-lg text-foreground lg:text-sm">
<div>You're signed in as:</div>
<div className="wrap my-0.5 font-bold">{user.email}</div>
<span className="text-neutral">{application.getHost()}</span>
</div>
<div className="mb-2 flex items-start justify-between px-3">
{isSyncingInProgress ? (
<div className="flex items-center text-sm font-semibold text-info">
<div className="flex items-center text-base font-semibold text-info lg:text-sm">
<Spinner className="mr-2 h-5 w-5" />
Syncing...
</div>
) : (
<div className="flex items-start">
<Icon type="check-circle" className="mr-2 text-success" />
<Icon type="check-circle" className={`mr-2 text-success ${MenuItemIconSize}`} />
<div>
<div className="text-sm font-semibold text-success">Last synced:</div>
<div className="text-sm text-text">{lastSyncDate}</div>
<div className="text-base font-semibold text-success lg:text-sm">Last synced:</div>
<div className="text-base text-text lg:text-sm">{lastSyncDate}</div>
</div>
</div>
)}
<div className="flex cursor-pointer text-passive-1" onClick={doSynchronization}>
<Icon type="sync" />
<Icon type="sync" className={`${MenuItemIconSize}`} />
</div>
</div>
</>
) : (
<>
<div className="mb-1 px-3">
<div className="mb-3 text-sm text-foreground">
<div className="mb-3 text-base text-foreground lg:text-sm">
You’re offline. Sign in to sync your notes and preferences across all your devices and enable end-to-end
encryption.
</div>
<div className="flex items-center text-passive-1">
<Icon type="cloud-off" className="mr-2" />
<span className="text-sm font-semibold">Offline</span>
<Icon type="cloud-off" className={`mr-2 ${MenuItemIconSize}`} />
<span className="text-lg font-semibold lg:text-sm">Offline</span>
</div>
</div>
</>

5
packages/web/src/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherOption.tsx
View File

@@ -8,6 +8,7 @@ import WorkspaceSwitcherMenu from './WorkspaceSwitcherMenu'
import MenuItem from '@/Components/Menu/MenuItem'
import { MenuItemType } from '@/Components/Menu/MenuItemType'
import Popover from '@/Components/Popover/Popover'
import { MenuItemIconSize } from '@/Constants/TailwindClassNames'
type Props = {
mainApplicationGroup: ApplicationGroup
@@ -32,10 +33,10 @@ const WorkspaceSwitcherOption: FunctionComponent<Props> = ({ mainApplicationGrou
className="justify-between"
>
<div className="flex items-center">
<Icon type="user-switch" className="mr-2 text-neutral" />
<Icon type="user-switch" className={`mr-2 text-neutral ${MenuItemIconSize}`} />
Switch workspace
</div>
<Icon type="chevron-right" className="text-neutral" />
<Icon type="chevron-right" className={`text-neutral ${MenuItemIconSize}`} />
</MenuItem>
<Popover
align="end"