From f7119849db0bc95b4a15374eca215cd149394fa1 Mon Sep 17 00:00:00 2001
From: Peer Richelsen <peeroke@gmail.com>
Date: Thu, 8 Sep 2022 16:34:37 +0200
Subject: [PATCH] addded padding to sticky nav, temp removed TODAY from
 /booking (#4278)

---
 apps/web/pages/v2/availability/[schedule].tsx | 21 +++++++------------
 apps/web/pages/v2/bookings/[status].tsx       |  5 ++++-
 .../navigation/tabs/HorizontalTabItem.tsx     |  2 +-
 .../v2/core/navigation/tabs/VerticalTabs.tsx  |  4 +++-
 4 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/apps/web/pages/v2/availability/[schedule].tsx b/apps/web/pages/v2/availability/[schedule].tsx
index 0c887071a4..c8a7dcdf53 100644
--- a/apps/web/pages/v2/availability/[schedule].tsx
+++ b/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">
-          <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>
diff --git a/apps/web/pages/v2/bookings/[status].tsx b/apps/web/pages/v2/bookings/[status].tsx
index 534bb49440..6f44793cd8 100644
--- a/apps/web/pages/v2/bookings/[status].tsx
+++ b/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">
diff --git a/packages/ui/v2/core/navigation/tabs/HorizontalTabItem.tsx b/packages/ui/v2/core/navigation/tabs/HorizontalTabItem.tsx
index 1841e01ccf..9fd7297bb3 100644
--- a/packages/ui/v2/core/navigation/tabs/HorizontalTabItem.tsx
+++ b/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
diff --git a/packages/ui/v2/core/navigation/tabs/VerticalTabs.tsx b/packages/ui/v2/core/navigation/tabs/VerticalTabs.tsx
index b7460070e3..e5b3b4ea49 100644
--- a/packages/ui/v2/core/navigation/tabs/VerticalTabs.tsx
+++ b/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} />