feat: nft collection name and description size on larger screens (#5550)

* large collection name text on tablet and above

* make description text larger on tablets and above

* remove sprinkles
Co-authored-by: Charles Bachmeier <charlie@genie.xyz>

src/nft/components/collection/CollectionStats.css.ts

-import { globalStyle, style } from '@vanilla-extract/css'
-import { bodySmall, headlineSmall, subheadSmall } from 'nft/css/common.css'
+import { style } from '@vanilla-extract/css'
+import { headlineSmall, subheadSmall } from 'nft/css/common.css'
 import { loadingAsset, loadingBlock } from 'nft/css/loading.css'
 
-import { breakpoints, sprinkles, themeVars, vars } from '../../css/sprinkles.css'
+import { breakpoints, sprinkles, vars } from '../../css/sprinkles.css'
 
 export const statsText = style([
   sprinkles({
@@ -46,66 +46,6 @@ export const collectionImage = style([
   },
 ])
 
-export const nameText = sprinkles({
-  whiteSpace: 'nowrap',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-})
-
-export const description = style([
-  sprinkles({
-    fontSize: '14',
-    display: 'inline-block',
-  }),
-  {
-    maxWidth: 'min(calc(100% - 112px), 600px)',
-    verticalAlign: 'top',
-    lineHeight: '20px',
-  },
-])
-
-globalStyle(`${description} a[href]`, {
-  color: `${themeVars.colors.textSecondary}`,
-  textDecoration: 'none',
-})
-
-globalStyle(`${description} a[href]:hover`, {
-  color: `${themeVars.colors.textSecondary}`,
-  opacity: `${themeVars.opacity.hover}`,
-  textDecoration: 'none',
-})
-
-globalStyle(`${description} a[href]:focus`, {
-  color: `${themeVars.colors.textSecondary}`,
-  opacity: `${themeVars.opacity.pressed}`,
-  textDecoration: 'none',
-})
-
-export const descriptionOpen = style([
-  {
-    whiteSpace: 'normal',
-    verticalAlign: 'top',
-    lineHeight: '20px',
-  },
-  sprinkles({
-    overflow: 'visible',
-    display: 'inline',
-    maxWidth: 'full',
-  }),
-])
-
-export const readMore = style([
-  bodySmall,
-  {
-    verticalAlign: 'top',
-  },
-  sprinkles({
-    color: 'textSecondary',
-    cursor: 'pointer',
-    marginLeft: '4',
-  }),
-])
-
 export const statsLabel = style([
   subheadSmall,
   sprinkles({

src/nft/components/collection/CollectionStats.tsx

-import clsx from 'clsx'
 import { getDeltaArrow } from 'components/Tokens/TokenDetails/PriceChart'
 import { Box, BoxProps } from 'nft/components/Box'
 import { Column, Row } from 'nft/components/Flex'
+import { body, bodySmall, headlineMedium, headlineSmall } from 'nft/css/common.css'
+import { loadingAsset } from 'nft/css/loading.css'
 import { themeVars } from 'nft/css/sprinkles.css'
+import { useIsMobile } from 'nft/hooks'
 import { useIsCollectionLoading } from 'nft/hooks/useIsCollectionLoading'
 import { GenieCollection, TokenType } from 'nft/types'
 import { floorFormatter, quantityFormatter, roundWholePercentage, volumeFormatter } from 'nft/utils/numbers'
 import { ReactNode, useEffect, useReducer, useRef, useState } from 'react'
 import ReactMarkdown from 'react-markdown'
-import styled from 'styled-components/macro'
+import styled, { css } from 'styled-components/macro'
 import { ThemedText } from 'theme'
 
 import { DiscordIcon, EllipsisIcon, ExternalIcon, InstagramIcon, TwitterIcon, VerifiedIcon, XMarkIcon } from '../icons'
@@ -21,6 +23,19 @@ const PercentChange = styled.div<{ isNegative: boolean }>`
   justify-content: center;
 `
 
+const CollectionNameText = styled.div<{ isVerified: boolean }>`
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-right: ${({ isVerified }) => (isVerified ? '12px' : '0px')};
+`
+
+const CollectionNameTextLoading = styled.div`
+  ${loadingAsset}
+  height: 32px;
+  width: 236px;
+`
+
 const MobileSocialsOverflowIcon = styled.div`
   display: flex;
   margin-left: 4px;
@@ -141,14 +156,17 @@ const CollectionName = ({
   toggleCollectionSocials: () => void
 }) => {
   const isCollectionStatsLoading = useIsCollectionLoading((state) => state.isCollectionStatsLoading)
-  const nameClass = isCollectionStatsLoading ? styles.nameTextLoading : styles.nameText
 
   return (
     <Row justifyContent="space-between">
       <Row minWidth="0">
-        <ThemedText.HeadlineSmall marginRight={!isVerified ? '12' : '0'} className={nameClass}>
-          {name}
-        </ThemedText.HeadlineSmall>
+        {isCollectionStatsLoading ? (
+          <CollectionNameTextLoading />
+        ) : (
+          <CollectionNameText isVerified={isVerified} className={isMobile ? headlineSmall : headlineMedium}>
+            {name}
+          </CollectionNameText>
+        )}
         {isVerified && <VerifiedIcon style={{ width: '32px', height: '32px' }} />}
         <Row
           display={{ sm: 'none', md: 'flex' }}
@@ -206,6 +224,46 @@ const CollectionName = ({
   )
 }
 
+const CollectionDescriptionText = styled.div<{ readMore: boolean }>`
+  vertical-align: top;
+  text-overflow: ellipsis;
+
+  ${({ readMore }) =>
+    readMore
+      ? css`
+          white-space: normal;
+          overflow: visible;
+          display: inline;
+          max-width: 100%;
+        `
+      : css`
+          white-space: nowrap;
+          overflow: hidden;
+          display: inline-block;
+          max-width: min(calc(100% - 112px), 600px);
+        `}
+
+  a[href] {
+    color: ${({ theme }) => theme.textSecondary};
+    text-decoration: none;
+
+    :hover {
+      opacity: ${({ theme }) => theme.opacity.hover};
+    }
+
+    :focus {
+      opacity: ${({ theme }) => theme.opacity.click};
+    }
+  }
+`
+
+const ReadMore = styled.span`
+  vertical-align: top;
+  color: ${({ theme }) => theme.textSecondary};
+  cursor: pointer;
+  margin-left: 4px;
+`
+
 const CollectionDescriptionLoading = () => (
   <Box marginTop={{ sm: '12', md: '16' }} className={styles.descriptionLoading} />
 )
@@ -216,6 +274,7 @@ const CollectionDescription = ({ description }: { description: string }) => {
   const baseRef = useRef<HTMLDivElement>(null)
   const descriptionRef = useRef<HTMLDivElement>(null)
   const isCollectionStatsLoading = useIsCollectionLoading((state) => state.isCollectionStatsLoading)
+  const isMobile = useIsMobile()
 
   useEffect(() => {
     if (
@@ -234,19 +293,18 @@ const CollectionDescription = ({ description }: { description: string }) => {
     <CollectionDescriptionLoading />
   ) : (
     <Box ref={baseRef} marginTop={{ sm: '12', md: '16' }} style={{ maxWidth: '680px' }}>
-      <Box
-        ref={descriptionRef}
-        className={clsx(styles.description, styles.nameText, readMore && styles.descriptionOpen)}
-      >
+      <CollectionDescriptionText readMore={readMore} ref={descriptionRef} className={isMobile ? bodySmall : body}>
         <ReactMarkdown
           source={description}
           allowedTypes={['link', 'paragraph', 'strong', 'code', 'emphasis', 'text']}
           renderers={{ paragraph: 'span' }}
         />
-      </Box>
-      <Box as="span" display={showReadMore ? 'inline' : 'none'} className={styles.readMore} onClick={toggleReadMore}>
-        show {readMore ? 'less' : 'more'}
-      </Box>
+      </CollectionDescriptionText>
+      {showReadMore && (
+        <ReadMore className={isMobile ? bodySmall : body} onClick={toggleReadMore}>
+          show {readMore ? 'less' : 'more'}
+        </ReadMore>
+      )}
     </Box>
   )
 }