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

feat(web): mobile-friendly (responsive) preferences UI (#1234)

Browse Source
This commit is contained in:
Aman Harwara
2022-07-09 00:38:44 +05:30
committed by GitHub
parent 961d1fb8d4
commit 66f97f0612
17 changed files with 89 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/web/src/javascripts/Components/Preferences/Panes/Account/Authentication.tsx
View File

@@ -30,7 +30,7 @@ const Authentication: FunctionComponent<Props> = ({ viewControllerManager }) =>
return (
<PreferencesGroup>
<PreferencesSegment>
<div className="flex flex-col items-center px-12">
<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">

3
packages/web/src/javascripts/Components/Preferences/Panes/Account/SignOutView.tsx
View File

@@ -23,9 +23,8 @@ const SignOutView: FunctionComponent<Props> = observer(({ application, viewContr
<Title>Sign out</Title>
<Subtitle>Other devices</Subtitle>
<Text>Want to sign out on all devices except this one?</Text>
<div className="mt-3 flex flex-row">
<div className="mt-3 flex flex-row flex-wrap gap-3">
<Button
className="mr-3"
label="Sign out other sessions"
onClick={() => {
viewControllerManager.accountMenuController.setOtherSessionsSignOut(true)

5
packages/web/src/javascripts/Components/Preferences/Panes/Security/EncryptionEnabled.tsx
View File

@@ -20,14 +20,15 @@ const EncryptionEnabled: FunctionComponent<Props> = ({ viewControllerManager })
const tagIcon = <Icon type="hashtag" className="min-h-5 min-w-5" />
const archiveIcon = <Icon type="archive" className="min-h-5 min-w-5" />
const trashIcon = <Icon type="trash" className="min-h-5 min-w-5" />
return (
<>
<div className="flex flex-row items-start pb-1 pt-1.5">
<div className="flex flex-row flex-wrap items-start pt-1.5 md:pb-1">
<EncryptionStatusItem status={notes} icon={noteIcon} />
<div className="min-w-3" />
<EncryptionStatusItem status={tags} icon={tagIcon} />
</div>
<div className="flex flex-row items-start">
<div className="flex flex-row flex-wrap items-start">
<EncryptionStatusItem status={archived} icon={archiveIcon} />
<div className="min-w-3" />
<EncryptionStatusItem status={deleted} icon={trashIcon} />