chore: Merchant search in dropdown (#2321)

juspay · Feb 24, 2025 · b0d0170 · b0d0170
1 parent 3d32c24
commit b0d0170
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 13 deletions.
diff --git a/src/components/SearchInput.res b/src/components/SearchInput.res
@@ -12,7 +12,7 @@ let make = (
   ~searchRef=?,
   ~shouldSubmitForm=true,
   ~placeholderCss="bg-transparent text-fs-14",
-  ~bgColor="bg-white border-jp-gray-600 border-opacity-75 focus-within:border-primary",
+  ~bgColor="border-jp-gray-600 border-opacity-75 focus-within:border-primary",
   ~iconName="new_search_icon",
   ~onKeyDown=_ => {()},
   ~showSearchIcon=true,
@@ -54,10 +54,10 @@ let make = (
   let exitCross = useLottieJson(exitSearchCross)
   let enterCross = useLottieJson(enterSearchCross)
   <div
-    className={`${widthClass} ${borderClass} ${heightClass} ${bgColor} flex flex-row items-center justify-between
+    className={`${widthClass} ${borderClass} ${heightClass} flex flex-row items-center justify-between
     dark:bg-jp-gray-lightgray_background
     dark:focus-within:border-primary hover:border-opacity-100 
-    dark:border-jp-gray-850 dark:border-opacity-50 dark:hover:border-opacity-100`}>
+    dark:border-jp-gray-850 dark:border-opacity-50 dark:hover:border-opacity-100 ${bgColor} `}>
     <input
       ref={searchRef->ReactDOM.Ref.domRef}
       type_="text"

diff --git a/src/components/SelectBox.res b/src/components/SelectBox.res
@@ -839,7 +839,7 @@ module BaseSelect = {
           wrapBasis->LogicUtils.isEmptyString ? "" : " flex flex-wrap justify-between"
         }}>
         {if filteredOptions->Array.length === 0 {
-          <div className="flex justify-center items-center m-4">
+          <div className={`flex justify-center items-center m-4 ${customSearchStyle}`}>
             {React.string("No matching records found")}
           </div>
         } else if filteredOptions->Array.find(item => item.value === "Loading...")->Option.isSome {
@@ -1010,7 +1010,7 @@ module BaseSelectButton = {
     let overflowClass = !isDropDown ? "" : "overflow-auto"
 
     <div
-      className={`bg-white dark:bg-jp-gray-lightgray_background ${width} ${overflowClass} font-medium flex flex-col ${showDropDown
+      className={`dark:bg-jp-gray-lightgray_background ${width} ${overflowClass} font-medium flex flex-col ${showDropDown
           ? "animate-textTransition transition duration-400"
           : "animate-textTransitionOff transition duration-400"}`}>
       {if searchable {
@@ -1296,7 +1296,7 @@ module BaseRadio = {
     ~customStyle="",
     ~searchable=?,
     ~isMobileView=false,
-    ~customSearchStyle="bg-jp-gray-100 dark:bg-jp-gray-950 p-2",
+    ~customSearchStyle="dark:bg-jp-gray-950 p-2",
     ~descriptionOnHover=false,
     ~addDynamicValue=false,
     ~dropdownCustomWidth="w-80",
@@ -1456,7 +1456,7 @@ module BaseRadio = {
     }
     let searchInputUI =
       <div
-        className={`${customSearchStyle} border-b border-jp-gray-lightmode_steelgray border-opacity-75 dark:border-jp-gray-960 `}>
+        className={`border-b p-2 border-jp-gray-lightmode_steelgray border-opacity-75 dark:border-jp-gray-960 ${customSearchStyle}`}>
         <div>
           <SearchInput
             inputText=searchString
@@ -1483,7 +1483,7 @@ module BaseRadio = {
       <div
         className={`${heightScroll} ${listPadding} ${overflowClass} text-fs-13 font-semibold text-jp-gray-900 text-opacity-75 dark:text-jp-gray-text_darktheme dark:text-opacity-75 ${inlineClass} ${baseComponentCustomStyle}`}>
         {if newOptions->Array.length === 0 && showMatchingRecordsText {
-          <div className="flex justify-center items-center m-4">
+          <div className={`flex justify-center items-center m-4 ${customSearchStyle}`}>
             {React.string("No matching records found")}
           </div>
         } else if isNonGrouped {
@@ -1591,7 +1591,7 @@ module BaseDropdown = {
     ~addButton=false,
     ~marginTop="mt-10", //to position dropdown below the button,
     ~customStyle="",
-    ~customSearchStyle="bg-jp-gray-100 dark:bg-jp-gray-950 p-2",
+    ~customSearchStyle="dark:bg-jp-gray-950 p-2",
     ~showSelectionAsChips=true,
     ~showToolTip=false,
     ~showNameAsToolTip=false,
@@ -1853,6 +1853,7 @@ module BaseDropdown = {
         showSearchIcon
         ?sortingBasedOnDisabled
         preservedAppliedOptions
+        customSearchStyle
       />
     } else if addButton {
       <BaseSelectButton
@@ -1913,6 +1914,7 @@ module BaseDropdown = {
         dropdownContainerStyle
         shouldDisplaySelectedOnTop
         labelDescriptionClass
+        customSearchStyle
       />
     }
 
@@ -2036,7 +2038,7 @@ module BaseDropdown = {
                   dropDirection == BottomMiddle ||
                   dropDirection == BottomRight
                     ? "origin-top"
-                    : "origin-bottom"} ${dropdownOuterClass} ${customDropdownOuterClass} z-20 ${marginBottom} bg-gray-50 dark:bg-jp-gray-950 ${fullLength
+                    : "origin-bottom"} ${dropdownOuterClass} ${customDropdownOuterClass} z-20 ${marginBottom} rounded-lg dark:bg-jp-gray-950 ${fullLength
                     ? "w-full"
                     : ""}`}
                 ref={dropdownRef->ReactDOM.Ref.domRef}>
@@ -2056,7 +2058,7 @@ module BaseDropdown = {
               dropDirection == BottomMiddle ||
               dropDirection == BottomRight
                 ? "origin-top"
-                : "origin-bottom"} ${dropdownOuterClass} ${customDropdownOuterClass} z-20 ${marginBottom} bg-gray-50 dark:bg-jp-gray-950`}
+                : "origin-bottom"} ${dropdownOuterClass} ${customDropdownOuterClass} z-20 ${marginBottom} rounded-lg dark:bg-jp-gray-950`}
             ref={dropdownRef->ReactDOM.Ref.domRef}>
             optionsElement
           </div>

diff --git a/src/screens/OMPSwitch/MerchantSwitch.res b/src/screens/OMPSwitch/MerchantSwitch.res
@@ -139,7 +139,9 @@ let make = () => {
   let (showSwitchingMerch, setShowSwitchingMerch) = React.useState(_ => false)
   let (arrow, setArrow) = React.useState(_ => false)
   let {
-    globalUIConfig: {sidebarColor: {backgroundColor, primaryTextColor, borderColor}},
+    globalUIConfig: {
+      sidebarColor: {backgroundColor, primaryTextColor, borderColor, secondaryTextColor},
+    },
   } = React.useContext(ThemeProvider.themeContext)
   let getMerchantList = async () => {
     try {
@@ -222,7 +224,7 @@ let make = () => {
       hideMultiSelectButtons=true
       addButton=false
       customStyle={`!border-none w-fit ${backgroundColor.sidebarSecondary} !${borderColor} `}
-      searchable=false
+      searchable=true
       baseComponent={<ListBaseComp user=#Merchant heading="Merchant" subHeading arrow />}
       baseComponentCustomStyle={`!border-none`}
       bottomComponent={<AddNewOMPButton
@@ -236,6 +238,7 @@ let make = () => {
       customScrollStyle
       dropdownContainerStyle
       shouldDisplaySelectedOnTop=true
+      customSearchStyle={`${backgroundColor.sidebarSecondary} ${secondaryTextColor} ${borderColor}`}
     />
     <RenderIf condition={showModal}>
       <NewMerchantCreationModal setShowModal showModal getMerchantList />