chore: various responsive tweaks to carousel (#5377)

* feat: resposive tweaks

* feat: display inline badge

* make animation slightly faster

* chore: change color

src/nft/components/explore/Carousel.tsx

@@ -38,7 +38,7 @@ const CarouselItemCard = styled(a.div)`
 
 const CarouselItemIcon = styled.div`
   align-items: center;
-  color: ${({ theme }) => theme.accentAction};
+  color: ${({ theme }) => theme.textPrimary};
   cursor: pointer;
   display: none;
   user-select: none;
@@ -84,7 +84,7 @@ export const Carousel = ({ children, activeIndex, toggleNextSlide }: CarouselPro
         return {
           x: (-y % (MAX_CARD_WIDTH * children.length)) + MAX_CARD_WIDTH * rank,
           immediate: vy < 0 ? prevPosition > position : prevPosition < position,
-          config: { tension: 250, friction: 35 },
+          config: { tension: 250, friction: 30 },
         }
       })
       prev.current = [firstVis, firstVisIdx]

src/nft/components/explore/CarouselCard.tsx

@@ -8,16 +8,6 @@ import { formatWeiToDecimal } from 'nft/utils'
 import styled, { useTheme } from 'styled-components/macro'
 import { ThemedText } from 'theme/components/text'
 
-const CarouselCardContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  background-color: ${({ theme }) => theme.backgroundSurface};
-  border: 1px solid ${({ theme }) => theme.backgroundOutline};
-  border-radius: 20px;
-  overflow: hidden;
-  height: 100%;
-`
-
 const CarouselCardBorder = styled.div`
   width: 100%;
   position: relative;
@@ -86,17 +76,11 @@ const CardHeaderColumn = styled.div`
   padding: 0 40px;
   z-index: 1;
 `
-
-const CardNameRow = styled.div`
-  display: flex;
-  gap: 2px;
-`
 const IconContainer = styled.div`
-  display: flex;
-  flex-shrink: 0;
-  align-items: center;
+  display: inline;
+  vertical-align: text-bottom;
+  margin-left: 2px;
 `
-
 const CollectionNameContainer = styled.div`
   display: -webkit-box;
   overflow: hidden;
@@ -155,12 +139,7 @@ const TableElement = styled.div`
   gap: 6px;
 `
 
-const FirstColumnTextWrapper = styled.div`
-  @media (min-width: ${({ theme }) => theme.breakpoint.sm}px) and (max-width: ${({ theme }) => theme.breakpoint.lg}px) {
-    display: none;
-  }
-}
-`
+const FirstColumnTextWrapper = styled.div``
 
 const CardBottomContainer = styled.div`
   display: grid;
@@ -168,6 +147,21 @@ const CardBottomContainer = styled.div`
   gap: 8px;
   grid-template-columns: auto auto auto;
   padding: 16px 16px 20px;
+`
+
+const MarketplaceIcon = styled.img`
+  width: 20px;
+  height: 20px;
+`
+
+const CarouselCardContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${({ theme }) => theme.backgroundSurface};
+  border: 1px solid ${({ theme }) => theme.backgroundOutline};
+  border-radius: 20px;
+  overflow: hidden;
+  height: 100%;
 
   ${TableElement}:nth-child(3n-1), ${LoadingTableElement}:nth-child(3n-1) {
     justify-self: center;
@@ -176,11 +170,18 @@ const CardBottomContainer = styled.div`
   ${TableElement}:nth-child(3n), ${LoadingTableElement}:nth-child(3n) {
     justify-self: right;
   }
-`
 
-const MarketplaceIcon = styled.img`
-  width: 20px;
-  height: 20px;
+  @media (max-width: 396px) or ((min-width: ${({ theme }) => theme.breakpoint.sm}px) and (max-width: 880px)) {
+    ${FirstColumnTextWrapper} {
+      display: none;
+    }
+    ${TableElement} {
+      justify-self: left !important;
+    }
+    ${CardHeaderColumn} {
+      padding: 0 20px;
+    }
+  }
 `
 
 interface MarketplaceRowProps {
@@ -288,29 +289,28 @@ export const LoadingTable = () => {
   )
 }
 
+const CollectionName = styled(ThemedText.MediumHeader)`
+  display: inline;
+  vertical-align: text-bottom;
+  line-height: 28px;
+`
+
 const CarouselCardHeader = ({ collection }: { collection: TrendingCollection }) => {
   const theme = useTheme()
   return (
     <CardHeaderContainer src={collection.bannerImageUrl}>
       <CardHeaderColumn>
         <CollectionImage src={collection.imageUrl} />
-        <CardNameRow>
-          <CollectionNameContainer>
-            <ThemedText.MediumHeader
-              color={theme.accentTextLightPrimary}
-              fontWeight="500"
-              lineHeight="28px"
-              display="inline"
-            >
-              {collection.name}
-            </ThemedText.MediumHeader>
-          </CollectionNameContainer>
+        <CollectionNameContainer>
+          <CollectionName color={theme.accentTextLightPrimary} fontWeight="500">
+            {collection.name}
+          </CollectionName>
           {collection.isVerified && (
             <IconContainer>
               <VerifiedIcon width="24px" height="24px" />
             </IconContainer>
           )}
-        </CardNameRow>
+        </CollectionNameContainer>
       </CardHeaderColumn>
       <HeaderOverlay />
     </CardHeaderContainer>