From 9b26c7aee676f772a34d30385b2a3e848591e090 Mon Sep 17 00:00:00 2001
From: Peer Richelsen <peeroke@gmail.com>
Date: Fri, 3 Feb 2023 17:49:33 +0100
Subject: [PATCH] lots of small changes by me and ciaran (#6871)

---
 apps/web/components/AppListCard.tsx           |  1 -
 .../components/eventtype/AvailabilityTab.tsx  |  3 +--
 .../bookings/layout/BookingLayout.tsx         |  2 +-
 .../settings/layouts/SettingsLayout.tsx       |  6 +++---
 packages/features/shell/Shell.tsx             | 19 +++++++------------
 packages/ui/components/button/Button.tsx      |  2 +-
 packages/ui/components/card/Card.tsx          |  4 ++--
 .../ui/components/form/dropdown/Dropdown.tsx  |  2 +-
 .../navigation/tabs/HorizontalTabs.tsx        |  2 +-
 .../navigation/tabs/VerticalTabItem.tsx       |  4 ++--
 10 files changed, 19 insertions(+), 26 deletions(-)

diff --git a/apps/web/components/AppListCard.tsx b/apps/web/components/AppListCard.tsx
index 84ef80f856..621a7497c3 100644
--- a/apps/web/components/AppListCard.tsx
+++ b/apps/web/components/AppListCard.tsx
@@ -65,7 +65,6 @@ export default function AppListCard(props: AppListCardProps) {
     <div className={`p-4 ${highlight ? "bg-yellow-100" : ""}`}>
       <div className="flex  gap-x-3">
         {logo ? <img className="h-10 w-10" src={logo} alt={`${title} logo`} /> : null}
-
         <div className="flex grow flex-col gap-y-1 truncate">
           <div className="flex items-center gap-x-2">
             <h3 className="truncate text-sm font-semibold text-gray-900">{title}</h3>
diff --git a/apps/web/components/eventtype/AvailabilityTab.tsx b/apps/web/components/eventtype/AvailabilityTab.tsx
index 86adb1c209..6a81e77cd8 100644
--- a/apps/web/components/eventtype/AvailabilityTab.tsx
+++ b/apps/web/components/eventtype/AvailabilityTab.tsx
@@ -128,7 +128,7 @@ export const AvailabilityTab = ({ isTeamEvent }: { isTeamEvent: boolean }) => {
             )}
           />
         </div>
-        <div className="space-y-4 rounded border p-4 py-6 pt-2 md:p-8">
+        <div className="space-y-4 rounded border px-6 pb-4">
           <ol className="table border-collapse text-sm">
             {weekdayNames(i18n.language, 1, "long").map((day, index) => {
               const isAvailable = !!filterDays(index).length;
@@ -173,7 +173,6 @@ export const AvailabilityTab = ({ isTeamEvent }: { isTeamEvent: boolean }) => {
               color="minimal"
               EndIcon={FiExternalLink}
               target="_blank"
-              className="justify-center border sm:border-0"
               rel="noopener noreferrer">
               {t("edit_availability")}
             </Button>
diff --git a/packages/features/bookings/layout/BookingLayout.tsx b/packages/features/bookings/layout/BookingLayout.tsx
index b32e05ba24..63d0790ada 100644
--- a/packages/features/bookings/layout/BookingLayout.tsx
+++ b/packages/features/bookings/layout/BookingLayout.tsx
@@ -36,7 +36,7 @@ export default function BookingLayout({
   return (
     <Shell {...rest}>
       <div className="flex max-w-6xl flex-col">
-        <div className="flex flex-col gap-2 lg:flex-row">
+        <div className="flex flex-col lg:flex-row">
           <HorizontalTabs tabs={tabs} />
           <div className="overflow-x-auto lg:ml-auto">
             <FiltersContainer />
diff --git a/packages/features/settings/layouts/SettingsLayout.tsx b/packages/features/settings/layouts/SettingsLayout.tsx
index fe19318cd7..c4b3baa311 100644
--- a/packages/features/settings/layouts/SettingsLayout.tsx
+++ b/packages/features/settings/layouts/SettingsLayout.tsx
@@ -190,7 +190,7 @@ const SettingsSidebarContainer = ({
           return tab.name !== "teams" ? (
             <React.Fragment key={tab.href}>
               <div className={`${!tab.children?.length ? "!mb-3" : ""}`}>
-                <div className="group flex h-9 w-64 flex-row items-center rounded-md px-3 text-sm font-medium leading-none text-gray-600 [&[aria-current='page']]:bg-gray-200 [&[aria-current='page']]:text-gray-900">
+                <div className="group flex h-9 w-64 flex-row items-center rounded-md px-2 text-sm font-medium leading-none text-gray-600 [&[aria-current='page']]:bg-gray-200 [&[aria-current='page']]:text-gray-900">
                   {tab && tab.icon && (
                     <tab.icon className="h-[16px] w-[16px] stroke-[2px] ltr:mr-3 rtl:ml-3 md:mt-0" />
                   )}
@@ -222,7 +222,7 @@ const SettingsSidebarContainer = ({
             <React.Fragment key={tab.href}>
               <div className={`${!tab.children?.length ? "mb-3" : ""}`}>
                 <Link href={tab.href}>
-                  <div className="group flex h-9 w-64 flex-row items-center rounded-md px-3 py-[10px] text-sm font-medium leading-none text-gray-600 hover:bg-gray-100  group-hover:text-gray-700 [&[aria-current='page']]:bg-gray-200 [&[aria-current='page']]:text-gray-900">
+                  <div className="group flex h-9 w-64 flex-row items-center rounded-md px-2 py-[10px] text-sm font-medium leading-none text-gray-600 hover:bg-gray-100  group-hover:text-gray-700 [&[aria-current='page']]:bg-gray-200 [&[aria-current='page']]:text-gray-900">
                     {tab && tab.icon && (
                       <tab.icon className="h-[16px] w-[16px] stroke-[2px] ltr:mr-3 rtl:ml-3 md:mt-0" />
                     )}
@@ -327,7 +327,7 @@ const SettingsSidebarContainer = ({
                 <VerticalTabItem
                   name={t("add_a_team")}
                   href={`${WEBAPP_URL}/settings/teams/new`}
-                  textClassNames="px-3 text-gray-900 font-medium text-sm"
+                  textClassNames="px-3 items-center mt-2 text-gray-900 font-medium text-sm"
                   icon={FiPlus}
                   disableChevron
                 />
diff --git a/packages/features/shell/Shell.tsx b/packages/features/shell/Shell.tsx
index cf25e7d8bd..3d9dc31e8d 100644
--- a/packages/features/shell/Shell.tsx
+++ b/packages/features/shell/Shell.tsx
@@ -268,7 +268,7 @@ function UserDropdown({ small }: { small?: boolean }) {
     <Dropdown open={menuOpen}>
       <div className="ltr:sm:-ml-5 rtl:sm:-mr-5">
         <DropdownMenuTrigger asChild onClick={() => setMenuOpen((menuOpen) => !menuOpen)}>
-          <button className="group mx-0 flex w-full cursor-pointer appearance-none items-center rounded-full p-2 text-left outline-none hover:bg-gray-200 focus:outline-none focus:ring-0 sm:mx-2.5 sm:pl-3 md:rounded-none lg:rounded lg:pl-2">
+          <button className="radix-state-open:bg-gray-200 group mx-0 flex w-full cursor-pointer appearance-none items-center rounded-full p-2 text-left outline-none hover:bg-gray-200 focus:outline-none focus:ring-0 sm:mx-2.5 sm:pl-3 md:rounded-none lg:rounded lg:pl-2">
             <span
               className={classNames(
                 small ? "h-6 w-6 md:ml-3" : "h-8 w-8 ltr:mr-2 rtl:ml-2",
@@ -292,10 +292,10 @@ function UserDropdown({ small }: { small?: boolean }) {
             {!small && (
               <span className="flex flex-grow items-center truncate">
                 <span className="flex-grow truncate text-sm">
-                  <span className="block truncate font-medium text-gray-900">
+                  <span className="mb-1 block truncate font-medium leading-none text-gray-900">
                     {user.name || "Nameless User"}
                   </span>
-                  <span className="block truncate font-normal text-gray-900">
+                  <span className="block truncate font-normal leading-none text-gray-600">
                     {user.username
                       ? process.env.NEXT_PUBLIC_WEBSITE_URL === "https://cal.com"
                         ? `cal.com/${user.username}`
@@ -396,13 +396,8 @@ function UserDropdown({ small }: { small?: boolean }) {
                   {t("help")}
                 </DropdownItem>
               </DropdownMenuItem>
-              <DropdownMenuItem>
-                <DropdownItem
-                  StartIcon={FiDownload}
-                  target="_blank"
-                  rel="noreferrer"
-                  className="desktop-hidden hidden lg:flex"
-                  href={DESKTOP_APP_LINK}>
+              <DropdownMenuItem className="desktop-hidden hidden lg:flex">
+                <DropdownItem StartIcon={FiDownload} target="_blank" rel="noreferrer" href={DESKTOP_APP_LINK}>
                   {t("download_desktop_app")}
                 </DropdownItem>
               </DropdownMenuItem>
@@ -783,7 +778,7 @@ export function ShellMain(props: LayoutProps) {
 
   return (
     <>
-      <div className={classNames("mb-6 flex sm:mt-0", props.smallHeading ? "lg:mb-7" : "lg:mb-8")}>
+      <div className={classNames("flex sm:mt-0 md:mb-6", props.smallHeading ? "lg:mb-7" : "lg:mb-8")}>
         {!!props.backPath && (
           <Button
             variant="icon"
@@ -804,7 +799,7 @@ export function ShellMain(props: LayoutProps) {
               {props.heading && (
                 <h1
                   className={classNames(
-                    "font-cal max-w-28 sm:max-w-72 md:max-w-80 mt-1 hidden truncate text-xl font-semibold tracking-wide text-black md:block xl:max-w-full",
+                    "font-cal max-w-28 sm:max-w-72 md:max-w-80 hidden truncate text-xl font-semibold tracking-wide text-black md:block xl:max-w-full",
                     props.smallHeading ? "text-base" : "text-xl"
                   )}>
                   {!isLocaleReady ? <SkeletonText invisible /> : props.heading}
diff --git a/packages/ui/components/button/Button.tsx b/packages/ui/components/button/Button.tsx
index 7f7a5470c7..91c17f2511 100644
--- a/packages/ui/components/button/Button.tsx
+++ b/packages/ui/components/button/Button.tsx
@@ -246,7 +246,7 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
               className={classNames(
                 "inline-flex",
                 variant === "icon" && "h-4 w-4",
-                variant === "button" && "h-4 w-4 stroke-[1.5px] ltr:mr-2 rtl:ml-2"
+                variant === "button" && "h-4 w-4 stroke-[1.5px] ltr:ml-2 rtl:mr-2"
               )}
             />
           )}
diff --git a/packages/ui/components/card/Card.tsx b/packages/ui/components/card/Card.tsx
index e2145c28a1..d2acc03e15 100644
--- a/packages/ui/components/card/Card.tsx
+++ b/packages/ui/components/card/Card.tsx
@@ -35,7 +35,7 @@ const cardTypeByVariant = {
   basic: {
     image: "w-10 h-auto",
     card: "p-5",
-    title: "text-base",
+    title: "text-base mt-4",
     description: "text-sm leading-[18px] text-gray-500 font-normal",
   },
   ProfileCard: {
@@ -88,7 +88,7 @@ export function Card({
           title={title}
           className={classNames(
             cardTypeByVariant[variant].title,
-            "line-clamp-1 mt-4 font-bold leading-5 text-gray-900"
+            "line-clamp-1 font-bold leading-5 text-gray-900"
           )}>
           {title}
         </h5>
diff --git a/packages/ui/components/form/dropdown/Dropdown.tsx b/packages/ui/components/form/dropdown/Dropdown.tsx
index c3eca28ca6..23c789c7d6 100644
--- a/packages/ui/components/form/dropdown/Dropdown.tsx
+++ b/packages/ui/components/form/dropdown/Dropdown.tsx
@@ -38,7 +38,7 @@ export const DropdownMenuContent = forwardRef<HTMLDivElement, DropdownMenuConten
         {...props}
         sideOffset={sideOffset}
         className={classNames(
-          "shadow-dropdown w-50 relative z-10 origin-top-right rounded-md border border-gray-200 bg-white text-sm",
+          "shadow-dropdown w-50 relative z-10 ml-1.5 origin-top-right rounded-md border border-gray-200 bg-white text-sm",
           "[&>*:first-child]:mt-1 [&>*:last-child]:mb-1"
         )}
         ref={forwardedRef}>
diff --git a/packages/ui/components/navigation/tabs/HorizontalTabs.tsx b/packages/ui/components/navigation/tabs/HorizontalTabs.tsx
index 27ab54fc8f..16babfe0a8 100644
--- a/packages/ui/components/navigation/tabs/HorizontalTabs.tsx
+++ b/packages/ui/components/navigation/tabs/HorizontalTabs.tsx
@@ -8,7 +8,7 @@ export interface NavTabProps {
 
 const HorizontalTabs = function ({ tabs, linkProps, actions, ...props }: NavTabProps) {
   return (
-    <div className="mb-2 h-9 max-w-[calc(100%+40px)] lg:mb-5">
+    <div className="mb-4 h-9 max-w-[calc(100%+40px)] lg:mb-5">
       <nav
         className="no-scrollbar flex max-h-9 space-x-1 overflow-scroll rounded-md"
         aria-label="Tabs"
diff --git a/packages/ui/components/navigation/tabs/VerticalTabItem.tsx b/packages/ui/components/navigation/tabs/VerticalTabItem.tsx
index f316d02a16..5ef08a088c 100644
--- a/packages/ui/components/navigation/tabs/VerticalTabItem.tsx
+++ b/packages/ui/components/navigation/tabs/VerticalTabItem.tsx
@@ -50,7 +50,7 @@ const VerticalTabItem = function ({
             target={props.isExternalLink ? "_blank" : "_self"}
             className={classNames(
               props.textClassNames || "text-sm font-medium leading-none text-gray-600",
-              "min-h-9 group flex w-64 flex-row items-center rounded-md px-2 py-[10px] hover:bg-gray-100 group-hover:text-gray-700 [&[aria-current='page']]:bg-gray-200 [&[aria-current='page']]:text-gray-900",
+              "min-h-8 group flex w-64 flex-row items-center rounded-md px-2 py-[10px] hover:bg-gray-100 group-hover:text-gray-700 [&[aria-current='page']]:bg-gray-200 [&[aria-current='page']]:text-gray-900",
               props.disabled && "pointer-events-none !opacity-30",
               (isChild || !props.icon) && "ml-7 w-auto ltr:mr-5 rtl:ml-5",
               !info ? "h-6" : "h-14",
@@ -63,7 +63,7 @@ const VerticalTabItem = function ({
             )}
             <div className="h-fit">
               <span className="flex items-center space-x-2 rtl:space-x-reverse">
-                <Skeleton title={t(name)} as="p" className="max-w-36 min-h-4 truncate">
+                <Skeleton title={t(name)} as="p" className="max-w-36 min-h-4 mt-px truncate">
                   {t(name)}
                 </Skeleton>
                 {props.isExternalLink ? <FiExternalLink /> : null}