fix: polish controller bar in collection and my nft page (#5069)

* fix

* remove console logs

* remove unused theme

* fixes

src/nft/components/collection/CollectionNfts.tsx

@@ -40,8 +40,7 @@ import { useEffect, useMemo, useRef, useState } from 'react'
 import InfiniteScroll from 'react-infinite-scroll-component'
 import { useInfiniteQuery } from 'react-query'
 import { useLocation } from 'react-router-dom'
-import styled, { useTheme } from 'styled-components/macro'
-import { ThemedText } from 'theme'
+import styled from 'styled-components/macro'
 
 import { CollectionAssetLoading } from './CollectionAssetLoading'
 import { MARKETPLACE_ITEMS } from './MarketplaceSelect'
@@ -55,6 +54,8 @@ interface CollectionNftsProps {
 }
 
 const rarityStatusCache = new Map<string, boolean>()
+const nonRarityIcon = <NonRarityIcon width="20" height="20" viewBox="2 2 22 22" color={vars.color.blue400} />
+const rarityIcon = <RarityIcon width="20" height="20" viewBox="2 2 24 24" color={vars.color.blue400} />
 
 const ActionsContainer = styled.div`
   display: flex;
@@ -172,8 +173,6 @@ export const CollectionNfts = ({ contractAddress, collectionStats, rarityVerifie
   const toggleBag = useBag((state) => state.toggleBag)
   const bagExpanded = useBag((state) => state.bagExpanded)
 
-  const theme = useTheme()
-
   const debouncedMinPrice = useDebounce(minPrice, 500)
   const debouncedMaxPrice = useDebounce(maxPrice, 500)
   const debouncedSearchByNameText = useDebounce(searchByNameText, 500)
@@ -301,25 +300,25 @@ export const CollectionNfts = ({ contractAddress, collectionStats, rarityVerifie
             {
               displayText: 'Low to High',
               onClick: () => setSortBy(SortBy.LowToHigh),
-              icon: <NonRarityIcon width="28" height="28" color={vars.color.blue400} />,
+              icon: nonRarityIcon,
               reverseIndex: 2,
             },
             {
               displayText: 'High to Low',
               onClick: () => setSortBy(SortBy.HighToLow),
-              icon: <NonRarityIcon width="28" height="28" color={vars.color.blue400} />,
+              icon: nonRarityIcon,
               reverseIndex: 1,
             },
             {
               displayText: 'Rare to Common',
               onClick: () => setSortBy(SortBy.RareToCommon),
-              icon: <RarityIcon width="28" height="28" color={vars.color.blue400} />,
+              icon: rarityIcon,
               reverseIndex: 4,
             },
             {
               displayText: 'Common to Rare',
               onClick: () => setSortBy(SortBy.CommonToRare),
-              icon: <RarityIcon width="28" height="28" color={vars.color.blue400} />,
+              icon: rarityIcon,
               reverseIndex: 3,
             },
           ]
@@ -327,13 +326,13 @@ export const CollectionNfts = ({ contractAddress, collectionStats, rarityVerifie
             {
               displayText: 'Low to High',
               onClick: () => setSortBy(SortBy.LowToHigh),
-              icon: <NonRarityIcon width="28" height="28" color={vars.color.blue400} />,
+              icon: nonRarityIcon,
               reverseIndex: 2,
             },
             {
               displayText: 'High to Low',
               onClick: () => setSortBy(SortBy.HighToLow),
-              icon: <NonRarityIcon width="28" height="28" color={vars.color.blue400} />,
+              icon: nonRarityIcon,
               reverseIndex: 1,
             },
           ],
@@ -453,6 +452,7 @@ export const CollectionNfts = ({ contractAddress, collectionStats, rarityVerifie
                 <SweepButton
                   toggled={sweepIsOpen}
                   disabled={!buyNow}
+                  className={buttonTextMedium}
                   onClick={() => {
                     if (!buyNow || hasErc1155s) return
                     if (!sweepIsOpen) {
@@ -462,16 +462,8 @@ export const CollectionNfts = ({ contractAddress, collectionStats, rarityVerifie
                     setSweepOpen(!sweepIsOpen)
                   }}
                 >
-                  <SweepIcon width="24px" height="24px" />
-                  <ThemedText.BodyPrimary
-                    fontWeight={600}
-                    color={sweepIsOpen && buyNow ? theme.white : theme.textPrimary}
-                    lineHeight="20px"
-                    marginTop="2px"
-                    marginBottom="2px"
-                  >
-                    Sweep
-                  </ThemedText.BodyPrimary>
+                  <SweepIcon viewBox="0 0 24 24" width="20px" height="20px" />
+                  Sweep
                 </SweepButton>
               )
             ) : null}

src/nft/components/collection/FilterButton.tsx

@@ -3,6 +3,7 @@ import { Box } from 'nft/components/Box'
 import * as styles from 'nft/components/collection/FilterButton.css'
 import { Row } from 'nft/components/Flex'
 import { FilterIcon } from 'nft/components/icons'
+import { buttonTextMedium } from 'nft/css/common.css'
 import { useCollectionFilters, useIsCollectionLoading, useWalletCollections } from 'nft/hooks'
 import { putCommas } from 'nft/utils/putCommas'
 import { useLocation } from 'react-router-dom'
@@ -66,12 +67,16 @@ export const FilterButton = ({
           )}
 
           <FilterIcon
-            style={{ marginBottom: '-4px', paddingRight: `${!isFiltersExpanded || showFilterBadge ? '6px' : '0px'}` }}
+            style={{
+              marginBottom: '-4px',
+              color: 'textPrimary',
+              paddingRight: `${!isFiltersExpanded || showFilterBadge ? '6px' : '0px'}`,
+            }}
           />
         </>
       )}
 
-      {!isMobile && !isFiltersExpanded && 'Filter'}
+      <span className={buttonTextMedium}> {!isMobile && !isFiltersExpanded && 'Filter'}</span>
 
       {showFilterBadge && !isMobile ? (
         <Box display="inline-block" position="relative">
@@ -80,7 +85,7 @@ export const FilterButton = ({
               •
             </Box>
           )}
-          <Box paddingLeft={!isFiltersExpanded ? '12' : '2'}>
+          <Box className={buttonTextMedium} paddingLeft={!isFiltersExpanded ? '12' : '2'}>
             {collectionCount > 0 ? putCommas(collectionCount) : 0} results
           </Box>
         </Box>

src/nft/components/common/SortDropdown/SortDropdown.tsx

@@ -66,7 +66,7 @@ export const SortDropdown = ({
         fontSize="14"
         borderRadius="12"
         borderStyle={isOpen && !mini ? 'solid' : 'none'}
-        background={mini ? 'none' : 'backgroundModule'}
+        background={mini ? 'none' : 'backgroundInteractive'}
         borderColor="backgroundOutline"
         borderWidth="1px"
         borderBottomLeftRadius={isOpen ? '0' : undefined}
@@ -84,7 +84,7 @@ export const SortDropdown = ({
       >
         {!isCollectionStatsLoading && (
           <>
-            <Box display="flex" alignItems="center">
+            <Box display="flex" alignItems="center" color="textPrimary">
               {!isOpen && reversable && (
                 <Row
                   onClick={(e) => {
@@ -138,7 +138,7 @@ export const SortDropdown = ({
         right={inFilters ? '16' : 'auto'}
         paddingBottom="8"
         fontSize="14"
-        background="backgroundModule"
+        background="backgroundInteractive"
         borderStyle="solid"
         borderColor="backgroundOutline"
         borderWidth="1px"
@@ -218,7 +218,7 @@ const DropDownItem = ({
       cursor="pointer"
     >
       {option.icon && (
-        <Box width="28" height="28">
+        <Box width="20" height="20">
           {option.icon}
         </Box>
       )}

src/nft/components/icons.tsx

@@ -549,10 +549,10 @@ export const ClockIconFilled = (props: SVGProps) => {
 }
 
 export const ArrowsIcon = () => (
-  <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M8.5166 5.71191C8.91211 5.29883 9.52734 5.30762 9.91406 5.71191L14.3438 10.2471C14.5195 10.4229 14.6338 10.6953 14.6338 10.9326C14.6338 11.4863 14.2471 11.8643 13.7021 11.8643C13.4385 11.8643 13.2275 11.7764 13.0518 11.5918L11.2412 9.71094L10.0811 8.375L10.1514 10.2383L10.1514 21.6465C10.1514 22.1914 9.75586 22.5869 9.21094 22.5869C8.66602 22.5869 8.2793 22.1914 8.2793 21.6465L8.2793 10.2383L8.34082 8.375L7.18945 9.71094L5.37891 11.5918C5.20313 11.7764 4.9834 11.8643 4.71973 11.8643C4.18359 11.8643 3.79688 11.4863 3.79688 10.9326C3.79688 10.6953 3.91113 10.4229 4.08691 10.2471L8.5166 5.71191ZM20.1533 22.2793C19.7578 22.6924 19.1426 22.6836 18.7559 22.2793L14.3262 17.7529C14.1504 17.5684 14.0361 17.2959 14.0361 17.0586C14.0361 16.5137 14.4229 16.1357 14.9678 16.1357C15.2227 16.1357 15.4424 16.2236 15.6182 16.3994L17.4287 18.2803L18.5801 19.6162L18.5186 17.7529L18.5186 6.34473C18.5186 5.80859 18.9141 5.4043 19.459 5.4043C19.9951 5.4043 20.3906 5.80859 20.3906 6.34473L20.3906 17.7529L20.3291 19.6162L21.4805 18.2803L23.291 16.3994C23.4668 16.2236 23.6865 16.1357 23.9414 16.1357C24.4863 16.1357 24.873 16.5137 24.873 17.0586C24.873 17.2959 24.7588 17.5684 24.583 17.7529L20.1533 22.2793Z"
-      fill="#4673FA"
+      fill="currentColor"
     />
   </svg>
 )
@@ -567,10 +567,10 @@ export const ListingEqualsIcon = (props: SVGProps) => (
 )
 
 export const ReversedArrowsIcon = () => (
-  <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M19.4834 5.71191C19.0879 5.29883 18.4727 5.30762 18.0859 5.71191L13.6562 10.2471C13.4805 10.4229 13.3662 10.6953 13.3662 10.9326C13.3662 11.4863 13.7529 11.8643 14.2979 11.8643C14.5615 11.8643 14.7725 11.7764 14.9482 11.5918L16.7588 9.71094L17.9189 8.375L17.8486 10.2383L17.8486 21.6465C17.8486 22.1914 18.2441 22.5869 18.7891 22.5869C19.334 22.5869 19.7207 22.1914 19.7207 21.6465L19.7207 10.2383L19.6592 8.375L20.8105 9.71094L22.6211 11.5918C22.7969 11.7764 23.0166 11.8643 23.2803 11.8643C23.8164 11.8643 24.2031 11.4863 24.2031 10.9326C24.2031 10.6953 24.0889 10.4229 23.9131 10.2471L19.4834 5.71191ZM7.84668 22.2793C8.24218 22.6924 8.85742 22.6836 9.24414 22.2793L13.6738 17.7529C13.8496 17.5684 13.9639 17.2959 13.9639 17.0586C13.9639 16.5137 13.5771 16.1357 13.0322 16.1357C12.7773 16.1357 12.5576 16.2236 12.3818 16.3994L10.5713 18.2803L9.41992 19.6162L9.48144 17.7529L9.48144 6.34473C9.48144 5.80859 9.08594 5.4043 8.54101 5.4043C8.00488 5.4043 7.60937 5.80859 7.60937 6.34473L7.60937 17.7529L7.6709 19.6162L6.51953 18.2803L4.70898 16.3994C4.5332 16.2236 4.31347 16.1357 4.05859 16.1357C3.51367 16.1357 3.12695 16.5137 3.12695 17.0586C3.12695 17.2959 3.24121 17.5684 3.41699 17.7529L7.84668 22.2793Z"
-      fill="#4673FA"
+      fill="currentColor"
     />
   </svg>
 )
@@ -924,10 +924,10 @@ export const CornerDownLeftIcon = (props: SVGProps) => (
 )
 
 export const FilterIcon = (props: SVGProps) => (
-  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width="20" height="20" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path
       d="M18.3332 2.5H1.6665L8.33317 10.3833V15.8333L11.6665 17.5V10.3833L18.3332 2.5Z"
-      stroke="white"
+      stroke="currentColor"
       strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"

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

@@ -39,7 +39,7 @@ const SellModeButton = styled.button<{ active: boolean }>`
   gap: 8px;
   cursor: pointer;
   background-color: ${({ theme, active }) => (active ? theme.accentAction : theme.backgroundInteractive)};
-  color: #fff;
+  color: ${({ theme }) => theme.textPrimary};
   border: none;
   outline: none;
   &:hover {
@@ -198,7 +198,7 @@ export const ProfilePage = () => {
                   />
                   <Row gap="8" flexWrap="nowrap">
                     {isSellMode && <SelectAllButton />}
-                    <SellModeButton active={isSellMode} onClick={handleSellModeClick}>
+                    <SellModeButton className={buttonTextMedium} active={isSellMode} onClick={handleSellModeClick}>
                       <TagIcon height={20} width={20} />
                       Sell
                     </SellModeButton>