Border color - brand color - mobile 1 colum times (#4025)
This commit is contained in:
parent
0bd8c23be7
commit
7d611c5527
|
@ -53,7 +53,7 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
|
||||||
{date.toDate().toLocaleString(i18n.language, { month: "long" })}
|
{date.toDate().toLocaleString(i18n.language, { month: "long" })}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="grid flex-grow grid-cols-2 gap-x-2 overflow-y-auto sm:block md:h-[364px]">
|
<div className="grid flex-grow grid-cols-1 gap-x-2 overflow-y-auto sm:block md:h-[364px]">
|
||||||
{slots.length > 0 &&
|
{slots.length > 0 &&
|
||||||
slots.map((slot) => {
|
slots.map((slot) => {
|
||||||
type BookingURL = {
|
type BookingURL = {
|
||||||
|
@ -87,8 +87,8 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
|
||||||
{seatsPerTimeSlot && slot.attendees && slot.attendees >= seatsPerTimeSlot ? (
|
{seatsPerTimeSlot && slot.attendees && slot.attendees >= seatsPerTimeSlot ? (
|
||||||
<div
|
<div
|
||||||
className={classNames(
|
className={classNames(
|
||||||
"text-primary-500 dark:bg-darkgray-200 dark:text-darkgray-900 mb-2 block rounded-sm border bg-white py-4 font-medium opacity-25 dark:border-transparent ",
|
"text-primary-500 dark:bg-darkgray-200 dark:text-darkgray-900 mb-2 block rounded-sm border bg-white py-2 font-medium opacity-25 dark:border-transparent ",
|
||||||
brand === "#fff" || brand === "#ffffff" ? "border-brandcontrast" : "border-brand"
|
brand === "#fff" || brand === "#ffffff" ? "" : ""
|
||||||
)}>
|
)}>
|
||||||
{dayjs(slot.time).tz(timeZone()).format(timeFormat)}
|
{dayjs(slot.time).tz(timeZone()).format(timeFormat)}
|
||||||
{!!seatsPerTimeSlot && <p className="text-sm">{t("booking_full")}</p>}
|
{!!seatsPerTimeSlot && <p className="text-sm">{t("booking_full")}</p>}
|
||||||
|
@ -98,8 +98,8 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
|
||||||
<a
|
<a
|
||||||
className={classNames(
|
className={classNames(
|
||||||
"text-primary-500 hover:bg-brand hover:text-brandcontrast dark:hover:bg-darkmodebrand",
|
"text-primary-500 hover:bg-brand hover:text-brandcontrast dark:hover:bg-darkmodebrand",
|
||||||
"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",
|
"dark:hover:text-darkmodebrandcontrast dark:bg-darkgray-200 dark:hover:border-darkgray-900 mb-2 block rounded-md border bg-white py-2 text-sm font-medium hover:text-white dark:border-transparent dark:text-neutral-200",
|
||||||
brand === "#fff" || brand === "#ffffff" ? "border-brandcontrast" : "border-brand"
|
brand === "#fff" || brand === "#ffffff" ? "" : ""
|
||||||
)}
|
)}
|
||||||
data-testid="time">
|
data-testid="time">
|
||||||
{dayjs(slot.time).tz(timeZone()).format(timeFormat)}
|
{dayjs(slot.time).tz(timeZone()).format(timeFormat)}
|
||||||
|
|
|
@ -175,7 +175,7 @@ const SlotPicker = ({
|
||||||
<DatePicker
|
<DatePicker
|
||||||
isLoading={isLoading}
|
isLoading={isLoading}
|
||||||
className={classNames(
|
className={classNames(
|
||||||
"mt-8 w-full sm:mt-0 sm:min-w-[455px]",
|
"mt-8 w-full px-4 sm:mt-0 sm:min-w-[455px] md:px-0",
|
||||||
selectedDate
|
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: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"
|
: "sm:p-4"
|
||||||
|
@ -391,7 +391,7 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
|
||||||
{/* mobile: details */}
|
{/* mobile: details */}
|
||||||
<div className="block px-4 pt-4 sm:p-8 md:hidden">
|
<div className="block px-4 pt-4 sm:p-8 md:hidden">
|
||||||
<div>
|
<div>
|
||||||
<div className="flex">
|
<div className="flex items-center space-x-4">
|
||||||
<UserAvatars
|
<UserAvatars
|
||||||
profile={profile}
|
profile={profile}
|
||||||
users={eventType.users}
|
users={eventType.users}
|
||||||
|
@ -399,7 +399,7 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
|
||||||
size={9}
|
size={9}
|
||||||
truncateAfter={5}
|
truncateAfter={5}
|
||||||
/>
|
/>
|
||||||
<p className="dark:text-darkgray-600 break-words text-sm font-medium text-black">
|
<p className="break-words text-sm font-medium text-gray-600 dark:text-gray-300">
|
||||||
{profile.name}
|
{profile.name}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
@ -408,7 +408,7 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
|
||||||
<h1 className="text-bookingdark dark:text-darkgray-900 mb-4 break-words text-xl font-semibold">
|
<h1 className="text-bookingdark dark:text-darkgray-900 mb-4 break-words text-xl font-semibold">
|
||||||
{eventType.title}
|
{eventType.title}
|
||||||
</h1>
|
</h1>
|
||||||
<div className="flex flex-col space-y-2">
|
<div className="flex flex-col space-y-3">
|
||||||
{eventType?.description && (
|
{eventType?.description && (
|
||||||
<div className="flex py-1 text-sm font-medium text-gray-600 dark:text-white">
|
<div className="flex py-1 text-sm font-medium text-gray-600 dark:text-white">
|
||||||
<div>
|
<div>
|
||||||
|
@ -510,7 +510,7 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
|
||||||
<h1 className="font-cal dark:text-darkgray-900 mb-6 break-words text-2xl text-gray-900 ">
|
<h1 className="font-cal dark:text-darkgray-900 mb-6 break-words text-2xl text-gray-900 ">
|
||||||
{eventType.title}
|
{eventType.title}
|
||||||
</h1>
|
</h1>
|
||||||
<div className="flex flex-col space-y-2 text-sm font-medium text-gray-600 dark:text-white">
|
<div className="flex flex-col space-y-3 text-sm font-medium text-gray-600 dark:text-white">
|
||||||
{eventType?.description && (
|
{eventType?.description && (
|
||||||
<div className="flex ">
|
<div className="flex ">
|
||||||
<div>
|
<div>
|
||||||
|
|
|
@ -41,7 +41,7 @@ export const Day = ({
|
||||||
className={classNames(
|
className={classNames(
|
||||||
"disabled:text-bookinglighter absolute top-0 left-0 right-0 bottom-0 mx-auto w-full rounded-md border-2 border-transparent text-center font-medium hover:bg-gray-300 disabled:cursor-default disabled:border-transparent disabled:font-light dark:hover:border-white disabled:dark:border-transparent",
|
"disabled:text-bookinglighter absolute top-0 left-0 right-0 bottom-0 mx-auto w-full rounded-md border-2 border-transparent text-center font-medium hover:bg-gray-300 disabled:cursor-default disabled:border-transparent disabled:font-light dark:hover:border-white disabled:dark:border-transparent",
|
||||||
active
|
active
|
||||||
? "dark:bg-darkmodebrand dark:text-darkmodebrandcontrast border-2 bg-gray-300"
|
? "dark:bg-darkmodebrand dark:text-darkmodebrandcontrast bg-brand text-brandcontrast border-2"
|
||||||
: !props.disabled
|
: !props.disabled
|
||||||
? "dark:bg-darkgray-200 bg-gray-100 dark:text-white"
|
? "dark:bg-darkgray-200 bg-gray-100 dark:text-white"
|
||||||
: "hover:bg-transparent"
|
: "hover:bg-transparent"
|
||||||
|
|
Loading…
Reference in New Issue
Block a user