From d5c77c42a33bbac6f149bfc1d4ce31166f9e4931 Mon Sep 17 00:00:00 2001
From: Bailey Pumfleet <pumfleet@hey.com>
Date: Fri, 6 Aug 2021 23:14:35 +0100
Subject: [PATCH] Partial implementation of the confirmation page redesign

---
 pages/success.tsx | 70 +++++++++++++++++++++++------------------------
 1 file changed, 35 insertions(+), 35 deletions(-)
diff --git a/pages/success.tsx b/pages/success.tsx
index 0c73d2bbe3..03a0ed4002 100644
--- a/pages/success.tsx
+++ b/pages/success.tsx
@@ -60,7 +60,7 @@ export default function Success(props) {
 
   return (
     isReady && (
-      <div>
+      <div className="bg-neutral-50 dark:bg-neutral-900 h-screen">
         <Head>
           <title>
             Booking {props.eventType.requiresConfirmation ? "Submitted" : "Confirmed"} | {eventName} |
@@ -68,7 +68,7 @@ export default function Success(props) {
           </title>
           <link rel="icon" href="/favicon.ico" />
         </Head>
-        <main className="max-w-3xl mx-auto my-24">
+        <main className="max-w-3xl mx-auto py-24">
           <div className="fixed z-50 inset-0 overflow-y-auto">
             <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
               <div className="fixed inset-0 my-4 sm:my-0 transition-opacity" aria-hidden="true">
@@ -76,61 +76,61 @@ export default function Success(props) {
                   &#8203;
                 </span>
                 <div
-                  className="inline-block align-bottom dark:bg-gray-800 bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-sm sm:w-full sm:p-6"
+                  className="inline-block align-bottom dark:bg-gray-800 bg-white rounded-sm px-8 pt-5 pb-4 text-left overflow-hidden border border-neutral-200 transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:py-6"
                   role="dialog"
                   aria-modal="true"
                   aria-labelledby="modal-headline">
                   <div>
                     <div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100">
                       {!props.eventType.requiresConfirmation && (
-                        <CheckIcon className="h-6 w-6 text-green-600" />
+                        <CheckIcon className="h-8 w-8 text-green-600" />
                       )}
                       {props.eventType.requiresConfirmation && (
-                        <ClockIcon className="h-6 w-6 text-green-600" />
+                        <ClockIcon className="h-8 w-8 text-green-600" />
                       )}
                     </div>
                     <div className="mt-3 text-center sm:mt-5">
                       <h3
-                        className="text-lg leading-6 font-medium dark:text-white text-gray-900"
+                        className="text-2xl leading-6 font-semibold dark:text-white text-neutral-900"
                         id="modal-headline">
-                        Booking {props.eventType.requiresConfirmation ? "Submitted" : "Confirmed"}
+                        {props.eventType.requiresConfirmation ? "Submitted" : "This meeting is scheduled"}
                       </h3>
-                      <div className="mt-2">
-                        <p className="text-sm text-gray-500 dark:text-gray-300">
+                      <div className="mt-3">
+                        <p className="text-sm text-neutral-600 dark:text-gray-300">
                           {props.eventType.requiresConfirmation
                             ? `${
                                 props.user.name || props.user.username
                               } still needs to confirm or reject the booking.`
-                            : `You are scheduled in with ${props.user.name || props.user.username}.`}
+                            : `We emailed you and the other attendees a calendar invitation with all the details.`}
                         </p>
                       </div>
-                      <div className="mt-4 border-t border-b dark:border-gray-900 py-4">
-                        <h2 className="text-lg font-medium text-gray-600 dark:text-gray-100 mb-2">
-                          {eventName}
-                        </h2>
-                        <p className="text-gray-500 dark:text-gray-50 mb-1">
-                          <ClockIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
-                          {props.eventType.length} minutes
-                        </p>
+                      <div className="mt-4 text-gray-700 border-t border-b dark:border-gray-900 py-4 grid grid-cols-3 text-left">
+                        <div className="font-medium">What</div>
+                        <div className="mb-6 col-span-2">{eventName}</div>
+                        <div className="font-medium">When</div>
+                        <div className="mb-6 col-span-2">
+                          {date.format("dddd, DD MMMM YYYY")}
+                          <br />
+                          {date.format(is24h ? "H:mm" : "h:mma")} - {props.eventType.length} mins{" "}
+                          <span className="text-gray-500">
+                            ({localStorage.getItem("timeOption.preferredTimeZone") || dayjs.tz.guess()})
+                          </span>
+                        </div>
                         {location && (
-                          <p className="text-gray-500 mb-1">
-                            <LocationMarkerIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
-                            {location}
-                          </p>
+                          <>
+                            <div className="font-medium">Where</div>
+                            <div className="col-span-2">{location}</div>
+                          </>
                         )}
-                        <p className="text-gray-500 dark:text-gray-50">
-                          <CalendarIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
-                          {date.format((is24h ? "H:mm" : "h:mma") + ", dddd DD MMMM YYYY")}
-                        </p>
                       </div>
                     </div>
                   </div>
                   {!props.eventType.requiresConfirmation && (
-                    <div className="mt-5 sm:mt-0 pt-2 text-center">
-                      <span className="font-medium text-gray-500 dark:text-gray-50">
-                        Add to your calendar
+                    <div className="mt-5 sm:mt-0 sm:pt-4 pt-2 text-center flex">
+                      <span className="font-medium text-gray-700 dark:text-gray-50 flex self-center mr-6">
+                        Add to calendar
                       </span>
-                      <div className="flex mt-2">
+                      <div className="flex">
                         <Link
                           href={
                             `https://calendar.google.com/calendar/r/eventedit?dates=${date
@@ -142,9 +142,9 @@ export default function Success(props) {
                               props.eventType.description
                             }` + (location ? "&location=" + encodeURIComponent(location) : "")
                           }>
-                          <a className="mx-2 btn-wide btn-white">
+                          <a className="mx-2 rounded-sm border border-neutral-200 py-2 px-3">
                             <svg
-                              className="inline-block w-4 h-4 mr-1 -mt-1"
+                              className="inline-block w-4 h-4 -mt-1"
                               fill="currentColor"
                               xmlns="http://www.w3.org/2000/svg"
                               viewBox="0 0 24 24">
@@ -166,7 +166,7 @@ export default function Success(props) {
                                 eventName
                             ) + (location ? "&location=" + location : "")
                           }>
-                          <a className="mx-2 btn-wide btn-white" target="_blank">
+                          <a className="mx-2 rounded-sm border border-neutral-200 py-2 px-3" target="_blank">
                             <svg
                               className="inline-block w-4 h-4 mr-1 -mt-1"
                               fill="currentColor"
@@ -190,7 +190,7 @@ export default function Success(props) {
                                 eventName
                             ) + (location ? "&location=" + location : "")
                           }>
-                          <a className="mx-2 btn-wide btn-white" target="_blank">
+                          <a className="mx-2 rounded-sm border border-neutral-200 py-2 px-3" target="_blank">
                             <svg
                               className="inline-block w-4 h-4 mr-1 -mt-1"
                               fill="currentColor"
@@ -202,7 +202,7 @@ export default function Success(props) {
                           </a>
                         </Link>
                         <Link href={"data:text/calendar," + eventLink()}>
-                          <a className="mx-2 btn-wide btn-white" download={props.eventType.title + ".ics"}>
+                          <a className="mx-2 rounded-sm border border-neutral-200 py-2 px-3" download={props.eventType.title + ".ics"}>
                             <svg
                               version="1.1"
                               xmlns="http://www.w3.org/2000/svg"
