From e4c925ad756ce216dc8441390634499dde906289 Mon Sep 17 00:00:00 2001
From: Jeff Sieu <jeffsy00@gmail.com>
Date: Sat, 8 Oct 2022 18:25:05 +0800
Subject: [PATCH] [questions][ui] use TIH dialog for discard

---
 .../questions/DiscardDraftDialog.tsx          | 84 ++++---------------
 1 file changed, 16 insertions(+), 68 deletions(-)

diff --git a/apps/portal/src/components/questions/DiscardDraftDialog.tsx b/apps/portal/src/components/questions/DiscardDraftDialog.tsx
index a0921cfa..85b56c4d 100644
--- a/apps/portal/src/components/questions/DiscardDraftDialog.tsx
+++ b/apps/portal/src/components/questions/DiscardDraftDialog.tsx
@@ -1,6 +1,4 @@
-import { Fragment } from 'react';
-import { Dialog, Transition } from '@headlessui/react';
-import { ExclamationTriangleIcon } from '@heroicons/react/24/outline';
+import { Button, Dialog } from '@tih/ui';
 
 export type DiscardDraftDialogProps = {
   onCancel: () => void;
@@ -13,70 +11,20 @@ export default function DiscardDraftDialog({
   onDiscard,
 }: DiscardDraftDialogProps) {
   return (
-    <Transition.Root as={Fragment} show={show}>
-      <Dialog as="div" className="relative z-10" onClose={onCancel}>
-        <Transition.Child
-          as={Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0">
-          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-10 overflow-y-auto">
-          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
-                <div className="sm:flex sm:items-start">
-                  <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
-                    <ExclamationTriangleIcon
-                      aria-hidden="true"
-                      className="h-6 w-6 text-red-600"
-                    />
-                  </div>
-                  <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-                    <Dialog.Title
-                      as="h3"
-                      className="text-lg font-medium leading-6 text-gray-900">
-                      Discard Question Draft
-                    </Dialog.Title>
-                    <div className="mt-2">
-                      <p className="text-sm text-gray-500">
-                        Are you sure you want to discard the current draft? This
-                        action cannot be undone.
-                      </p>
-                    </div>
-                  </div>
-                </div>
-                <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
-                  <button
-                    className="inline-flex w-full justify-center rounded-md border border-transparent bg-red-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm"
-                    type="button"
-                    onClick={onDiscard}>
-                    Discard
-                  </button>
-                  <button
-                    className="mt-3 inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm"
-                    type="button"
-                    onClick={onCancel}>
-                    Cancel
-                  </button>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
+    <Dialog
+      isShown={show}
+      primaryButton={
+        <Button label="Discard" variant="primary" onClick={onDiscard} />
+      }
+      secondaryButton={
+        <Button label="Cancel" variant="tertiary" onClick={onCancel} />
+      }
+      title="Discard draft"
+      onClose={onCancel}>
+      <p>
+        Are you sure you want to discard the current draft? This action cannot
+        be undone.
+      </p>
+    </Dialog>
   );
 }