fix: update bag header layout (#5005)

* fix: update-bag-header

* pr feedback

src/nft/components/bag/BagHeader.css.ts

 import { style } from '@vanilla-extract/css'
 import { headlineSmall } from 'nft/css/common.css'
-import { sprinkles, vars } from 'nft/css/sprinkles.css'
+import { sprinkles } from 'nft/css/sprinkles.css'
 
 export const header = style([
   headlineSmall,
@@ -12,16 +12,3 @@ export const header = style([
     lineHeight: '24px',
   },
 ])
-
-export const clearAll = style([
-  sprinkles({
-    color: 'textTertiary',
-    cursor: 'pointer',
-    fontWeight: 'semibold',
-  }),
-  {
-    ':hover': {
-      color: vars.color.blue400,
-    },
-  },
-])

src/nft/components/bag/BagHeader.tsx

@@ -2,10 +2,29 @@ import { Box } from 'nft/components/Box'
 import { Column, Row } from 'nft/components/Flex'
 import { BagCloseIcon } from 'nft/components/icons'
 import { roundAndPluralize } from 'nft/utils/roundAndPluralize'
-import { ThemedText } from 'theme'
+import styled from 'styled-components/macro'
+import { ButtonText, ThemedText } from 'theme'
 
 import * as styles from './BagHeader.css'
 
+const ClearButton = styled(ButtonText)`
+  color: ${({ theme }) => theme.textSecondary};
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 16px;
+  transition: 150ms ease color;
+
+  :hover {
+    color: ${({ theme }) => theme.accentActive};
+  }
+`
+const ControlRow = styled.div`
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+`
 interface BagHeaderProps {
   numberOfAssets: number
   toggleBag: () => void
@@ -18,23 +37,15 @@ export const BagHeader = ({ numberOfAssets, toggleBag, resetFlow, isProfilePage
     <Column gap="4" paddingX="32" marginBottom="20">
       <Row className={styles.header}>
         <ThemedText.HeadlineSmall>{isProfilePage ? 'Sell NFTs' : 'My bag'}</ThemedText.HeadlineSmall>
-        <Box display="flex" padding="2" color="textSecondary" cursor="pointer" onClick={toggleBag}>
+        <Box display="flex" padding="2" color="textPrimary" cursor="pointer" onClick={toggleBag}>
           <BagCloseIcon />
         </Box>
       </Row>
       {numberOfAssets > 0 && (
-        <Box fontSize="14" fontWeight="normal" style={{ lineHeight: '20px' }} color="textPrimary">
-          {roundAndPluralize(numberOfAssets, 'NFT')} ·{' '}
-          <Box
-            as="span"
-            className={styles.clearAll}
-            onClick={() => {
-              resetFlow()
-            }}
-          >
-            Clear all
-          </Box>
-        </Box>
+        <ControlRow>
+          <ThemedText.BodyPrimary>{roundAndPluralize(numberOfAssets, 'NFT')}</ThemedText.BodyPrimary>
+          <ClearButton onClick={resetFlow}>Clear all</ClearButton>
+        </ControlRow>
       )}
     </Column>
   )