Merge pull request #12541 from ethereum/filters-label-clickable

chore: make Filters clickable on mobile to open filters menu

Author: wackerow

src/components/FindWallet/WalletTable/index.tsx

@@ -208,13 +208,15 @@ export type WalletTableProps = {
   resetFilters: () => void
   resetWalletFilter: React.MutableRefObject<() => void>
   walletData: WalletData[]
+  onOpen: () => void
 }
 
 const WalletTable = ({
   filters,
   resetFilters,
   resetWalletFilter,
   walletData,
+  onOpen,
 }: WalletTableProps) => {
   const { t } = useTranslation("page-wallets-find-wallet")
   const { locale } = useRouter()
@@ -233,12 +235,16 @@ const WalletTable = ({
       <WalletContentHeader>
         <Th sx={{ textAlign: "start !important" }}>
           <Flex justifyContent="space-between" px={{ base: 2.5, md: 0 }}>
+            {/* Displayed on mobile only */}
             <Text
               hideFrom="lg"
               lineHeight={1.6}
               fontSize="md"
               color="primary.base"
               textTransform="uppercase"
+              cursor="pointer"
+              onClick={onOpen}
+              as="button"
             >
               {`${t("page-find-wallet-filters")} (${
                 walletsListingCount(filters) +

src/pages/wallets/find-wallet.tsx

@@ -239,6 +239,7 @@ const FindWalletPage = () => {
                 resetFilters={resetFilters}
                 resetWalletFilter={resetWalletFilter}
                 walletData={randomizedWalletData}
+                onOpen={onOpen}
               />
             </Box>
           </Flex>