From 30eea089bafe096165b9aa157c101b19e7177244 Mon Sep 17 00:00:00 2001
From: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Date: Sat, 12 Nov 2022 00:51:56 +0530
Subject: [PATCH] fix: use outline none (#5486)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: use outline none

* fix: dropdown trigger ui bugs

* Update packages/ui/Dropdown.tsx

Co-authored-by: Omar López <zomars@me.com>
---
 packages/ui/Dropdown.tsx      | 2 +-
 packages/ui/v2/core/Shell.tsx | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/ui/Dropdown.tsx b/packages/ui/Dropdown.tsx
index 40c2615c59..574128588f 100644
--- a/packages/ui/Dropdown.tsx
+++ b/packages/ui/Dropdown.tsx
@@ -53,7 +53,7 @@ type DropdownMenuItemProps = ComponentProps<typeof DropdownMenuPrimitive["Checkb
 export const DropdownMenuItem = forwardRef<HTMLDivElement, DropdownMenuItemProps>(
   ({ className = "", ...props }, forwardedRef) => (
     <DropdownMenuPrimitive.Item
-      className={`text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 ${className}`}
+      className={`text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none ${className}`}
       {...props}
       ref={forwardedRef}
     />
diff --git a/packages/ui/v2/core/Shell.tsx b/packages/ui/v2/core/Shell.tsx
index 4d3cbddf00..7ba8bd8755 100644
--- a/packages/ui/v2/core/Shell.tsx
+++ b/packages/ui/v2/core/Shell.tsx
@@ -240,10 +240,10 @@ function UserDropdown({ small }: { small?: boolean }) {
   return (
     <Dropdown open={menuOpen}>
       <DropdownMenuTrigger asChild onClick={() => setMenuOpen((menuOpen) => !menuOpen)}>
-        <button className="group flex w-full cursor-pointer appearance-none items-center rounded-full p-2 text-left outline-none hover:bg-gray-100 sm:pl-3 md:rounded-none lg:pl-2">
+        <button className="group flex w-full cursor-pointer appearance-none items-center  rounded-full p-2 text-left outline-none hover:bg-gray-200 sm:pl-3 md:rounded lg:pl-2">
           <span
             className={classNames(
-              small ? "h-8 w-8" : "h-9 w-9 ltr:mr-2 rtl:ml-3",
+              small ? "h-6 w-6" : "h-8 w-8 ltr:mr-2 rtl:ml-3",
               "relative flex-shrink-0 rounded-full bg-gray-300 "
             )}>
             {
@@ -267,7 +267,7 @@ function UserDropdown({ small }: { small?: boolean }) {
                 <span className="block truncate font-medium text-gray-900">
                   {user.name || "Nameless User"}
                 </span>
-                <span className="block truncate font-normal text-neutral-500">
+                <span className="block truncate font-normal text-gray-900">
                   {user.username
                     ? process.env.NEXT_PUBLIC_WEBSITE_URL === "https://cal.com"
                       ? `cal.com/${user.username}`