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
decentraland · Apr 10, 2023 · 2f51e52 · 2f51e52
1 parent c86a7bd
commit 2f51e52
Show file tree

Hide file tree

Showing 27 changed files with 439 additions and 179 deletions.
diff --git a/webapp/package-lock.json b/webapp/package-lock.json
diff --git 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
@@ -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
@@ -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) => {
               <AssetProviderPage type={type} fullWidth>
                 {(asset, order, rental) => (
                   <>
-                    <Back
-                      className="back"
-                      absolute
-                      onClick={() =>
-                        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
+                    <>
+                      <Back
+                        className="back"
+                        absolute
+                        onClick={() =>
+                          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
+                            )
                           )
-                        )
-                      }
-                    />
+                        }
+                      />
+                      <span className="backText">{t('global.back')}</span>
+                    </>
+
                     <div className="asset-container">
                       {mapAsset<React.ReactNode>(
                         asset,

diff --git 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,15 +24,48 @@
   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%;
 }
 
 .BestBuyingOption .containerRow {
   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
@@ -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 = {