Adjust vertical space on market view (#4219)

packages/atlas/src/components/NftCarousel/MarketplaceCarousel.tsx

@@ -63,17 +63,19 @@ export const MarketplaceCarousel = ({ carouselProps, isLoading, ...rest }: Marke
   }
 
   return (
-    <Carousel
-      spaceBetween={mdMatch ? 24 : 16}
-      loop
-      roundLengths
-      centeredSlides
-      slidesPerView={1.3}
-      breakpoints={responsive}
-      onSwiper={(swiper) => setGlider(swiper)}
-    >
-      {content}
-    </Carousel>
+    <FullWidthWrapper>
+      <Carousel
+        spaceBetween={mdMatch ? 24 : 16}
+        loop
+        roundLengths
+        centeredSlides
+        slidesPerView={1.3}
+        breakpoints={responsive}
+        onSwiper={(swiper) => setGlider(swiper)}
+      >
+        {content}
+      </Carousel>
+    </FullWidthWrapper>
   )
 }
 
@@ -85,3 +87,10 @@ const StyledSkeleton = styled(SkeletonLoader)`
     aspect-ratio: 16/9;
   }
 `
+
+export const FullWidthWrapper = styled.div`
+  width: calc(100% + var(--size-global-horizontal-padding) * 2);
+  margin-left: calc(var(--size-global-horizontal-padding) * -1);
+  overflow: hidden;
+  position: relative;
+`

packages/atlas/src/views/viewer/MarketplaceView/FeaturedNftsSection/FeaturedNftsSection.tsx

@@ -3,6 +3,7 @@ import { FC, useState } from 'react'
 import { useNfts } from '@/api/hooks/nfts'
 import { Banner } from '@/components/Banner'
 import { CarouselProps } from '@/components/Carousel'
+import { LimitedWidthContainer } from '@/components/LimitedWidthContainer'
 import { Section } from '@/components/Section/Section'
 import { StyledSvgAlertsInformative24 } from '@/components/Tooltip/Tooltip.styles'
 import { NftTileViewer } from '@/components/_nft/NftTileViewer'
@@ -143,43 +144,45 @@ export const FeaturedNftsSection: FC = () => {
   }
 
   return (
-    <FeaturedNftsWrapper>
-      <FeatureNftModal isOpen={isFeatureNftModalOpen} onClose={() => setIsFeatureNfrModalOpen(false)} />
-      {items.length >= 4 && (
-        <Section
-          headerProps={{
-            start: {
-              type: 'title',
-              title: 'Featured',
-            },
-          }}
-          contentProps={{
-            type: 'carousel',
-            children: items.map((nft, idx) => <NftTileViewer nftId={nft.id} key={idx} />),
-            spaceBetween: mdMatch ? 24 : 16,
-            breakpoints: responsive,
-          }}
-        />
-      )}
-      {activeChannel && activeChannel.totalVideosCreated > 0 && (
-        <Banner
-          title="How to get featured?"
-          icon={<StyledSvgAlertsInformative24 />}
-          description={`The ${
-            atlasConfig.general.appName
-          } team handpicks featured video NFTs as a way to recognize and promote high-quality content. To increase your chances of getting your NFT featured on the marketplace, ${
-            atlasConfig.general.appContentFocus
-              ? `upload videos related to ${atlasConfig.general.appContentFocus} and `
-              : ''
-          }make sure your NFT is up for sale.`}
-          actionButton={{
-            text: 'Submit your video NFT to be featured',
-            onClick: () => {
-              setIsFeatureNfrModalOpen(true)
-            },
-          }}
-        />
-      )}
-    </FeaturedNftsWrapper>
+    <LimitedWidthContainer big noBottomPadding fullWidth>
+      <FeaturedNftsWrapper>
+        <FeatureNftModal isOpen={isFeatureNftModalOpen} onClose={() => setIsFeatureNfrModalOpen(false)} />
+        {items.length >= 4 && (
+          <Section
+            headerProps={{
+              start: {
+                type: 'title',
+                title: 'Featured',
+              },
+            }}
+            contentProps={{
+              type: 'carousel',
+              children: items.map((nft, idx) => <NftTileViewer nftId={nft.id} key={idx} />),
+              spaceBetween: mdMatch ? 24 : 16,
+              breakpoints: responsive,
+            }}
+          />
+        )}
+        {activeChannel && activeChannel.totalVideosCreated > 0 && (
+          <Banner
+            title="How to get featured?"
+            icon={<StyledSvgAlertsInformative24 />}
+            description={`The ${
+              atlasConfig.general.appName
+            } team handpicks featured video NFTs as a way to recognize and promote high-quality content. To increase your chances of getting your NFT featured on the marketplace, ${
+              atlasConfig.general.appContentFocus
+                ? `upload videos related to ${atlasConfig.general.appContentFocus} and `
+                : ''
+            }make sure your NFT is up for sale.`}
+            actionButton={{
+              text: 'Submit your video NFT to be featured',
+              onClick: () => {
+                setIsFeatureNfrModalOpen(true)
+              },
+            }}
+          />
+        )}
+      </FeaturedNftsWrapper>
+    </LimitedWidthContainer>
   )
 }

packages/atlas/src/views/viewer/MarketplaceView/MarketplaceView.styles.ts

@@ -12,14 +12,9 @@ export const MarketplaceWrapper = styled.div`
   }
 `
 
-export const FullWidthWrapper = styled.div`
+export const TableFullWitdhtWrapper = styled.div`
   width: calc(100% + var(--size-global-horizontal-padding) * 2);
   margin-left: calc(var(--size-global-horizontal-padding) * -1);
-  overflow: hidden;
-  position: relative;
-`
-
-export const TableFullWitdhtWrapper = styled(FullWidthWrapper)`
   background-color: ${cVar('colorBackgroundMuted')};
   padding: ${sizes(8)} var(--size-global-horizontal-padding);
 

packages/atlas/src/views/viewer/MarketplaceView/MarketplaceView.tsx

@@ -8,7 +8,7 @@ import { TopSellingChannelsTable } from '@/components/TopSellingChannelsTable'
 import { useHeadTags } from '@/hooks/useHeadTags'
 
 import { FeaturedNftsSection } from './FeaturedNftsSection/FeaturedNftsSection'
-import { FullWidthWrapper, MarketplaceWrapper, TableFullWitdhtWrapper } from './MarketplaceView.styles'
+import { MarketplaceWrapper, TableFullWitdhtWrapper } from './MarketplaceView.styles'
 
 export const MarketplaceView: FC = () => {
   const headTags = useHeadTags('Marketplace')
@@ -17,12 +17,8 @@ export const MarketplaceView: FC = () => {
   return (
     <MarketplaceWrapper>
       {headTags}
-      <FullWidthWrapper>
-        <MarketplaceCarousel type="nft" nfts={nfts} isLoading={loading} />
-      </FullWidthWrapper>
-      <LimitedWidthContainer big noBottomPadding fullWidth>
-        <FeaturedNftsSection />
-      </LimitedWidthContainer>
+      <MarketplaceCarousel type="nft" nfts={nfts} isLoading={loading} />
+      <FeaturedNftsSection />
       <TableFullWitdhtWrapper>
         <LimitedWidthContainer big noBottomPadding>
           <TopSellingChannelsTable />