addded padding to sticky nav, temp removed TODAY from /booking (#4278)

pull/4279/head
Peer Richelsen 2022-09-08 16:34:37 +02:00 committed by GitHub
parent a8c1851c04
commit f7119849db
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 15 additions and 17 deletions

View File

@ -61,16 +61,13 @@ export function AvailabilityForm(props: inferQueryOutput<"viewer.availability.sc
...values,
});
}}
className="-mx-5 flex flex-col sm:mx-0 xl:flex-row">
className="-mx-4 flex flex-col pb-16 sm:mx-0 xl:flex-row xl:space-x-6">
<div className="flex-1">
<div className="rounded-md border border-gray-200 bg-white px-4 py-5 sm:p-6">
<div className="rounded-md border-gray-200 bg-white px-4 py-5 sm:border sm:p-6">
<h3 className="mb-5 text-base font-medium leading-6 text-gray-900">{t("change_start_end")}</h3>
<Schedule />
</div>
<div className="space-x-2 pt-4 text-right sm:pt-2">
<Button color="secondary" href="/availability" tabIndex={-1}>
{t("cancel")}
</Button>
<div className="flex justify-end px-4 pt-4 sm:px-0">
<Button>{t("save")}</Button>
</div>
</div>
@ -114,14 +111,10 @@ export function AvailabilityForm(props: inferQueryOutput<"viewer.availability.sc
className="focus:border-brand mt-1 block w-full rounded-md border-gray-300 text-sm"
/>
</div>
<div className="mt-6 rounded-md border border-gray-200 px-4 py-5 sm:p-6">
<h3 className="text-base font-medium leading-6 text-gray-900">
{t("something_doesnt_look_right")}
</h3>
<div className="mt-2 max-w-xl text-sm text-gray-500">
<p>{t("troubleshoot_availability")}</p>
</div>
<div className="mt-5">
<hr className="my-8" />
<div className="rounded-md">
<h3 className="text-sm font-medium text-gray-900">{t("something_doesnt_look_right")}</h3>
<div className="mt-3 flex">
<Button href="/availability/troubleshoot" color="secondary">
{t("launch_troubleshooter")}
</Button>

View File

@ -89,7 +89,10 @@ export default function Bookings() {
{query.status === "success" && !isEmpty && (
<div className="pt-2 xl:mx-6 xl:pt-0">
<WipeMyCalActionButton bookingStatus={status} bookingsEmpty={isEmpty} />
<p className="pb-3 text-xs font-medium capitalize leading-4 text-gray-500">{t("today")}</p>
{/* TODO: add today only for the current day
<p className="pb-3 text-xs font-medium uppercase leading-4 text-gray-500">{t("today")}</p>
*/}
<div className="overflow-hidden rounded-md border border-gray-200">
<table className="w-full">
<tbody className="divide-y divide-gray-200 bg-white" data-testid="bookings">

View File

@ -53,7 +53,7 @@ const HorizontalTabItem = ({ name, href, tabName, ...props }: HorizontalTabItemP
<a
onClick={onClick}
className={classNames(
isCurrent ? "bg-gray-200 text-gray-900" : " text-gray-600 hover:bg-gray-100 hover:text-gray-900 ",
isCurrent ? "bg-gray-200 text-gray-900" : " text-gray-600 hover:bg-gray-100 hover:text-gray-900 ",
"mb-2 inline-flex items-center justify-center whitespace-nowrap rounded-md py-[10px] px-4 text-sm font-medium leading-4 md:mb-0",
props.disabled && "pointer-events-none !opacity-30",
props.className

View File

@ -18,10 +18,12 @@ const NavTabs: FC<NavTabProps> = ({ tabs, className = "", sticky, ...props }) =>
<nav
className={classNames(
`no-scrollbar flex flex-col space-y-1 overflow-scroll ${className}`,
sticky && "sticky top-0"
sticky && "sticky top-0 -mt-7"
)}
aria-label="Tabs"
{...props}>
{/* padding top for sticky */}
{sticky && <div className="pt-6" />}
{props.children}
{tabs.map((tab, idx) => (
<VerticalTabItem {...tab} key={idx} />