Update filter bar button

components/FilterBar/index.module.scss

@@ -30,7 +30,6 @@
     display: flex;
     box-sizing: border-box;
     flex-direction: row;
-    flex-grow: 1;
     gap: $unit;
     width: auto;
 
@@ -38,24 +37,6 @@
       flex-direction: column;
       width: 100%;
     }
-
-    .Button.Filter.Blended {
-      &.FiltersActive .Accessory svg {
-        fill: var(--accent-blue);
-        stroke: none;
-      }
-
-      &:hover {
-        background: var(--button-bg);
-      }
-
-      .Accessory svg {
-        fill: none;
-        stroke: var(--button-text);
-        width: 18px;
-        height: 18px;
-      }
-    }
   }
 
   &.shadow {
@@ -70,29 +51,6 @@
     text-align: left;
   }
 
-  select,
-  .SelectTrigger {
-    // background: url("/icons/Chevron.svg"), $grey-90;
-    // background-repeat: no-repeat;
-    // background-position-y: center;
-    // background-position-x: 95%;
-    // background-size: $unit * 1.5;
-    background-color: var(--select-contained-bg);
-    font-size: $font-small;
-    margin: 0;
-    max-width: 200px;
-
-    &:hover {
-      background-color: var(--select-contained-bg-hover);
-    }
-
-    @include breakpoint(tablet) {
-      width: 100%;
-      max-width: inherit;
-      text-align: center;
-    }
-  }
-
   .SelectTrigger {
     width: 100%;
 
@@ -101,23 +59,6 @@
     }
   }
 
-  .Filter.Button {
-    justify-content: center;
-
-    .Text {
-      display: none;
-      width: auto;
-
-      @include breakpoint(tablet) {
-        display: block;
-      }
-
-      @include breakpoint(phone) {
-        display: block;
-      }
-    }
-  }
-
   .UserInfo {
     align-items: center;
     display: flex;

components/FilterBar/index.tsx

@@ -1,21 +1,20 @@
 import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'next-i18next'
+import { getCookie } from 'cookies-next'
 import classNames from 'classnames'
 import equals from 'fast-deep-equal'
 
 import FilterModal from '~components/FilterModal'
+import RaidCombobox from '~components/raids/RaidCombobox'
 import Select from '~components/common/Select'
 import SelectItem from '~components/common/SelectItem'
 import Button from '~components/common/Button'
 
+import { appState } from '~utils/appState'
 import { defaultFilterset } from '~utils/defaultFilters'
 
 import FilterIcon from '~public/icons/Filter.svg'
-
 import styles from './index.module.scss'
-import { getCookie } from 'cookies-next'
-import RaidCombobox from '~components/raids/RaidCombobox'
-import { appState } from '~utils/appState'
 
 interface Props {
   children: React.ReactNode
@@ -46,8 +45,8 @@ const FilterBar = (props: Props) => {
   })
 
   const filterButtonClasses = classNames({
-    Filter: true,
+    filter: true,
-    FiltersActive: !matchesDefaultFilters,
+    filtersActive: !matchesDefaultFilters,
   })
 
   // Convert raid slug to Raid object on mount
@@ -129,6 +128,10 @@ const FilterBar = (props: Props) => {
         <div className={styles.filters}>
           <Select
             value={`${props.element}`}
+            trigger={{
+              bound: true,
+              size: 'small',
+            }}
             overlayVisible={false}
             open={elementOpen}
             onOpenChange={() => onSelectChange('element')}
@@ -142,12 +145,16 @@ const FilterBar = (props: Props) => {
             currentRaid={currentRaid}
             showAllRaidsOption={true}
             minimal={true}
+            size="small"
             onChange={raidSelectChanged}
           />
 
           <Select
             value={`${props.recency}`}
-            trigger={'All time'}
+            trigger={{
+              bound: true,
+              size: 'small',
+            }}
             overlayVisible={false}
             open={recencyOpen}
             onOpenChange={() => onSelectChange('recency')}
@@ -182,6 +189,7 @@ const FilterBar = (props: Props) => {
             blended={true}
             leftAccessoryIcon={<FilterIcon />}
             text={t('filters.name')}
+            size="small"
             onClick={() => setFilterModalOpen(true)}
           />
         </div>