From fe12a83898ff7248f7e83485cbc95061b71d6804 Mon Sep 17 00:00:00 2001
From: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
Date: Tue, 30 Aug 2022 14:47:43 +0100
Subject: [PATCH] Fixing padding + heading sizes (#4032)

* Fixing padding + heading sizes

* Fix title position
---
 .../booking/pages/AvailabilityPage.tsx        | 46 +++++++++----------
 packages/ui/v2/modules/booker/DatePicker.tsx  |  6 ++-
 2 files changed, 25 insertions(+), 27 deletions(-)

diff --git a/apps/web/components/booking/pages/AvailabilityPage.tsx b/apps/web/components/booking/pages/AvailabilityPage.tsx
index 5a4843423b..c1b7ca0d9d 100644
--- a/apps/web/components/booking/pages/AvailabilityPage.tsx
+++ b/apps/web/components/booking/pages/AvailabilityPage.tsx
@@ -175,7 +175,7 @@ const SlotPicker = ({
       <DatePicker
         isLoading={isLoading}
         className={classNames(
-          "mt-8 w-full px-4 sm:mt-0 sm:min-w-[455px] md:px-0",
+          "mt-8 w-full px-4 sm:mt-0 sm:min-w-[455px] md:px-5",
           selectedDate
             ? "sm:dark:border-darkgray-200 border-gray-200 sm:w-1/2 sm:border-r sm:p-4 sm:pr-6 md:w-1/3 "
             : "sm:p-4"
@@ -391,20 +391,18 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
             {/* mobile: details */}
             <div className="block px-4 pt-4 sm:p-8 md:hidden">
               <div>
-                <div className="flex items-center space-x-4">
-                  <UserAvatars
-                    profile={profile}
-                    users={eventType.users}
-                    showMembers={eventType.schedulingType !== SchedulingType.ROUND_ROBIN}
-                    size={9}
-                    truncateAfter={5}
-                  />
-                  <p className="break-words text-sm font-medium text-gray-600 dark:text-gray-300">
-                    {profile.name}
-                  </p>
-                </div>
+                <UserAvatars
+                  profile={profile}
+                  users={eventType.users}
+                  showMembers={eventType.schedulingType !== SchedulingType.ROUND_ROBIN}
+                  size={9}
+                  truncateAfter={5}
+                />
                 <div className="mt-4">
                   <div className="dark:text-darkgray-900 mt-2 gap-2">
+                    <p className="break-words text-sm font-medium text-gray-600 dark:text-gray-300">
+                      {profile.name}
+                    </p>
                     <h1 className="text-bookingdark dark:text-darkgray-900 mb-4 break-words text-xl font-semibold">
                       {eventType.title}
                     </h1>
@@ -495,18 +493,16 @@ 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")
                 }>
-                <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>
+                <UserAvatars
+                  profile={profile}
+                  users={eventType.users}
+                  showMembers={eventType.schedulingType !== SchedulingType.ROUND_ROBIN}
+                  size={10}
+                  truncateAfter={3}
+                />
+                <h2 className="break-words text-sm font-medium text-gray-600 dark:text-gray-300 lg:mt-2">
+                  {profile.name}
+                </h2>
                 <h1 className="font-cal dark:text-darkgray-900 mb-6 break-words text-2xl text-gray-900 ">
                   {eventType.title}
                 </h1>
diff --git a/packages/ui/v2/modules/booker/DatePicker.tsx b/packages/ui/v2/modules/booker/DatePicker.tsx
index 9d59f2642b..58eae8bb67 100644
--- a/packages/ui/v2/modules/booker/DatePicker.tsx
+++ b/packages/ui/v2/modules/booker/DatePicker.tsx
@@ -135,8 +135,10 @@ const DatePicker = ({
         <span className="w-1/2 dark:text-white">
           {browsingDate ? (
             <>
-              <strong className="text-bookingdarker dark:text-white">{browsingDate.format("MMMM")}</strong>{" "}
-              <span className="text-bookinglight">{browsingDate.format("YYYY")}</span>
+              <strong className="text-bookingdarker text-base font-semibold dark:text-white">
+                {browsingDate.format("MMMM")}
+              </strong>{" "}
+              <span className="text-bookinglight text-sm font-medium">{browsingDate.format("YYYY")}</span>
             </>
           ) : (
             <SkeletonText width="24" height="8" />