Styled completion form

daily-thought-frontend/src/components/form/DailyCompletion.tsx

-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;
+export default DailyPostCompletion;
\ No newline at end of file