From 109788ebbb18b255d638818f248743852f6e4294 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Sun, 28 Dec 2025 15:07:57 -0800
Subject: [PATCH] update multiselect styles

---
 .../context-menu/context-menu.module.css       |  4 ++--
 .../dropdown-menu/dropdown-menu.module.css     |  4 ++--
 .../multi-select/multi-select.module.css       | 18 ++++++++++++++++--
 .../components/multi-select/multi-select.tsx   |  8 ++++++++
 src/shared/components/select/select.module.css |  4 ++--
 5 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/src/shared/components/context-menu/context-menu.module.css b/src/shared/components/context-menu/context-menu.module.css
index 4ec739078..412e71607 100644
--- a/src/shared/components/context-menu/context-menu.module.css
+++ b/src/shared/components/context-menu/context-menu.module.css
@@ -84,11 +84,11 @@
         position: absolute;
         top: 50%;
         left: 2px;
-        width: 4px;
+        width: 2px;
         height: 50%;
         content: '';
         background-color: var(--theme-colors-primary-filled);
-        border-radius: var(--theme-border-radius-xl);
+        border-radius: var(--theme-radius-xl);
         transform: translateY(-50%);
     }
 }
diff --git a/src/shared/components/dropdown-menu/dropdown-menu.module.css b/src/shared/components/dropdown-menu/dropdown-menu.module.css
index 598746303..69282b157 100644
--- a/src/shared/components/dropdown-menu/dropdown-menu.module.css
+++ b/src/shared/components/dropdown-menu/dropdown-menu.module.css
@@ -26,11 +26,11 @@
         position: absolute;
         top: 50%;
         left: 2px;
-        width: 4px;
+        width: 2px;
         height: 50%;
         content: '';
         background-color: var(--theme-colors-primary-filled);
-        border-radius: var(--theme-border-radius-xl);
+        border-radius: var(--theme-radius-xl);
         transform: translateY(-50%);
     }
 }
diff --git a/src/shared/components/multi-select/multi-select.module.css b/src/shared/components/multi-select/multi-select.module.css
index cd9ef10e0..a536577ec 100644
--- a/src/shared/components/multi-select/multi-select.module.css
+++ b/src/shared/components/multi-select/multi-select.module.css
@@ -44,11 +44,11 @@
             position: absolute;
             top: 50%;
             left: 2px;
-            width: 4px;
+            width: 2px;
             height: 50%;
             content: '';
             background-color: var(--theme-colors-primary-filled);
-            border-radius: var(--theme-border-radius-xl);
+            border-radius: var(--theme-radius-xl);
             transform: translateY(-50%);
         }
     }
@@ -57,3 +57,17 @@
 .option:hover {
     background: lighten(var(--theme-colors-surface), 5%);
 }
+
+.pill {
+    font-size: var(--theme-font-size-sm);
+    background: var(--theme-colors-background);
+    border-radius: var(--theme-radius-sm);
+}
+
+.pills-list {
+    padding-right: var(--theme-spacing-lg);
+}
+
+.clear-button {
+    background: transparent !important;
+}
diff --git a/src/shared/components/multi-select/multi-select.tsx b/src/shared/components/multi-select/multi-select.tsx
index 77d9e60fc..d182c1ad2 100644
--- a/src/shared/components/multi-select/multi-select.tsx
+++ b/src/shared/components/multi-select/multi-select.tsx
@@ -25,9 +25,17 @@ export const MultiSelect = ({
                 input: styles.input,
                 label: styles.label,
                 option: styles.option,
+                pill: styles.pill,
+                pillsList: styles.pillsList,
                 root: styles.root,
                 ...classNames,
             }}
+            clearButtonProps={{
+                classNames: {
+                    root: styles.clearButton,
+                },
+                variant: 'transparent',
+            }}
             style={{ maxWidth, width }}
             variant={variant}
             withCheckIcon={false}
diff --git a/src/shared/components/select/select.module.css b/src/shared/components/select/select.module.css
index 96f48d883..568f0ed08 100644
--- a/src/shared/components/select/select.module.css
+++ b/src/shared/components/select/select.module.css
@@ -44,11 +44,11 @@
             position: absolute;
             top: 50%;
             left: 2px;
-            width: 4px;
+            width: 2px;
             height: 50%;
             content: '';
             background-color: var(--theme-colors-primary-filled);
-            border-radius: var(--theme-border-radius-xl);
+            border-radius: var(--theme-radius-xl);
             transform: translateY(-50%);
         }
     }