ButterflyEffect/uniswap-interface-uncensored
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
* updated responsiveness for grid

* add sell nfts back header

* input responsiveness

* lint

* remove shrink property

---------

Co-authored-by: Charles Bachmeier <charlie@genie.xyz>
This commit is contained in:
Charles Bachmeier 2023-02-16 14:23:26 -08:00 committed by GitHub
parent ad3a4ea808
commit 8c0998bd59
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 112 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/graphql/data/__generated__/types-and-hooks.ts generated
View File

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

88
src/nft/components/profile/list/ListPage.tsx
View File

@ -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} />

24
src/nft/components/profile/list/MarketplaceRow.tsx
View File

@ -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) => (

6
src/nft/components/profile/list/NFTListRow.tsx
View File

@ -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`

29
src/nft/components/profile/list/NFTListingsGrid.tsx
View File

@ -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.xl}px) {
@media screen and (min-width: ${BREAKPOINTS.lg}px) {
display: flex;
}
`
const FloorPriceHeader = styled.div`
display: none;
flex: 1;
@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>

9
src/nft/components/profile/list/PriceTextInput.tsx
View File

@ -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)

1
src/nft/css/common.css.ts
View File

@ -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' })

1
src/nft/css/sprinkles.css.ts
View File

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

7
src/nft/pages/profile/profile.tsx
View File

@ -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;

3
src/nft/pages/profile/shared.ts
View File

@ -1,3 +1,2 @@
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