This commit is contained in:
m5r
2021-08-01 22:03:49 +08:00
parent 7d34fcd48f
commit 1489f97c14
33 changed files with 147 additions and 313 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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">
&#8203;
</span>
<span className="hidden md:inline-block md:align-middle md:h-screen">&#8203;</span>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"

View File

@ -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">

View File

@ -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}