diff --git a/daily-thought-frontend/src/components/form/DailyCompletion.tsx b/daily-thought-frontend/src/components/form/DailyCompletion.tsx index a2435c1f65c3327663c00e9fede99d73b06171ab..269b783c7cf9754870a795c38b2ae86886269ced 100644 --- a/daily-thought-frontend/src/components/form/DailyCompletion.tsx +++ b/daily-thought-frontend/src/components/form/DailyCompletion.tsx @@ -1,26 +1,25 @@ -import { Dialog, Transition } from "@headlessui/react"; -import { FC, Fragment, PropsWithChildren, useEffect, useState } from "react"; +import { Dialog, Transition } from '@headlessui/react'; +import { CheckCircleIcon } from '@heroicons/react/24/outline'; +import { FC, Fragment, PropsWithChildren, useEffect, useState } from 'react'; type DailyCompletionProps = { - show: boolean -} + show: boolean; +}; -const DailyPostCompletion:FC<PropsWithChildren<DailyCompletionProps>> = ({ - show -}) => { +const DailyPostCompletion: FC<PropsWithChildren<DailyCompletionProps>> = ({ show }) => { const [isOpen, setIsOpen] = useState(false); - const [done, setDone] = useState(false) + const [done, setDone] = useState(false); useEffect(() => { - if(!isOpen && show && !done){ - setIsOpen(true) - setDone(true) + if (!isOpen && show && !done) { + setIsOpen(true); + setDone(true); setTimeout(() => { - setIsOpen(false) - }, 3000) + setIsOpen(false); + }, 3000); } - }) + }); return ( <> @@ -52,17 +51,18 @@ const DailyPostCompletion:FC<PropsWithChildren<DailyCompletionProps>> = ({ <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all"> <Dialog.Title as="h3" - className="text-lg font-medium leading-6 text-gray-900" + className="text-lg font-medium leading-6 text-gray-900 text-center" > - Payment successful + <div className="w-full flex justify-center mb-2"> + <CheckCircleIcon className="h-12 w-12 rounded-full text-c-pink flex items-center justify-center" /> + </div> + Your Daily has been posted! </Dialog.Title> <div className="mt-2"> - <p className="text-sm text-gray-500"> - Your payment has been successfully submitted. We’ve sent - you an email with all of the details of your order. + <p className="text-sm text-gray-500 text-center"> + Now have a look at what your friends have said :) </p> </div> - </Dialog.Panel> </Transition.Child> </div> @@ -70,7 +70,7 @@ const DailyPostCompletion:FC<PropsWithChildren<DailyCompletionProps>> = ({ </Dialog> </Transition> </> - ) -} + ); +}; -export default DailyPostCompletion; \ No newline at end of file +export default DailyPostCompletion;