fix: Styles in the Wearables, Emotes and Items detail page (#2248)

decentraland · May 13, 2024 · e64f26f · e64f26f
1 parent 5596e6d
commit e64f26f
Show file tree

Hide file tree

Showing 11 changed files with 63 additions and 68 deletions.
diff --git a/webapp/src/components/AssetImage/AssetImage.tsx b/webapp/src/components/AssetImage/AssetImage.tsx
@@ -539,8 +539,9 @@ const AssetImageWrapper = (props: Props) => {
       item.isOnSale,
     [asset, item]
   )
+  const isOwnerOfNFT = isNFT(asset) && wallet?.address === asset.owner
 
-  let classes = `AssetImage ${isAvailableForMint ? 'hasMintAvailable' : ''}`
+  let classes = `AssetImage ${isAvailableForMint && !isOwnerOfNFT ? 'hasMintAvailable' : ''}`
   if (className) {
     classes += ' ' + className
   }

diff --git a/webapp/src/components/AssetPage/AssetPage.css b/webapp/src/components/AssetPage/AssetPage.css
@@ -16,6 +16,10 @@
 }
 
 @media (max-width: 768px) {
+  .AssetPage {
+    margin-top: 0px;
+  }
+
   .AssetPage .backText {
     margin-top: -20px;
   }

diff --git a/webapp/src/components/AssetPage/EmoteDetail/EmoteDetail.module.css b/webapp/src/components/AssetPage/EmoteDetail/EmoteDetail.module.css
@@ -23,7 +23,6 @@
 
 .EmoteDetail .badges {
   margin-top: 8px;
-  margin-bottom: 15px;
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
@@ -32,6 +31,7 @@
 
 .EmoteDetail .wearableInformation {
   display: flex;
+  gap: 15px;
   flex-direction: column;
   flex: 1;
   justify-content: space-between;
@@ -52,7 +52,7 @@
 .EmoteDetail .attributesRow {
   display: flex;
   flex-direction: row;
-  gap: 10px;
+  gap: 30px;
   word-wrap: break-word;
   word-break: break-all;
 }
@@ -64,8 +64,21 @@
 @media (max-width: 768px) {
   .EmoteDetail .attributesRow {
     flex-direction: column;
+    gap: 20px;
+  }
+  .EmoteDetail :global(.dcl.stats) {
+    margin: 0px;
+    width: 100%;
+  }
+  .EmoteDetail :global(.dcl.tabs.fullscreen) {
+    padding-left: 21px;
+    margin: 0;
+    border-bottom: 1px solid var(--divider);
+  }
+  .EmoteDetail :global(.filtertabsContainer .dcl.tab) {
+    height: unset;
+    margin-bottom: 22px;
   }
-
   .EmoteDetail .wearableInformationContainer {
     flex-direction: column;
   }
@@ -82,14 +95,6 @@
   .EmoteDetail .actionsContainer {
     width: 100%;
   }
-  .EmoteDetail .badges {
-    margin-bottom: 18px;
-  }
-  .EmoteDetail .emoteOwnerAndCollectionContainer {
-    margin-top: 18px;
-    display: flex;
-    flex-direction: column;
-  }
   .EmoteDetail .assetImageContainer :global(.AssetImage .rarity-background) {
     border-radius: 12px;
   }

diff --git a/webapp/src/components/AssetPage/EmoteDetail/EmoteDetail.tsx b/webapp/src/components/AssetPage/EmoteDetail/EmoteDetail.tsx
@@ -114,9 +114,13 @@ const EmoteDetail = ({ nft }: Props) => {
               </div>
             ) : null}
           </div>
-          <div className={styles.emoteOwnerAndCollectionContainer}>
-            <Owner asset={nft} />
-            <Collection asset={nft} />
+          <div className={styles.attributesRow}>
+            <div className={styles.attributesColumn}>
+              <Owner asset={nft} />
+            </div>
+            <div className={styles.attributesColumn}>
+              <Collection asset={nft} />
+            </div>
           </div>
         </div>
         <div className={styles.actionsContainer}>

diff --git a/webapp/src/components/AssetPage/ItemDetail/ItemDetail.module.css b/webapp/src/components/AssetPage/ItemDetail/ItemDetail.module.css
@@ -52,7 +52,7 @@
 .ItemDetail .attributesRow {
   display: flex;
   flex-direction: row;
-  gap: 10px;
+  gap: 30px;
   word-wrap: break-word;
   word-break: break-all;
 }
@@ -61,13 +61,6 @@
   flex-basis: 100%;
 }
 
-.ItemDetail .basicRow {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  width: 100%;
-}
-
 .ItemDetail :global(.ui.button + .ui.button) {
   margin-left: 0px;
 }
@@ -95,15 +88,20 @@
     width: 100%;
   }
 
-  .ItemDetail :global(.dcl.stats + .dcl.stats) {
-    width: 100%;
+  .ItemDetail :global(.dcl.stats) {
+    margin: 0px;
   }
 }
 
 @media (max-width: 768px) {
+  .itemDetailBottomContainer {
+    margin-top: 20px;
+  }
+
   .ItemDetail .attributesRow {
     display: flex;
     flex-direction: column;
+    gap: 20px;
   }
 
   .ItemDetail .assetImageContainer {
@@ -120,14 +118,10 @@
     margin-bottom: 0;
   }
 
-  .ItemDetail .basicRow :global(.dcl.stats) {
+  .ItemDetail .attributesColumn :global(.dcl.stats) {
     width: 100%;
   }
 
-  .ItemDetail .basicRow {
-    flex-direction: column;
-  }
-
   .ItemDetail :global(.dcl.tabs) {
     justify-content: space-evenly;
   }

diff --git a/webapp/src/components/AssetPage/ItemDetail/ItemDetail.tsx b/webapp/src/components/AssetPage/ItemDetail/ItemDetail.tsx
@@ -149,17 +149,19 @@ const ItemDetail = ({ item }: Props) => {
               </div>
             ) : null}
           </div>
+          <div className={styles.attributesRow}>
+            <div className={styles.attributesColumn}>{item.network === Network.MATIC ? <Owner asset={item} /> : null}</div>
+            <div className={styles.attributesColumn}>
+              <Collection asset={item} />
+            </div>
+          </div>
           <div
             className={
               item.available > 0 && item.isOnSale
                 ? `${styles.itemDetailBottomContainer} ${styles.spaceInMint}`
                 : styles.itemDetailBottomContainer
             }
           >
-            <div className={styles.basicRow}>
-              {item.network === Network.MATIC ? <Owner asset={item} /> : null}
-              <Collection asset={item} />
-            </div>
             {item.data.wearable?.isSmart && <RequiredPermissions asset={item} />}
             <BestBuyingOption asset={item} tableRef={tableRef} />
           </div>

diff --git a/webapp/src/components/AssetPage/ListingsTable/ListingsTable.module.css b/webapp/src/components/AssetPage/ListingsTable/ListingsTable.module.css
@@ -82,8 +82,10 @@
   .linkedProfileRow {
     margin-left: unset;
   }
-  .viewListingContainer {
+  .viewListingContainer :global(.ui.small.inverted.button) {
     margin-right: 0;
+    min-width: auto;
+    border: none;
   }
   .manaField {
     flex-wrap: wrap;

diff --git a/webapp/src/components/AssetPage/RequiredPermissions/RequiredPermissions.module.css b/webapp/src/components/AssetPage/RequiredPermissions/RequiredPermissions.module.css
@@ -1,7 +1,3 @@
-.RequiredPermissions {
-  margin: 24px 0 24px;
-}
-
 .RequiredPermissions .title {
   display: flex;
   flex-direction: row;
@@ -34,9 +30,3 @@
   margin-left: 4px;
   cursor: pointer;
 }
-
-@media (max-width: 768px) {
-  .RequiredPermissions {
-    margin: 0 0 24px;
-  }
-}
diff --git a/webapp/src/components/AssetPage/WearableDetail/WearableDetail.module.css b/webapp/src/components/AssetPage/WearableDetail/WearableDetail.module.css
@@ -28,6 +28,7 @@
   display: flex;
   flex-direction: column;
   flex: 1;
+  gap: 15px;
   justify-content: space-between;
 }
 
@@ -43,10 +44,6 @@
   color: var(--secondary-text);
 }
 
-.WearableDetail .wearableBadgesContainer {
-  margin-bottom: 18px;
-}
-
 .WearableDetail .vrmBadge {
   background: #ff743933;
   color: #ff7439;
@@ -61,7 +58,7 @@
 .WearableDetail .attributesRow {
   display: flex;
   flex-direction: row;
-  gap: 10px;
+  gap: 30px;
   word-wrap: break-word;
   word-break: break-all;
 }
@@ -71,8 +68,13 @@
 }
 
 @media (max-width: 768px) {
+  .WearableDetail :global(.dcl.stats) {
+    margin: 0px;
+  }
+
   .WearableDetail .attributesRow {
     flex-direction: column;
+    gap: 20px;
   }
 
   .WearableDetail .wearableInformationContainer {
@@ -98,19 +100,6 @@
   .WearableDetail .wearableInformationContainer {
     flex-direction: column;
   }
-  .WearableDetail .wearableBadgesContainer {
-    margin-bottom: 18px;
-  }
-
-  .WearableDetail .wearableOwnerAndCollectionContainer {
-    margin-top: 18px;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .WearableDetail .wearableOwnerAndCollectionContainer :global(.dcl.stats) {
-    margin-bottom: 16px;
-  }
 
   .WearableDetail :global(.dcl.tabs.fullscreen) {
     padding-left: 21px;

diff --git a/webapp/src/components/AssetPage/WearableDetail/WearableDetail.tsx b/webapp/src/components/AssetPage/WearableDetail/WearableDetail.tsx
@@ -93,6 +93,7 @@ const WearableDetail = ({ nft }: Props) => {
               )}
             </div>
           </div>
+          {wearable.isSmart ? <RequiredPermissions asset={nft} /> : null}
           <div className={styles.attributesRow}>
             <div className={styles.attributesColumn}>
               <Description text={wearable.description} />
@@ -103,10 +104,13 @@ const WearableDetail = ({ nft }: Props) => {
               </div>
             ) : null}
           </div>
-          {wearable.isSmart ? <RequiredPermissions asset={nft} /> : null}
-          <div className={styles.wearableOwnerAndCollectionContainer}>
-            <Owner asset={nft} />
-            <Collection asset={nft} />
+          <div className={styles.attributesRow}>
+            <div className={styles.attributesColumn}>
+              <Owner asset={nft} />
+            </div>
+            <div className={styles.attributesColumn}>
+              <Collection asset={nft} />
+            </div>
           </div>
         </div>
         <div className={styles.actionsContainer}>

diff --git a/webapp/src/components/SellPage/SellPage.css b/webapp/src/components/SellPage/SellPage.css
@@ -33,7 +33,7 @@
   }
 
   .SellPage .AssetAction > .Row .buttons {
-    margin-bottom: 200px;
+    gap: 15px;
   }
 
   .SellPage .AssetAction > .Row .ui.button + .ui.button {