style: updating bag styles (#4724)

* updating footer

* bag optimizations

* correct margins for price change rows

* pay button color

* adding fiat values

* using bodySmall

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

@@ -17,7 +17,7 @@ export const bagContainer = style([
   {
     '@media': {
       [`(min-width: ${breakpoints.md}px)`]: {
-        width: '316px',
+        width: '360px',
         height: 'calc(100vh - 72px)',
       },
     },
@@ -26,7 +26,7 @@ export const bagContainer = style([
 
 export const assetsContainer = style([
   sprinkles({
-    paddingX: '32',
+    paddingX: '16',
     maxHeight: 'full',
     overflowY: 'scroll',
   }),

src/nft/components/bag/Bag.tsx

@@ -323,6 +323,7 @@ const Bag = () => {
                 {unavailableAssets.length > 0 && (
                   <UnavailableAssetsHeaderRow
                     assets={unavailableAssets}
+                    usdPrice={fetchedPriceData}
                     clearUnavailableAssets={() => setItemsInBag(availableItems)}
                     didOpenUnavailableAssets={didOpenUnavailableAssets}
                     setDidOpenUnavailableAssets={setDidOpenUnavailableAssets}
@@ -333,6 +334,7 @@ const Bag = () => {
                   <PriceChangeBagRow
                     key={asset.id}
                     asset={asset}
+                    usdPrice={fetchedPriceData}
                     markAssetAsReviewed={markAssetAsReviewed}
                     top={index === 0 && unavailableAssets.length === 0}
                     isMobile={isMobile}
@@ -344,6 +346,7 @@ const Bag = () => {
                   <BagRow
                     key={asset.id}
                     asset={asset}
+                    usdPrice={fetchedPriceData}
                     removeAsset={removeAssetFromBag}
                     showRemove={true}
                     isMobile={isMobile}

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

@@ -9,7 +9,7 @@ export const footerContainer = sprinkles({
 
 export const footer = style([
   sprinkles({
-    background: 'backgroundSurface',
+    background: 'backgroundModule',
     color: 'textPrimary',
     paddingX: '16',
     paddingY: '12',
@@ -38,7 +38,6 @@ export const payButton = style([
   body,
   sprinkles({
     background: 'blue400',
-    color: 'textPrimary',
     border: 'none',
     borderRadius: '12',
     paddingY: '12',
@@ -54,19 +53,3 @@ export const payButton = style([
     },
   },
 ])
-
-export const ethPill = style([
-  sprinkles({
-    background: 'backgroundSurface',
-    gap: '8',
-    paddingY: '4',
-    paddingLeft: '4',
-    paddingRight: '12',
-    fontSize: '20',
-    fontWeight: 'semibold',
-    borderRadius: 'round',
-  }),
-  {
-    lineHeight: '24px',
-  },
-])

src/nft/components/bag/BagFooter.tsx

 import { BigNumber } from '@ethersproject/bignumber'
-import ethereumLogoUrl from 'assets/images/ethereum-logo.png'
 import Loader from 'components/Loader'
 import { Box } from 'nft/components/Box'
 import { Column, Row } from 'nft/components/Flex'
-import { bodySmall, headlineMedium, subheadSmall } from 'nft/css/common.css'
+import { bodySmall, headlineSmall } from 'nft/css/common.css'
 import { BagStatus } from 'nft/types'
-import { ethNumberStandardFormatter, formatWeiToDecimal } from 'nft/utils/currency'
+import { ethNumberStandardFormatter, formatWeiToDecimal } from 'nft/utils'
 import { useModalIsOpen, useToggleWalletModal } from 'state/application/hooks'
 import { ApplicationModal } from 'state/application/reducer'
 
@@ -61,20 +60,18 @@ export const BagFooter = ({
         borderTopRightRadius={showWarning ? '0' : '12'}
         className={styles.footer}
       >
-        <Box marginBottom="8" style={{ lineHeight: '20px', opacity: '0.54' }} className={subheadSmall}>
-          Total
-        </Box>
-        <Column marginBottom="16">
+        <Column gap="4" paddingTop="8" paddingBottom="20">
           <Row justifyContent="space-between">
-            <Box className={headlineMedium}>{`${formatWeiToDecimal(totalEthPrice.toString())}`}</Box>
-            <Row className={styles.ethPill}>
-              <Box as="img" src={ethereumLogoUrl} alt="Ethereum" width="24" height="24" />
-              ETH
-            </Row>
+            <Box fontWeight="semibold" className={headlineSmall}>
+              Total
+            </Box>
+            <Box fontWeight="semibold" className={headlineSmall}>
+              {`${formatWeiToDecimal(totalEthPrice.toString())} ETH`}
+            </Box>
           </Row>
-          <Box fontWeight="normal" style={{ lineHeight: '20px', opacity: '0.6' }} className={bodySmall}>
+          <Row justifyContent="flex-end" color="textSecondary" className={bodySmall}>
             {`${ethNumberStandardFormatter(totalUsdPrice, true)}`}
-          </Box>
+          </Row>
         </Column>
         <Row
           as="button"
@@ -89,7 +86,7 @@ export const BagFooter = ({
             }
           }}
         >
-          {isPending && <Loader size="20px" stroke="backgroundSurface" />}
+          {isPending && <Loader size="20px" stroke="white" />}
           {!isConnected || walletModalIsOpen
             ? 'Connect wallet'
             : bagStatus === BagStatus.FETCHING_FINAL_ROUTE || bagStatus === BagStatus.CONFIRMING_IN_WALLET

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

@@ -5,7 +5,8 @@ import { sprinkles, themeVars, vars } from 'nft/css/sprinkles.css'
 export const bagRow = style([
   sprinkles({
     color: 'textPrimary',
-    padding: '4',
+    paddingX: '12',
+    paddingY: '8',
     gap: '12',
     cursor: 'pointer',
     height: 'full',
@@ -15,7 +16,7 @@ export const bagRow = style([
     marginLeft: '-4px',
     marginRight: '-4px',
     ':hover': {
-      background: themeVars.colors.backgroundOutline,
+      background: themeVars.colors.backgroundModule,
     },
   },
 ])
@@ -25,6 +26,7 @@ export const unavailableAssetsContainer = sprinkles({
   gap: '12',
   color: 'textPrimary',
   paddingY: '16',
+  marginX: '8',
   borderStyle: 'solid',
   borderWidth: '1px',
   borderColor: 'transparent',
@@ -38,6 +40,7 @@ export const priceChangeColumn = sprinkles({
   gap: '8',
   color: 'textPrimary',
   paddingY: '16',
+  marginX: '8',
   borderStyle: 'solid',
   borderWidth: '1px',
   borderColor: 'transparent',
@@ -47,15 +50,11 @@ export const priceChangeColumn = sprinkles({
 })
 
 export const priceChangeRow = style([
+  bodySmall,
   sprinkles({
-    color: 'textTertiary',
+    color: 'gold',
     gap: '4',
-    fontSize: '14',
-    fontWeight: 'normal',
   }),
-  {
-    lineHeight: '20px',
-  },
 ])
 
 export const unavailableAssetRow = style([
@@ -113,9 +112,20 @@ export const removeButton = style([
   },
 ])
 
+export const removeBagRowButton = style([
+  buttonTextSmall,
+  sprinkles({
+    background: 'backgroundInteractive',
+    color: 'textPrimary',
+    paddingX: '14',
+    paddingY: '12',
+    borderRadius: '12',
+  }),
+])
+
 export const bagRowImage = sprinkles({
-  width: '72',
-  height: '72',
+  width: '56',
+  height: '56',
   borderRadius: '8',
 })
 
@@ -132,19 +142,12 @@ export const unavailableImage = style([
   }),
 ])
 
-export const removeAssetOverlay = style([
-  sprinkles({
-    position: 'absolute',
-    right: '4',
-    top: '4',
-  }),
-])
-
 export const bagRowPrice = style([
   sprinkles({
     gap: '4',
     fontSize: '16',
-    fontWeight: 'normal',
+    fontWeight: 'semibold',
+    flexShrink: '0',
   }),
   {
     lineHeight: '24px',
@@ -153,27 +156,25 @@ export const bagRowPrice = style([
 
 export const assetName = style([
   sprinkles({
-    fontSize: '14',
-    fontWeight: 'semibold',
+    fontSize: '16',
+    fontWeight: 'medium',
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
   }),
   {
-    lineHeight: '20px',
+    lineHeight: '24px',
   },
 ])
 
 export const collectionName = style([
-  buttonTextSmall,
+  bodySmall,
   sprinkles({
     overflow: 'hidden',
     whiteSpace: 'nowrap',
     textOverflow: 'ellipsis',
+    color: 'textSecondary',
   }),
-  {
-    lineHeight: '20px',
-  },
 ])
 
 export const icon = sprinkles({

src/nft/utils/index.ts

+export * from './asset'
 export * from './buildActivityAsset'
 export * from './buildSellObject'
 export * from './calcPoolPrice'