style: Font weight on Trending Collections table (#5121)

* Drop classnames on Trending Table TD cells (no longer used)

* Fix font-weight in Trending Collections table collection name to match Figma

* There was a newer Figma

* Fixes

* Extend maxWidth on collection name (mobile)

* Mobile/desktop tweak

* Fix mobile size and add constants

* Make truncatedText a styled component

src/nft/components/explore/Cells/Cells.tsx

 import { formatEther } from '@ethersproject/units'
 import { SquareArrowDownIcon, SquareArrowUpIcon, VerifiedIcon } from 'nft/components/icons'
+import { useIsMobile } from 'nft/hooks'
 import { Denomination } from 'nft/types'
 import { volumeFormatter } from 'nft/utils'
 import styled from 'styled-components/macro'
@@ -11,23 +12,29 @@ import { Box } from '../../Box'
 import { Column, Row } from '../../Flex'
 import * as styles from './Cells.css'
 
-const CollectionNameContainer = styled.div`
-  display: flex;
-  padding: 14px 0px 14px 8px;
-  align-items: center;
+const TruncatedText = styled.div`
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 `
 
-const CollectionName = styled.div`
+const CollectionNameContainer = styled(TruncatedText)`
+  display: flex;
+  padding: 14px 0px 14px 8px;
+  align-items: center;
+`
+
+const CollectionName = styled(TruncatedText)`
   margin-left: 8px;
+`
+
+const TruncatedSubHeader = styled(ThemedText.SubHeader)`
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 `
-
-const TruncatedSubHeader = styled(ThemedText.SubHeader)`
+const TruncatedSubHeaderSmall = styled(ThemedText.SubHeaderSmall)`
+  color: ${({ theme }) => `${theme.textPrimary}`};
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -68,11 +75,16 @@ interface CellProps {
 }
 
 export const CollectionTitleCell = ({ value }: CellProps) => {
+  const isMobile = useIsMobile()
   return (
     <CollectionNameContainer>
       <RoundedImage src={value.logo} />
       <CollectionName>
+        {isMobile ? (
+          <TruncatedSubHeaderSmall>{value.name}</TruncatedSubHeaderSmall>
+        ) : (
           <TruncatedSubHeader>{value.name}</TruncatedSubHeader>
+        )}
       </CollectionName>
       {value.isVerified && (
         <span className={styles.verifiedBadge}>

src/nft/components/explore/Table.tsx

-import clsx from 'clsx'
 import { LoadingBubble } from 'components/Tokens/loading'
 import { useWindowSize } from 'hooks/useWindowSize'
 import { useIsMobile } from 'nft/hooks'
@@ -14,6 +13,12 @@ import { ArrowRightIcon } from '../icons'
 import { ColumnHeaders } from './CollectionTable'
 import * as styles from './Explore.css'
 
+// Default table cell max width
+const CELL_WIDTH = '160px'
+// Collection Name cell max widths
+const MOBILE_CELL_WIDTH = '240px'
+const DESKTOP_CELL_WIDTH = '360px'
+
 const RankCellContainer = styled.div`
   display: flex;
   align-items: center;
@@ -84,9 +89,6 @@ interface TableProps<D extends Record<string, unknown>> {
   smallHiddenColumns: IdType<D>[]
   mediumHiddenColumns: IdType<D>[]
   largeHiddenColumns: IdType<D>[]
-  classNames?: {
-    td: string
-  }
 }
 export function Table<D extends Record<string, unknown>>({
   columns,
@@ -94,7 +96,6 @@ export function Table<D extends Record<string, unknown>>({
   smallHiddenColumns,
   mediumHiddenColumns,
   largeHiddenColumns,
-  classNames,
   ...props
 }: TableProps<D>) {
   const theme = useTheme()
@@ -188,7 +189,14 @@ export function Table<D extends Record<string, unknown>>({
             >
               {row.cells.map((cell, cellIndex) => {
                 return (
-                  <td className={clsx(styles.td, classNames?.td)} {...cell.getCellProps()} key={cellIndex}>
+                  <td
+                    className={styles.td}
+                    {...cell.getCellProps()}
+                    key={cellIndex}
+                    style={{
+                      maxWidth: cellIndex === 0 ? (isMobile ? MOBILE_CELL_WIDTH : DESKTOP_CELL_WIDTH) : CELL_WIDTH,
+                    }}
+                  >
                     {cellIndex === 0 ? (
                       <RankCellContainer>
                         {!isMobile && (