fix scroll of advanced filters table and change styles of opened and hovered...

fix scroll of advanced filters table and change styles of opened and hovered state for dropdown buttons

toolkit/theme/recipes/button.recipe.ts

@@ -16,7 +16,7 @@ export const recipe = defineRecipe({
         bg: 'blue.600',
         color: 'white',
         _hover: {
-          bg: 'blue.400',
+          bg: 'link.primary.hover',
         },
         _loading: {
           opacity: 1,
@@ -27,7 +27,7 @@ export const recipe = defineRecipe({
           },
         },
         _expanded: {
-          bg: 'blue.400',
+          bg: 'link.primary.hover',
         },
       },
       outline: {
@@ -38,8 +38,8 @@ export const recipe = defineRecipe({
         borderColor: 'button.outline.fg',
         _hover: {
           bg: 'transparent',
-          color: 'blue.400',
-          borderColor: 'blue.400',
+          color: 'link.primary.hover',
+          borderColor: 'link.primary.hover',
         },
         _loading: {
           opacity: 1,
@@ -58,8 +58,8 @@ export const recipe = defineRecipe({
         borderColor: 'button.dropdown.border',
         _hover: {
           bg: 'transparent',
-          color: 'blue.400',
-          borderColor: 'blue.400',
+          color: 'link.primary.hover',
+          borderColor: 'link.primary.hover',
         },
         _loading: {
           opacity: 1,
@@ -72,8 +72,8 @@ export const recipe = defineRecipe({
         // When the dropdown is open, the button should be active
         _expanded: {
           bg: 'transparent',
-          color: 'blue.400',
-          borderColor: 'blue.400',
+          color: 'link.primary.hover',
+          borderColor: 'link.primary.hover',
         },
         // We have a special state for this button variant that serves as a popover trigger.
         // When any items (filters) are selected in the popover, the button should change its background and text color.
@@ -84,9 +84,12 @@ export const recipe = defineRecipe({
           borderColor: 'transparent',
           _hover: {
             bg: 'button.dropdown.bg.selected',
-            color: 'button.dropdown.fg.selected',
+            color: 'link.primary.hover',
             borderColor: 'transparent',
           },
+          _expanded: {
+            color: 'link.primary.hover',
+          },
         },
       },
       header: {
@@ -97,8 +100,8 @@ export const recipe = defineRecipe({
         borderStyle: 'solid',
         _hover: {
           bg: 'transparent',
-          color: 'blue.400',
-          borderColor: 'blue.400',
+          color: 'link.primary.hover',
+          borderColor: 'link.primary.hover',
         },
         _loading: {
           opacity: 1,
@@ -115,16 +118,22 @@ export const recipe = defineRecipe({
           borderWidth: '0px',
           _hover: {
             bg: 'button.header.bg.selected',
-            color: 'button.header.fg.selected',
+            color: 'link.primary.hover',
+          },
+          _expanded: {
+            color: 'link.primary.hover',
           },
           _highlighted: {
             bg: 'button.header.bg.highlighted',
             color: 'button.header.fg.highlighted',
             borderColor: 'transparent',
             borderWidth: '0px',
+            _expanded: {
+              color: 'link.primary.hover',
+            },
             _hover: {
               bg: 'button.header.bg.highlighted',
-              color: 'button.header.fg.highlighted',
+              color: 'link.primary.hover',
             },
           },
         },
@@ -149,7 +158,10 @@ export const recipe = defineRecipe({
           color: 'button.hero.fg.selected',
           _hover: {
             bg: 'button.hero.bg.selected',
-            color: 'button.hero.fg.selected',
+            color: 'link.primary.hover',
+          },
+          _expanded: {
+            color: 'link.primary.hover',
           },
         },
       },
@@ -230,7 +242,10 @@ export const recipe = defineRecipe({
           color: 'button.icon_secondary.fg.selected',
           _hover: {
             bg: 'button.icon_secondary.bg.selected',
-            color: 'button.icon_secondary.fg.selected',
+            color: 'link.primary.hover',
+          },
+          _expanded: {
+            color: 'link.primary.hover',
           },
         },
         _expanded: {

ui/advancedFilter/FilterByColumn.tsx

@@ -71,7 +71,7 @@ const FilterByColumn = ({ column, filters, columnName, handleFilterChange, searc
         <TableColumnFilterWrapper
           columnName="And/Or"
           isLoading={ isLoading }
-          selected={ false }
+          selected
           w="106px"
           value={ filters.address_relation === 'and' ? 'AND' : 'OR' }
         >

ui/pages/AdvancedFilter.tsx

@@ -137,7 +137,7 @@ const AdvancedFilter = () => {
 
   const content = (
     <AddressHighlightProvider>
-      <Box maxW="100%" overflowX="scroll" whiteSpace="nowrap">
+      <Box maxW="100%" display="grid" overflowX="scroll" whiteSpace="nowrap">
         <TableRoot tableLayout="fixed" minWidth="950px" w="100%">
           <TableHeaderSticky>
             <TableRow>

ui/shared/filters/FilterButton.tsx

@@ -22,6 +22,12 @@ const FilterButton = ({ isLoading, appliedFiltersNum, ...rest }: Props, ref: Rea
       size={ 5 }
       bg={{ _light: 'blue.700', _dark: 'gray.50' }}
       color={{ _light: 'white', _dark: 'black' }}
+      _groupHover={{
+        bg: 'link.primary.hover',
+      }}
+      _groupExpanded={{
+        bg: 'link.primary.hover',
+      }}
     >
       { appliedFiltersNum }
     </Circle>

ui/shared/filters/PopoverFilter.tsx

@@ -14,7 +14,7 @@ interface Props {
 const PopoverFilter = ({ appliedFiltersNum, children, contentProps, isLoading }: Props) => {
   return (
     <PopoverRoot>
-      <PopoverTrigger>
+      <PopoverTrigger className="group">
         <FilterButton
           appliedFiltersNum={ appliedFiltersNum }
           isLoading={ isLoading }

ui/shared/filters/TableColumnFilterWrapper.tsx

@@ -21,7 +21,7 @@ const TableColumnFilterWrapper = ({ columnName, className, children, isLoading,
         <Button
           display="inline-flex"
           aria-label={ `filter by ${ columnName }` }
-          variant="dropdown"
+          variant="icon_secondary"
           borderWidth="0"
           h="20px"
           minW="auto"