public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

V2 colors - Public Booking (#4022) 

* V2 colors

* Fix border right

* Fixing spacing
pull/4023/head
sean-brydon 2022-08-30 09:56:30 +01:00 committed by GitHub
parent 3527c5126a
commit fb3c481235
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 53 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
apps/web/components/booking/AvailableTimes.tsx
View File

@ -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">

54
apps/web/components/booking/pages/AvailabilityPage.tsx
View File

@ -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

14
apps/web/components/booking/pages/BookingPage.tsx
View File

@ -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>

11
apps/web/pages/[user].tsx
View File

@ -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>

2
packages/ui/booker/DatePicker.tsx
View File

@ -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" />

2
packages/ui/v2/core/Button.tsx
View File

@ -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",
};

2
packages/ui/v2/modules/booker/DatePicker.tsx
View File

@ -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}

2
packages/ui/v2/modules/event-types/EventTypeDescription.tsx
View File

@ -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)}