style: updating details (#5371)

* style: adjusting details page

* moving owners

* removing traits if no traits

* adding accent colors

* trait grid breakpoint

* some comments

* addressing comments

src/nft/components/details/AssetDetails.tsx

@@ -6,7 +6,6 @@ import { reduceFilters } from 'nft/components/collection/Activity'
 import { LoadingSparkle } from 'nft/components/common/Loading/LoadingSparkle'
 import { AssetPriceDetails } from 'nft/components/details/AssetPriceDetails'
 import { Center } from 'nft/components/Flex'
-import { VerifiedIcon } from 'nft/components/icons'
 import { ActivityFetcher } from 'nft/queries/genie/ActivityFetcher'
 import { ActivityEventResponse, ActivityEventType, CollectionInfoForAsset, GenieAsset } from 'nft/types'
 import { shortenAddress } from 'nft/utils/address'
@@ -27,17 +26,6 @@ import DetailsContainer from './DetailsContainer'
 import InfoContainer from './InfoContainer'
 import TraitsContainer from './TraitsContainer'
 
-const CollectionHeader = styled.span`
-  display: flex;
-  align-items: center;
-  font-size: 16px;
-  line-height: 24px;
-  color: ${({ theme }) => theme.textPrimary};
-  margin-top: 28px;
-  text-decoration: none;
-  ${OpacityHoverState};
-`
-
 const AssetPriceDetailsContainer = styled.div`
   margin-top: 20px;
   display: none;
@@ -46,15 +34,6 @@ const AssetPriceDetailsContainer = styled.div`
   }
 `
 
-const AssetHeader = styled.div`
-  display: flex;
-  align-items: center;
-  font-size: 36px;
-  line-height: 36px;
-  color: ${({ theme }) => theme.textPrimary};
-  margin-top: 8px;
-`
-
 const MediaContainer = styled.div`
   display: flex;
   justify-content: center;
@@ -118,10 +97,6 @@ const Link = styled(RouterLink)`
   ${OpacityHoverState};
 `
 
-const DefaultLink = styled(RouterLink)`
-  text-decoration: none;
-`
-
 const ActivitySelectContainer = styled.div`
   display: flex;
   gap: 8px;
@@ -150,8 +125,11 @@ const ContentNotAvailable = styled.div`
 const FilterBox = styled.div<{ isActive?: boolean }>`
   box-sizing: border-box;
   background-color: ${({ theme }) => theme.backgroundInteractive};
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 14px;
   color: ${({ theme }) => theme.textPrimary};
-  padding: 12px 16px;
+  padding: 8px 16px;
   border-radius: 12px;
   cursor: pointer;
   box-sizing: border-box;
@@ -383,43 +361,39 @@ export const AssetDetails = ({ asset, collection }: AssetDetailsProps) => {
           <AssetView asset={asset} mediaType={assetMediaType} dominantColor={dominantColor} />
         )}
       </MediaContainer>
-      <DefaultLink to={`/nfts/collection/${asset.address}`}>
-        <CollectionHeader>
-          {collection.collectionName} {collection.isVerified && <VerifiedIcon />}
-        </CollectionHeader>
-      </DefaultLink>
-
-      <AssetHeader>{asset.name ?? `${asset.collectionName} #${asset.tokenId}`}</AssetHeader>
       <AssetPriceDetailsContainer>
         <AssetPriceDetails asset={asset} collection={collection} />
       </AssetPriceDetailsContainer>
-      <InfoContainer
-        primaryHeader="Traits"
-        defaultOpen
-        secondaryHeader={
-          rarityProvider && rarity && rarity.score ? (
-            <MouseoverTooltip
-              text={
-                <HoverContainer>
-                  <HoverImageContainer>
-                    <img src={rarityProviderLogo} alt="cardLogo" width={16} />
-                  </HoverImageContainer>
-                  <ContainerText>
-                    {`Ranking by ${rarity.provider === 'Genie' ? fallbackProvider : rarity.provider}`}
-                  </ContainerText>
-                </HoverContainer>
-              }
-              placement="top"
-            >
-              <RarityWrap>Rarity: {putCommas(rarity.score)}</RarityWrap>
-            </MouseoverTooltip>
-          ) : null
-        }
-      >
-        <TraitsContainer asset={asset} />
-      </InfoContainer>
+      {asset.traits && (
+        <InfoContainer
+          primaryHeader="Traits"
+          defaultOpen
+          secondaryHeader={
+            rarityProvider && rarity && rarity.score ? (
+              <MouseoverTooltip
+                text={
+                  <HoverContainer>
+                    <HoverImageContainer>
+                      <img src={rarityProviderLogo} alt="cardLogo" width={16} />
+                    </HoverImageContainer>
+                    <ContainerText>
+                      {`Ranking by ${rarity.provider === 'Genie' ? fallbackProvider : rarity.provider}`}
+                    </ContainerText>
+                  </HoverContainer>
+                }
+                placement="top"
+              >
+                <RarityWrap>Rarity: {putCommas(rarity.score)}</RarityWrap>
+              </MouseoverTooltip>
+            ) : null
+          }
+        >
+          <TraitsContainer asset={asset} />
+        </InfoContainer>
+      )}
       <InfoContainer
         primaryHeader="Activity"
+        defaultOpen
         secondaryHeader={formattedPrice ? `Last Sale: ${formattedPrice} ETH` : undefined}
       >
         <>

src/nft/components/details/TraitsContainer.tsx

@@ -11,7 +11,7 @@ const Grid = styled.div`
   gap: 16px;
   max-width: 780px;
 
-  @media (max-width: 960px) {
+  @media (max-width: 1080px) {
     grid-template-columns: 1fr 1fr 1fr;
   }
 

src/nft/utils/asset.ts

@@ -28,3 +28,11 @@ export const getAssetHref = (asset: GenieAsset | WalletAsset, origin?: DetailsOr
 export const getMarketplaceIcon = (marketplace: string) => {
   return `/nft/svgs/marketplaces/${marketplace.toLowerCase()}.svg`
 }
+
+export const generateTweetForAsset = (asset: GenieAsset): string => {
+  return `https://twitter.com/intent/tweet?text=Check%20out%20${
+    asset.name ?? `${asset.collectionName}%20%23${asset.tokenId}`
+  }%20(${asset.collectionName})%20https://app.uniswap.org/%23/nfts/asset/${asset.address}/${
+    asset.tokenId
+  }%20via%20@uniswap`
+}