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

fix: make modals mobile-friendly (#1337)

Browse Source
This commit is contained in:
Aman Harwara
2022-07-25 20:18:24 +05:30
committed by GitHub
parent 36288ad36a
commit 7b6b2bc5b1
11 changed files with 91 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/Bullet.tsx
View File

@@ -5,7 +5,7 @@ type Props = {
}
const Bullet: FunctionComponent<Props> = ({ className = '' }) => (
<div className={`min-h-1 min-w-1 rounded-full bg-text ${className} mr-2`} />
<div className={`inline-block min-h-1 min-w-1 rounded-full bg-text ${className} mr-2`} />
)
export default Bullet

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

@@ -39,9 +39,8 @@ const SaveSecretKey: FunctionComponent<Props> = ({ activation: act }) => {
</ModalDialogLabel>
<ModalDialogDescription className="h-33 flex flex-row items-center">
<div className="flex flex-grow flex-col">
<div className="flex flex-row items-center">
<div className="flex flex-row flex-wrap items-center gap-1">
<Bullet />
<div className="min-w-1" />
<div className="text-sm">
<b>Save your secret key</b>{' '}
<a
@@ -52,11 +51,11 @@ const SaveSecretKey: FunctionComponent<Props> = ({ activation: act }) => {
</a>
:
</div>
<div className="min-w-2" />
<DecoratedInput
disabled={true}
right={[<CopyButton copyValue={act.secretKey} />, download]}
value={act.secretKey}
className={{ container: 'ml-2' }}
/>
</div>
<div className="h-2" />

3
packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/ScanQRCode.tsx
View File

@@ -20,11 +20,10 @@ const ScanQRCode: FunctionComponent<Props> = ({ activation: act }) => {
return (
<ModalDialog>
<ModalDialogLabel closeDialog={act.cancelActivation}>Step 1 of 3 - Scan QR code</ModalDialogLabel>
<ModalDialogDescription className="h-33 flex flex-row items-center">
<ModalDialogDescription className="h-33 flex flex-col items-center gap-5 md:flex-row">
<div className="w-25 h-25 flex items-center justify-center bg-info">
<QRCode className="border-neutral-contrast-bg border-2 border-solid" value={act.qrCode} size={100} />
</div>
<div className="min-w-5" />
<div className="flex flex-grow flex-col gap-2">
<div className="flex flex-row items-center">
<Bullet />

32
packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/Verification.tsx
View File

@@ -20,24 +20,30 @@ const Verification: FunctionComponent<Props> = ({ activation: act }) => {
<ModalDialog>
<ModalDialogLabel closeDialog={act.cancelActivation}>Step 3 of 3 - Verification</ModalDialogLabel>
<ModalDialogDescription className="h-33 flex flex-row items-center">
<div className="flex flex-grow flex-col">
<div className="mb-4 flex flex-row items-center">
<Bullet />
<div className="min-w-1" />
<div className="flex flex-grow flex-col gap-4">
<div className="flex flex-row flex-wrap items-center gap-1">
<div className="text-sm">
Enter your <b>secret key</b>:
<Bullet className="align-middle" />
<span className="align-middle">
Enter your <b>secret key</b>:
</span>
</div>
<div className="min-w-2" />
<DecoratedInput className={{ container: `w-92 ${secretKeyClass}` }} onChange={act.setInputSecretKey} />
<DecoratedInput
className={{ container: `ml-2 w-full md:w-96 ${secretKeyClass}` }}
onChange={act.setInputSecretKey}
/>
</div>
<div className="flex flex-row items-center">
<Bullet />
<div className="min-w-1" />
<div className="flex flex-row flex-wrap items-center gap-1">
<div className="text-sm">
Verify the <b>authentication code</b> generated by your authenticator app:
<Bullet className="align-middle" />
<span className="align-middle">
Verify the <b>authentication code</b> generated by your authenticator app:
</span>
</div>
<div className="min-w-2" />
<DecoratedInput className={{ container: `w-30 ${authTokenClass}` }} onChange={act.setInputOtpToken} />
<DecoratedInput
className={{ container: `ml-2 w-full md:w-30 ${authTokenClass}` }}
onChange={act.setInputOtpToken}
/>
</div>
</div>
</ModalDialogDescription>