chore: various banner responsive tweaks (#5408)

* chore: fix black collection title in light mode

* fix: explore bottom padding on mobile, align on larger devices

* chore: introduce new xs breakpoint, as per Figma

* feat: new copy for banner on mobile + text wrapping

* chore: extra code

* chore: remove unused theme

* chore: update copy

* Update Banner.tsx

* chore: wrap it up

src/nft/components/explore/Banner.tsx

 import { useLoadCollectionQuery } from 'graphql/data/nft/Collection'
-import { useIsMobile } from 'nft/hooks'
 import { fetchTrendingCollections } from 'nft/queries'
 import { TimePeriod } from 'nft/types'
 import { calculateCardIndex } from 'nft/utils'
@@ -16,11 +15,12 @@ const BannerContainer = styled.div`
   display: flex;
   justify-content: center;
   width: 100%;
-  padding-top: 32px;
+  padding-top: 22px;
   position: relative;
+  max-width: 1200px;
 
   @media only screen and (min-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) {
-    padding: 32px 16px 0 16px;
+    padding: 32px 16px;
   }
 `
 
@@ -72,8 +72,6 @@ const HeaderContainer = styled.div`
   font-weight: 500;
   font-size: 72px;
   line-height: 88px;
-  justify-content: start;
-  align-items: start;
   align-self: center;
   flex-shrink: 0;
   padding-bottom: 32px;
@@ -91,12 +89,24 @@ const HeaderContainer = styled.div`
   }
 
   @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) {
-    font-size: 20px;
-    line-height: 28px;
-    justify-content: center;
-    align-items: center;
-    padding-top: 0px;
-    padding-bottom: 0px;
+    line-height: 43px;
+    text-align: center;
+    padding-bottom: 16px;
+
+    br {
+      display: none;
+    }
+  }
+
+  /* Custom breakpoint to split into two lines on smaller screens */
+  @media only screen and (max-width: 550px) {
+    font-size: 28px;
+    line-height: 34px;
+    padding-bottom: 0;
+
+    br {
+      display: unset;
+    }
   }
 `
 
@@ -106,7 +116,6 @@ const TRENDING_COLLECTION_SIZE = 5
 
 const Banner = () => {
   const navigate = useNavigate()
-  const isMobile = useIsMobile()
 
   const { data } = useQuery(
     ['trendingCollections'],
@@ -155,7 +164,7 @@ const Banner = () => {
       ) : null}
       <BannerMainArea>
         <HeaderContainer>
-          Better prices. {!isMobile && <br />}
+          Better prices. <br />
           More listings.
         </HeaderContainer>
         {collections ? (

src/nft/components/explore/CarouselCard.tsx

@@ -5,7 +5,7 @@ import { useCollectionQuery } from 'graphql/data/nft/Collection'
 import { VerifiedIcon } from 'nft/components/icons'
 import { Markets, TrendingCollection } from 'nft/types'
 import { formatWeiToDecimal } from 'nft/utils'
-import styled, { useTheme } from 'styled-components/macro'
+import styled from 'styled-components/macro'
 import { ThemedText } from 'theme/components/text'
 
 const CarouselCardBorder = styled.div`
@@ -176,7 +176,8 @@ const CarouselCardContainer = styled.div`
     justify-self: right;
   }
 
-  @media (max-width: 396px) or ((min-width: ${({ theme }) => theme.breakpoint.sm}px) and (max-width: 880px)) {
+  @media (max-width: ${({ theme }) => theme.breakpoint.xs}px) or ((min-width: ${({ theme }) =>
+      theme.breakpoint.sm}px) and (max-width: 880px)) {
     ${FirstColumnTextWrapper} {
       display: none;
     }
@@ -300,13 +301,12 @@ const CollectionName = styled(ThemedText.MediumHeader)`
 `
 
 const CarouselCardHeader = ({ collection }: { collection: TrendingCollection }) => {
-  const theme = useTheme()
   return (
     <CardHeaderContainer src={collection.bannerImageUrl}>
       <CardHeaderColumn>
         <CollectionImage src={collection.imageUrl} />
         <CollectionNameContainer>
-          <CollectionName color={theme.accentTextLightPrimary} fontWeight="500">
+          <CollectionName color="accentTextLightPrimary" fontWeight="500">
             {collection.name}
           </CollectionName>
           {collection.isVerified && (

src/nft/components/explore/TrendingCollections.tsx

@@ -22,10 +22,7 @@ const ExploreContainer = styled.div`
   flex-direction: column;
   width: 100%;
   max-width: 1200px;
-
-  padding-left: 16px;
-  padding-right: 16px;
-  padding-top: 36px;
+  padding: 0 16px;
 `
 
 const StyledHeader = styled.div`

src/theme/index.tsx

@@ -18,6 +18,7 @@ export const MEDIA_WIDTHS = {
 }
 
 const BREAKPOINTS = {
+  xs: 396,
   sm: 640,
   md: 768,
   lg: 1024,