minor changes to booking page and navtabs (#832)

components/BookingsShell.tsx

@@ -1,6 +1,8 @@
+import React from "react";
+
 import NavTabs from "./NavTabs";
 
-export default function BookingsShell(props) {
+export default function BookingsShell({ children }: { children: React.ReactNode }) {
   const tabs = [
     {
       name: "Upcoming",
@@ -17,12 +19,9 @@ export default function BookingsShell(props) {
   ];
 
   return (
-    <div>
+    <>
-      <div className="sm:mx-auto">
+      <NavTabs tabs={tabs} linkProps={{ shallow: true }} />
-        <NavTabs tabs={tabs} linkProps={{ shallow: true }} />
+      <main>{children}</main>
-        <hr />
+    </>
-      </div>
-      <main className="max-w-4xl">{props.children}</main>
-    </div>
   );
 }

components/EmptyScreen.tsx

@@ -13,7 +13,7 @@ export default function EmptyScreen({
 }) {
   return (
     <>
-      <div className="min-h-80 border border-dashed rounded-sm flex justify-center items-center flex-col">
+      <div className="min-h-80 border border-dashed rounded-sm flex justify-center items-center flex-col my-6">
         <div className="bg-white w-[72px] h-[72px] flex justify-center items-center rounded-full">
           <Icon className="inline-block w-10 h-10 bg-white" />
         </div>

components/NavTabs.tsx

@@ -16,34 +16,37 @@ interface Props {
 const NavTabs: FC<Props> = ({ tabs, linkProps }) => {
   const router = useRouter();
   return (
-    <nav className="-mb-px flex space-x-2 sm:space-x-8" aria-label="Tabs">
+    <>
-      {tabs.map((tab) => {
+      <nav className="-mb-px flex space-x-2 sm:space-x-8" aria-label="Tabs">
-        const isCurrent = router.asPath === tab.href;
+        {tabs.map((tab) => {
-        return (
+          const isCurrent = router.asPath === tab.href;
-          <Link {...linkProps} key={tab.name} href={tab.href}>
+          return (
-            <a
+            <Link {...linkProps} key={tab.name} href={tab.href}>
-              className={classNames(
+              <a
-                isCurrent
+                className={classNames(
-                  ? "border-neutral-900 text-neutral-900"
+                  isCurrent
-                  : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",
+                    ? "border-neutral-900 text-neutral-900"
-                "group inline-flex items-center py-4 px-1 border-b-2 font-medium text-sm"
+                    : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",
-              )}
+                  "group inline-flex items-center py-4 px-1 border-b-2 font-medium text-sm"
-              aria-current={isCurrent ? "page" : undefined}>
+                )}
-              {tab.icon && (
+                aria-current={isCurrent ? "page" : undefined}>
-                <tab.icon
+                {tab.icon && (
-                  className={classNames(
+                  <tab.icon
-                    isCurrent ? "text-neutral-900" : "text-gray-400 group-hover:text-gray-500",
+                    className={classNames(
-                    "-ml-0.5 mr-2 h-5 w-5 hidden sm:inline-block"
+                      isCurrent ? "text-neutral-900" : "text-gray-400 group-hover:text-gray-500",
-                  )}
+                      "-ml-0.5 mr-2 h-5 w-5 hidden sm:inline-block"
-                  aria-hidden="true"
+                    )}
-                />
+                    aria-hidden="true"
-              )}
+                  />
-              <span>{tab.name}</span>
+                )}
-            </a>
+                <span>{tab.name}</span>
-          </Link>
+              </a>
-        );
+            </Link>
-      })}
+          );
-    </nav>
+        })}
+      </nav>
+      <hr />
+    </>
   );
 };
 

components/SettingsShell.tsx

@@ -1,8 +1,9 @@
 import { CodeIcon, CreditCardIcon, KeyIcon, UserGroupIcon, UserIcon } from "@heroicons/react/solid";
+import React from "react";
 
 import NavTabs from "./NavTabs";
 
-export default function SettingsShell(props) {
+export default function SettingsShell({ children }: { children: React.ReactNode }) {
   const tabs = [
     {
       name: "Profile",
@@ -28,12 +29,11 @@ export default function SettingsShell(props) {
   ];
 
   return (
-    <div>
+    <>
       <div className="sm:mx-auto">
         <NavTabs tabs={tabs} />
-        <hr />
       </div>
-      <main className="max-w-4xl">{props.children}</main>
+      <main className="max-w-4xl">{children}</main>
-    </div>
+    </>
   );
 }

components/Shell.tsx

@@ -176,7 +176,7 @@ export default function Shell(props: {
         </div>
 
         <div className="flex flex-col w-0 flex-1 overflow-hidden">
-          <main className="flex-1 relative z-0 overflow-y-auto focus:outline-none">
+          <main className="flex-1 relative z-0 overflow-y-auto focus:outline-none max-w-[1700px]">
             {/* show top navigation for md and smaller (tablet and phones) */}
             <nav className="md:hidden bg-white shadow p-4 flex justify-between items-center">
               <Link href="/event-types">
@@ -199,7 +199,7 @@ export default function Shell(props: {
               </div>
             </nav>
             <div className="py-8">
-              <div className="block sm:flex justify-between px-4 sm:px-6 md:px-8">
+              <div className="block sm:flex justify-between px-4 sm:px-6 md:px-8 min-h-[80px]">
                 <div className="mb-8">
                   <h1 className="font-cal text-xl font-bold text-gray-900">{props.heading}</h1>
                   <p className="text-sm text-neutral-500 mr-4">{props.subtitle}</p>

components/booking/BookingListItem.tsx

@@ -73,17 +73,15 @@ function BookingListItem(booking: BookingItem) {
     <tr>
       <td className="hidden sm:table-cell px-6 py-4 whitespace-nowrap">
         <div className="text-sm text-gray-900">{startTime}</div>
+        <div className="text-sm text-gray-500">
+          {dayjs(booking.startTime).format("HH:mm")} - {dayjs(booking.endTime).format("HH:mm")}
+        </div>
         {!booking.confirmed && !booking.rejected && (
           <span className="mb-2 inline-flex items-center px-1.5 py-0.5 rounded-sm text-xs font-medium bg-yellow-100 text-yellow-800">
             Unconfirmed
           </span>
         )}
       </td>
-      <td className="hidden sm:table-cell px-6 py-4 whitespace-nowrap">
-        <div className="text-sm text-gray-500">
-          {dayjs(booking.startTime).format("HH:mm")} - {dayjs(booking.endTime).format("HH:mm")}
-        </div>
-      </td>
       <td className={"px-6 py-4" + (booking.rejected ? " line-through" : "")}>
         <div className="sm:hidden">
           {!booking.confirmed && !booking.rejected && (