From e33962686e596cb23196955e22dee9eb72d6ceef Mon Sep 17 00:00:00 2001
From: Peer Richelsen <peeroke@gmail.com>
Date: Thu, 30 Sep 2021 20:59:34 +0100
Subject: [PATCH] minor changes to booking page and navtabs (#832)

---
 components/BookingsShell.tsx           | 15 +++----
 components/EmptyScreen.tsx             |  2 +-
 components/NavTabs.tsx                 | 59 ++++++++++++++------------
 components/SettingsShell.tsx           | 10 ++---
 components/Shell.tsx                   |  4 +-
 components/booking/BookingListItem.tsx |  8 ++--
 6 files changed, 49 insertions(+), 49 deletions(-)

diff --git a/components/BookingsShell.tsx b/components/BookingsShell.tsx
index 2457a25a..dd5e4019 100644
--- a/components/BookingsShell.tsx
+++ b/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 }} />
-        <hr />
-      </div>
-      <main className="max-w-4xl">{props.children}</main>
-    </div>
+    <>
+      <NavTabs tabs={tabs} linkProps={{ shallow: true }} />
+      <main>{children}</main>
+    </>
   );
 }
diff --git a/components/EmptyScreen.tsx b/components/EmptyScreen.tsx
index c249d377..32456ff2 100644
--- a/components/EmptyScreen.tsx
+++ b/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>
diff --git a/components/NavTabs.tsx b/components/NavTabs.tsx
index 81e2c883..5f320a47 100644
--- a/components/NavTabs.tsx
+++ b/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) => {
-        const isCurrent = router.asPath === tab.href;
-        return (
-          <Link {...linkProps} key={tab.name} href={tab.href}>
-            <a
-              className={classNames(
-                isCurrent
-                  ? "border-neutral-900 text-neutral-900"
-                  : "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 && (
-                <tab.icon
-                  className={classNames(
-                    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"
-                />
-              )}
-              <span>{tab.name}</span>
-            </a>
-          </Link>
-        );
-      })}
-    </nav>
+    <>
+      <nav className="-mb-px flex space-x-2 sm:space-x-8" aria-label="Tabs">
+        {tabs.map((tab) => {
+          const isCurrent = router.asPath === tab.href;
+          return (
+            <Link {...linkProps} key={tab.name} href={tab.href}>
+              <a
+                className={classNames(
+                  isCurrent
+                    ? "border-neutral-900 text-neutral-900"
+                    : "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 && (
+                  <tab.icon
+                    className={classNames(
+                      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"
+                  />
+                )}
+                <span>{tab.name}</span>
+              </a>
+            </Link>
+          );
+        })}
+      </nav>
+      <hr />
+    </>
   );
 };
 
diff --git a/components/SettingsShell.tsx b/components/SettingsShell.tsx
index b8e7af3e..64a72b0b 100644
--- a/components/SettingsShell.tsx
+++ b/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>
-    </div>
+      <main className="max-w-4xl">{children}</main>
+    </>
   );
 }
diff --git a/components/Shell.tsx b/components/Shell.tsx
index f13fe436..e5686235 100644
--- a/components/Shell.tsx
+++ b/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>
diff --git a/components/booking/BookingListItem.tsx b/components/booking/BookingListItem.tsx
index 851330a0..52e2cd03 100644
--- a/components/booking/BookingListItem.tsx
+++ b/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 && (