mythic-insight/calcom
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 5

minor styling to booking page

Browse source
This commit is contained in:
Peer Richelsen 2021-08-08 17:29:45 +02:00
parent b263970b4f
commit 425055fd36
3 changed files with 19 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
components/booking/AvailableTimes.tsx
View file

@ -39,7 +39,7 @@ const AvailableTimes = ({
`/${user.username}/book?date=${slot.utc().format()}&type=${eventTypeId}` + `/${user.username}/book?date=${slot.utc().format()}&type=${eventTypeId}` +
(rescheduleUid ? "&rescheduleUid=" + rescheduleUid : "") (rescheduleUid ? "&rescheduleUid=" + rescheduleUid : "")
}> }>
<a className="block font-medium mb-4 bg-white dark:bg-neutral-900 text-primary-500 dark:text-neutral-200 border border-primary-500 dark:border-black rounded hover:text-white hover:bg-primary-500 dark:hover:border-black py-4 dark:hover:bg-black"> <a className="block font-medium mb-4 bg-white dark:bg-neutral-900 text-primary-500 dark:text-neutral-200 border border-primary-500 dark:border-black rounded-sm hover:text-white hover:bg-primary-500 dark:hover:border-black py-4 dark:hover:bg-black">
{slot.format(timeFormat)} {slot.format(timeFormat)}
</a> </a>
</Link> </Link>

13
components/booking/DatePicker.tsx
View file

@ -171,20 +171,23 @@ const DatePicker = ({
}> }>
<div className="flex text-gray-600 font-light text-xl mb-4 ml-2"> <div className="flex text-gray-600 font-light text-xl mb-4 ml-2">
<span className="w-1/2 text-gray-600 dark:text-white"> <span className="w-1/2 text-gray-600 dark:text-white">
{dayjs().month(selectedMonth).format("MMMM YYYY")} <strong className="text-gray-900 dark:text-white">
{dayjs().month(selectedMonth).format("MMMM")}
</strong>
<span className="text-gray-500"> {dayjs().month(selectedMonth).format("YYYY")}</span>
</span> </span>
<div className="w-1/2 text-right text-gray-600 dark:text-gray-400"> <div className="w-1/2 text-right text-gray-600 dark:text-gray-400">
<button <button
onClick={decrementMonth} onClick={decrementMonth}
className={ className={
"mr-4 " + "group mr-2 p-1" +
(selectedMonth <= dayjs().tz(inviteeTimeZone).month() && "text-gray-400 dark:text-gray-600") (selectedMonth <= dayjs().tz(inviteeTimeZone).month() && "text-gray-400 dark:text-gray-600")
} }
disabled={selectedMonth <= dayjs().tz(inviteeTimeZone).month()}> disabled={selectedMonth <= dayjs().tz(inviteeTimeZone).month()}>
<ChevronLeftIcon className="w-5 h-5" /> <ChevronLeftIcon className="group-hover:text-black dark:group-hover:text-white w-5 h-5" />
</button> </button>
<button onClick={incrementMonth}> <button className="group p-1" onClick={incrementMonth}>
<ChevronRightIcon className="w-5 h-5" /> <ChevronRightIcon className="group-hover:text-black dark:group-hover:text-white w-5 h-5" />
</button> </button>
</div> </div>
</div> </div>

10
styles/globals.css
View file

@ -81,6 +81,16 @@
} }
} }
::-moz-selection {
color: white;
background: black;
}
::selection {
color: white;
background: black;
}
/* add padding bottom to bottom nav on standalone mode */ /* add padding bottom to bottom nav on standalone mode */
@media all and (display-mode: standalone) { @media all and (display-mode: standalone) {
.bottom-nav { .bottom-nav {