chore: Merging details part 2 (#4594)

* Merging details part 2
Co-authored-by: Alex Ball <alexball@UNISWAP-MAC-038.local>

src/nft/components/layout/ExpandableText.css.ts

+import { globalStyle, style } from '@vanilla-extract/css'
+
+import { sprinkles } from '../../css/sprinkles.css'
+
+export const hiddenText = style([
+  sprinkles({
+    overflow: 'hidden',
+  }),
+  {
+    display: '-webkit-box',
+    WebkitLineClamp: 2,
+    WebkitBoxOrient: 'vertical',
+    textOverflow: 'ellipsis',
+  },
+])
+
+export const span = style({})
+
+globalStyle(`${hiddenText} p`, {
+  display: 'none',
+})
+
+globalStyle(`${hiddenText} p:first-child`, {
+  display: 'block',
+})
+
+globalStyle(`${span} p:first-child`, {
+  textOverflow: 'ellipsis',
+  overflow: 'hidden',
+  margin: 0,
+})

src/nft/components/layout/ExpandableText.tsx

+import clsx from 'clsx'
+import { useState } from 'react'
+
+import { Box, BoxProps } from '../Box'
+import * as styles from './ExpandableText.css'
+
+const RevealButton = (props: BoxProps) => (
+  <Box
+    as="button"
+    display="inline"
+    fontWeight="bold"
+    border="none"
+    fontSize="14"
+    color="darkGray"
+    padding="0"
+    background="transparent"
+    {...props}
+  />
+)
+
+export const ExpandableText = ({ children, ...props }: BoxProps) => {
+  const [isExpanded, setExpanded] = useState(false)
+
+  return (
+    <Box
+      display="flex"
+      flexDirection={isExpanded ? 'column' : 'row'}
+      alignItems={isExpanded ? 'flex-start' : 'flex-end'}
+      justifyContent="flex-start"
+      fontSize="14"
+      color="darkGray"
+      marginTop="0"
+      marginBottom="20"
+      {...props}
+    >
+      <span className={clsx(styles.span, !isExpanded && styles.hiddenText)}>
+        {children}{' '}
+        {isExpanded ? (
+          <RevealButton marginTop={isExpanded ? '8' : 'unset'} onClick={() => setExpanded(!isExpanded)}>
+            Show less
+          </RevealButton>
+        ) : (
+          <RevealButton onClick={() => setExpanded(!isExpanded)}>Show more</RevealButton>
+        )}
+      </span>
+    </Box>
+  )
+}

src/nft/css/sprinkles.css.ts

@@ -238,6 +238,16 @@ const borderWidth = ['0px', '1px', '1.5px', '2px', '4px']
 
 const borderStyle = ['none', 'solid'] as const
 
+// TODO: remove when code is done being ported over
+// I'm leaving this here as a reference of the old breakpoints while we port over the new code
+// tabletSm: 656,
+// tablet: 708,
+// tabletL: 784,
+// tabletXl: 830,
+// desktop: 948,
+// desktopL: 1030,
+// desktopXl: 1260,
+
 export const breakpoints = {
   sm: 640,
   md: 768,

src/nft/pages/asset/Asset.css.ts

+import { style } from '@vanilla-extract/css'
+
+import { center, subhead } from '../../css/common.css'
+import { sprinkles, vars } from '../../css/sprinkles.css'
+
+export const image = style([
+  sprinkles({ borderRadius: '20', height: 'full', alignSelf: 'center' }),
+  {
+    width: 'calc(90vh - 165px)',
+    height: 'calc(90vh - 165px)',
+    maxHeight: '678px',
+    maxWidth: '678px',
+    boxShadow: `0px 20px 50px var(--shadow), 0px 10px 50px rgba(70, 115, 250, 0.2)`,
+    '@media': {
+      '(max-width: 1024px)': {
+        maxHeight: '64vh',
+        maxWidth: '64vh',
+      },
+      '(max-width: 640px)': {
+        maxHeight: '56vh',
+        maxWidth: '56vh',
+      },
+    },
+  },
+])
+
+export const container = style([
+  center,
+  {
+    minHeight: 'calc(100vh - 97px)',
+  },
+])
+
+export const marketplace = sprinkles({ borderRadius: '4' })
+
+export const tab = style([
+  subhead,
+  sprinkles({ color: 'darkGray', border: 'none', padding: '0', background: 'transparent' }),
+  {
+    selectors: {
+      '&[data-active="true"]': {
+        textDecoration: 'underline',
+        textDecorationColor: vars.color.genieBlue,
+        textUnderlineOffset: '8px',
+        textDecorationThickness: '2px',
+        color: vars.color.blackBlue,
+      },
+    },
+  },
+])
+
+export const creator = style({
+  '@media': {
+    '(max-width: 640px)': {
+      display: 'none',
+    },
+  },
+})
+
+export const columns = style([
+  sprinkles({
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    width: 'full',
+    paddingLeft: { sm: '16', lg: '24', xl: '52' },
+    paddingRight: { sm: '16', lg: '24', xl: '52' },
+    paddingBottom: { sm: '16', lg: '24', xl: '52' },
+    paddingTop: '16',
+    gap: { sm: '32', lg: '28', xl: '52' },
+  }),
+  {
+    boxSizing: 'border-box',
+    '@media': {
+      '(max-width: 1024px)': {
+        flexDirection: 'column',
+        alignItems: 'center',
+      },
+    },
+  },
+])
+
+export const column = style({
+  maxWidth: '50%',
+  width: '50%',
+  alignSelf: 'center',
+  '@media': {
+    '(max-width: 1024px)': {
+      maxWidth: 'calc(88%)',
+      width: 'calc(88%)',
+    },
+  },
+})
+
+export const columnRight = style({
+  maxHeight: 'calc(100vh - 165px)',
+  overflow: 'scroll',
+  '@media': {
+    '(max-width: 1024px)': {
+      maxHeight: '100%',
+    },
+  },
+  selectors: {
+    '&::-webkit-scrollbar': {
+      display: 'none',
+    },
+  },
+  scrollbarWidth: 'none',
+})
+
+export const audioControls = style({
+  position: 'absolute',
+  left: '0',
+  right: '0',
+  textAlign: 'center',
+  marginRight: 'auto',
+  marginLeft: 'auto',
+  bottom: 'calc(10%)',
+})

src/nft/types/common/common.ts

@@ -99,7 +99,7 @@ export interface GenieAsset {
   decimals?: number
   collectionIsVerified?: boolean
   rarity?: Rarity
-  owner: OpenSeaUser
+  owner: string
   creator: OpenSeaUser
   externalLink: string
   traits?: {