init 3

daostack · Dec 9, 2023 · bb6da2e · bb6da2e
1 parent 1f6ebb8
commit bb6da2e
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 9 deletions.
diff --git a/...mponents/DirectMessageButton/components/DirectMessageModal/DirectMessageModal.module.scss b/...mponents/DirectMessageButton/components/DirectMessageModal/DirectMessageModal.module.scss
@@ -115,3 +115,7 @@
 .userAvatar {
   margin-right: 0.75rem;
 }
+
+.searchIcon {
+  margin-right: 0.5rem;
+}
diff --git a/...inbox/components/DirectMessageButton/components/DirectMessageModal/DirectMessageModal.tsx b/...inbox/components/DirectMessageButton/components/DirectMessageModal/DirectMessageModal.tsx
@@ -236,7 +236,9 @@ const DirectMessageModal: FC<DirectMessageModalProps> = (props) => {
           isSearchable
           styles={selectorStyles(getThemeColor)}
           components={{
-            DropdownIndicator: () => <SearchIcon />,
+            DropdownIndicator: () => (
+              <SearchIcon className={styles.searchIcon} />
+            ),
             IndicatorSeparator: () => null,
           }}
         />

diff --git a/...components/DirectMessageButton/components/DirectMessageModal/components/selectorStyles.ts b/...components/DirectMessageButton/components/DirectMessageModal/components/selectorStyles.ts
@@ -10,15 +10,16 @@ export const selectorStyles = (
       zIndex: 10000,
       boxShadow: "none",
       marginTop: 0,
+      backgroundColor: "transparent",
     }),
     menuPortal: (provided) => ({ ...provided, zIndex: 10000 }),
     menuList: (provided) => ({
       ...provided,
-      backgroundColor: getThemeColor(ThemeColors.tertiaryFill),
+      maxHeight: "unset",
     }),
     control: (provided) => ({
       ...provided,
-      height: "3rem",
+      minHeight: "3rem",
       width: "100%",
       backgroundColor: getThemeColor(ThemeColors.secondaryBackground),
       color: getThemeColor(ThemeColors.primaryText),
@@ -30,14 +31,9 @@ export const selectorStyles = (
     }),
     option: (provided, data) => ({
       ...provided,
-      backgroundColor: data.isDisabled
-        ? "transparent"
-        : getThemeColor(ThemeColors.tertiaryFill),
       color: getThemeColor(ThemeColors.primaryText),
       "&:hover": {
-        backgroundColor: data.isDisabled
-          ? ""
-          : getThemeColor(ThemeColors.secondaryBackground),
+        backgroundColor: getThemeColor(ThemeColors.secondaryBackground),
       },
       cursor: data.isDisabled ? "not-allowed" : "default",
     }),
@@ -50,5 +46,21 @@ export const selectorStyles = (
       backgroundColor: getThemeColor(ThemeColors.secondaryBackground),
       color: getThemeColor(ThemeColors.primaryText),
     }),
+    multiValue: (provided) => ({
+      ...provided,
+      backgroundColor: getThemeColor(ThemeColors.quaternaryFill),
+      color: getThemeColor(ThemeColors.primaryText),
+    }),
+    multiValueGeneric: (provided) => ({
+      ...provided,
+      color: "unset",
+    }),
+    multiValueRemove: (provided) => ({
+      ...provided,
+      cursor: "pointer",
+      "&:hover": {
+        backgroundColor: getThemeColor(ThemeColors.hoverFill),
+      },
+    }),
   };
 };