From 2f51e522be7eb3bc9bacce839cb6a6320929f950 Mon Sep 17 00:00:00 2001 From: Florencia Barreto <32873485+flobarreto@users.noreply.github.com> Date: Mon, 10 Apr 2023 11:48:31 -0300 Subject: [PATCH] feat: new designs item detail page (#1512) * feat: new designs item detail page * feat: some styles fixes and issuedId fic * feat: removed localhost on dev env * fix: tests * fix: values in mana and usd * fix: issuedId always rendering --- webapp/package-lock.json | 14 +- webapp/package.json | 2 +- webapp/src/components/AssetPage/AssetPage.css | 11 ++ webapp/src/components/AssetPage/AssetPage.tsx | 113 +++++------ .../BestBuyingOption.module.css | 145 +++++++++++++- .../BestBuyingOption.spec.tsx | 3 +- .../BestBuyingOption/BestBuyingOption.tsx | 182 +++++++++++------- .../Collection/Collection.module.css | 6 +- .../AssetPage/Description/Description.css | 5 - .../Description/Description.module.css | 21 ++ .../AssetPage/Description/Description.tsx | 35 +++- .../AssetPage/IconBadge/IconBadge.css | 8 +- .../ItemDetail/ItemDetail.module.css | 17 +- .../AssetPage/ItemDetail/ItemDetail.tsx | 11 +- .../ListingsTable/ListingsTable.spec.tsx | 5 +- .../AssetPage/ListingsTable/ListingsTable.tsx | 2 +- .../src/components/AssetPage/Owner/Owner.css | 8 +- .../BuyNFTButtons/BuyNFTButtons.tsx | 4 +- .../BuyNFTButtons/BuyNFTButtons.types.ts | 1 + .../AssetPage/Title/Title.module.css | 2 +- webapp/src/images/clock.png | Bin 0 -> 576 bytes webapp/src/images/infoIcon.png | Bin 0 -> 561 bytes webapp/src/images/minting.png | Bin 0 -> 680 bytes webapp/src/images/noListings.png | Bin 0 -> 1256 bytes .../src/modules/translation/locales/en.json | 7 +- .../src/modules/translation/locales/es.json | 9 +- .../src/modules/translation/locales/zh.json | 7 +- 27 files changed, 439 insertions(+), 179 deletions(-) delete mode 100644 webapp/src/components/AssetPage/Description/Description.css create mode 100644 webapp/src/components/AssetPage/Description/Description.module.css create mode 100644 webapp/src/images/clock.png create mode 100644 webapp/src/images/infoIcon.png create mode 100644 webapp/src/images/minting.png create mode 100644 webapp/src/images/noListings.png diff --git a/webapp/package-lock.json b/webapp/package-lock.json index 9b842cb309..08c1a45339 100644 --- a/webapp/package-lock.json +++ b/webapp/package-lock.json @@ -9,7 +9,7 @@ "version": "0.0.0-development", "dependencies": { "@dcl/crypto": "^3.0.0", - "@dcl/schemas": "^6.13.1", + "@dcl/schemas": "^6.14.1", "@dcl/ui-env": "^1.2.0", "@ethersproject/providers": "^5.6.2", "classnames": "^2.3.1", @@ -2018,9 +2018,9 @@ } }, "node_modules/@dcl/schemas": { - "version": "6.13.2", - "resolved": "https://registry.npmjs.org/@dcl/schemas/-/schemas-6.13.2.tgz", - "integrity": "sha512-PbgfjyMGbZxSHeOW/kD1m8siAXDPlhhjPdozv1KX9S9BOMxJjEkacW59j3u8BYhIu4vD1kaAG+qnOnaFxXxVFA==", + "version": "6.14.1", + "resolved": "https://registry.npmjs.org/@dcl/schemas/-/schemas-6.14.1.tgz", + "integrity": "sha512-UXJNKspcYUshdNGWb1JvqxRV2zRly9R44R+gKiNSybinpy1a9Dws3N2YGROabcXZ8dDFVR5D1l3+ToH20PQeFw==", "dependencies": { "ajv": "^8.11.0", "ajv-errors": "^3.0.0", @@ -27649,9 +27649,9 @@ } }, "@dcl/schemas": { - "version": "6.13.2", - "resolved": "https://registry.npmjs.org/@dcl/schemas/-/schemas-6.13.2.tgz", - "integrity": "sha512-PbgfjyMGbZxSHeOW/kD1m8siAXDPlhhjPdozv1KX9S9BOMxJjEkacW59j3u8BYhIu4vD1kaAG+qnOnaFxXxVFA==", + "version": "6.14.1", + "resolved": "https://registry.npmjs.org/@dcl/schemas/-/schemas-6.14.1.tgz", + "integrity": "sha512-UXJNKspcYUshdNGWb1JvqxRV2zRly9R44R+gKiNSybinpy1a9Dws3N2YGROabcXZ8dDFVR5D1l3+ToH20PQeFw==", "requires": { "ajv": "^8.11.0", "ajv-errors": "^3.0.0", diff --git a/webapp/package.json b/webapp/package.json index 5117963fe2..dbc01ef453 100644 --- a/webapp/package.json +++ b/webapp/package.json @@ -3,7 +3,7 @@ "version": "0.0.0-development", "dependencies": { "@dcl/crypto": "^3.0.0", - "@dcl/schemas": "^6.13.1", + "@dcl/schemas": "^6.14.1", "@dcl/ui-env": "^1.2.0", "@ethersproject/providers": "^5.6.2", "classnames": "^2.3.1", diff --git a/webapp/src/components/AssetPage/AssetPage.css b/webapp/src/components/AssetPage/AssetPage.css index b804970ea8..454f2762e1 100644 --- a/webapp/src/components/AssetPage/AssetPage.css +++ b/webapp/src/components/AssetPage/AssetPage.css @@ -9,3 +9,14 @@ .AssetPage .asset-container { width: 100%; } + +.AssetPage .backText { + margin-left: 45px; + margin-top: 10px; +} + +@media (max-width: 768px) { + .AssetPage .backText { + margin-top: -20px; + } +} diff --git a/webapp/src/components/AssetPage/AssetPage.tsx b/webapp/src/components/AssetPage/AssetPage.tsx index d3059f97a6..4a1585287b 100644 --- a/webapp/src/components/AssetPage/AssetPage.tsx +++ b/webapp/src/components/AssetPage/AssetPage.tsx @@ -1,5 +1,6 @@ import React from 'react' import { Page, Section, Column, Back } from 'decentraland-ui' +import { t } from 'decentraland-dapps/dist/modules/translation/utils' import { Asset, AssetType } from '../../modules/asset/types' import { locations } from '../../modules/routing/locations' import { Sections } from '../../modules/routing/types' @@ -29,61 +30,65 @@ const AssetPage = ({ type, onBack }: Props) => { {(asset, order, rental) => ( <> - - onBack( - mapAsset( - asset, - { - wearable: () => - locations.browse({ - assetType: type, - section: Sections.decentraland.WEARABLES - }), - emote: () => - locations.browse({ - assetType: type, - section: Sections.decentraland.EMOTES - }) - }, - { - ens: () => - locations.browse({ - assetType: type, - section: Sections.decentraland.ENS - }), - estate: () => - locations.lands({ - assetType: type, - section: Sections.decentraland.ESTATES, - isMap: false, - isFullscreen: false - }), - parcel: () => - locations.lands({ - assetType: type, - section: Sections.decentraland.PARCELS, - isMap: false, - isFullscreen: false - }), - wearable: () => - locations.browse({ - assetType: type, - section: Sections.decentraland.WEARABLES - }), - emote: () => - locations.browse({ - assetType: type, - section: Sections.decentraland.EMOTES - }) - }, - () => undefined + <> + + onBack( + mapAsset( + asset, + { + wearable: () => + locations.browse({ + assetType: type, + section: Sections.decentraland.WEARABLES + }), + emote: () => + locations.browse({ + assetType: type, + section: Sections.decentraland.EMOTES + }) + }, + { + ens: () => + locations.browse({ + assetType: type, + section: Sections.decentraland.ENS + }), + estate: () => + locations.lands({ + assetType: type, + section: Sections.decentraland.ESTATES, + isMap: false, + isFullscreen: false + }), + parcel: () => + locations.lands({ + assetType: type, + section: Sections.decentraland.PARCELS, + isMap: false, + isFullscreen: false + }), + wearable: () => + locations.browse({ + assetType: type, + section: Sections.decentraland.WEARABLES + }), + emote: () => + locations.browse({ + assetType: type, + section: Sections.decentraland.EMOTES + }) + }, + () => undefined + ) ) - ) - } - /> + } + /> + {t('global.back')} + +
{mapAsset( asset, diff --git a/webapp/src/components/AssetPage/BestBuyingOption/BestBuyingOption.module.css b/webapp/src/components/AssetPage/BestBuyingOption/BestBuyingOption.module.css index 0a574a6e09..b6daca6a7f 100644 --- a/webapp/src/components/AssetPage/BestBuyingOption/BestBuyingOption.module.css +++ b/webapp/src/components/AssetPage/BestBuyingOption/BestBuyingOption.module.css @@ -1,13 +1,21 @@ .BestBuyingOption { border: 2px solid var(--secondary); - border-radius: 12px; + border-radius: 10px; display: flex; padding: 24px; width: 100%; + background-color: var(--secondary); } .BestBuyingOption .cardTitle { - font-weight: 800; + font-weight: 400; + font-size: 14px; + align-items: center; + display: flex; +} + +.BestBuyingOption .emptyCardTitle { + font-weight: 600; font-size: 18px; } @@ -16,8 +24,31 @@ display: flex; flex-direction: column; font-weight: 400; - font-size: 15px; + font-size: 14px; gap: 10px; +} + +.BestBuyingOption .nolistingsImage { + height: 40px; + align-self: center; +} + +.BestBuyingOption .checkTheOwners { + padding: 0px 5px; + text-decoration: underline; + cursor: pointer; +} + +.BestBuyingOption .mintingStockContainer { + color: var(--primary-text); + display: flex; + flex-direction: column; + font-weight: 400; + font-size: 15px; + justify-content: space-between; +} + +.BestBuyingOption .fullWidth { width: 100%; } @@ -25,6 +56,16 @@ display: flex; flex-direction: row; gap: 10px; + align-items: flex-end; +} + +.BestBuyingOption .emptyCardContainer { + display: flex; + flex-direction: row; + gap: 10px; + padding: 9px; + justify-content: center; + width: 100%; } .BestBuyingOption .informationContainer { @@ -35,22 +76,72 @@ width: 100%; } +.BestBuyingOption .mintingContainer { + display: flex; + justify-content: space-between; + flex-grow: 1; + width: 100%; +} + .BestBuyingOption .informationBold { color: white; - font-size: 16px; - font-weight: 500; + font-size: 30px; + font-weight: 600; margin: unset; } +.BestBuyingOption .stockText { + color: white; + font-size: 18px; + font-weight: 600; + display: flex; + align-items: flex-end; + margin-bottom: 7px; +} + +.BestBuyingOption .informationBold :global(.ui.header.large) { + font-size: 30px; + font-weight: 600; +} + +.BestBuyingOption .informationBold :global(.dcl.mana .matic) { + margin-bottom: 5px; + width: 22px; + height: 22px; +} + .BestBuyingOption .informationText { - color: var(--secondary-text); - font-size: 15px; - margin-top: 3px; + color: white; + font-size: 24px; + line-height: 1.7; +} + +.BestBuyingOption .informationListingText { + color: white; + font-size: 14px; line-height: 1.5; } +.BestBuyingOption .centerItems { + align-items: center; + gap: 0px; +} + .BestBuyingOption .informationTitle { - font-size: 15px; + font-size: 14px; + color: var(--secondary-text); + font-weight: 600; + display: flex; + align-items: center; +} + +.BestBuyingOption .informationTooltip { + width: 14px; + height: 14px; +} + +.BestBuyingOption .mintingIcon { + height: 19px; } .BestBuyingOption :global(.ui.header.medium) { @@ -60,3 +151,39 @@ .BestBuyingOption :global(.ui.button + .ui.button) { margin-left: unset; } + +.BestBuyingOption .buyWithCardClassName { + background-color: white !important; + color: black !important; +} + +.BestBuyingOption .expiresAt { + display: flex; + align-items: center; + font-size: 14px; +} + +.BestBuyingOption .listingMana :global(.ui.header.small) { + font-size: 14px; + display: flex; + align-items: center; +} + +.BestBuyingOption .columnListing { + color: var(--primary-text); + display: flex; + flex-direction: column; + font-weight: 400; + font-size: 14px; + justify-content: space-between; +} + +@media (max-width: 768px) { + .BestBuyingOption { + padding: 24px 15px; + } + + .BestBuyingOption .informationContainer { + gap: 10px; + } +} diff --git a/webapp/src/components/AssetPage/BestBuyingOption/BestBuyingOption.spec.tsx b/webapp/src/components/AssetPage/BestBuyingOption/BestBuyingOption.spec.tsx index 5f4d40add1..65dd9f2d03 100644 --- a/webapp/src/components/AssetPage/BestBuyingOption/BestBuyingOption.spec.tsx +++ b/webapp/src/components/AssetPage/BestBuyingOption/BestBuyingOption.spec.tsx @@ -73,7 +73,8 @@ describe('Best Buying Option', () => { createdAt: 1671033414000, updatedAt: 0, network: Network.MATIC, - chainId: ChainId.ETHEREUM_GOERLI + chainId: ChainId.ETHEREUM_GOERLI, + issuedId: '1' } let bid: Bid = { diff --git a/webapp/src/components/AssetPage/BestBuyingOption/BestBuyingOption.tsx b/webapp/src/components/AssetPage/BestBuyingOption/BestBuyingOption.tsx index 273711e4e4..1dd3431f88 100644 --- a/webapp/src/components/AssetPage/BestBuyingOption/BestBuyingOption.tsx +++ b/webapp/src/components/AssetPage/BestBuyingOption/BestBuyingOption.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useState } from 'react' -import { ethers } from 'ethers' +import { useHistory, useLocation } from 'react-router-dom' import { t } from 'decentraland-dapps/dist/modules/translation/utils' import { Bid, @@ -11,19 +11,22 @@ import { OrderSortBy, Rarity } from '@dcl/schemas' -import { Button, Loader, Mana } from 'decentraland-ui' +import { Button, Loader, Mana, Popup } from 'decentraland-ui' import { formatWeiMANA } from '../../../lib/mana' import { formatDistanceToNow } from '../../../lib/date' import { locations } from '../../../modules/routing/locations' import { isNFT } from '../../../modules/asset/utils' import { bidAPI, orderAPI } from '../../../modules/vendor/decentraland' +import mintingIcon from '../../../images/minting.png' +import infoIcon from '../../../images/infoIcon.png' +import clock from '../../../images/clock.png' +import noListings from '../../../images/noListings.png' import { ManaToFiat } from '../../ManaToFiat' import { LinkedProfile } from '../../LinkedProfile' import { BuyNFTButtons } from '../SaleActionBox/BuyNFTButtons' +import { BelowTabs } from '../ListingsTableContainer/ListingsTableContainer.types' import { BuyOptions, Props } from './BestBuyingOption.types' import styles from './BestBuyingOption.module.css' -import { BelowTabs } from '../ListingsTableContainer/ListingsTableContainer.types' -import { useHistory, useLocation } from 'react-router-dom' const BestBuyingOption = ({ asset, tableRef }: Props) => { const [buyOption, setBuyOption] = useState(null) @@ -100,118 +103,146 @@ const BestBuyingOption = ({ asset, tableRef }: Props) => { return (
{isLoading ? ( -
+
) : buyOption === BuyOptions.MINT && asset && !isNFT(asset) ? ( -
+
- {t('best_buying_option.minting.title')} + {t('best_buying_option.minting.title')}  + mint +   + + } + on="hover" + /> -
-
+
+
- {t('best_buying_option.minting.price').toUpperCase()} + {t('best_buying_option.minting.price').toUpperCase()}  + + } + on="hover" + />
- + {formatWeiMANA(asset.price)}
- + {'('} + + {')'}
-
+
{t('best_buying_option.minting.stock').toUpperCase()} - - - {asset.available.toLocaleString()}  - - / {Rarity.getMaxSupply(asset.rarity).toLocaleString()} + + {asset.available.toLocaleString()}/{' '} + {Rarity.getMaxSupply(asset.rarity).toLocaleString()}
- +
) : buyOption === BuyOptions.BUY_LISTING && asset && listing ? ( -
+
{t('best_buying_option.buy_listing.title')}
-
+
{t('best_buying_option.minting.price').toUpperCase()} -
- +
+
{formatWeiMANA(listing.order.price)} - - -
- +
+
+ {'('} + + {')'}
{mostExpensiveBid && ( -
+
{t( 'best_buying_option.buy_listing.highest_offer' ).toUpperCase()} -
-
+
+
{formatWeiMANA(mostExpensiveBid.price)}
-
- +
+ {'('} + + {')'}
)} -
+
{t('best_buying_option.buy_listing.issue_number').toUpperCase()} - - - {listing.order.tokenId} - - /{listing.total} + + #{listing.order.issuedId}
-
+
{t('best_buying_option.buy_listing.owner').toUpperCase()} @@ -221,15 +252,19 @@ const BestBuyingOption = ({ asset, tableRef }: Props) => { />
-
- -
+ - + + clock +   {t('best_buying_option.buy_listing.expires')}  {formatDistanceToNow(listing.order.expiresAt, { addSuffix: true @@ -238,17 +273,28 @@ const BestBuyingOption = ({ asset, tableRef }: Props) => {
) : ( -
- - {t('best_buying_option.empty.title')} - - - {t('best_buying_option.empty.you_can')} - - {t('best_buying_option.empty.and_make_an_offer')} - +
+ {t('best_buying_option.empty.title')} +
+ + {t('best_buying_option.empty.title')} + + + {t('best_buying_option.empty.you_can')} + + {t('best_buying_option.empty.check_the_current_owners')} + + + {t('best_buying_option.empty.and_make_an_offer')} + +
)}
diff --git a/webapp/src/components/AssetPage/Collection/Collection.module.css b/webapp/src/components/AssetPage/Collection/Collection.module.css index 5c233f1668..b444f0b446 100644 --- a/webapp/src/components/AssetPage/Collection/Collection.module.css +++ b/webapp/src/components/AssetPage/Collection/Collection.module.css @@ -5,9 +5,9 @@ .name { margin-left: 16px; - font-size: 21px; + font-size: 14px; font-style: normal; - font-weight: 600; + font-weight: 500; line-height: 30px; letter-spacing: 0.3149999976158142px; text-align: left; @@ -17,6 +17,6 @@ .image { width: 48px; height: 48px; - border-radius: 5px; + border-radius: 30px; overflow: hidden; } diff --git a/webapp/src/components/AssetPage/Description/Description.css b/webapp/src/components/AssetPage/Description/Description.css deleted file mode 100644 index af5f923630..0000000000 --- a/webapp/src/components/AssetPage/Description/Description.css +++ /dev/null @@ -1,5 +0,0 @@ -.Description .description-text { - font-size: 17px; - line-height: 26px; - letter-spacing: 0.2px; -} diff --git a/webapp/src/components/AssetPage/Description/Description.module.css b/webapp/src/components/AssetPage/Description/Description.module.css new file mode 100644 index 0000000000..179e16f851 --- /dev/null +++ b/webapp/src/components/AssetPage/Description/Description.module.css @@ -0,0 +1,21 @@ +.Description .descriptionText { + font-size: 14px; + line-height: 26px; + letter-spacing: 0.2px; +} + +.Description .descriptionContained { + font-size: 14px; + line-height: 26px; + letter-spacing: 0.2px; + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 1; +} + +.Description .readMore { + padding: 0px !important; + color: var(--primary); + cursor: pointer; +} diff --git a/webapp/src/components/AssetPage/Description/Description.tsx b/webapp/src/components/AssetPage/Description/Description.tsx index 8602a544cc..ca7549ea45 100644 --- a/webapp/src/components/AssetPage/Description/Description.tsx +++ b/webapp/src/components/AssetPage/Description/Description.tsx @@ -1,16 +1,39 @@ -import React from 'react' +import React, { useState } from 'react' import { Header } from 'decentraland-ui' import { t } from 'decentraland-dapps/dist/modules/translation/utils' import { Props } from './Description.types' -import './Description.css' +import styles from './Description.module.css' + +const MAX_LENGTH = 81 const Description = (props: Props) => { - return props.text ? ( -
+ const { text } = props + const hasMoreLines = text?.length && text.length > MAX_LENGTH + const [showMore, setShowMore] = useState(false) + + return ( +
{t('asset_page.description')}
-
{props.text}
+
+ {text ? text : t('asset_page.no_description')} +
+ {hasMoreLines ? ( + setShowMore(prevState => !prevState)} + className={styles.readMore} + > + {t('asset_page.read_more').toLocaleUpperCase()} + + ) : null}
- ) : null + ) } export default React.memo(Description) diff --git a/webapp/src/components/AssetPage/IconBadge/IconBadge.css b/webapp/src/components/AssetPage/IconBadge/IconBadge.css index 1e193ef6fe..bb7cbf4e04 100644 --- a/webapp/src/components/AssetPage/IconBadge/IconBadge.css +++ b/webapp/src/components/AssetPage/IconBadge/IconBadge.css @@ -2,19 +2,19 @@ display: inline-flex; align-items: center; text-transform: uppercase; - padding: 4px 12px; + padding: 2px 8px; border-radius: 5px; cursor: pointer; background-color: #37333d; } .IconBadge .text { - font-size: 15px; + font-size: 13px; } .IconBadge .icon { - width: 15px; - height: 15px; + width: 13px; + height: 13px; margin-right: 10px; background-position: center; background-repeat: no-repeat; diff --git a/webapp/src/components/AssetPage/ItemDetail/ItemDetail.module.css b/webapp/src/components/AssetPage/ItemDetail/ItemDetail.module.css index d261456cdf..0f6bbef18d 100644 --- a/webapp/src/components/AssetPage/ItemDetail/ItemDetail.module.css +++ b/webapp/src/components/AssetPage/ItemDetail/ItemDetail.module.css @@ -1,6 +1,7 @@ .ItemDetail { display: flex; flex-direction: column; + margin-top: 30px; } .ItemDetail .assetImageContainer :global(.AssetImage) { @@ -9,22 +10,28 @@ } .ItemDetail .assetImageContainer { - width: 48%; + width: 52.5%; + height: 602px; } .ItemDetail .badges { - margin-top: 15px; + margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; } +.ItemDetail .itemDetailBottomContainer { + display: flex; + flex-direction: column; + gap: 12px; +} + .ItemDetail .information { display: flex; flex-direction: column; - justify-content: space-between; - width: 48%; - gap: 30px; + width: 45%; + gap: 15px; } .ItemDetail .informationContainer { diff --git a/webapp/src/components/AssetPage/ItemDetail/ItemDetail.tsx b/webapp/src/components/AssetPage/ItemDetail/ItemDetail.tsx index f855cc5f47..6df167c321 100644 --- a/webapp/src/components/AssetPage/ItemDetail/ItemDetail.tsx +++ b/webapp/src/components/AssetPage/ItemDetail/ItemDetail.tsx @@ -68,6 +68,7 @@ const ItemDetail = ({ item }: Props) => { rarity={item.rarity} assetType={AssetType.ITEM} category={NFTCategory.WEARABLE} + size="small" /> {category && ( {
-
- - +
+
+ + +
+
-
diff --git a/webapp/src/components/AssetPage/ListingsTable/ListingsTable.spec.tsx b/webapp/src/components/AssetPage/ListingsTable/ListingsTable.spec.tsx index cffa86f3d8..e1aa3f27f4 100644 --- a/webapp/src/components/AssetPage/ListingsTable/ListingsTable.spec.tsx +++ b/webapp/src/components/AssetPage/ListingsTable/ListingsTable.spec.tsx @@ -79,7 +79,8 @@ describe('Listings Table', () => { createdAt: 1671033414000, updatedAt: 0, network: Network.MATIC, - chainId: ChainId.ETHEREUM_GOERLI + chainId: ChainId.ETHEREUM_GOERLI, + issuedId: '1' } afterEach(() => { @@ -158,7 +159,7 @@ describe('Listings Table', () => { }) const price = formatWeiMANA(orderResponse.price) - expect(getByText(orderResponse.tokenId)).not.toBe(null) + expect(getByText(orderResponse.issuedId)).not.toBe(null) expect(getByText(created)).not.toBe(null) expect(getByText(expires)).not.toBe(null) expect(getByText(price)).not.toBe(null) diff --git a/webapp/src/components/AssetPage/ListingsTable/ListingsTable.tsx b/webapp/src/components/AssetPage/ListingsTable/ListingsTable.tsx index 8fc46f86e9..4a94be8cf1 100644 --- a/webapp/src/components/AssetPage/ListingsTable/ListingsTable.tsx +++ b/webapp/src/components/AssetPage/ListingsTable/ListingsTable.tsx @@ -123,7 +123,7 @@ const ListingsTable = (props: Props) => {
- {order.tokenId} + {order.issuedId} / {total} diff --git a/webapp/src/components/AssetPage/Owner/Owner.css b/webapp/src/components/AssetPage/Owner/Owner.css index 36841e7ff6..be846e3471 100644 --- a/webapp/src/components/AssetPage/Owner/Owner.css +++ b/webapp/src/components/AssetPage/Owner/Owner.css @@ -5,11 +5,15 @@ .Owner .Profile .name { margin-left: 10px; - font-size: 21px; + font-size: 14px; font-style: normal; - font-weight: 600; + font-weight: 500; line-height: 30px; letter-spacing: 0.3149999976158142px; text-align: left; color: var(--text); } + +.Owner .Profile.inline :global(.dcl.blockie) { + border-radius: 30px; +} diff --git a/webapp/src/components/AssetPage/SaleActionBox/BuyNFTButtons/BuyNFTButtons.tsx b/webapp/src/components/AssetPage/SaleActionBox/BuyNFTButtons/BuyNFTButtons.tsx index 9e63f156a3..f87045219a 100644 --- a/webapp/src/components/AssetPage/SaleActionBox/BuyNFTButtons/BuyNFTButtons.tsx +++ b/webapp/src/components/AssetPage/SaleActionBox/BuyNFTButtons/BuyNFTButtons.tsx @@ -10,7 +10,7 @@ import { locations } from '../../../../modules/routing/locations' import styles from './BuyNFTButtons.module.css' import { Props } from './BuyNFTButtons.types' -const BuyNFTButtons = ({ asset }: Props) => { +const BuyNFTButtons = ({ asset, buyWithCardClassName }: Props) => { const { contractAddress, network } = asset const assetType = isNFT(asset) ? AssetType.NFT : AssetType.ITEM const assetId = isNFT(asset) ? asset.tokenId : asset.itemId @@ -35,7 +35,7 @@ const BuyNFTButtons = ({ asset }: Props) => {