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

refactor: migrate dialogs & tooltips from reach-ui (#2314)

Browse Source
This commit is contained in:
Aman Harwara
2023-04-21 01:51:22 +05:30
committed by GitHub
parent 5a02003458
commit 9996dac00a
62 changed files with 387 additions and 563 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
packages/web/src/javascripts/Components/OtherSessionsSignOut/OtherSessionsSignOut.tsx
View File

@@ -1,10 +1,10 @@
import { useCallback, useRef } from 'react'
import { AlertDialog, AlertDialogDescription, AlertDialogLabel } from '@reach/alert-dialog'
import { WebApplication } from '@/Application/Application'
import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
import { observer } from 'mobx-react-lite'
import Button from '@/Components/Button/Button'
import Icon from '../Icon/Icon'
import AlertDialog from '../AlertDialog/AlertDialog'
type Props = {
application: WebApplication
@@ -27,37 +27,26 @@ const ConfirmOtherSessionsSignOut = observer(({ application, viewControllerManag
}, [application, closeDialog])
return (
<AlertDialog onDismiss={closeDialog} leastDestructiveRef={cancelRef} className="max-w-[600px] p-0">
<div className="sk-modal-content">
<div className="sn-component">
<div className="sk-panel">
<div className="sk-panel-content">
<div className="sk-panel-section">
<AlertDialogLabel className="flex items-center justify-between text-lg font-bold capitalize">
End all other sessions?
<button className="rounded p-1 font-bold hover:bg-contrast" onClick={closeDialog}>
<Icon type="close" />
</button>
</AlertDialogLabel>
<AlertDialogDescription className="sk-panel-row">
<p className="text-base text-foreground lg:text-sm">
This action will sign out all other devices signed into your account, and remove your data from
those devices when they next regain connection to the internet. You may sign back in on those
devices at any time.
</p>
</AlertDialogDescription>
<div className="my-1 mt-4 flex justify-end gap-2">
<Button ref={cancelRef} onClick={closeDialog}>
Cancel
</Button>
<Button primary colorStyle="danger" onClick={confirm}>
End Sessions
</Button>
</div>
</div>
</div>
</div>
</div>
<AlertDialog closeDialog={closeDialog}>
<div className="flex items-center justify-between text-lg font-bold capitalize">
End all other sessions?
<button className="rounded p-1 font-bold hover:bg-contrast" onClick={closeDialog}>
<Icon type="close" />
</button>
</div>
<div className="sk-panel-row">
<p className="text-base text-foreground lg:text-sm">
This action will sign out all other devices signed into your account, and remove your data from those devices
when they next regain connection to the internet. You may sign back in on those devices at any time.
</p>
</div>
<div className="mt-4 flex justify-end gap-2">
<Button ref={cancelRef} onClick={closeDialog}>
Cancel
</Button>
<Button primary colorStyle="danger" onClick={confirm}>
End Sessions
</Button>
</div>
</AlertDialog>
)