Enhance dropdown and select ui

packages/app-elements/src/styles/global.css

@@ -9,9 +9,9 @@
   --breakpoint-xl: 1280px;
 
   --radius-*: initial;
-  --radius: 0.313rem;
-  --radius-sm: 0.188rem;
-  --radius-md: 0.625rem;
+  --radius: 0.5rem;
+  --radius-sm: 0.375rem;
+  --radius-md: 1rem;
   --radius-full: 9999px;
 
   --color-*: initial;

packages/app-elements/src/ui/atoms/Tag.tsx

@@ -103,8 +103,8 @@ export const Tag: FC<TagProps> = ({ icon, children, className, ...rest }) => {
       className={cn([
         className,
         "flex gap-2 items-center select-none",
-        "text-xs font-bold",
-        "py-[3px] px-2 rounded text-gray bg-gray-200",
+        "text-xs font-semibold",
+        "py-[3px] px-2 rounded-sm text-gray bg-gray-200",
         {
           "cursor-pointer hover:bg-gray-100  outline-primary-light": hasHover,
         },

packages/app-elements/src/ui/composite/Dropdown/DropdownDivider.tsx

@@ -11,7 +11,7 @@ export const DropdownDivider: FC<DropdownDividerProps> = ({
 }) => {
   return (
     <div {...rest} className="h-px my-2">
-      <hr className="border-gray-600" />
+      <hr className="border-gray-200" />
     </div>
   )
 }

packages/app-elements/src/ui/composite/Dropdown/DropdownItem.tsx

@@ -61,14 +61,14 @@ export const DropdownItem = withSkeletonTemplate<DropdownItemProps>(
         }}
         href={href}
         className={cn(
-          "w-full bg-black text-white! py-1.5 pl-4 text-sm font-medium flex items-center focus:outline-hidden!",
+          "w-[calc(100%-1rem)]  bg-white text-black! py-1.5 pl-4 mx-2 text-sm font-regular flex items-center focus:outline-hidden!",
           {
             "pr-8": info == null,
             "min-w-[250px] pr-6": info != null,
           },
           className,
           {
-            "hover:bg-gray-600 cursor-pointer focus:bg-gray-600 group":
+            "hover:bg-gray-100 hover:rounded cursor-pointer focus:bg-gray-100 group":
               onClick != null || href != null,
             "cursor-default": onClick == null && href == null,
             "opacity-50 pointer-events-none": isDisabled,

packages/app-elements/src/ui/composite/Dropdown/DropdownMenu.tsx

@@ -49,17 +49,17 @@ export const DropdownMenu: FC<DropdownMenuProps> = ({
       <div
         {...rest}
         className={cn(
-          "bg-black text-white rounded overflow-x-hidden overflow-y-auto max-h-[450px] py-2",
+          "bg-white rounded overflow-x-hidden overflow-y-auto max-h-[450px] py-2 border shadow-lg",
           {
             "min-w-[150px] md:max-w-[250px]": menuWidth == null, // default width
-            "w-[280px]": menuWidth === "wide",
+            "w-70": menuWidth === "wide",
           },
         )}
       >
         {menuHeader != null && (
           <>
             <div
-              className="py-2 px-4 text-gray-400 text-xs font-semibold text-ellipsis overflow-hidden whitespace-nowrap"
+              className="py-2 px-6 text-gray-800 text-xs font-semibold text-ellipsis overflow-hidden whitespace-nowrap"
               title={menuHeader}
             >
               {menuHeader}

packages/app-elements/src/ui/composite/Dropdown/DropdownSearch.tsx

@@ -50,15 +50,15 @@ export const DropdownSearch = forwardRef<HTMLInputElement, DropdownSearchProps>(
     )
 
     return (
-      <div className="relative w-full" {...rest}>
+      <div className="relative mx-2 w-full" {...rest}>
         <Icon
           name="magnifyingGlass"
           weight="bold"
           className="absolute top-1/2 left-4 transform -translate-y-1/2 text-gray-400 pointer-events-none select-none text-sm "
         />
         <input
           className={cn(
-            "pl-10 pr-8 py-2 bg-transparent min-w-max font-semibold text-sm placeholder:text-gray-400 ring-0!",
+            "pl-10 pr-6 py-2 bg-transparent min-w-max font-semibold text-sm placeholder:text-gray-400 ring-0! rounded",
           )}
           placeholder={placeholder ?? t("common.search")}
           value={searchValue}

packages/app-elements/src/ui/composite/Dropdown/__snapshots__/Dropdown.test.tsx.snap

@@ -31,7 +31,7 @@ exports[`Dropdown > Should be rendering bottom-left 1`] = `
         class="flex flex-col items-start"
       >
         <div
-          class="bg-black text-white rounded overflow-x-hidden overflow-y-auto max-h-[450px] py-2 min-w-[150px] md:max-w-[250px]"
+          class="bg-white rounded overflow-x-hidden overflow-y-auto max-h-[450px] py-2 border shadow-lg min-w-[150px] md:max-w-[250px]"
         >
           <div />
         </div>
@@ -72,7 +72,7 @@ exports[`Dropdown > Should be rendering top-left 1`] = `
         class="flex flex-col-reverse items-start"
       >
         <div
-          class="bg-black text-white rounded overflow-x-hidden overflow-y-auto max-h-[450px] py-2 min-w-[150px] md:max-w-[250px]"
+          class="bg-white rounded overflow-x-hidden overflow-y-auto max-h-[450px] py-2 border shadow-lg min-w-[150px] md:max-w-[250px]"
         >
           <div />
         </div>
@@ -113,7 +113,7 @@ exports[`Dropdown > Should be rendering top-right 1`] = `
         class="flex flex-col-reverse items-end"
       >
         <div
-          class="bg-black text-white rounded overflow-x-hidden overflow-y-auto max-h-[450px] py-2 min-w-[150px] md:max-w-[250px]"
+          class="bg-white rounded overflow-x-hidden overflow-y-auto max-h-[450px] py-2 border shadow-lg min-w-[150px] md:max-w-[250px]"
         >
           <div />
         </div>
@@ -154,11 +154,11 @@ exports[`Dropdown > Should be rendering with default bottom-right position 1`] =
         class="flex flex-col items-end"
       >
         <div
-          class="bg-black text-white rounded overflow-x-hidden overflow-y-auto max-h-[450px] py-2 min-w-[150px] md:max-w-[250px]"
+          class="bg-white rounded overflow-x-hidden overflow-y-auto max-h-[450px] py-2 border shadow-lg min-w-[150px] md:max-w-[250px]"
         >
           <button
             aria-label="Payments"
-            class="w-full bg-black text-white! py-1.5 pl-4 text-sm font-medium flex items-center focus:outline-hidden! pr-8 hover:bg-gray-600 cursor-pointer focus:bg-gray-600 group"
+            class="w-[calc(100%-1rem)]  bg-white text-black! py-1.5 pl-4 mx-2 text-sm font-regular flex items-center focus:outline-hidden! pr-8 hover:bg-gray-100 hover:rounded cursor-pointer focus:bg-gray-100 group"
           >
             <div
               class="mr-2"
@@ -184,7 +184,7 @@ exports[`Dropdown > Should be rendering with default bottom-right position 1`] =
           </button>
           <button
             aria-label="Items"
-            class="w-full bg-black text-white! py-1.5 pl-4 text-sm font-medium flex items-center focus:outline-hidden! pr-8 hover:bg-gray-600 cursor-pointer focus:bg-gray-600 group"
+            class="w-[calc(100%-1rem)]  bg-white text-black! py-1.5 pl-4 mx-2 text-sm font-regular flex items-center focus:outline-hidden! pr-8 hover:bg-gray-100 hover:rounded cursor-pointer focus:bg-gray-100 group"
           >
             <div
               class="mr-2"
@@ -204,12 +204,12 @@ exports[`Dropdown > Should be rendering with default bottom-right position 1`] =
             class="h-px my-2"
           >
             <hr
-              class="border-gray-600"
+              class="border-gray-200"
             />
           </div>
           <button
             aria-label="Delete"
-            class="w-full bg-black text-white! py-1.5 pl-4 text-sm font-medium flex items-center focus:outline-hidden! pr-8 hover:bg-gray-600 cursor-pointer focus:bg-gray-600 group"
+            class="w-[calc(100%-1rem)]  bg-white text-black! py-1.5 pl-4 mx-2 text-sm font-regular flex items-center focus:outline-hidden! pr-8 hover:bg-gray-100 hover:rounded cursor-pointer focus:bg-gray-100 group"
           >
             <div
               class="mr-2"

packages/app-elements/src/ui/forms/InputSelect/styles.ts

@@ -9,10 +9,11 @@ export const getSelectStyles = (
   menu: (style) => ({
     ...style,
     zIndex: 100,
-    border: "1px solid rgb(230 231 231)",
-    borderRadius: 5,
-    boxShadow: "2px 2px 0 #f8f8f8;",
-    padding: "1px",
+    border: "1px solid #e5e5e5",
+    borderRadius: 8,
+    boxShadow:
+      "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);",
+    padding: "8px",
   }),
   menuList: (style) => ({
     ...style,
@@ -22,25 +23,18 @@ export const getSelectStyles = (
     ...style,
     padding: "0.375rem 1rem",
     backgroundColor: isSelected
-      ? "#EDEEEE"
+      ? "#f8f8f8"
       : isFocused
-        ? "#F8F8F8"
+        ? "#edeeee"
         : "transparent",
     color: isDisabled ? "#BBBEBE" : "rgb(40 41 41)",
     fontSize: 14,
     lineHeight: "20px",
-    fontWeight: isSelected ? 700 : 500,
+    fontWeight: isSelected ? 600 : 400,
     cursor: "pointer",
+    borderRadius: "8px",
     "&:active": {
-      backgroundColor: isSelected ? "#EDEEEE" : "rgb(248 248 248)",
-    },
-    "&:first-of-type": {
-      borderTopLeftRadius: 5,
-      borderTopRightRadius: 5,
-    },
-    "&:last-child": {
-      borderBottomLeftRadius: 5,
-      borderBottomRightRadius: 5,
+      backgroundColor: isSelected ? "#f8f8f8" : "rgb(248 248 248)",
     },
   }),
   noOptionsMessage: (style) => ({
@@ -58,8 +52,14 @@ export const getSelectStyles = (
   }),
   valueContainer: (style, { isMulti }) => ({
     ...style,
-    padding: isMulti ? "0.4375rem 1rem" : "0.5rem 1rem",
-    gap: "0.5rem",
+    padding: isMulti ? "0.4375rem 0.625rem" : "0.5rem 1rem",
+    gap: "0",
+    "> div[class^='flex']": {
+      marginRight: "6px",
+    },
+    "> div[class^='flex']:not(:has(~ div[class^='flex']))": {
+      marginRight: "0",
+    },
   }),
   singleValue: (style) => ({
     ...style,
@@ -92,7 +92,7 @@ export const getSelectStyles = (
       backgroundColor: "transparent",
     },
     "> button": {
-      borderRadius: "5px",
+      borderRadius: "8px",
     },
     "> button:focus-within": {
       color: "black",
@@ -109,22 +109,24 @@ export const getSelectStyles = (
       minHeight: "44px",
 
       outline: "none",
-      borderRadius: 5,
+      borderRadius: 8,
       cursor: "pointer",
     }
   },
-  placeholder: (style) => ({
+  placeholder: (style, { isMulti }) => ({
     ...style,
     margin: 0,
     fontSize: 14,
     lineHeight: "20px",
     fontWeight: 500,
     color: "#686E6E",
+    paddingLeft: isMulti ? "0.375rem" : "0",
   }),
-  input: (style) => ({
+  input: (style, { isMulti }) => ({
     ...style,
     margin: 0,
     padding: 0,
+    paddingLeft: isMulti ? "0.375rem" : "0",
     fontSize: 14,
     lineHeight: "20px",
     "& > input": {