feat: add mobile profile menu filter header (#5499)

* add mobile profile menu filter header

* incorrectly set color
Co-authored-by: Charles Bachmeier <charlie@genie.xyz>

src/nft/components/bag/profile/ListingButton.tsx

@@ -4,6 +4,7 @@ import { Box } from 'nft/components/Box'
 import { Row } from 'nft/components/Flex'
 import { ArrowRightIcon, HazardIcon, LoadingIcon, XMarkIcon } from 'nft/components/icons'
 import { bodySmall } from 'nft/css/common.css'
+import { themeVars } from 'nft/css/sprinkles.css'
 import { useNFTList, useSellAsset } from 'nft/hooks'
 import { Listing, ListingStatus, WalletAsset } from 'nft/types'
 import { pluralize } from 'nft/utils/roundAndPluralize'
@@ -187,7 +188,7 @@ export const ListingButton = ({ onClick, buttonText, showWarningOverride = false
           </Box>
           {!!disableListButton ? (
             <Box paddingTop="6">
-              <XMarkIcon fill="textSecondary" height="20" width="20" />
+              <XMarkIcon fill={themeVars.colors.textSecondary} height="20" width="20" />
             </Box>
           ) : (
             <Row

src/nft/components/icons.tsx

@@ -97,7 +97,7 @@ export const SuspiciousIcon = (props: SVGProps) => (
 export const XMarkIcon = (props: SVGProps) => (
   <svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path
-      fill={themeVars.colors.textSecondary}
+      fill={props.fill ?? themeVars.colors.textSecondary}
       d="M10.2706 27.2148C9.74321 27.7421 9.7181 28.6838 10.2831 29.2362C10.8356 29.7887 11.7773 29.7761 12.3046 29.2488L19.9887 21.5521L27.6855 29.2488C28.2254 29.7887 29.1545 29.7887 29.7069 29.2362C30.2468 28.6712 30.2594 27.7547 29.7069 27.2148L22.0228 19.518L29.7069 11.8339C30.2594 11.294 30.2594 10.3649 29.7069 9.81241C29.1419 9.27251 28.2254 9.25995 27.6855 9.79985L19.9887 17.4966L12.3046 9.79985C11.7773 9.27251 10.823 9.2474 10.2831 9.81241C9.73066 10.3649 9.74321 11.3065 10.2706 11.8339L17.9673 19.518L10.2706 27.2148Z"
     />
   </svg>

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

@@ -26,6 +26,7 @@ import AutoSizer from 'react-virtualized-auto-sizer'
 import { FixedSizeList, ListOnItemsRenderedProps } from 'react-window'
 import InfiniteLoader from 'react-window-infinite-loader'
 import styled from 'styled-components/macro'
+import { ThemedText } from 'theme'
 import { TRANSITION_DURATIONS } from 'theme/styles'
 
 import { WALLET_COLLECTIONS_PAGINATION_LIMIT } from './ProfilePage'
@@ -49,6 +50,11 @@ const SmallLoadingBubble = styled(LoadingBubble)`
   margin-right: 8px;
 `
 
+const MobileMenuHeader = styled(Row)`
+  justify-content: space-between;
+  padding-bottom: 8px;
+`
+
 const LoadingCollectionItem = ({ style }: { style?: CSSProperties }) => {
   return (
     <Row display="flex" justifyContent="space-between" style={style} paddingLeft="12" paddingRight="16">
@@ -117,19 +123,17 @@ export const FilterSidebar = ({
         paddingRight="16"
         width={{ sm: 'full', md: '332', lg: '332' }}
       >
-        <Row width="full" justifyContent="space-between">
-          {isMobile && (
-            <Box
-              as="button"
-              border="none"
-              backgroundColor="transparent"
-              color="textSecondary"
+        {isMobile && (
+          <MobileMenuHeader>
+            <ThemedText.HeadlineSmall>Filter</ThemedText.HeadlineSmall>
+            <XMarkIcon
+              height={28}
+              width={28}
+              fill={themeVars.colors.textPrimary}
               onClick={() => setFiltersExpanded(false)}
-            >
-              <XMarkIcon fill={themeVars.colors.textPrimary} />
-            </Box>
-          )}
-        </Row>
+            />
+          </MobileMenuHeader>
+        )}
         <CollectionSelect
           collections={walletCollections}
           collectionFilters={collectionFilters}