vynte-infra/calendar
2
0
Fork 0
Code Issues Pull Requests Actions 2.2k Packages Projects Releases Wiki Activity

Fixing padding + heading sizes (#4032)

Browse Source 
* Fixing padding + heading sizes

* Fix title position
This commit is contained in:
sean-brydon
2022-08-30 15:47:43 +02:00
committed by GitHub
parent 7d611c5527
commit fe12a83898
2 changed files with 25 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/components/booking/pages/AvailabilityPage.tsx
+21 -25
View File
@@ -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>
packages/ui/v2/modules/booker/DatePicker.tsx
+4 -2
View File
@@ -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" />