fix: total and 'my bag' text style update (#4994)

src/nft/components/bag/BagFooter.tsx

@@ -2,11 +2,12 @@ import { BigNumber } from '@ethersproject/bignumber'
 import Loader from 'components/Loader'
 import { Box } from 'nft/components/Box'
 import { Column, Row } from 'nft/components/Flex'
-import { bodySmall, headlineSmall } from 'nft/css/common.css'
+import { bodySmall } from 'nft/css/common.css'
 import { BagStatus } from 'nft/types'
 import { ethNumberStandardFormatter, formatWeiToDecimal } from 'nft/utils'
 import { useModalIsOpen, useToggleWalletModal } from 'state/application/hooks'
 import { ApplicationModal } from 'state/application/reducer'
+import { ThemedText } from 'theme'
 
 import * as styles from './BagFooter.css'
 
@@ -62,11 +63,13 @@ export const BagFooter = ({
       >
         <Column gap="4" paddingTop="8" paddingBottom="20">
           <Row justifyContent="space-between">
-            <Box fontWeight="semibold" className={headlineSmall}>
-              Total
+            <Box>
+              <ThemedText.HeadlineSmall>Total</ThemedText.HeadlineSmall>
             </Box>
-            <Box fontWeight="semibold" className={headlineSmall}>
-              {`${formatWeiToDecimal(totalEthPrice.toString())} ETH`}
+            <Box>
+              <ThemedText.HeadlineSmall>
+                {formatWeiToDecimal(totalEthPrice.toString())}&nbsp;ETH
+              </ThemedText.HeadlineSmall>
             </Box>
           </Row>
           <Row justifyContent="flex-end" color="textSecondary" className={bodySmall}>

src/nft/components/bag/BagHeader.tsx

@@ -2,6 +2,7 @@ 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 * as styles from './BagHeader.css'
 
@@ -16,7 +17,7 @@ export const BagHeader = ({ numberOfAssets, toggleBag, resetFlow, isProfilePage
   return (
     <Column gap="4" paddingX="32" marginBottom="20">
       <Row className={styles.header}>
-        {isProfilePage ? 'Sell NFTs' : 'My bag'}
+        <ThemedText.HeadlineSmall>{isProfilePage ? 'Sell NFTs' : 'My bag'}</ThemedText.HeadlineSmall>
         <Box display="flex" padding="2" color="textSecondary" cursor="pointer" onClick={toggleBag}>
           <BagCloseIcon />
         </Box>

src/theme/index.tsx

@@ -243,15 +243,36 @@ const TextWrapper = styled(Text)<{ color: keyof AllColors }>`
  * Preset styles of the Rebass Text component
  */
 export const ThemedText = {
+  BodyPrimary(props: TextProps) {
+    return <TextWrapper fontWeight={400} fontSize={16} color={'textPrimary'} {...props} />
+  },
+  BodySecondary(props: TextProps) {
+    return <TextWrapper fontWeight={400} fontSize={16} color={'textSecondary'} {...props} />
+  },
+  HeadlineSmall(props: TextProps) {
+    return <TextWrapper fontWeight={600} fontSize={20} lineHeight="28px" color={'textPrimary'} {...props} />
+  },
+  LargeHeader(props: TextProps) {
+    return <TextWrapper fontWeight={400} fontSize={36} color={'textPrimary'} {...props} />
+  },
+  Link(props: TextProps) {
+    return <TextWrapper fontWeight={600} fontSize={14} color={'accentAction'} {...props} />
+  },
+  MediumHeader(props: TextProps) {
+    return <TextWrapper fontWeight={400} fontSize={20} color={'textPrimary'} {...props} />
+  },
+  SubHeader(props: TextProps) {
+    return <TextWrapper fontWeight={600} fontSize={16} color={'textPrimary'} {...props} />
+  },
+  SubHeaderSmall(props: TextProps) {
+    return <TextWrapper fontWeight={500} fontSize={14} color={'textSecondary'} {...props} />
+  },
   DeprecatedMain(props: TextProps) {
     return <TextWrapper fontWeight={500} color={'deprecated_text2'} {...props} />
   },
   DeprecatedLink(props: TextProps) {
     return <TextWrapper fontWeight={500} color={'deprecated_primary1'} {...props} />
   },
-  Link(props: TextProps) {
-    return <TextWrapper fontWeight={600} fontSize={14} color={'accentAction'} {...props} />
-  },
   DeprecatedLabel(props: TextProps) {
     return <TextWrapper fontWeight={600} color={'deprecated_text1'} {...props} />
   },
@@ -264,33 +285,15 @@ export const ThemedText = {
   DeprecatedBody(props: TextProps) {
     return <TextWrapper fontWeight={400} fontSize={16} color={'deprecated_text1'} {...props} />
   },
-  BodySecondary(props: TextProps) {
-    return <TextWrapper fontWeight={400} fontSize={16} color={'textSecondary'} {...props} />
-  },
-  BodyPrimary(props: TextProps) {
-    return <TextWrapper fontWeight={400} fontSize={16} color={'textPrimary'} {...props} />
-  },
   DeprecatedLargeHeader(props: TextProps) {
     return <TextWrapper fontWeight={600} fontSize={24} {...props} />
   },
-  LargeHeader(props: TextProps) {
-    return <TextWrapper fontWeight={400} fontSize={36} color={'textPrimary'} {...props} />
-  },
   DeprecatedMediumHeader(props: TextProps) {
     return <TextWrapper fontWeight={500} fontSize={20} {...props} />
   },
-  MediumHeader(props: TextProps) {
-    return <TextWrapper fontWeight={400} fontSize={20} color={'textPrimary'} {...props} />
-  },
   DeprecatedSubHeader(props: TextProps) {
     return <TextWrapper fontWeight={400} fontSize={14} {...props} />
   },
-  SubHeader(props: TextProps) {
-    return <TextWrapper fontWeight={600} fontSize={16} color={'textPrimary'} {...props} />
-  },
-  SubHeaderSmall(props: TextProps) {
-    return <TextWrapper fontWeight={500} fontSize={14} color={'textSecondary'} {...props} />
-  },
   DeprecatedSmall(props: TextProps) {
     return <TextWrapper fontWeight={500} fontSize={11} {...props} />
   },