diff --git a/packages/website/src/components/DropdownMenu/index.module.css b/packages/website/src/components/DropdownMenu/index.module.css index 9af9f452c..5552dd860 100644 --- a/packages/website/src/components/DropdownMenu/index.module.css +++ b/packages/website/src/components/DropdownMenu/index.module.css @@ -1,2 +1,38 @@ -.Trigger { +.Content { + display: flex; + flex-direction: column; + + padding: var(--space-4); + + background-color: var(--gray-3); + + box-shadow: var(--shadow-aggressive); + outline: var(--outline-interactive); + border-radius: var(--space-3); +} + +.Separator { + background-color: var(--gray-6); + + margin: var(--space-4) var(--space-3); + + height: var(--space-0); +} + +.Item, +.CheckboxItem { + border-radius: var(--space-2); + padding: var(--space-3) var(--space-4); + + cursor: pointer; + + display: flex; + align-items: center; + gap: var(--space-3); + + &:focus { + outline: none; + + background-color: var(--accent-9); + } } diff --git a/packages/website/src/components/TankSearchFilters/index.tsx b/packages/website/src/components/TankSearchFilters/index.tsx index 919a7af1d..20e2f6f56 100644 --- a/packages/website/src/components/TankSearchFilters/index.tsx +++ b/packages/website/src/components/TankSearchFilters/index.tsx @@ -192,7 +192,7 @@ function TiersFilter() { const tiers = tiersRaw.length === 0 ? TIERS : tiersRaw; return ( - +