diff --git a/webapp/src/components/AssetImage/AssetImage.tsx b/webapp/src/components/AssetImage/AssetImage.tsx index 1619e3fd7..8a5cefe40 100644 --- 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 index 454f2762e..dd73f0998 100644 --- 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 index 3417460eb..204921f4c 100644 --- 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 index c1c535946..e87a2a7ea 100644 --- a/webapp/src/components/AssetPage/EmoteDetail/EmoteDetail.tsx +++ b/webapp/src/components/AssetPage/EmoteDetail/EmoteDetail.tsx @@ -114,9 +114,13 @@ const EmoteDetail = ({ nft }: Props) => { ) : null} -
- - +
+
+ +
+
+ +
diff --git a/webapp/src/components/AssetPage/ItemDetail/ItemDetail.module.css b/webapp/src/components/AssetPage/ItemDetail/ItemDetail.module.css index c9550562a..bcbfcc030 100644 --- 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 index 449c6aa35..b11c3e1e8 100644 --- a/webapp/src/components/AssetPage/ItemDetail/ItemDetail.tsx +++ b/webapp/src/components/AssetPage/ItemDetail/ItemDetail.tsx @@ -149,6 +149,12 @@ const ItemDetail = ({ item }: Props) => {
) : null} +
+
{item.network === Network.MATIC ? : null}
+
+ +
+
0 && item.isOnSale @@ -156,10 +162,6 @@ const ItemDetail = ({ item }: Props) => { : styles.itemDetailBottomContainer } > -
- {item.network === Network.MATIC ? : null} - -
{item.data.wearable?.isSmart && }
diff --git a/webapp/src/components/AssetPage/ListingsTable/ListingsTable.module.css b/webapp/src/components/AssetPage/ListingsTable/ListingsTable.module.css index fe1f44162..b5f31d707 100644 --- 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 index 7130dcdca..0b1e421c2 100644 --- 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 index 6e9fcce4e..c30d58ad6 100644 --- 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 index f34f2548b..e6c40fb41 100644 --- a/webapp/src/components/AssetPage/WearableDetail/WearableDetail.tsx +++ b/webapp/src/components/AssetPage/WearableDetail/WearableDetail.tsx @@ -93,6 +93,7 @@ const WearableDetail = ({ nft }: Props) => { )} + {wearable.isSmart ? : null}
@@ -103,10 +104,13 @@ const WearableDetail = ({ nft }: Props) => {
) : null}
- {wearable.isSmart ? : null} -
- - +
+
+ +
+
+ +
diff --git a/webapp/src/components/SellPage/SellPage.css b/webapp/src/components/SellPage/SellPage.css index 231470e67..bf553407b 100644 --- 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 {