fix(mobile): increase font sizes and other mobile-centric improvements (#1907)
This commit is contained in:
Mo
@@ -32,7 +32,7 @@ const AccountPreferences = ({ application, viewControllerManager }: Props) => (
|
||||
{application.hasAccount() && viewControllerManager.featuresController.hasFiles && (
|
||||
<FilesSection application={application} />
|
||||
)}
|
||||
<Email application={application} />
|
||||
{application.hasAccount() && <Email application={application} />}
|
||||
<SignOutWrapper application={application} viewControllerManager={viewControllerManager} />
|
||||
<DeleteAccount application={application} viewControllerManager={viewControllerManager} />
|
||||
</PreferencesPane>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import Button from '@/Components/Button/Button'
|
||||
import { Text, Title } from '@/Components/Preferences/PreferencesComponents/Content'
|
||||
import { Title } from '@/Components/Preferences/PreferencesComponents/Content'
|
||||
import { WebApplication } from '@/Application/Application'
|
||||
import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
|
||||
import { observer } from 'mobx-react-lite'
|
||||
@@ -33,11 +33,11 @@ const Authentication: FunctionComponent<Props> = ({ viewControllerManager }) =>
|
||||
<div className="flex flex-col items-center px-4 md:px-12">
|
||||
<AccountIllustration className="mb-3" />
|
||||
<Title>You're not signed in</Title>
|
||||
<Text className="mb-3 text-center">
|
||||
<div className="mb-3 text-center text-base lg:text-sm">
|
||||
Sign in to sync your notes and preferences across all your devices and enable end-to-end encryption.
|
||||
</Text>
|
||||
</div>
|
||||
<Button primary label="Create free account" onClick={clickRegister} className="mb-3" />
|
||||
<div className="text-sm">
|
||||
<div className="text-base lg:text-sm">
|
||||
Already have an account?{' '}
|
||||
<button className="cursor-pointer border-0 bg-default p-0 text-info underline" onClick={clickSignIn}>
|
||||
Sign in
|
||||
|
||||
@@ -19,12 +19,7 @@ const DeleteAccount = ({ application, viewControllerManager }: Props) => {
|
||||
<PreferencesGroup>
|
||||
<PreferencesSegment>
|
||||
<Title>Delete account</Title>
|
||||
<Text>
|
||||
This action is irreversible. After deletion completes, you will be signed out on all devices. If you have an
|
||||
active paid subscription, cancel the subscription first. Otherwise, if you'd like to keep the subscription,
|
||||
you can re-register with the same email after deletion, and your subscription will be linked back up with your
|
||||
account.
|
||||
</Text>
|
||||
<Text>This action is irreversible. After deletion completes, you will be signed out on all devices.</Text>
|
||||
<div className="mt-3 flex flex-row flex-wrap gap-3">
|
||||
<Button
|
||||
colorStyle="danger"
|
||||
|
||||
@@ -22,6 +22,7 @@ const EmailBackups = ({ application }: Props) => {
|
||||
const [emailFrequency, setEmailFrequency] = useState<EmailBackupFrequency>(EmailBackupFrequency.Disabled)
|
||||
const [emailFrequencyOptions, setEmailFrequencyOptions] = useState<DropdownItem[]>([])
|
||||
const [isFailedBackupEmailMuted, setIsFailedBackupEmailMuted] = useState(true)
|
||||
const hasAccount = application.hasAccount()
|
||||
|
||||
const loadEmailFrequencySetting = useCallback(async () => {
|
||||
if (!application.getUser()) {
|
||||
@@ -104,12 +105,13 @@ const EmailBackups = ({ application }: Props) => {
|
||||
<PreferencesGroup>
|
||||
<PreferencesSegment>
|
||||
<Title>Email Backups</Title>
|
||||
<div>
|
||||
{!isDesktopApplication() && (
|
||||
<Text className="mb-3">
|
||||
Daily encrypted email backups of your entire data set delivered directly to your inbox.
|
||||
</Text>
|
||||
)}
|
||||
{!isDesktopApplication() && (
|
||||
<Text className="mb-3">
|
||||
Receive daily encrypted email backups of all your notes directly in your email inbox.
|
||||
</Text>
|
||||
)}
|
||||
|
||||
<div className={`${!hasAccount ? 'pointer-events-none cursor-default opacity-50' : ''}`}>
|
||||
<Subtitle>Email frequency</Subtitle>
|
||||
<Text>How often to receive backups.</Text>
|
||||
<div className="mt-2">
|
||||
|
||||
@@ -78,11 +78,7 @@ const HelpAndFeedback = ({ application }: { application: WebApplication }) => {
|
||||
<Title>Community forum</Title>
|
||||
<Text>
|
||||
If you have an issue, found a bug or want to suggest a feature, you can browse or post to the forum. It’s
|
||||
recommended for non-account related issues. Please read our{' '}
|
||||
<a target="_blank" className="underline hover:no-underline" href="https://standardnotes.com/longevity/">
|
||||
Longevity statement
|
||||
</a>{' '}
|
||||
before advocating for a feature request.
|
||||
recommended for non-account related issues.
|
||||
</Text>
|
||||
<LinkButton
|
||||
className="mt-3"
|
||||
@@ -97,14 +93,8 @@ const HelpAndFeedback = ({ application }: { application: WebApplication }) => {
|
||||
<Title>Community groups</Title>
|
||||
<Text>
|
||||
Want to meet other passionate note-takers and privacy enthusiasts? Want to share your feedback with us? Join
|
||||
the Standard Notes community groups for discussions on security, themes, editors and more.
|
||||
the Standard Notes Discord for discussions on security, themes, editors and more.
|
||||
</Text>
|
||||
<LinkButton
|
||||
className="mt-3"
|
||||
link="https://standardnotes.com/slack"
|
||||
label="Join our Slack"
|
||||
onClick={handleClick}
|
||||
/>
|
||||
<LinkButton
|
||||
className="mt-3"
|
||||
link="https://standardnotes.com/discord"
|
||||
|
||||
@@ -19,7 +19,9 @@ const Listed = ({ application }: Props) => {
|
||||
const [requestingAccount, setRequestingAccount] = useState<boolean>()
|
||||
|
||||
const reloadAccounts = useCallback(async () => {
|
||||
setAccounts(await application.listed.getListedAccounts())
|
||||
if (application.hasAccount()) {
|
||||
setAccounts(await application.listed.getListedAccounts())
|
||||
}
|
||||
}, [application])
|
||||
|
||||
useEffect(() => {
|
||||
@@ -82,11 +84,11 @@ const Listed = ({ application }: Props) => {
|
||||
<Subtitle>What is Listed?</Subtitle>
|
||||
<Text>
|
||||
Listed is a free blogging platform that allows you to create a public journal published directly from your
|
||||
notes.{' '}
|
||||
<a target="_blank" href="https://listed.to" rel="noreferrer noopener">
|
||||
Learn more
|
||||
</a>
|
||||
notes. {!application.getUser() && 'To get started, sign in or register for a Standard Notes account.'}
|
||||
</Text>
|
||||
<a className="mt-2 text-info" target="_blank" href="https://listed.to" rel="noreferrer noopener">
|
||||
Learn more
|
||||
</a>
|
||||
</PreferencesSegment>
|
||||
{application.getUser() && (
|
||||
<>
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import HorizontalSeparator from '@/Components/Shared/HorizontalSeparator'
|
||||
import Switch from '@/Components/Switch/Switch'
|
||||
import { Subtitle, Text, Title } from '@/Components/Preferences/PreferencesComponents/Content'
|
||||
import { WebApplication } from '@/Application/Application'
|
||||
@@ -75,7 +74,6 @@ const Privacy: FunctionComponent<Props> = ({ application }: Props) => {
|
||||
<PreferencesSegment>
|
||||
<Title>Privacy</Title>
|
||||
<div>
|
||||
<HorizontalSeparator classes="my-4" />
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex flex-col">
|
||||
<Subtitle>Session user agent logging</Subtitle>
|
||||
|
||||
@@ -11,20 +11,20 @@ export const Title: FunctionComponent<Props> = ({ children, className }) => (
|
||||
)
|
||||
|
||||
export const Subtitle: FunctionComponent<Props> = ({ children, className }) => (
|
||||
<h4 className={classNames('m-0 mb-1 text-sm font-medium', className)}>{children}</h4>
|
||||
<h4 className={classNames('m-0 mb-1 text-base font-medium lg:text-sm', className)}>{children}</h4>
|
||||
)
|
||||
|
||||
export const SubtitleLight: FunctionComponent<Props> = ({ children, className }) => (
|
||||
<h4 className={classNames('m-0 mb-1 text-sm font-normal', className)}>{children}</h4>
|
||||
<h4 className={classNames('m-0 mb-1 text-base font-normal lg:text-sm', className)}>{children}</h4>
|
||||
)
|
||||
|
||||
export const Text: FunctionComponent<Props> = ({ children, className }) => (
|
||||
<p className={classNames('text-sm md:text-xs', className)}>{children}</p>
|
||||
<p className={classNames('text-base lg:text-xs', className)}>{children}</p>
|
||||
)
|
||||
|
||||
const buttonClasses =
|
||||
'block bg-default text-text rounded border-solid \
|
||||
border px-4 py-1.5 font-bold text-sm w-fit \
|
||||
border px-4 py-1.5 font-bold text-base lg:text-sm w-fit \
|
||||
focus:bg-contrast hover:bg-contrast border-border'
|
||||
|
||||
export const LinkButton: FunctionComponent<{
|
||||
|
||||
Reference in New Issue
Block a user