From 6fb51db6ac076e7a32bbb5e90d40f85de6ce12f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ciar=C3=A1n=20Hanrahan?= <justciaranhanrahan@gmail.com>
Date: Sun, 2 Jul 2023 11:12:50 +0100
Subject: [PATCH] chore: small changes to dropdown & main sidebar (#9719)

---
 .../features/ee/teams/components/TeamList.tsx    |  2 +-
 .../features/filters/components/TeamsFilter.tsx  |  4 ++--
 packages/features/shell/Shell.tsx                | 16 ++++++++--------
 packages/ui/components/divider/Divider.tsx       |  2 +-
 .../ui/components/empty-screen/EmptyScreen.tsx   |  2 +-
 .../ui/components/popover/AnimatedPopover.tsx    |  8 ++++----
 6 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/packages/features/ee/teams/components/TeamList.tsx b/packages/features/ee/teams/components/TeamList.tsx
index f5389441b0..2ffb7e15bf 100644
--- a/packages/features/ee/teams/components/TeamList.tsx
+++ b/packages/features/ee/teams/components/TeamList.tsx
@@ -43,7 +43,7 @@ export default function TeamList(props: Props) {
   }
 
   return (
-    <ul className="bg-default divide-subtle border-subtle mb-2 divide-y rounded border">
+    <ul className="bg-default divide-subtle border-subtle mb-2 divide-y rounded-md border overflow-hidden">
       {props.teams.map((team) => (
         <TeamListItem
           key={team?.id as number}
diff --git a/packages/features/filters/components/TeamsFilter.tsx b/packages/features/filters/components/TeamsFilter.tsx
index 81b473021e..9d61dba0d1 100644
--- a/packages/features/filters/components/TeamsFilter.tsx
+++ b/packages/features/filters/components/TeamsFilter.tsx
@@ -127,13 +127,13 @@ type Props = InputHTMLAttributes<HTMLInputElement> & {
 
 export const FilterCheckboxField = forwardRef<HTMLInputElement, Props>(({ label, icon, ...rest }, ref) => {
   return (
-    <div className="hover:bg-muted flex items-center py-2 pl-3 pr-2.5 hover:cursor-pointer">
+    <div className="hover:bg-subtle flex items-center py-2 pl-3 pr-2.5 hover:cursor-pointer">
       <label className="flex w-full items-center justify-between hover:cursor-pointer">
         <div className="flex items-center">
           <div className="text-default flex h-4 w-4 items-center justify-center ltr:mr-2 rtl:ml-2">
             {icon}
           </div>
-          <label htmlFor={rest.id} className="text-default cursor-pointer truncate text-sm">
+          <label htmlFor={rest.id} className="text-default cursor-pointer truncate text-sm font-medium">
             {label}
           </label>
         </div>
diff --git a/packages/features/shell/Shell.tsx b/packages/features/shell/Shell.tsx
index f87a829068..b555c861f3 100644
--- a/packages/features/shell/Shell.tsx
+++ b/packages/features/shell/Shell.tsx
@@ -340,24 +340,24 @@ function UserDropdown({ small }: UserDropdownProps) {
         <button
           className={classNames(
             "hover:bg-emphasis group mx-0 flex cursor-pointer appearance-none items-center rounded-full text-left outline-none focus:outline-none focus:ring-0 md:rounded-none lg:rounded",
-            small ? "p-2" : "px-2 py-1"
+            small ? "p-2" : "px-2 py-1.5"
           )}>
           <span
             className={classNames(
-              small ? "h-4 w-4" : "h-6 w-6 ltr:mr-2 rtl:ml-2",
+              small ? "h-4 w-4" : "h-5 w-5 ltr:mr-2 rtl:ml-2",
               "relative flex-shrink-0 rounded-full bg-gray-300"
             )}>
             <Avatar
-              size={small ? "xs" : "sm"}
+              size={small ? "xs" : "xsm"}
               imageSrc={avatar?.avatar || WEBAPP_URL + "/" + user.username + "/avatar.png"}
               alt={user.username || "Nameless User"}
               className="overflow-hidden"
             />
             <span
               className={classNames(
-                "border-muted absolute -bottom-1 -right-1 rounded-full border-2 bg-green-500",
+                "border-muted absolute -bottom-1 -right-1 rounded-full border bg-green-500",
                 user.away ? "bg-yellow-500" : "bg-green-500",
-                small ? "-bottom-0.5 -right-0.5 h-2.5 w-2.5" : "bottom-0 right-0 h-3 w-3"
+                small ? "-bottom-0.5 -right-0.5 h-2.5 w-2.5" : "-bottom-0.5 -right-0 h-2 w-2"
               )}
             />
           </span>
@@ -604,7 +604,7 @@ const { desktopNavigationItems, mobileNavigationBottomItems, mobileNavigationMor
 
 const Navigation = () => {
   return (
-    <nav className="mt-2 flex-1 md:px-2 lg:mt-6 lg:px-0">
+    <nav className="mt-2 flex-1 md:px-2 lg:mt-4 lg:px-0">
       {desktopNavigationItems.map((item) => (
         <NavigationItem key={item.name} item={item} />
       ))}
@@ -654,7 +654,7 @@ const NavigationItem: React.FC<{
           href={item.href}
           aria-label={t(item.name)}
           className={classNames(
-            "[&[aria-current='page']]:bg-emphasis  text-default group flex items-center rounded-md px-3 py-2 text-sm font-medium",
+            "[&[aria-current='page']]:bg-emphasis  text-default group flex items-center rounded-md py-1.5 px-2 text-sm font-medium",
             isChild
               ? `[&[aria-current='page']]:text-emphasis hidden h-8 pl-16 lg:flex lg:pl-11 [&[aria-current='page']]:bg-transparent ${
                   props.index === 0 ? "mt-0" : "mt-px"
@@ -901,7 +901,7 @@ function SideBar({ bannersHeight, user }: SideBarProps) {
                 target={item.target}
                 className={classNames(
                   "text-left",
-                  "[&[aria-current='page']]:bg-emphasis  text-default justify-right group flex items-center rounded-md px-3 py-2 text-sm font-medium",
+                  "[&[aria-current='page']]:bg-emphasis  text-default justify-right group flex items-center rounded-md py-1.5 px-2 text-sm font-medium",
                   "[&[aria-current='page']]:text-emphasis mt-0.5 w-full text-sm",
                   isLocaleReady ? "hover:bg-emphasis hover:text-emphasis" : "",
                   index === 0 && "mt-3"
diff --git a/packages/ui/components/divider/Divider.tsx b/packages/ui/components/divider/Divider.tsx
index 9cff4780d7..791126fc24 100644
--- a/packages/ui/components/divider/Divider.tsx
+++ b/packages/ui/components/divider/Divider.tsx
@@ -1,7 +1,7 @@
 import { classNames } from "@calcom/lib";
 
 export function Divider({ className, ...props }: JSX.IntrinsicElements["hr"]) {
-  className = classNames("border-subtle", className);
+  className = classNames("border-subtle my-1", className);
   return <hr className={className} {...props} />;
 }
 
diff --git a/packages/ui/components/empty-screen/EmptyScreen.tsx b/packages/ui/components/empty-screen/EmptyScreen.tsx
index 9f4e7d5085..fd7c6ccef9 100644
--- a/packages/ui/components/empty-screen/EmptyScreen.tsx
+++ b/packages/ui/components/empty-screen/EmptyScreen.tsx
@@ -34,7 +34,7 @@ export function EmptyScreen({
       <div
         data-testid="empty-screen"
         className={classNames(
-          "min-h-80 flex w-full flex-col items-center justify-center rounded-md p-7 lg:p-20",
+          "select-none flex-col items-center justify-center rounded-lg p-7 lg:p-20",
           border && "border-subtle border",
           dashedBorder && "border-dashed",
           className
diff --git a/packages/ui/components/popover/AnimatedPopover.tsx b/packages/ui/components/popover/AnimatedPopover.tsx
index 0c282a5af0..b5866deebb 100644
--- a/packages/ui/components/popover/AnimatedPopover.tsx
+++ b/packages/ui/components/popover/AnimatedPopover.tsx
@@ -47,12 +47,12 @@ export const AnimatedPopover = ({
         <div
           ref={ref}
           className={classNames(
-            "hover:border-emphasis border-default text-default hover:text-emphasis mb-4 flex h-9 max-h-72 items-center justify-between whitespace-nowrap rounded-md border px-3 py-2 text-sm hover:cursor-pointer focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-1",
+            "hover:border-emphasis border-default text-default hover:text-emphasis radix-state-open:border-emphasis radix-state-open:outline-none radix-state-open:ring-2 radix-state-open:ring-emphasis -mr-0.5 mb-4 flex h-9 max-h-72 items-center justify-between whitespace-nowrap rounded-md border px-3 py-2 text-sm hover:cursor-pointer",
             popoverTriggerClassNames
           )}>
           <div className="max-w-36 flex items-center">
             <Tooltip content={text}>
-              <div className="truncate">
+              <div className="select-none truncate font-medium">
                 {text}
                 {count && count > 0 && (
                   <div className="flex h-4 w-4 items-center justify-center rounded-full">{count}</div>
@@ -60,7 +60,7 @@ export const AnimatedPopover = ({
               </div>
             </Tooltip>
             <ChevronDown
-              className={classNames("ml-2 transition-transform duration-150", open && "rotate-180")}
+              className={classNames("ml-2 w-4 transition-transform duration-150", open && "rotate-180")}
             />
           </div>
         </div>
@@ -68,7 +68,7 @@ export const AnimatedPopover = ({
       <Popover.Content side="bottom" align={align} asChild>
         <div
           className={classNames(
-            "bg-default border-default scroll-bar absolute z-50 mt-2 max-h-64 w-56 overflow-y-auto rounded-md border py-[2px] shadow-sm focus-within:outline-none",
+            "bg-default border-subtle scroll-bar absolute z-50 mt-1 max-h-64 w-56 select-none overflow-y-auto rounded-md border py-[2px] shadow-md focus-within:outline-none",
             align === "end" && "-translate-x-[228px]"
           )}>
           {children}