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%); } }