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

49
packages/web/src/javascripts/Components/ConfirmDeleteAccountModal/ConfirmDeleteAccountModal.tsx
View File

@@ -1,11 +1,11 @@
import { observer } from 'mobx-react-lite'
import { ViewControllerManager } from '@Controllers/ViewControllerManager'
import { AlertDialog, AlertDialogDescription, AlertDialogLabel } from '@reach/alert-dialog'
import { useCallback, useRef } from 'react'
import { STRING_DELETE_ACCOUNT_CONFIRMATION } from '@/Constants/Strings'
import Button from '@/Components/Button/Button'
import { WebApplication } from '@/Application/Application'
import Icon from '../Icon/Icon'
import AlertDialog from '../AlertDialog/AlertDialog'
type Props = {
viewControllerManager: ViewControllerManager
@@ -25,37 +25,26 @@ const ConfirmDeleteAccountModal = ({ application, viewControllerManager }: Props
}, [application.user, 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">
Delete account?
<button className="rounded p-1 font-bold hover:bg-contrast" onClick={closeDialog}>
<Icon type="close" />
</button>
</AlertDialogLabel>
<AlertDialogDescription className="sk-panel-row">
<div>
<p className="text-base text-foreground lg:text-sm">{STRING_DELETE_ACCOUNT_CONFIRMATION}</p>
</div>
</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}>
Delete my account for good
</Button>
</div>
</div>
</div>
</div>
<AlertDialog closeDialog={closeDialog}>
<div className="flex items-center justify-between text-lg font-bold">
Delete account?
<button className="rounded p-1 font-bold hover:bg-contrast" onClick={closeDialog}>
<Icon type="close" />
</button>
</div>
<div className="sk-panel-row">
<div>
<p className="text-base text-foreground lg:text-sm">{STRING_DELETE_ACCOUNT_CONFIRMATION}</p>
</div>
</div>
<div className="mt-4 flex justify-end gap-2">
<Button ref={cancelRef} onClick={closeDialog}>
Cancel
</Button>
<Button primary colorStyle="danger" onClick={confirm}>
Delete my account for good
</Button>
</div>
</AlertDialog>
)
}