From 62ab3056a54b58c0fa25d9d9b53540a95961934a Mon Sep 17 00:00:00 2001
From: Peer Richelsen <peeroke@gmail.com>
Date: Tue, 6 Sep 2022 19:56:13 +0200
Subject: [PATCH] fixed dropdown component styling, added new shadow-dropdown
 (#4211)

---
 packages/config/tailwind-preset.js | 3 +++
 packages/ui/v2/core/Dropdown.tsx   | 6 +++---
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/config/tailwind-preset.js b/packages/config/tailwind-preset.js
index c5747617b7..9309c8263a 100644
--- a/packages/config/tailwind-preset.js
+++ b/packages/config/tailwind-preset.js
@@ -151,6 +151,9 @@ module.exports = {
           900: "#f3f4f6",
         },
       },
+      boxShadow: {
+        dropdown: "0px 2px 6px -1px rgba(0, 0, 0, 0.08)",
+      },
       fontFamily: {
         cal: ['"Cal Sans"', "sans-serif"],
         mono: ["Roboto Mono", "monospace"],
diff --git a/packages/ui/v2/core/Dropdown.tsx b/packages/ui/v2/core/Dropdown.tsx
index e7cb590a57..dada7c075f 100644
--- a/packages/ui/v2/core/Dropdown.tsx
+++ b/packages/ui/v2/core/Dropdown.tsx
@@ -34,7 +34,7 @@ export const DropdownMenuContent = forwardRef<HTMLDivElement, DropdownMenuConten
         portalled={props.portalled}
         align={align}
         {...props}
-        className="w-50 relative z-10 mt-1 -ml-0 origin-top-right rounded-md bg-white text-sm ring-1 ring-black ring-opacity-5 focus:outline-none"
+        className="shadow-dropdown w-50 relative z-10 mt-1 -ml-0 origin-top-right rounded-md border border-gray-200 bg-white text-sm"
         ref={forwardedRef}>
         {children}
       </DropdownMenuPrimitive.Content>
@@ -124,12 +124,12 @@ export const DropdownItem = (props: DropdownItemProps) => {
     <ButtonOrLink
       {...props}
       className={classNames(
-        "inline-flex items-center px-3 py-[10px] text-gray-600",
+        "inline-flex items-center px-3 py-2 text-gray-700 hover:text-gray-900",
         props.color === "destructive" ? "hover:bg-red-100 hover:text-red-700" : " hover:bg-gray-100"
       )}>
       <>
         {StartIcon && <StartIcon />}
-        <div className="mx-2 text-black">{props.children}</div>
+        <div className="mx-2">{props.children}</div>
         {EndIcon && <EndIcon />}
       </>
     </ButtonOrLink>