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

apps/web/pages/v2/availability/[schedule].tsx

@@ -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">
+        <div className="flex justify-end px-4 pt-4 sm:px-0">
-          <Button color="secondary" href="/availability" tabIndex={-1}>
-            {t("cancel")}
-          </Button>
           <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">
+          <hr className="my-8" />
-            <h3 className="text-base font-medium leading-6 text-gray-900">
+          <div className="rounded-md">
-              {t("something_doesnt_look_right")}
+            <h3 className="text-sm font-medium text-gray-900">{t("something_doesnt_look_right")}</h3>
-            </h3>
+            <div className="mt-3 flex">
-            <div className="mt-2 max-w-xl text-sm text-gray-500">
-              <p>{t("troubleshoot_availability")}</p>
-            </div>
-            <div className="mt-5">
               <Button href="/availability/troubleshoot" color="secondary">
                 {t("launch_troubleshooter")}
               </Button>

apps/web/pages/v2/bookings/[status].tsx

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

packages/ui/v2/core/navigation/tabs/HorizontalTabItem.tsx

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

packages/ui/v2/core/navigation/tabs/VerticalTabs.tsx

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