From 1447251c83c76bc995ec8c47013d343b1f22e912 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ciar=C3=A1n=20Hanrahan?= <justciaranhanrahan@gmail.com>
Date: Tue, 19 Oct 2021 13:38:05 +0100
Subject: [PATCH] changes to bookings and sidebar dropdown (#991)

---
 components/EmptyScreen.tsx             |  6 +++---
 components/NavTabs.tsx                 |  2 +-
 components/Shell.tsx                   | 21 +++++++++------------
 components/booking/BookingListItem.tsx | 20 ++++++++++----------
 styles/globals.css                     |  4 ----
 5 files changed, 23 insertions(+), 30 deletions(-)

diff --git a/components/EmptyScreen.tsx b/components/EmptyScreen.tsx
index 32456ff2fa..feadb03632 100644
--- a/components/EmptyScreen.tsx
+++ b/components/EmptyScreen.tsx
@@ -17,9 +17,9 @@ export default function EmptyScreen({
         <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>
-        <div className="max-w-[500px] text-center">
-          <h2 className="font-cal text-xl leading-7 font-bold mt-6 mb-3">{headline}</h2>
-          <p className="leading-6">{description}</p>
+        <div className="max-w-[420px] text-center">
+          <h2 className="text-lg font-medium mt-6 mb-1">{headline}</h2>
+          <p className="text-sm leading-6 text-gray-600">{description}</p>
         </div>
       </div>
     </>
diff --git a/components/NavTabs.tsx b/components/NavTabs.tsx
index 5f320a472d..d8e66a18a6 100644
--- a/components/NavTabs.tsx
+++ b/components/NavTabs.tsx
@@ -17,7 +17,7 @@ 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">
+      <nav className="-mb-px flex space-x-2 sm:space-x-5" aria-label="Tabs">
         {tabs.map((tab) => {
           const isCurrent = router.asPath === tab.href;
           return (
diff --git a/components/Shell.tsx b/components/Shell.tsx
index f6a93aa6fc..c0f48da7b5 100644
--- a/components/Shell.tsx
+++ b/components/Shell.tsx
@@ -214,7 +214,7 @@ export default function Shell(props: {
                   ))}
                 </nav>
               </div>
-              <div className="p-4 pt-2 pr-2">
+              <div className="p-2 pt-2 pr-2 hover:bg-gray-100 rounded-sm m-2">
                 <UserDropdown />
               </div>
             </div>
@@ -224,7 +224,7 @@ export default function Shell(props: {
         <div className="flex flex-col flex-1 w-0 overflow-hidden">
           <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="flex items-center justify-between p-4 bg-white shadow md:hidden">
+            <nav className="flex items-center justify-between p-4 bg-white border-b border-gray-200 md:hidden">
               <Link href="/event-types">
                 <a>
                   <Logo />
@@ -311,7 +311,7 @@ function UserDropdown({ small }: { small?: boolean }) {
             <>
               <span className="flex-grow text-sm">
                 <span className="block font-medium text-gray-900 truncate">{user.name}</span>
-                <span className="block font-normal truncate text-neutral-500">/{user.username}</span>
+                <span className="block font-normal truncate text-neutral-500">cal.com/{user.username}</span>
               </span>
               <SelectorIcon
                 className="flex-shrink-0 w-5 h-5 text-gray-400 group-hover:text-gray-500"
@@ -327,8 +327,8 @@ function UserDropdown({ small }: { small?: boolean }) {
             target="_blank"
             rel="noopener noreferrer"
             href={`${process.env.NEXT_PUBLIC_APP_URL}/${user?.username || ""}`}
-            className="flex px-4 py-2 text-sm text-neutral-500">
-            {t("view_public_page")} <ExternalLinkIcon className="w-3 h-3 mt-1 ml-1 text-neutral-400" />
+            className="flex px-4 py-2 text-sm text-gray-700 items-center">
+            <ExternalLinkIcon className="w-5 h-5 mr-3 text-gray-500" /> {t("view_public_page")}
           </a>
         </DropdownMenuItem>
         <DropdownMenuSeparator className="h-px bg-gray-200" />
@@ -337,11 +337,11 @@ function UserDropdown({ small }: { small?: boolean }) {
             href="https://cal.com/slack"
             target="_blank"
             rel="noreferrer"
-            className="flex px-4 py-2 text-sm font-medium text-neutral-700 hover:bg-gray-100 hover:text-gray-900">
+            className="flex px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900">
             <svg
               viewBox="0 0 2447.6 2452.5"
               className={classNames(
-                "text-neutral-400 group-hover:text-neutral-500",
+                "text-gray-500 group-hover:text-gray-700",
                 "mt-0.5 mr-3 flex-shrink-0 h-4 w-4"
               )}
               xmlns="http://www.w3.org/2000/svg">
@@ -368,12 +368,9 @@ function UserDropdown({ small }: { small?: boolean }) {
         <DropdownMenuItem>
           <a
             onClick={() => signOut({ callbackUrl: "/auth/logout" })}
-            className="flex px-4 py-2 text-sm font-medium cursor-pointer hover:bg-gray-100 hover:text-gray-900">
+            className="flex px-4 py-2 text-sm cursor-pointer hover:bg-gray-100 hover:text-gray-900">
             <LogoutIcon
-              className={classNames(
-                "text-neutral-400 group-hover:text-neutral-500",
-                "mr-2 flex-shrink-0 h-5 w-5"
-              )}
+              className={classNames("text-gray-500 group-hover:text-gray-700", "mr-2 flex-shrink-0 h-5 w-5")}
               aria-hidden="true"
             />
             {t("sign_out")}
diff --git a/components/booking/BookingListItem.tsx b/components/booking/BookingListItem.tsx
index 0dd428d30e..2a7f1679bb 100644
--- a/components/booking/BookingListItem.tsx
+++ b/components/booking/BookingListItem.tsx
@@ -73,16 +73,11 @@ function BookingListItem(booking: BookingItem) {
 
   return (
     <tr>
-      <td className="hidden sm:table-cell px-6 py-4 whitespace-nowrap">
-        <div className="text-sm text-gray-900">{startTime}</div>
+      <td className="hidden sm:table-cell px-6 py-4 whitespace-nowrap align-top">
+        <div className="text-sm text-gray-900 leading-6">{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">
-            {t("unconfirmed")}
-          </span>
-        )}
       </td>
       <td className={"px-6 py-4" + (booking.rejected ? " line-through" : "")}>
         <div className="sm:hidden">
@@ -98,17 +93,22 @@ function BookingListItem(booking: BookingItem) {
             </small>
           </div>
         </div>
-        <div className="text-sm text-neutral-900 font-medium  truncate max-w-60 md:max-w-96">
+        <div className="text-sm text-neutral-900 font-medium leading-6 truncate max-w-60 md:max-w-96">
           {booking.eventType?.team && <strong>{booking.eventType.team.name}: </strong>}
           {booking.title}
+          {!booking.confirmed && !booking.rejected && (
+            <span className="ml-2 inline-flex items-center px-1.5 py-0.5 rounded-sm text-xs font-medium bg-yellow-100 text-yellow-800">
+              {t("unconfirmed")}
+            </span>
+          )}
         </div>
         {booking.description && (
-          <div className="text-sm text-neutral-600 truncate max-w-60 md:max-w-96" title={booking.description}>
+          <div className="text-sm text-gray-500 truncate max-w-60 md:max-w-96" title={booking.description}>
             &quot;{booking.description}&quot;
           </div>
         )}
         {booking.attendees.length !== 0 && (
-          <div className="text-sm text-blue-500">
+          <div className="text-sm text-gray-900 hover:text-blue-500">
             <a href={"mailto:" + booking.attendees[0].email}>{booking.attendees[0].email}</a>
           </div>
         )}
diff --git a/styles/globals.css b/styles/globals.css
index 0708149dcc..810a66e64c 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -359,10 +359,6 @@ nav#nav--settings > a.active svg {
   @apply text-neutral-500;
 }
 
-table tbody tr:nth-child(odd) {
-  @apply bg-gray-50;
-}
-
 body {
   background-color: #f3f4f6;
 }