🍡 Marketplace style fixes v2 (#4215)

* Marketplace style fixes v2

* Remove boxshadow on smaller screens

* Remove unnecessary css

* CR fixes

* CR fixes 1

* CR fixes 2

* Update icons

* Make double colon in timer different color

packages/atlas/src/assets/icons/JoyTokenSilver16.tsx

@@ -3,17 +3,37 @@ import { Ref, SVGProps, forwardRef, memo } from 'react'
 
 const SvgJoyTokenSilver16 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
   <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" ref={ref} {...props}>
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M15 8A7 7 0 1 1 1 8a7 7 0 0 1 14 0ZM3 8a5 5 0 0 0 10 0h-2a3 3 0 0 1-6 0H3Z"
-      fill="url(#paint0_linear_911_333)"
-    />
+    <g filter="url(#filter0_i_911_333)">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M15 8A7 7 0 1 1 1 8a7 7 0 0 1 14 0ZM3 8a5 5 0 0 0 10 0h-2a3 3 0 0 1-6 0H3Z"
+        fill="url(#paint0_linear_911_333)"
+      />
+    </g>
     <defs>
       <linearGradient id="paint0_linear_911_333" x1={8} y1={1} x2={8} y2={15} gradientUnits="userSpaceOnUse">
         <stop stopColor="#7B8A95" />
         <stop offset={1} stopColor="#424E57" />
       </linearGradient>
+      <filter
+        id="filter0_i_911_333"
+        x={1}
+        y={1}
+        width={14}
+        height={14.5}
+        filterUnits="userSpaceOnUse"
+        colorInterpolationFilters="sRGB"
+      >
+        <feFlood floodOpacity={0} result="BackgroundImageFix" />
+        <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+        <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+        <feOffset dy={0.5} />
+        <feGaussianBlur stdDeviation={0.25} />
+        <feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
+        <feColorMatrix values="0 0 0 0 0.70875 0 0 0 0 0.756 0 0 0 0 0.7875 0 0 0 1 0" />
+        <feBlend in2="shape" result="effect1_innerShadow_911_333" />
+      </filter>
     </defs>
   </svg>
 ))

packages/atlas/src/assets/icons/JoyTokenSilver24.tsx

@@ -3,17 +3,37 @@ import { Ref, SVGProps, forwardRef, memo } from 'react'
 
 const SvgJoyTokenSilver24 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
   <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" ref={ref} {...props}>
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Zm-.004-6a4 4 0 0 1-4-4h-3a7 7 0 1 0 14 0h-3a4 4 0 0 1-4 4Z"
-      fill="url(#paint0_linear_911_331)"
-    />
+    <g filter="url(#filter0_i_911_331)">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Zm-.004-6a4 4 0 0 1-4-4h-3a7 7 0 1 0 14 0h-3a4 4 0 0 1-4 4Z"
+        fill="url(#paint0_linear_911_331)"
+      />
+    </g>
     <defs>
       <linearGradient id="paint0_linear_911_331" x1={12} y1={2} x2={12} y2={22} gradientUnits="userSpaceOnUse">
         <stop stopColor="#7B8A95" />
         <stop offset={1} stopColor="#424E57" />
       </linearGradient>
+      <filter
+        id="filter0_i_911_331"
+        x={2}
+        y={2}
+        width={20}
+        height={20.5}
+        filterUnits="userSpaceOnUse"
+        colorInterpolationFilters="sRGB"
+      >
+        <feFlood floodOpacity={0} result="BackgroundImageFix" />
+        <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+        <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+        <feOffset dy={0.5} />
+        <feGaussianBlur stdDeviation={0.25} />
+        <feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
+        <feColorMatrix values="0 0 0 0 0.70875 0 0 0 0 0.756 0 0 0 0 0.7875 0 0 0 1 0" />
+        <feBlend in2="shape" result="effect1_innerShadow_911_331" />
+      </filter>
     </defs>
   </svg>
 ))

packages/atlas/src/assets/icons/index.ts

@@ -26,8 +26,8 @@ export * from './ActionClock'
 export * from './ActionClose'
 export * from './ActionClosedCaptions'
 export * from './ActionCopy'
-export * from './ActionCreatorToken'
 export * from './ActionCouncil'
+export * from './ActionCreatorToken'
 export * from './ActionCrown'
 export * from './ActionDislikeOutline'
 export * from './ActionDislikeSolid'

packages/atlas/src/assets/icons/svgs/joy-token-silver-16.svg

@@ -1,6 +1,18 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_i_911_333)">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M15 8C15 11.866 11.866 15 8 15C4.13401 15 1 11.866 1 8C1 4.13401 4.13401 1 8 1C11.866 1 15 4.13401 15 8ZM3 8C3 10.7614 5.23858 13 8 13C10.7614 13 13 10.7614 13 8H11C11 9.65685 9.65685 11 8 11C6.34315 11 5 9.65685 5 8H3Z" fill="url(#paint0_linear_911_333)"/>
+</g>
 <defs>
+<filter id="filter0_i_911_333" x="1" y="1" width="14" height="14.5" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.5"/>
+<feGaussianBlur stdDeviation="0.25"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.70875 0 0 0 0 0.756 0 0 0 0 0.7875 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_911_333"/>
+</filter>
 <linearGradient id="paint0_linear_911_333" x1="8" y1="1" x2="8" y2="15" gradientUnits="userSpaceOnUse">
 <stop stop-color="#7B8A95"/>
 <stop offset="1" stop-color="#424E57"/>

packages/atlas/src/assets/icons/svgs/joy-token-silver-24.svg

@@ -1,6 +1,18 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_i_911_331)">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM11.9961 16C9.78695 16 7.99609 14.2091 7.99609 12H4.99609C4.99609 15.866 8.1301 19 11.9961 19C15.8621 19 18.9961 15.866 18.9961 12H15.9961C15.9961 14.2091 14.2052 16 11.9961 16Z" fill="url(#paint0_linear_911_331)"/>
+</g>
 <defs>
+<filter id="filter0_i_911_331" x="2" y="2" width="20" height="20.5" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.5"/>
+<feGaussianBlur stdDeviation="0.25"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.70875 0 0 0 0 0.756 0 0 0 0 0.7875 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_911_331"/>
+</filter>
 <linearGradient id="paint0_linear_911_331" x1="12" y1="2" x2="12" y2="22" gradientUnits="userSpaceOnUse">
 <stop stop-color="#7B8A95"/>
 <stop offset="1" stop-color="#424E57"/>

packages/atlas/src/components/Avatar/AvatarGroup.styles.ts

@@ -96,7 +96,7 @@ type AvatarWrapperProps = {
 export const AvatarWrapper = styled.div<AvatarWrapperProps>`
   position: relative;
   border-radius: 50%;
-  width: calc(100% + ${({ size }) => (size === 'small' ? 4 : 8)}px);
+  width: fit-content;
   grid-row: 1;
 
   ${({ clickable }) =>

packages/atlas/src/components/NftCarousel/components/MarketplaceCarouselCard/MarketplaceCarouselCard.styles.ts

@@ -4,7 +4,7 @@ import { Link } from 'react-router-dom'
 import { cVar, media, sizes } from '@/styles'
 
 export const InformationContainer = styled.div<{ isPaused: boolean }>`
-  width: fit-content;
+  width: 100%;
   display: flex;
   align-items: end;
   transition: all ${cVar('animationTransitionMedium')};
@@ -12,6 +12,7 @@ export const InformationContainer = styled.div<{ isPaused: boolean }>`
   z-index: 12;
 
   ${media.sm} {
+    width: fit-content;
     position: absolute;
     margin: 0;
     opacity: ${({ isPaused }) => (isPaused ? 1 : 0.25)};
@@ -47,16 +48,24 @@ export const DetailsContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: ${sizes(4)};
+  width: 100%;
 `
 
 export const StatsContainer = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  row-gap: ${sizes(4)};
-  column-gap: ${sizes(6)};
+  display: grid;
+  width: 100%;
+  grid-gap: ${sizes(4)};
+  grid-template-columns: 1fr 1fr;
 
-  * > {
-    flex: 1;
+  ${media.sm} {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: ${sizes(4)};
+    column-gap: ${sizes(8)};
+
+    * > {
+      flex: 1;
+    }
   }
 `
 

packages/atlas/src/components/NftCarousel/components/MarketplaceCarouselCard/NftCarouselDetails.tsx

@@ -135,9 +135,11 @@ export const NftCarouselDetails = ({
         const minutes = Math.floor((timeDiffInSeconds / 60) % 60)
         const seconds = Math.floor(timeDiffInSeconds % 60)
         setTimeLeft(
-          `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`
+          `${hours ? `${String(hours).padStart(2, '0')}:` : ''}${
+            minutes ? `${String(minutes).padStart(2, '0')}:` : ''
+          }${String(seconds).padStart(2, '0')}`
         )
-      }, 12000)
+      }, 1000)
 
       return () => {
         clearInterval(interval)
@@ -176,37 +178,59 @@ export const NftCarouselDetails = ({
         <CSSTransition in={active} timeout={100} classNames={transitions.names.fade} unmountOnExit>
           <InformationContainer isPaused={isPaused}>
             <DetailsContainer>
-              <AvatarGroup spreadAvatars={!smMatch} avatarStrokeColor="transparent" avatars={avatars} />
+              <AvatarGroup spreadAvatars avatarStrokeColor="transparent" avatars={avatars} />
               <Text variant={smMatch ? 'h500' : 'h400'} as={smMatch ? 'h5' : 'h4'}>
                 <StyledLink to={absoluteRoutes.viewer.video(nft.video.id)}>{nftDetails.title}</StyledLink>
               </Text>
               <StatsContainer>
                 {nftDetails.buyNow && (
                   <DetailsContent
+                    avoidIconStyling
                     tileSize={smMatch ? 'big' : 'bigSmall'}
                     caption="BUY NOW"
                     content={nftDetails.buyNow}
-                    icon={<JoyTokenIcon size={16} variant="regular" />}
+                    icon={<JoyTokenIcon size={smMatch ? 24 : 16} variant="silver" />}
                   />
                 )}
                 {nftDetails.topBid && (
                   <DetailsContent
+                    avoidIconStyling
                     tileSize={smMatch ? 'big' : 'bigSmall'}
                     caption="TOP BID"
                     content={nftDetails.topBid}
-                    icon={<JoyTokenIcon size={16} variant="regular" />}
+                    icon={<JoyTokenIcon size={smMatch ? 24 : 16} variant="silver" />}
                   />
                 )}
                 {nftDetails.minBid && (
                   <DetailsContent
+                    avoidIconStyling
                     tileSize={smMatch ? 'big' : 'bigSmall'}
                     caption="MIN BID"
                     content={nftDetails.minBid}
-                    icon={<JoyTokenIcon size={smMatch ? 24 : 16} variant="regular" />}
+                    icon={<JoyTokenIcon size={smMatch ? 24 : 16} variant="silver" />}
                   />
                 )}
 
-                {timeLeft && <DetailsContent tileSize="big" caption="AUCTION ENDS IN" content={timeLeft} />}
+                {timeLeft && (
+                  <DetailsContent
+                    tileSize={smMatch ? 'big' : 'bigSmall'}
+                    caption="AUCTION ENDS IN"
+                    content={timeLeft.split(':').map((tick, i) => {
+                      return (
+                        <>
+                          {i !== 0 ? (
+                            <Text as="span" color="colorText" variant={smMatch ? 'h500' : 'h400'}>
+                              :
+                            </Text>
+                          ) : null}
+                          <Text as="span" variant={smMatch ? 'h500' : 'h400'}>
+                            {tick}
+                          </Text>
+                        </>
+                      )
+                    })}
+                  />
+                )}
               </StatsContainer>
             </DetailsContainer>
           </InformationContainer>

packages/atlas/src/components/_nft/NftTile/NftTileDetails.styles.ts

@@ -97,7 +97,7 @@ export const Details = styled.div`
   }
 `
 
-export const DetailsContentWrapper = styled.div<{ secondary?: boolean }>`
+export const DetailsContentWrapper = styled.div<{ secondary?: boolean; avoidIconStyling?: boolean }>`
   display: flex;
   align-items: center;
   margin-top: ${sizes(1)};
@@ -105,9 +105,13 @@ export const DetailsContentWrapper = styled.div<{ secondary?: boolean }>`
   > svg {
     margin-right: ${sizes(1)};
 
-    * {
-      fill: ${({ secondary }) => (secondary ? cVar('colorText') : cVar('colorTextStrong'))};
-    }
+    ${({ avoidIconStyling, secondary }) =>
+      !avoidIconStyling &&
+      css`
+        path {
+          fill: ${secondary ? cVar('colorText') : cVar('colorTextStrong')};
+        }
+      `}
   }
 `
 

packages/atlas/src/components/_nft/NftTile/NftTileDetails.tsx

@@ -1,4 +1,4 @@
-import { FC, ReactNode, memo, useMemo, useState } from 'react'
+import { FC, ReactElement, ReactNode, memo, useMemo, useState } from 'react'
 import useResizeObserver from 'use-resize-observer'
 
 import { SvgActionMore, SvgActionNotForSale } from '@/assets/icons'
@@ -215,47 +215,52 @@ export const NftTileDetails: FC<NftTileDetailsProps> = ({
 type DetailsContentProps = {
   caption: string
   icon?: ReactNode
-  content: number | string
+  avoidIconStyling?: boolean
+  content: number | string | ReactElement | ReactElement[]
   secondary?: boolean
   tileSize: TileSize | undefined
 }
-export const DetailsContent: FC<DetailsContentProps> = memo(({ tileSize, caption, icon, content, secondary }) => {
-  const getSize = () => {
-    switch (tileSize) {
-      case 'small':
-        return { title: 't100', content: 'h200' } as const
-      default:
-      case 'medium':
-        return { title: 't200', content: 'h300' } as const
-      case 'big':
-        return { title: 'h100', content: 'h500' } as const
-      case 'bigSmall':
-        return { title: 'h100', content: 'h400' } as const
+export const DetailsContent: FC<DetailsContentProps> = memo(
+  ({ tileSize, caption, icon, content, secondary, avoidIconStyling }) => {
+    const getSize = () => {
+      switch (tileSize) {
+        case 'small':
+          return { title: 't100', content: 'h200' } as const
+        default:
+        case 'medium':
+          return { title: 't200', content: 'h300' } as const
+        case 'big':
+          return { title: 'h100', content: 'h500' } as const
+        case 'bigSmall':
+          return { title: 'h100', content: 'h400' } as const
+      }
     }
-  }
 
-  return (
-    <div>
-      <Text as="span" variant={getSize().title} color="colorText">
-        {caption}
-      </Text>
-      <DetailsContentWrapper secondary={secondary}>
-        {icon}{' '}
-        {typeof content === 'string' ? (
-          <Text as="span" variant={getSize().content} color={secondary ? 'colorText' : undefined}>
-            {content}
-          </Text>
-        ) : (
-          <NumberFormat
-            as="span"
-            value={content}
-            format="short"
-            variant={getSize().content}
-            color={secondary ? 'colorText' : undefined}
-          />
-        )}
-      </DetailsContentWrapper>
-    </div>
-  )
-})
+    return (
+      <div>
+        <Text as="span" variant={getSize().title} color="colorText">
+          {caption}
+        </Text>
+        <DetailsContentWrapper avoidIconStyling={avoidIconStyling} secondary={secondary}>
+          {icon}{' '}
+          {typeof content === 'string' ? (
+            <Text as="span" variant={getSize().content} color={secondary ? 'colorText' : undefined}>
+              {content}
+            </Text>
+          ) : typeof content === 'number' ? (
+            <NumberFormat
+              as="span"
+              value={content}
+              format="short"
+              variant={getSize().content}
+              color={secondary ? 'colorText' : undefined}
+            />
+          ) : (
+            content
+          )}
+        </DetailsContentWrapper>
+      </div>
+    )
+  }
+)
 DetailsContent.displayName = 'DetailsContent'

packages/atlas/src/components/_video/BackgroundVideoPlayer/BackgroundVideoPlayer.styles.ts

@@ -41,18 +41,19 @@ export const StyledVideo = styled.video`
 
 export const ButtonBox = styled.div`
   position: absolute;
-  bottom: 25px;
-  right: 26px;
+  bottom: 16px;
+  right: 16px;
   z-index: ${zIndex.modals};
   display: flex;
-  gap: ${sizes(4)};
+  gap: ${sizes(2)};
 
   ${media.sm} {
-    bottom: 30px;
-    right: 42px;
+    bottom: 32px;
+    right: 32px;
   }
 
   svg {
+    filter: ${cVar('filterEffectElevation1Layer1')};
     height: 18px;
     width: 18px;
   }
@@ -61,12 +62,12 @@ export const ButtonBox = styled.div`
 // on Firefox there is a gap between fades, negative margin fixes that
 export const StyledLink = styled(Link, { shouldForwardProp: isPropValid })<{ withFade?: boolean }>`
   ::after {
-    ${media.sm} {
-      content: '';
-      position: absolute;
-      inset: 50% 0 0 0;
-      margin: 0 0 -2px;
+    content: '';
+    position: absolute;
+    inset: 50% 0 0 0;
+    margin: 0 0 -2px;
 
+    ${media.sm} {
       ${(props) =>
         props.withFade &&
         css`