fix: update clear all filters button styles for consistency (#5328)

* fix: update clear all filters button styles for consistency

* pr feedback

src/nft/components/collection/CollectionNfts.tsx

@@ -116,7 +116,7 @@ const ViewFullCollection = styled.span`
   ${OpacityHoverState}
 `
 
-const ClearAllButton = styled.button`
+export const ClearAllButton = styled.button`
   color: ${({ theme }) => theme.textTertiary};
   padding-left: 8px;
   padding-right: 8px;
@@ -479,6 +479,12 @@ export const CollectionNfts = ({ contractAddress, collectionStats, rarityVerifie
     setSweepOpen(!sweepIsOpen)
   }, [bagExpanded, hasErc1155s, isMobile, sweepIsOpen, toggleBag])
 
+  const handleClearAllClick = useCallback(() => {
+    reset()
+    setPrevMinMax([0, 100])
+    scrollToTop()
+  }, [reset, setPrevMinMax])
+
   return (
     <>
       <AnimatedBox
@@ -574,17 +580,9 @@ export const CollectionNfts = ({ contractAddress, collectionStats, rarityVerifie
               }}
             />
           )}
-          {!!traits.length || !!markets.length || minMaxPriceChipText ? (
-            <ClearAllButton
-              onClick={() => {
-                reset()
-                setPrevMinMax([0, 100])
-                scrollToTop()
-              }}
-            >
-              Clear All
-            </ClearAllButton>
-          ) : null}
+          {Boolean(traits.length || markets.length || minMaxPriceChipText) && (
+            <ClearAllButton onClick={handleClearAllClick}>Clear All</ClearAllButton>
+          )}
         </Row>
       </AnimatedBox>
       <InfiniteScrollWrapper>

src/nft/components/profile/view/ProfilePage.tsx

@@ -1,5 +1,6 @@
 import { useNftBalanceQuery } from 'graphql/data/nft/NftBalance'
 import { AnimatedBox, Box } from 'nft/components/Box'
+import { ClearAllButton } from 'nft/components/collection/CollectionNfts'
 import { assetList } from 'nft/components/collection/CollectionNfts.css'
 import { FilterButton } from 'nft/components/collection/FilterButton'
 import { LoadingSparkle } from 'nft/components/common/Loading/LoadingSparkle'
@@ -7,12 +8,18 @@ import { Center, Column, Row } from 'nft/components/Flex'
 import { CrossIcon } from 'nft/components/icons'
 import { FilterSidebar } from 'nft/components/profile/view/FilterSidebar'
 import { subhead } from 'nft/css/common.css'
-import { useBag, useFiltersExpanded, useIsMobile, useSellAsset, useWalletCollections } from 'nft/hooks'
-import { useWalletBalance } from 'nft/hooks'
+import {
+  useBag,
+  useFiltersExpanded,
+  useIsMobile,
+  useSellAsset,
+  useWalletBalance,
+  useWalletCollections,
+} from 'nft/hooks'
 import { ScreenBreakpointsPaddings } from 'nft/pages/collection/index.css'
 import { OSCollectionsFetcher } from 'nft/queries'
 import { WalletCollection } from 'nft/types'
-import { Dispatch, SetStateAction, Suspense, useEffect, useMemo, useState } from 'react'
+import { Dispatch, SetStateAction, Suspense, useCallback, useEffect, useMemo, useState } from 'react'
 import InfiniteScroll from 'react-infinite-scroll-component'
 import { useInfiniteQuery } from 'react-query'
 import { easings, useSpring } from 'react-spring'
@@ -280,31 +287,18 @@ const CollectionFiltersRow = ({
   const getCollection = (collectionAddress: string) => {
     return collections?.find((collection) => collection.address === collectionAddress)
   }
+  const handleClearAllClick = useCallback(() => clearCollectionFilters(), [clearCollectionFilters])
   return (
     <Row paddingY="18" gap="8" flexWrap="wrap">
-      {collectionFilters &&
+      {Boolean(collectionFilters?.length) &&
         collectionFilters.map((collectionAddress, index) => (
           <CollectionFilterItem
             collection={getCollection(collectionAddress)}
-            key={index}
+            key={`CollectionFilterItem-${collectionAddress}-${index}`}
             setCollectionFilters={setCollectionFilters}
           />
         ))}
-      {collectionFilters?.length ? (
-        <Box
-          as="button"
-          paddingLeft="8"
-          paddingRight="8"
-          color="genieBlue"
-          background="none"
-          fontSize="16"
-          border="none"
-          cursor="pointer"
-          onClick={() => clearCollectionFilters()}
-        >
-          Clear all
-        </Box>
-      ) : null}
+      {Boolean(collectionFilters?.length) && <ClearAllButton onClick={handleClearAllClick}>Clear all</ClearAllButton>}
     </Row>
   )
 }