V2 colors - Public Booking (#4022)
* V2 colors * Fix border right * Fixing spacing
This commit is contained in:
sean-brydon
GitHub
parent
3527c5126a
commit
fb3c481235
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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" />
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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)}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user