prettier
This commit is contained in:
@ -82,14 +82,8 @@ export default function Alert({ title, message, variant }: Props) {
|
||||
<div className="flex">
|
||||
<div className="flex-shrink-0">{variantProperties.icon}</div>
|
||||
<div className="ml-3">
|
||||
<h3
|
||||
className={`text-sm leading-5 font-medium ${variantProperties.titleTextColor}`}
|
||||
>
|
||||
{title}
|
||||
</h3>
|
||||
<div className={`mt-2 text-sm leading-5 ${variantProperties.messageTextColor}`}>
|
||||
{message}
|
||||
</div>
|
||||
<h3 className={`text-sm leading-5 font-medium ${variantProperties.titleTextColor}`}>{title}</h3>
|
||||
<div className={`mt-2 text-sm leading-5 ${variantProperties.messageTextColor}`}>{message}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -28,38 +28,28 @@ export default function DangerZone() {
|
||||
<SettingsSection title="Danger Zone" description="Highway to the Danger Zone 𝅘𝅥𝅮">
|
||||
<div className="shadow border border-red-300 sm:rounded-md sm:overflow-hidden">
|
||||
<div className="flex justify-between items-center flex-row px-4 py-5 bg-white sm:p-6">
|
||||
<p>
|
||||
Once you delete your account, all of its data will be permanently deleted.
|
||||
</p>
|
||||
<p>Once you delete your account, all of its data will be permanently deleted.</p>
|
||||
|
||||
<span className="text-base font-medium">
|
||||
<Button
|
||||
variant="error"
|
||||
type="button"
|
||||
onClick={() => setIsConfirmationModalOpen(true)}
|
||||
>
|
||||
<Button variant="error" type="button" onClick={() => setIsConfirmationModalOpen(true)}>
|
||||
Delete my account
|
||||
</Button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Modal
|
||||
initialFocus={modalCancelButtonRef}
|
||||
isOpen={isConfirmationModalOpen}
|
||||
onClose={closeModal}
|
||||
>
|
||||
<Modal initialFocus={modalCancelButtonRef} isOpen={isConfirmationModalOpen} onClose={closeModal}>
|
||||
<div className="md:flex md:items-start">
|
||||
<div className="mt-3 text-center md:mt-0 md:ml-4 md:text-left">
|
||||
<ModalTitle>Delete my account</ModalTitle>
|
||||
<div className="mt-2 text-sm text-gray-500">
|
||||
<p>
|
||||
Are you sure you want to delete your account? Your subscription will
|
||||
be cancelled and your data permanently deleted.
|
||||
Are you sure you want to delete your account? Your subscription will be cancelled and
|
||||
your data permanently deleted.
|
||||
</p>
|
||||
<p>
|
||||
You are free to create a new account with the same email address if
|
||||
you ever wish to come back.
|
||||
You are free to create a new account with the same email address if you ever wish to
|
||||
come back.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -32,9 +32,7 @@ const Modal: FunctionComponent<Props> = ({ children, initialFocus, isOpen, onClo
|
||||
</Transition.Child>
|
||||
|
||||
{/* This element is to trick the browser into centering the modal contents. */}
|
||||
<span className="hidden md:inline-block md:align-middle md:h-screen">
|
||||
​
|
||||
</span>
|
||||
<span className="hidden md:inline-block md:align-middle md:h-screen">​</span>
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
|
@ -61,31 +61,20 @@ const ProfileInformations: FunctionComponent = () => {
|
||||
<form onSubmit={onSubmit}>
|
||||
{errorMessage ? (
|
||||
<div className="mb-8">
|
||||
<Alert
|
||||
title="Oops, there was an issue"
|
||||
message={errorMessage}
|
||||
variant="error"
|
||||
/>
|
||||
<Alert title="Oops, there was an issue" message={errorMessage} variant="error" />
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{isSubmitSuccessful ? (
|
||||
<div className="mb-8">
|
||||
<Alert
|
||||
title="Saved successfully"
|
||||
message="Your changes have been saved."
|
||||
variant="success"
|
||||
/>
|
||||
<Alert title="Saved successfully" message="Your changes have been saved." variant="success" />
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="shadow sm:rounded-md sm:overflow-hidden">
|
||||
<div className="px-4 py-5 bg-white space-y-6 sm:p-6">
|
||||
<div className="col-span-3 sm:col-span-2">
|
||||
<label
|
||||
htmlFor="name"
|
||||
className="block text-sm font-medium leading-5 text-gray-700"
|
||||
>
|
||||
<label htmlFor="name" className="block text-sm font-medium leading-5 text-gray-700">
|
||||
Name
|
||||
</label>
|
||||
<div className="mt-1 rounded-md shadow-sm">
|
||||
@ -101,10 +90,7 @@ const ProfileInformations: FunctionComponent = () => {
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="email"
|
||||
className="block text-sm font-medium leading-5 text-gray-700"
|
||||
>
|
||||
<label htmlFor="email" className="block text-sm font-medium leading-5 text-gray-700">
|
||||
Email address
|
||||
</label>
|
||||
<div className="mt-1 rounded-md shadow-sm">
|
||||
|
@ -60,21 +60,13 @@ const UpdatePassword: FunctionComponent = () => {
|
||||
<form onSubmit={onSubmit}>
|
||||
{errorMessage ? (
|
||||
<div className="mb-8">
|
||||
<Alert
|
||||
title="Oops, there was an issue"
|
||||
message={errorMessage}
|
||||
variant="error"
|
||||
/>
|
||||
<Alert title="Oops, there was an issue" message={errorMessage} variant="error" />
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{isSubmitSuccessful ? (
|
||||
<div className="mb-8">
|
||||
<Alert
|
||||
title="Saved successfully"
|
||||
message="Your changes have been saved."
|
||||
variant="success"
|
||||
/>
|
||||
<Alert title="Saved successfully" message="Your changes have been saved." variant="success" />
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
|
Reference in New Issue
Block a user