feat: [ListV2] Updated page responsiveness and breakpoints (#5972)

* updated responsiveness for grid

* add sell nfts back header

* input responsiveness

* lint

* remove shrink property

---------
Co-authored-by: Charles Bachmeier <charlie@genie.xyz>

src/graphql/data/__generated__/types-and-hooks.ts

@@ -41,6 +41,7 @@ export enum ActivityType {
   Send = 'SEND',
   Stake = 'STAKE',
   Swap = 'SWAP',
+  Swapx = 'SWAPX',
   Staking = 'Staking',
   Unknown = 'UNKNOWN',
   Unstake = 'UNSTAKE',

src/nft/components/profile/list/ListPage.tsx

@@ -8,16 +8,14 @@ import { SMALL_MEDIA_BREAKPOINT } from 'components/Tokens/constants'
 import { NftListV2Variant, useNftListV2Flag } from 'featureFlags/flags/nftListV2'
 import { ListingButton } from 'nft/components/bag/profile/ListingButton'
 import { approveCollectionRow, getListingState, getTotalEthValue, verifyStatus } from 'nft/components/bag/profile/utils'
-import { BackArrowIcon } from 'nft/components/icons'
-import { headlineLarge, headlineSmall } from 'nft/css/common.css'
-import { themeVars } from 'nft/css/sprinkles.css'
 import { useBag, useIsMobile, useNFTList, useProfilePageState, useSellAsset } from 'nft/hooks'
-import { LIST_PAGE_MARGIN, LIST_PAGE_MARGIN_MOBILE, LIST_PAGE_MARGIN_TABLET } from 'nft/pages/profile/shared'
+import { LIST_PAGE_MARGIN, LIST_PAGE_MARGIN_MOBILE } from 'nft/pages/profile/shared'
 import { looksRareNonceFetcher } from 'nft/queries'
 import { ListingStatus, ProfilePageStateType } from 'nft/types'
 import { fetchPrice, formatEth, formatUsdPrice } from 'nft/utils'
 import { ListingMarkets } from 'nft/utils/listNfts'
 import { useEffect, useMemo, useReducer, useState } from 'react'
+import { ArrowLeft } from 'react-feather'
 import styled, { css } from 'styled-components/macro'
 import { BREAKPOINTS, ThemedText } from 'theme'
 import { Z_INDEX } from 'theme/zIndex'
@@ -28,14 +26,53 @@ import { NFTListingsGrid } from './NFTListingsGrid'
 import { SelectMarketplacesDropdown } from './SelectMarketplacesDropdown'
 import { SetDurationModal } from './SetDurationModal'
 
+const ListingHeader = styled(Column)`
+  gap: 16px;
+  margin-top: 36px;
+
+  @media screen and (min-width: ${BREAKPOINTS.xs}px) {
+    gap: 4px;
+  }
+`
+
+const ArrowContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 4px;
+
+  @media screen and (min-width: ${BREAKPOINTS.sm}px) {
+    height: 40px;
+    width: 40px;
+  }
+`
+
+const BackArrow = styled(ArrowLeft)`
+  height: 16px;
+  width: 16px;
+  cursor: pointer;
+  color: ${({ theme }) => theme.textSecondary};
+
+  @media screen and (min-width: ${BREAKPOINTS.sm}px) {
+    height: 20px;
+    width: 20px;
+  }
+`
+
 const TitleWrapper = styled(Row)`
   gap: 4px;
-  margin-bottom: 18px;
+  margin-bottom: 12px;
   white-space: nowrap;
   width: min-content;
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 28px;
 
-  @media screen and (min-width: ${SMALL_MEDIA_BREAKPOINT}) {
+  @media screen and (min-width: ${BREAKPOINTS.xs}px) {
     margin-bottom: 0px;
+    font-weight: 500;
+    font-size: 28px;
+    line-height: 36px;
   }
 `
 
@@ -60,14 +97,13 @@ const v1Padding = css`
   }
 `
 
-const ListingHeader = styled(Row)`
+const ListingHeaderRow = styled(Row)`
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
-  margin-top: 18px;
 
-  @media screen and (min-width: ${SMALL_MEDIA_BREAKPOINT}) {
-    margin-top: 16px;
+  @media screen and (min-width: ${BREAKPOINTS.sm}px) {
+    padding-left: 40px;
   }
 `
 
@@ -103,7 +139,6 @@ const FloatingConfirmationBar = styled(Row)<{ issues: boolean }>`
   box-shadow: ${({ theme }) => theme.shallowShadow};
 
   @media screen and (max-width: ${BREAKPOINTS.lg}px) {
-    width: calc(100% - ${LIST_PAGE_MARGIN_TABLET * 2}px);
     bottom: 68px;
   }
 
@@ -275,20 +310,23 @@ export const ListPage = () => {
     <Column>
       <MarketWrap isNftListV2={isNftListV2}>
         <ListingHeader>
-          <TitleWrapper>
-            <BackArrowIcon
-              height={isMobile ? 20 : 32}
-              width={isMobile ? 20 : 32}
-              fill={themeVars.colors.textSecondary}
-              onClick={() => setSellPageState(ProfilePageStateType.VIEWING)}
-              cursor="pointer"
-            />
-            <div className={isMobile ? headlineSmall : headlineLarge}>Sell NFTs</div>
-          </TitleWrapper>
-          <ButtonsWrapper>
-            <SelectMarketplacesDropdown setSelectedMarkets={setSelectedMarkets} selectedMarkets={selectedMarkets} />
-            <SetDurationModal />
-          </ButtonsWrapper>
+          <Row>
+            <ArrowContainer>
+              <BackArrow onClick={() => setSellPageState(ProfilePageStateType.VIEWING)} />
+            </ArrowContainer>
+            <ThemedText.BodySmall lineHeight="20px" color="textSecondary">
+              <Trans>My NFTs</Trans>
+            </ThemedText.BodySmall>
+          </Row>
+          <ListingHeaderRow>
+            <TitleWrapper>
+              <Trans>Sell NFTs</Trans>
+            </TitleWrapper>
+            <ButtonsWrapper>
+              <SelectMarketplacesDropdown setSelectedMarkets={setSelectedMarkets} selectedMarkets={selectedMarkets} />
+              <SetDurationModal />
+            </ButtonsWrapper>
+          </ListingHeaderRow>
         </ListingHeader>
         <GridWrapper>
           <NFTListingsGrid selectedMarkets={selectedMarkets} />

src/nft/components/profile/list/MarketplaceRow.tsx

@@ -18,12 +18,22 @@ import { PriceTextInput } from './PriceTextInput'
 import { RoyaltyTooltip } from './RoyaltyTooltip'
 import { RemoveIconWrap } from './shared'
 
-const PastPriceInfo = styled(Column)`
+const LastPriceInfo = styled(Column)`
   text-align: left;
   display: none;
   flex: 1;
 
-  @media screen and (min-width: ${BREAKPOINTS.xl}px) {
+  @media screen and (min-width: ${BREAKPOINTS.lg}px) {
+    display: flex;
+  }
+`
+
+const FloorPriceInfo = styled(Column)`
+  text-align: left;
+  display: none;
+  flex: 1;
+
+  @media screen and (min-width: ${BREAKPOINTS.md}px) {
     display: flex;
   }
 `
@@ -217,18 +227,18 @@ export const MarketplaceRow = ({
 
   return (
     <Row onMouseEnter={toggleMarketRowHovered} onMouseLeave={toggleMarketRowHovered}>
-      <PastPriceInfo>
+      <FloorPriceInfo>
         <ThemedText.BodySmall color="textSecondary" lineHeight="20px">
           {asset.floorPrice ? `${asset.floorPrice.toFixed(3)} ETH` : '-'}
         </ThemedText.BodySmall>
-      </PastPriceInfo>
-      <PastPriceInfo>
+      </FloorPriceInfo>
+      <LastPriceInfo>
         <ThemedText.BodySmall color="textSecondary" lineHeight="20px">
           {asset.lastPrice ? `${asset.lastPrice.toFixed(3)} ETH` : '-'}
         </ThemedText.BodySmall>
-      </PastPriceInfo>
+      </LastPriceInfo>
 
-      <Row flex="3">
+      <Row flex="2">
         {(expandMarketplaceRows || selectedMarkets.length > 1) && (
           <MarketIconsWrapper onMouseEnter={toggleMarketIconHovered} onMouseLeave={toggleMarketIconHovered}>
             {selectedMarkets.map((market, index) => (

src/nft/components/profile/list/NFTListRow.tsx

@@ -42,8 +42,12 @@ const RemoveIconContainer = styled.div`
 const NFTInfoWrapper = styled(Row)`
   align-items: center;
   min-width: 0px;
-  flex: 1.5;
+  flex: 2;
   margin-bottom: auto;
+
+  @media screen and (min-width: ${BREAKPOINTS.md}px) {
+    flex: 1.5;
+  }
 `
 
 const NFTImage = styled.img`

src/nft/components/profile/list/NFTListingsGrid.tsx

@@ -33,7 +33,11 @@ const TableHeader = styled.div`
 `
 
 const NFTHeader = styled.div`
-  flex: 1.5;
+  flex: 2;
+
+  @media screen and (min-width: ${BREAKPOINTS.md}px) {
+    flex: 1.5;
+  }
 `
 
 const PriceHeaders = styled(Row)`
@@ -45,17 +49,26 @@ const PriceHeaders = styled(Row)`
   }
 `
 
-const PriceInfoHeader = styled.div`
+const LastPriceHeader = styled.div`
+  display: none;
+  flex: 1;
+
+  @media screen and (min-width: ${BREAKPOINTS.lg}px) {
+    display: flex;
+  }
+`
+
+const FloorPriceHeader = styled.div`
   display: none;
   flex: 1;
 
-  @media screen and (min-width: ${BREAKPOINTS.xl}px) {
+  @media screen and (min-width: ${BREAKPOINTS.md}px) {
     display: flex;
   }
 `
 
 const DropdownAndHeaderWrapper = styled(Row)`
-  flex: 3;
+  flex: 2;
   gap: 4px;
 `
 
@@ -208,12 +221,12 @@ export const NFTListingsGrid = ({ selectedMarkets }: { selectedMarkets: ListingM
           <Trans>NFT</Trans>
         </NFTHeader>
         <PriceHeaders>
-          <PriceInfoHeader>
+          <FloorPriceHeader>
             <Trans>Floor</Trans>
-          </PriceInfoHeader>
-          <PriceInfoHeader>
+          </FloorPriceHeader>
+          <LastPriceHeader>
             <Trans>Last</Trans>
-          </PriceInfoHeader>
+          </LastPriceHeader>
 
           <DropdownAndHeaderWrapper ref={dropdownRef}>
             <Trans>Price</Trans>

src/nft/components/profile/list/PriceTextInput.tsx

@@ -21,7 +21,7 @@ const PriceTextInputWrapper = styled(Column)`
 const InputWrapper = styled(Row)<{ borderColor: string }>`
   height: 44px;
   color: ${({ theme }) => theme.textTertiary};
-  padding: 4px;
+  padding: 12px;
   border: 2px solid;
   border-radius: 8px;
   border-color: ${({ borderColor }) => borderColor};
@@ -30,7 +30,6 @@ const InputWrapper = styled(Row)<{ borderColor: string }>`
 `
 
 const CurrencyWrapper = styled.div<{ listPrice: number | undefined }>`
-  margin-right: 16px;
   color: ${({ listPrice, theme }) => (listPrice ? theme.textPrimary : theme.textSecondary)};
 `
 
@@ -94,7 +93,6 @@ interface PriceTextInputProps {
   globalOverride: boolean
   warning?: ListingWarning
   asset: WalletAsset
-  shrink?: boolean
 }
 
 export const PriceTextInput = ({
@@ -105,7 +103,6 @@ export const PriceTextInput = ({
   globalOverride,
   warning,
   asset,
-  shrink,
 }: PriceTextInputProps) => {
   const [focused, setFocused] = useState(false)
   const [warningType, setWarningType] = useState(WarningType.NONE)
@@ -152,10 +149,8 @@ export const PriceTextInput = ({
           className={body}
           color={{ placeholder: 'textSecondary', default: 'textPrimary' }}
           placeholder="0"
-          marginRight="0"
-          marginLeft="14"
           backgroundColor="none"
-          style={{ width: shrink ? '54px' : '68px' }}
+          width={{ sm: '54', md: '68' }}
           onFocus={() => setFocused(true)}
           onBlur={() => {
             setFocused(false)

src/nft/css/common.css.ts

@@ -9,7 +9,6 @@ export const center = sprinkles({
 })
 
 // TYPOGRAPHY
-export const headlineLarge = sprinkles({ fontWeight: 'semibold', fontSize: '36', lineHeight: '44' })
 export const headlineMedium = sprinkles({ fontWeight: 'semibold', fontSize: '28', lineHeight: '36' })
 export const headlineSmall = sprinkles({ fontWeight: 'semibold', fontSize: '20', lineHeight: '28' })
 

src/nft/css/sprinkles.css.ts

@@ -76,6 +76,7 @@ const dimensions = {
   '56': '56px',
   '60': '60px',
   '64': '64px',
+  '68': '68px',
   '72': '72px',
   '80': '80px',
   '100': '100px',

src/nft/pages/profile/profile.tsx

@@ -14,7 +14,7 @@ import { useToggleWalletModal } from 'state/application/hooks'
 import styled from 'styled-components/macro'
 import { BREAKPOINTS, ThemedText } from 'theme'
 
-import { LIST_PAGE_MARGIN, LIST_PAGE_MARGIN_MOBILE, LIST_PAGE_MARGIN_TABLET } from './shared'
+import { LIST_PAGE_MARGIN, LIST_PAGE_MARGIN_MOBILE } from './shared'
 
 const ProfilePageWrapper = styled.div`
   height: 100%;
@@ -34,11 +34,6 @@ const LoadedAccountPage = styled.div<{ cartExpanded: boolean; isOnV2ListPage: bo
   );
   margin: 0px ${({ isOnV2ListPage }) => (isOnV2ListPage ? LIST_PAGE_MARGIN : 0)}px;
 
-  @media screen and (max-width: ${BREAKPOINTS.lg}px) {
-    width: calc(100% - ${({ isOnV2ListPage }) => (isOnV2ListPage ? LIST_PAGE_MARGIN_TABLET * 2 : 0)}px);
-    margin: 0px ${({ isOnV2ListPage }) => (isOnV2ListPage ? LIST_PAGE_MARGIN_TABLET : 0)}px;
-  }
-
   @media screen and (max-width: ${BREAKPOINTS.sm}px) {
     width: calc(100% - ${({ isOnV2ListPage }) => (isOnV2ListPage ? LIST_PAGE_MARGIN_MOBILE * 2 : 0)}px);
     margin: 0px ${({ isOnV2ListPage }) => (isOnV2ListPage ? LIST_PAGE_MARGIN_MOBILE : 0)}px;

src/nft/pages/profile/shared.ts

-export const LIST_PAGE_MARGIN = 156
-export const LIST_PAGE_MARGIN_TABLET = 60
+export const LIST_PAGE_MARGIN = 40
 export const LIST_PAGE_MARGIN_MOBILE = 16