From fb3c481235641796ab9fcb4913c0a04c1a6c016c Mon Sep 17 00:00:00 2001
From: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
Date: Tue, 30 Aug 2022 09:56:30 +0100
Subject: [PATCH] V2 colors - Public Booking (#4022)

* V2 colors

* Fix border right

* Fixing spacing
---
 .../web/components/booking/AvailableTimes.tsx |  6 +--
 .../booking/pages/AvailabilityPage.tsx        | 54 ++++++++++---------
 .../components/booking/pages/BookingPage.tsx  | 14 +++--
 apps/web/pages/[user].tsx                     | 11 ++--
 packages/ui/booker/DatePicker.tsx             |  2 +-
 packages/ui/v2/core/Button.tsx                |  2 +-
 packages/ui/v2/modules/booker/DatePicker.tsx  |  2 +-
 .../event-types/EventTypeDescription.tsx      |  2 +-
 8 files changed, 53 insertions(+), 40 deletions(-)

diff --git a/apps/web/components/booking/AvailableTimes.tsx b/apps/web/components/booking/AvailableTimes.tsx
index bfaf3949a8..00c6b1a43c 100644
--- a/apps/web/components/booking/AvailableTimes.tsx
+++ b/apps/web/components/booking/AvailableTimes.tsx
@@ -43,9 +43,9 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
   }, []);
 
   return (
-    <div className="dark:bg-darkgray-200 mt-8 flex flex-col px-4 text-center sm:mt-0 sm:w-1/3 sm:p-5 md:-mb-4">
+    <div className="dark:bg-darkgray-100 mt-8 flex flex-col px-4 text-center sm:mt-0 sm:w-1/3 sm:p-5 md:-mb-4">
       <div className="mb-4 text-left text-base">
-        <span className="text-bookingdarker mb-8 w-1/2 break-words font-semibold text-gray-900 dark:text-white">
+        <span className="text-bookingdarker dark:text-darkgray-800 mb-8 w-1/2 break-words font-semibold text-gray-900">
           {nameOfDay(i18n.language, Number(date.format("d")))}
         </span>
         <span className="text-bookinglight font-medium">
@@ -98,7 +98,7 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
                     <a
                       className={classNames(
                         "text-primary-500 hover:bg-brand hover:text-brandcontrast dark:hover:bg-darkmodebrand",
-                        "dark:hover:text-darkmodebrandcontrast dark:bg-darkgray-50 dark:hover:border-darkgray-900 mb-2 block rounded-md border-2 bg-white py-4 text-sm font-medium hover:text-white dark:border-transparent dark:text-neutral-200",
+                        "dark:hover:text-darkmodebrandcontrast dark:bg-darkgray-200 dark:hover:border-darkgray-900 mb-2 block rounded-md border-2 bg-white py-4 text-sm font-medium hover:text-white dark:border-transparent dark:text-neutral-200",
                         brand === "#fff" || brand === "#ffffff" ? "border-brandcontrast" : "border-brand"
                       )}
                       data-testid="time">
diff --git a/apps/web/components/booking/pages/AvailabilityPage.tsx b/apps/web/components/booking/pages/AvailabilityPage.tsx
index 59b024a460..9235726218 100644
--- a/apps/web/components/booking/pages/AvailabilityPage.tsx
+++ b/apps/web/components/booking/pages/AvailabilityPage.tsx
@@ -384,24 +384,26 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
           <div
             style={availabilityDatePickerEmbedStyles}
             className={classNames(
-              isBackgroundTransparent ? "" : "dark:bg-darkgray-300 sm:dark:border-darkgray-300 bg-white",
+              isBackgroundTransparent ? "" : "dark:bg-darkgray-100 sm:dark:border-darkgray-300 bg-white",
               "border-bookinglightest rounded-md md:border",
               isEmbed ? "mx-auto" : maxWidth
             )}>
             {/* mobile: details */}
             <div className="block px-4 pt-4 sm:p-8 md:hidden">
               <div>
-                <UserAvatars
-                  profile={profile}
-                  users={eventType.users}
-                  showMembers={eventType.schedulingType !== SchedulingType.ROUND_ROBIN}
-                  size={9}
-                  truncateAfter={5}
-                />
-                <div className="mt-4">
+                <div className="flex">
+                  <UserAvatars
+                    profile={profile}
+                    users={eventType.users}
+                    showMembers={eventType.schedulingType !== SchedulingType.ROUND_ROBIN}
+                    size={9}
+                    truncateAfter={5}
+                  />
                   <p className="dark:text-darkgray-600 break-words text-sm font-medium text-black">
                     {profile.name}
                   </p>
+                </div>
+                <div className="mt-4">
                   <div className="dark:text-darkgray-900 mt-2 gap-2">
                     <h1 className="text-bookingdark dark:text-darkgray-900 mb-4 break-words text-xl font-semibold">
                       {eventType.title}
@@ -493,22 +495,24 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
                   "sm:dark:border-darkgray-200 hidden overflow-hidden border-gray-200 p-5 sm:border-r md:flex md:flex-col " +
                   (isAvailableTimesVisible ? "sm:w-1/3" : recurringEventCount ? "sm:w-2/3" : "sm:w-1/2")
                 }>
-                <UserAvatars
-                  profile={profile}
-                  users={eventType.users}
-                  showMembers={eventType.schedulingType !== SchedulingType.ROUND_ROBIN}
-                  size={10}
-                  truncateAfter={3}
-                />
-                <h2 className="mt-2 break-words text-sm font-medium text-gray-500 dark:text-gray-300">
-                  {profile.name}
-                </h2>
+                <div className="flex space-x-4">
+                  <UserAvatars
+                    profile={profile}
+                    users={eventType.users}
+                    showMembers={eventType.schedulingType !== SchedulingType.ROUND_ROBIN}
+                    size={10}
+                    truncateAfter={3}
+                  />
+                  <h2 className="mt-2 break-words text-sm font-medium text-gray-600 dark:text-gray-300">
+                    {profile.name}
+                  </h2>
+                </div>
                 <h1 className="font-cal dark:text-darkgray-900 mb-6 break-words text-2xl text-gray-900 ">
                   {eventType.title}
                 </h1>
-                <div className="flex flex-col space-y-2">
+                <div className="flex flex-col space-y-2 text-sm font-medium text-gray-600 dark:text-white">
                   {eventType?.description && (
-                    <div className="flex text-sm font-medium text-gray-600 dark:text-white">
+                    <div className="flex ">
                       <div>
                         <Icon.FiInfo className="mr-[10px] ml-[2px] inline-block h-4 w-4" />
                       </div>
@@ -516,7 +520,7 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
                     </div>
                   )}
                   {eventType?.requiresConfirmation && (
-                    <div className="flex items-center text-sm font-medium text-gray-600 dark:text-white">
+                    <div className="flex items-center">
                       <div>
                         <Icon.FiCheckSquare className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 " />
                       </div>
@@ -524,12 +528,12 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
                     </div>
                   )}
                   <AvailableEventLocations locations={eventType.locations} />
-                  <p className="text-sm font-medium text-gray-600 dark:text-white">
+                  <p className="text-sm font-medium">
                     <Icon.FiClock className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4" />
                     {eventType.length} {t("minutes")}
                   </p>
                   {!rescheduleUid && eventType.recurringEvent && (
-                    <div className="flex items-start text-sm font-medium text-gray-600 dark:text-white">
+                    <div className="flex items-start text-sm font-medium">
                       <Icon.FiRefreshCcw className="float-left mr-[10px] mt-[7px] ml-[2px] inline-block h-4 w-4 " />
                       <div>
                         <p className="mb-1 -ml-2 inline px-2 py-1">
@@ -554,7 +558,7 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
                     </div>
                   )}
                   {eventType.price > 0 && (
-                    <p className="-ml-2 px-2 text-sm font-medium text-gray-600 dark:text-white">
+                    <p className="-ml-2 px-2 text-sm font-medium ">
                       <Icon.FiCreditCard className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4" />
                       <IntlProvider locale="en">
                         <FormattedNumber
diff --git a/apps/web/components/booking/pages/BookingPage.tsx b/apps/web/components/booking/pages/BookingPage.tsx
index f66b2a635f..61953305f4 100644
--- a/apps/web/components/booking/pages/BookingPage.tsx
+++ b/apps/web/components/booking/pages/BookingPage.tsx
@@ -464,11 +464,11 @@ const BookingPage = ({
           className={classNames(
             "main overflow-hidden",
             isEmbed ? "" : "border border-gray-200",
-            isBackgroundTransparent ? "" : "dark:border-1 dark:bg-darkgray-200 bg-white",
+            isBackgroundTransparent ? "" : "dark:border-1 dark:bg-darkgray-100 bg-white",
             "dark:border-darkgray-300 rounded-md sm:border"
           )}>
           <div className="sm:flex">
-            <div className="sm:dark:border-darkgray-50 dark:text-darkgray-600 px-6 pt-6 pb-0 text-gray-600 sm:w-1/2 sm:border-r sm:pb-6">
+            <div className="sm:dark:border-darkgray-300 dark:text-darkgray-600 flex flex-col space-y-2 px-6 pt-6 pb-0 text-gray-600 sm:w-1/2 sm:border-r sm:pb-6">
               <UserAvatars
                 profile={profile}
                 users={eventType.users}
@@ -514,7 +514,7 @@ const BookingPage = ({
                 </div>
               )}
               <div className="flex flex-col space-y-2">
-                <p className="text-sm font-medium text-gray-600 dark:text-white">
+                <p className="dark:text-darkgray-600 text-sm font-medium text-gray-600">
                   <Icon.FiClock className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4" />
                   {eventType.length} {t("minutes")}
                 </p>
@@ -877,12 +877,16 @@ const BookingPage = ({
                 <div className="flex items-start space-x-2 rtl:space-x-reverse">
                   <Button
                     type="submit"
-                    className="dark:bg-darkmodebrand dark:text-darkmodebrandcontrast"
+                    className="dark:bg-darkmodebrand dark:text-darkmodebrandcontrast rounded-md"
                     data-testid={rescheduleUid ? "confirm-reschedule-button" : "confirm-book-button"}
                     loading={mutation.isLoading || recurringMutation.isLoading}>
                     {rescheduleUid ? t("reschedule") : t("confirm")}
                   </Button>
-                  <Button color="secondary" type="button" onClick={() => router.back()}>
+                  <Button
+                    color="secondary"
+                    type="button"
+                    onClick={() => router.back()}
+                    className="rounded-md">
                     {t("cancel")}
                   </Button>
                 </div>
diff --git a/apps/web/pages/[user].tsx b/apps/web/pages/[user].tsx
index 716b8c682b..dbac353859 100644
--- a/apps/web/pages/[user].tsx
+++ b/apps/web/pages/[user].tsx
@@ -68,7 +68,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps>) {
       {eventTypes.map((type, index) => (
         <li
           key={index}
-          className="hover:border-brand dark:bg-darkgray-100 group relative rounded-sm border border-neutral-200 bg-white dark:border-neutral-700 dark:hover:border-neutral-600">
+          className="dark:bg-darkgray-100 dark:border-darkgray-200 group relative rounded-sm border border-neutral-200 bg-white dark:hover:border-neutral-600">
           <Icon.FiArrowRight className="absolute right-3 top-3 h-4 w-4 text-black opacity-0 transition-opacity group-hover:opacity-100 dark:text-white" />
           <Link href={getUsernameSlugLink({ users: props.users, slug: type.slug })}>
             <a className="flex justify-between px-6 py-4" data-testid="event-type-link">
@@ -171,7 +171,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps>) {
                 <div
                   key={type.id}
                   style={{ display: "flex", ...eventTypeListItemEmbedStyles }}
-                  className="hover:border-brand dark:bg-darkgray-100 group relative border-b border-neutral-200 bg-white  first:rounded-t-md last:rounded-b-md last:border-b-0 hover:bg-white dark:border-neutral-700 dark:hover:border-neutral-600">
+                  className="dark:bg-darkgray-100 group relative border-b border-neutral-200 bg-white  first:rounded-t-md last:rounded-b-md last:border-b-0 hover:bg-white dark:border-neutral-700 dark:hover:border-neutral-600">
                   <Icon.FiArrowRight className="absolute right-4 top-4 h-4 w-4 text-black opacity-0 transition-opacity group-hover:opacity-100 dark:text-white" />
                   {/* Don't prefetch till the time we drop the amount of javascript in [user][type] page which is impacting score for [user] page */}
                   <Link
@@ -198,7 +198,12 @@ export default function User(props: inferSSRProps<typeof getServerSideProps>) {
                       }}
                       className="block w-full p-5"
                       data-testid="event-type-link">
-                      <h2 className="grow font-semibold text-neutral-900 dark:text-white">{type.title}</h2>
+                      <div className="flex items-center space-x-2">
+                        <h2 className="dark:text-darkgray-700 text-sm font-semibold text-gray-700">
+                          {type.title}
+                        </h2>
+                        <p className="dark:text-darkgray-600 text-sm font-normal leading-none text-gray-600">{`/${user.username}/${type.slug}`}</p>
+                      </div>
                       <EventTypeDescription eventType={type} />
                     </a>
                   </Link>
diff --git a/packages/ui/booker/DatePicker.tsx b/packages/ui/booker/DatePicker.tsx
index 04a70135b2..3af41fbcac 100644
--- a/packages/ui/booker/DatePicker.tsx
+++ b/packages/ui/booker/DatePicker.tsx
@@ -86,7 +86,7 @@ const Days = ({
             <div key={`e-${idx}`} />
           ) : props.isLoading ? (
             <button
-              className="absolute top-0 left-0 right-0 bottom-0 mx-auto flex w-full items-center justify-center rounded-sm border-transparent bg-gray-50 text-center text-gray-400 opacity-50 dark:bg-gray-900 dark:text-gray-400"
+              className="dark:bg-darkgray-100 dark:text-darkgray-400 absolute top-0 left-0 right-0 bottom-0 mx-auto flex w-full items-center justify-center rounded-sm border-transparent bg-gray-50 text-center text-gray-400 opacity-50"
               key={`e-${idx}`}
               disabled>
               <SkeletonText width="5" height="4" />
diff --git a/packages/ui/v2/core/Button.tsx b/packages/ui/v2/core/Button.tsx
index cd17d5a7c3..a8a3d21008 100644
--- a/packages/ui/v2/core/Button.tsx
+++ b/packages/ui/v2/core/Button.tsx
@@ -42,7 +42,7 @@ const variantClassName = {
     "border border-transparent text-white bg-brand-500 hover:bg-brand-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-500",
   secondary: "border border-gray-200 text-brand-900 bg-white hover:bg-gray-100",
   minimal:
-    "text-gray-700 bg-transparent hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:bg-gray-100 focus:ring-brand-900 dark:text-darkgray-900",
+    "text-gray-700 bg-transparent hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:bg-gray-100 focus:ring-brand-900 dark:text-darkgray-900 hover:dark:text-gray-50",
   destructive:
     "text-gray-700 bg-transparent hover:bg-red-100 hover:text-red-700 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:bg-red-100 focus:ring-red-700",
 };
diff --git a/packages/ui/v2/modules/booker/DatePicker.tsx b/packages/ui/v2/modules/booker/DatePicker.tsx
index c30bb7e2bf..05cfffefac 100644
--- a/packages/ui/v2/modules/booker/DatePicker.tsx
+++ b/packages/ui/v2/modules/booker/DatePicker.tsx
@@ -44,7 +44,7 @@ export const Day = ({
           ? "dark:bg-darkmodebrand dark:text-darkmodebrandcontrast border-2 bg-gray-300"
           : !props.disabled
           ? "dark:bg-darkgray-200 bg-gray-100 dark:text-white"
-          : "dark:hover:bg-darkgray-300"
+          : "hover:bg-transparent"
       )}
       data-testid="day"
       data-disabled={props.disabled}
diff --git a/packages/ui/v2/modules/event-types/EventTypeDescription.tsx b/packages/ui/v2/modules/event-types/EventTypeDescription.tsx
index ab1ed6228c..c3487685be 100644
--- a/packages/ui/v2/modules/event-types/EventTypeDescription.tsx
+++ b/packages/ui/v2/modules/event-types/EventTypeDescription.tsx
@@ -29,7 +29,7 @@ export const EventTypeDescription = ({ eventType, className }: EventTypeDescript
 
   return (
     <>
-      <div className={classNames("text-neutral-500 dark:text-white", className)}>
+      <div className={classNames("dark:text-darkgray-800 text-neutral-500", className)}>
         {eventType.description && (
           <h2 className="dark:text-darkgray-800 max-w-[280px] overflow-hidden text-ellipsis py-2 text-sm leading-none text-gray-600 opacity-60 sm:max-w-[500px]">
             {eventType.description.substring(0, 100)}