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}>
+        <Column gap="4" paddingTop="8" paddingBottom="20">
+          <Row justifyContent="space-between">
+            <Box fontWeight="semibold" className={headlineSmall}>
               Total
             </Box>
-        <Column marginBottom="16">
-          <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}>
+              {`${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/components/bag/BagRow.tsx

 import { BigNumber } from '@ethersproject/bignumber'
+import { formatEther } from '@ethersproject/units'
 import clsx from 'clsx'
 import { TimedLoader } from 'nft/components/bag/TimedLoader'
 import { Box } from 'nft/components/Box'
@@ -6,16 +7,15 @@ import { Column, Row } from 'nft/components/Flex'
 import {
   ChevronDownBagIcon,
   ChevronUpBagIcon,
-  CircularCloseIcon,
   CloseTimerIcon,
   SquareArrowDownIcon,
   SquareArrowUpIcon,
   VerifiedIcon,
 } from 'nft/components/icons'
+import { bodySmall } from 'nft/css/common.css'
 import { loadingBlock } from 'nft/css/loading.css'
 import { GenieAsset, UpdatedGenieAsset } from 'nft/types'
-import { getAssetHref } from 'nft/utils/asset'
-import { formatWeiToDecimal } from 'nft/utils/currency'
+import { ethNumberStandardFormatter, formatWeiToDecimal, getAssetHref } from 'nft/utils'
 import { MouseEvent, useEffect, useReducer, useRef, useState } from 'react'
 import { Link } from 'react-router-dom'
 
@@ -44,13 +44,14 @@ const NoContentContainer = () => (
 
 interface BagRowProps {
   asset: UpdatedGenieAsset
+  usdPrice: number | undefined
   removeAsset: (asset: GenieAsset) => void
   showRemove?: boolean
   grayscale?: boolean
   isMobile: boolean
 }
 
-export const BagRow = ({ asset, removeAsset, showRemove, grayscale, isMobile }: BagRowProps) => {
+export const BagRow = ({ asset, usdPrice, removeAsset, showRemove, grayscale, isMobile }: BagRowProps) => {
   const [cardHovered, setCardHovered] = useState(false)
   const [loadedImage, setImageLoaded] = useState(false)
   const [noImageAvailable, setNoImageAvailable] = useState(!asset.smallImageUrl)
@@ -63,20 +64,6 @@ export const BagRow = ({ asset, removeAsset, showRemove, grayscale, isMobile }:
     <Link to={getAssetHref(asset)} style={{ textDecoration: 'none' }}>
       <Row ref={assetCardRef} className={styles.bagRow} onMouseEnter={handleCardHover} onMouseLeave={handleCardHover}>
         <Box position="relative" display="flex">
-          <Box
-            display={showRemove ? 'block' : 'none'}
-            className={styles.removeAssetOverlay}
-            onClick={(e: MouseEvent) => {
-              e.preventDefault()
-              e.stopPropagation()
-              removeAsset(asset)
-            }}
-            transition="250"
-            style={{ opacity: cardHovered || isMobile ? '1' : '0' }}
-            zIndex="1"
-          >
-            <CircularCloseIcon />
-          </Box>
           {!noImageAvailable && (
             <Box
               as="img"
@@ -95,14 +82,8 @@ export const BagRow = ({ asset, removeAsset, showRemove, grayscale, isMobile }:
           {!loadedImage && <Box position="absolute" className={`${styles.bagRowImage} ${loadingBlock}`} />}
           {noImageAvailable && <NoContentContainer />}
         </Box>
-        <Column
-          overflow="hidden"
-          height="full"
-          justifyContent="space-between"
-          color={grayscale ? 'textSecondary' : 'textPrimary'}
-        >
-          <Column>
-            <Row overflow="hidden" whiteSpace="nowrap" gap="2">
+        <Column overflow="hidden" width="full" color={grayscale ? 'textSecondary' : 'textPrimary'}>
+          <Row overflow="hidden" width="full" justifyContent="space-between" whiteSpace="nowrap" gap="16">
             <Box className={styles.assetName}>{asset.name || asset.tokenId}</Box>
           </Row>
           <Row overflow="hidden" whiteSpace="nowrap" gap="2">
@@ -110,12 +91,38 @@ export const BagRow = ({ asset, removeAsset, showRemove, grayscale, isMobile }:
             {asset.collectionIsVerified && <VerifiedIcon className={styles.icon} />}
           </Row>
         </Column>
-          <Row className={styles.bagRowPrice}>
+        {cardHovered && showRemove && (
+          <Box
+            marginLeft="16"
+            className={styles.removeBagRowButton}
+            onClick={(e) => {
+              e.preventDefault()
+              e.stopPropagation()
+              removeAsset(asset)
+            }}
+          >
+            Remove
+          </Box>
+        )}
+        {(!cardHovered || !showRemove) && (
+          <Column flexShrink="0">
+            <Box className={styles.bagRowPrice}>
               {`${formatWeiToDecimal(
                 asset.updatedPriceInfo ? asset.updatedPriceInfo.ETHPrice : asset.priceInfo.ETHPrice
               )} ETH`}
-          </Row>
+            </Box>
+            <Box className={styles.collectionName}>
+              {`${ethNumberStandardFormatter(
+                usdPrice
+                  ? parseFloat(
+                      formatEther(asset.updatedPriceInfo ? asset.updatedPriceInfo.ETHPrice : asset.priceInfo.ETHPrice)
+                    ) * usdPrice
+                  : usdPrice,
+                true
+              )}`}
+            </Box>
           </Column>
+        )}
       </Row>
     </Link>
   )
@@ -123,12 +130,13 @@ export const BagRow = ({ asset, removeAsset, showRemove, grayscale, isMobile }:
 
 interface PriceChangeBagRowProps {
   asset: UpdatedGenieAsset
+  usdPrice: number | undefined
   markAssetAsReviewed: (asset: UpdatedGenieAsset, toKeep: boolean) => void
   top?: boolean
   isMobile: boolean
 }
 
-export const PriceChangeBagRow = ({ asset, markAssetAsReviewed, top, isMobile }: PriceChangeBagRowProps) => {
+export const PriceChangeBagRow = ({ asset, usdPrice, markAssetAsReviewed, top, isMobile }: PriceChangeBagRowProps) => {
   const isPriceIncrease = BigNumber.from(asset.updatedPriceInfo?.ETHPrice).gt(BigNumber.from(asset.priceInfo.ETHPrice))
   return (
     <Column className={styles.priceChangeColumn} borderTopColor={top ? 'backgroundOutline' : 'transparent'}>
@@ -138,7 +146,9 @@ export const PriceChangeBagRow = ({ asset, markAssetAsReviewed, top, isMobile }:
           asset.priceInfo.ETHPrice
         )} ETH`}</Box>
       </Row>
-      <BagRow asset={asset} removeAsset={() => undefined} isMobile={isMobile} />
+      <Box style={{ marginLeft: '-8px', marginRight: '-8px' }}>
+        <BagRow asset={asset} usdPrice={usdPrice} removeAsset={() => undefined} isMobile={isMobile} />
+      </Box>
       <Row gap="12" justifyContent="space-between">
         <Box
           className={styles.removeButton}
@@ -167,6 +177,7 @@ export const PriceChangeBagRow = ({ asset, markAssetAsReviewed, top, isMobile }:
 
 interface UnavailableAssetsHeaderRowProps {
   assets?: UpdatedGenieAsset[]
+  usdPrice: number | undefined
   clearUnavailableAssets: () => void
   didOpenUnavailableAssets: boolean
   setDidOpenUnavailableAssets: (didOpen: boolean) => void
@@ -199,7 +210,7 @@ const UnavailableAssetsPreview = ({ assets }: UnavailableAssetsPreviewProps) =>
         borderWidth="1px"
         borderColor="backgroundSurface"
         borderRadius="4"
-        style={{ zIndex: assets.length - index }}
+        style={{ zIndex: index }}
         className={styles.grayscaleImage}
       />
     ))}
@@ -208,6 +219,7 @@ const UnavailableAssetsPreview = ({ assets }: UnavailableAssetsPreviewProps) =>
 
 export const UnavailableAssetsHeaderRow = ({
   assets,
+  usdPrice,
   clearUnavailableAssets,
   didOpenUnavailableAssets,
   setDidOpenUnavailableAssets,
@@ -237,24 +249,9 @@ export const UnavailableAssetsHeaderRow = ({
 
   return (
     <Column className={styles.unavailableAssetsContainer}>
-      <Row className={styles.priceChangeRow} justifyContent="space-between">
-        No longer available for sale
-        {!didOpenUnavailableAssets && (
-          <Row
-            position="relative"
-            width="20"
-            height="20"
-            color="textPrimary"
-            justifyContent="center"
-            cursor="pointer"
-            onClick={() => clearUnavailableAssets()}
-          >
-            <TimedLoader />
-            <CloseTimerIcon />
-          </Row>
+      {assets.length === 1 && (
+        <BagRow asset={assets[0]} usdPrice={usdPrice} removeAsset={() => undefined} grayscale isMobile={isMobile} />
       )}
-      </Row>
-      {assets.length === 1 && <BagRow asset={assets[0]} removeAsset={() => undefined} grayscale isMobile={isMobile} />}
       {assets.length > 1 && (
         <Column>
           <Row
@@ -266,16 +263,37 @@ export const UnavailableAssetsHeaderRow = ({
               toggleOpen()
             }}
           >
-            <Row gap="12" fontSize="14" color="textSecondary" fontWeight="normal" style={{ lineHeight: '20px' }}>
+            <Row gap="12" color="textPrimary" className={bodySmall}>
               {!isOpen && <UnavailableAssetsPreview assets={assets.slice(0, 5)} />}
-              {`${assets.length} unavailable NFTs`}
+              No longer available
             </Row>
             <Row color="textSecondary">{isOpen ? <ChevronUpBagIcon /> : <ChevronDownBagIcon />}</Row>
+            {!didOpenUnavailableAssets && (
+              <Row
+                position="relative"
+                width="20"
+                height="20"
+                color="textPrimary"
+                justifyContent="center"
+                cursor="pointer"
+                onClick={() => clearUnavailableAssets()}
+              >
+                <TimedLoader />
+                <CloseTimerIcon />
               </Row>
-          <Column gap="8">
+            )}
+          </Row>
+          <Column gap="8" style={{ marginLeft: '-8px', marginRight: '-8px' }}>
             {isOpen &&
               assets.map((asset) => (
-                <BagRow key={asset.id} asset={asset} removeAsset={() => undefined} grayscale isMobile={isMobile} />
+                <BagRow
+                  key={asset.id}
+                  asset={asset}
+                  usdPrice={usdPrice}
+                  removeAsset={() => undefined}
+                  grayscale
+                  isMobile={isMobile}
+                />
               ))}
           </Column>
         </Column>

src/nft/utils/index.ts

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