feat: List Page (#5323)

* working dropdown button

* memo text

* working dropdown modal

* click outside

* move grid to its own file

* add file

* re-organized page layout

* header updates

* text change

* margin

* ETH

* text input

* respond to comments

* move listinggrid to its own file

* add file

* organize imports

* remove 0 margin

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

src/nft/components/icons.tsx

@@ -45,7 +45,7 @@ export const ChevronUpIcon = ({
 )
 
 export const BackArrowIcon = (props: SVGProps) => (
-  <svg {...props} xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28">
+  <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" {...props}>
     <path d="M5.676 13.645c0 .263.114.527.316.72l5.801 5.792c.21.202.44.3.694.3.554 0 .958-.396.958-.933a.934.934 0 00-.29-.694l-1.977-2.004-2.55-2.329 2.049.123h10.652c.58 0 .985-.404.985-.975 0-.58-.405-.985-.985-.985H10.677l-2.04.123 2.54-2.329 1.978-2.004a.934.934 0 00.29-.694c0-.536-.404-.932-.958-.932-.255 0-.492.097-.72.317l-5.775 5.774a1.012 1.012 0 00-.316.73z" />
   </svg>
 )

src/nft/components/profile/list/ListPage.css.ts

@@ -31,7 +31,7 @@ export const dropdown = style({
 
 export const removeAsset = style({
   top: '31px',
-  left: '15px',
+  left: '8px',
 })
 
 export const removeMarketplace = style({

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

+import { SMALL_MEDIA_BREAKPOINT } from 'components/Tokens/constants'
 import { ListingButton } from 'nft/components/bag/profile/ListingButton'
 import { getListingState } from 'nft/components/bag/profile/utils'
-import { Box } from 'nft/components/Box'
 import { Column, Row } from 'nft/components/Flex'
 import { BackArrowIcon } from 'nft/components/icons'
+import { headlineLarge, headlineSmall } from 'nft/css/common.css'
 import { themeVars } from 'nft/css/sprinkles.css'
-import { useBag, useNFTList, useProfilePageState, useSellAsset } from 'nft/hooks'
+import { useBag, useIsMobile, useNFTList, useProfilePageState, useSellAsset } from 'nft/hooks'
 import { ListingStatus, ProfilePageStateType } from 'nft/types'
 import { ListingMarkets } from 'nft/utils/listNfts'
 import { useEffect, useState } from 'react'
@@ -16,11 +17,42 @@ import { SetDurationModal } from './SetDurationModal'
 
 const MarketWrap = styled.section`
   gap: 48px;
-  padding-left: 18px;
-  padding-right: 48x;
-  margin-left: auto;
-  margin-right: auto;
+  margin: 0px auto;
+  padding: 0px 16px;
   max-width: 1200px;
+  width: 100%;
+
+  @media screen and (min-width: ${SMALL_MEDIA_BREAKPOINT}) {
+    padding: 0px 44px;
+  }
+`
+
+const ListingHeader = 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: 40px;
+  }
+`
+
+const GridWrapper = styled.div`
+  margin-top: 24px;
+
+  @media screen and (min-width: ${SMALL_MEDIA_BREAKPOINT}) {
+    margin-left: 40px;
+  }
+`
+
+const MobileListButtonWrapper = styled.div`
+  display: flex;
+  margin: 14px 16px 32px 16px;
+
+  @media screen and (min-width: ${SMALL_MEDIA_BREAKPOINT}) {
+    display: none;
+  }
 `
 
 export const ListPage = () => {
@@ -32,6 +64,7 @@ export const ListPage = () => {
   const collectionsRequiringApproval = useNFTList((state) => state.collectionsRequiringApproval)
   const listingStatus = useNFTList((state) => state.listingStatus)
   const setListingStatus = useNFTList((state) => state.setListingStatus)
+  const isMobile = useIsMobile()
 
   useEffect(() => {
     const state = getListingState(collectionsRequiringApproval, listings)
@@ -53,31 +86,31 @@ export const ListPage = () => {
   }, [selectedMarkets])
 
   return (
-    <Column display="flex" flexWrap="nowrap">
-      <Column marginLeft="14" display="flex">
-        <Box
-          aria-label="Back"
-          as="button"
-          border="none"
-          onClick={() => setSellPageState(ProfilePageStateType.VIEWING)}
-          type="button"
-          backgroundColor="transparent"
-          cursor="pointer"
-          width="min"
-        >
-          <BackArrowIcon fill={themeVars.colors.textSecondary} />
-        </Box>
-      </Column>
+    <Column>
       <MarketWrap>
-        <Row flexWrap={{ sm: 'wrap', lg: 'nowrap' }}>
-          <SelectMarketplacesDropdown setSelectedMarkets={setSelectedMarkets} selectedMarkets={selectedMarkets} />
-          <SetDurationModal />
-        </Row>
-        <NFTListingsGrid selectedMarkets={selectedMarkets} />
+        <ListingHeader>
+          <Row gap="4" marginBottom={{ sm: '18', md: '0' }}>
+            <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>
+          </Row>
+          <Row gap="12">
+            <SelectMarketplacesDropdown setSelectedMarkets={setSelectedMarkets} selectedMarkets={selectedMarkets} />
+            <SetDurationModal />
+          </Row>
+        </ListingHeader>
+        <GridWrapper>
+          <NFTListingsGrid selectedMarkets={selectedMarkets} />
+        </GridWrapper>
       </MarketWrap>
-      <Box display={{ sm: 'flex', md: 'none' }} marginTop="14" marginX="16" marginBottom="32">
+      <MobileListButtonWrapper>
         <ListingButton onClick={toggleBag} buttonText="Continue listing" />
-      </Box>
+      </MobileListButtonWrapper>
     </Column>
   )
 }

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

@@ -3,7 +3,7 @@ import { SortDropdown } from 'nft/components/common/SortDropdown'
 import { Column, Row } from 'nft/components/Flex'
 import { AttachPriceIcon, EditPriceIcon, RowsCollpsedIcon, RowsExpandedIcon, VerifiedIcon } from 'nft/components/icons'
 import { NumericInput } from 'nft/components/layout/Input'
-import { badge, body, bodySmall, headlineSmall, subheadSmall } from 'nft/css/common.css'
+import { badge, body, bodySmall, subheadSmall } from 'nft/css/common.css'
 import { useSellAsset } from 'nft/hooks'
 import { DropDownOption, ListingMarket, ListingWarning, WalletAsset } from 'nft/types'
 import { formatEth, formatUsdPrice } from 'nft/utils/currency'
@@ -43,47 +43,46 @@ export const NFTListingsGrid = ({ selectedMarkets }: { selectedMarkets: ListingM
 
   return (
     <Column>
-      <Row className={headlineSmall}>Create your listings</Row>
       <Row marginTop="20">
         <Column
           marginLeft={selectedMarkets.length > 1 ? '36' : '0'}
           transition="500"
-          className={badge}
+          className={bodySmall}
           color="textSecondary"
           flex="2"
         >
-          YOUR NFTS
+          NFT
         </Column>
-        <Row flex={{ sm: '1', md: '3' }}>
-          <Column className={subheadSmall} style={{ flex: '1.5' }}>
+        <Row flex={{ sm: '1.5', md: '3' }}>
+          <Column className={subheadSmall} flex="1.5">
             <SortDropdown dropDownOptions={priceDropdownOptions} mini miniPrompt="Set price by" />
           </Column>
           <Column
-            className={badge}
+            className={bodySmall}
             color="textSecondary"
             flex="1"
             display={{ sm: 'none', md: 'flex' }}
             textAlign="right"
           >
-            MARKETPLACE FEE
+            Marketplace fee
           </Column>
           <Column
-            className={badge}
+            className={bodySmall}
             color="textSecondary"
             flex="1"
             display={{ sm: 'none', md: 'flex' }}
             textAlign="right"
           >
-            ROYALTIES
+            Royalties
           </Column>
           <Column
-            className={badge}
+            className={bodySmall}
             color="textSecondary"
             style={{ flex: '1.5' }}
             display={{ sm: 'none', md: 'flex' }}
             textAlign="right"
           >
-            YOU RECEIVE
+            You receive
           </Column>
         </Row>
       </Row>
@@ -263,7 +262,7 @@ const EthPriceDisplay = ({ ethPrice = 0 }: { ethPrice?: number }) => {
             {formatUsdPrice(ethPrice * ethConversion)}
           </Box>
         ) : (
-          '- Eth'
+          '- ETH'
         )}
       </Row>
     </Column>

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

+import { SMALL_MEDIA_BREAKPOINT } from 'components/Tokens/constants'
 import { useOnClickOutside } from 'hooks/useOnClickOutside'
 import { Column, Row } from 'nft/components/Flex'
 import { ChevronUpIcon } from 'nft/components/icons'
 import { Checkbox } from 'nft/components/layout/Checkbox'
 import { buttonTextMedium, caption } from 'nft/css/common.css'
+import { themeVars } from 'nft/css/sprinkles.css'
 import { ListingMarket } from 'nft/types'
 import { ListingMarkets } from 'nft/utils/listNfts'
 import { Dispatch, FormEvent, useMemo, useReducer, useRef } from 'react'
@@ -43,6 +45,7 @@ interface MarketplaceRowProps {
 const MarketplaceRow = ({ market, setSelectedMarkets, selectedMarkets }: MarketplaceRowProps) => {
   const isSelected = selectedMarkets.includes(market)
   const [hovered, toggleHovered] = useReducer((s) => !s, false)
+
   const toggleSelected = () => {
     if (selectedMarkets.length === 1 && isSelected) return
     isSelected
@@ -74,13 +77,16 @@ const MarketplaceRow = ({ market, setSelectedMarkets, selectedMarkets }: Marketp
 const HeaderButtonWrap = styled(Row)`
   padding: 12px;
   border-radius: 12px;
-  width: 220px;
+  width: 180px;
   justify-content: space-between;
   background: ${({ theme }) => theme.backgroundModule};
   cursor: pointer;
   &:hover {
     background-color: ${({ theme }) => theme.backgroundInteractive};
   }
+  @media screen and (min-width: ${SMALL_MEDIA_BREAKPOINT}) {
+    width: 220px;
+  }
 `
 
 const HeaderButtonContentWrapper = styled.div`
@@ -101,6 +107,7 @@ const MarketIcon = styled.img<{ index: number; totalSelected: number }>`
 const Chevron = styled(ChevronUpIcon)<{ isOpen: boolean }>`
   height: 20px;
   width: 20px;
+  fill: ${({ theme }) => theme.textPrimary};
   transition: ${({
     theme: {
       transition: { duration },
@@ -121,7 +128,7 @@ const DropdownWrapper = styled(Column)<{ isOpen: boolean }>`
   display: ${({ isOpen }) => (isOpen ? 'flex' : 'none')};
   position: absolute;
   top: 52px;
-  width: 220px;
+  width: 100%;
   border-radius: 12px;
   gap: 12px;
   z-index: ${Z_INDEX.modalBackdrop};
@@ -159,7 +166,7 @@ export const SelectMarketplacesDropdown = ({
           {dropdownDisplayText}
         </HeaderButtonContentWrapper>
 
-        <Chevron isOpen={isOpen} />
+        <Chevron isOpen={isOpen} secondaryColor={themeVars.colors.textPrimary} />
       </HeaderButtonWrap>
       <DropdownWrapper isOpen={isOpen}>
         {ListingMarkets.map((market) => {

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

@@ -13,6 +13,7 @@ import { ThemedText } from 'theme'
 
 const ModalWrapper = styled(Column)`
   gap: 4px;
+  position: relative;
 `
 
 const InputWrapper = styled(Row)<{ isInvalid: boolean }>`
@@ -40,6 +41,8 @@ const DropdownWrapper = styled(ThemedText.BodyPrimary)`
 const ErrorMessage = styled(Row)`
   color: ${({ theme }) => theme.accentCritical};
   gap: 4px;
+  position: absolute;
+  top: 44px;
 `
 
 const WarningIcon = styled(AlertTriangle)`
@@ -108,6 +111,7 @@ export const SetDurationModal = () => {
       <InputWrapper isInvalid={errorState !== ErrorState.valid}>
         <NumericInput
           as="input"
+          type="number"
           pattern="[0-9]"
           borderStyle="none"
           className={bodySmall}

src/nft/css/sprinkles.css.ts

@@ -338,7 +338,7 @@ const layoutStyles = defineProperties({
     zIndex: zIndices,
     gap: spacing,
     flexShrink: spacing,
-    flex: ['1', '2', '3'],
+    flex: ['1', '1.5', '2', '3'],
     flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
     display: ['none', 'block', 'flex', 'inline-flex', 'inline-block', 'grid', 'inline'],
     whiteSpace: ['nowrap'],