Adjust spacings for video content pages (#1170)

src/components/InfiniteGrids/InfiniteChannelWithVideosGrid.tsx

@@ -13,7 +13,7 @@ import {
 import { ChannelWithVideos } from '@/components/ChannelWithVideos'
 import { useInfiniteGrid } from '@/components/InfiniteGrids/useInfiniteGrid'
 import { languages } from '@/config/languages'
-import { GridHeadingContainer, LoadMoreButton, Select } from '@/shared/components'
+import { GridHeadingContainer, LoadMoreButton, Select, SkeletonLoader, Text } from '@/shared/components'
 import { SvgGlyphChevronRight } from '@/shared/icons'
 import { transitions } from '@/shared/theme'
 
@@ -22,8 +22,6 @@ import {
   LanguageSelectWrapper,
   LoadMoreButtonWrapper,
   Separator,
-  StyledSkeletonLoader,
-  Title,
   TitleWrapper,
 } from './InfiniteGrid.style'
 
@@ -139,7 +137,7 @@ export const InfiniteChannelWithVideosGrid: FC<InfiniteChannelWithVideosGridProp
       <TitleWrapper>
         {title && (
           <GridHeadingContainer>
-            {!isReady ? <StyledSkeletonLoader height={23} width={250} /> : <Title variant="h4">{title}</Title>}
+            {!isReady ? <SkeletonLoader height={23} width={250} /> : <Text variant="h4">{title}</Text>}
             {languageSelector && (
               <CSSTransition
                 in={!!queryNodeLanguages?.length}

src/components/InfiniteGrids/InfiniteGrid.style.ts

@@ -1,24 +1,15 @@
 import styled from '@emotion/styled'
 
-import { Button, SkeletonLoader, Text } from '@/shared/components'
+import { Button } from '@/shared/components'
 import { colors, sizes } from '@/shared/theme'
 
-export const Title = styled(Text)`
-  margin-bottom: ${sizes(4)};
-`
-
-export const StyledSkeletonLoader = styled(SkeletonLoader)`
-  margin-bottom: ${sizes(4)};
-`
-
 export const LoadMoreButtonWrapper = styled.div`
-  margin-top: ${sizes(10)};
+  margin-top: ${sizes(12)};
 `
 
 export const TitleWrapper = styled.div`
   display: flex;
   align-items: center;
-  padding-bottom: ${sizes(5)};
 `
 
 export const LanguageSelectWrapper = styled.div`
@@ -29,8 +20,7 @@ export const LanguageSelectWrapper = styled.div`
 export const Separator = styled.div`
   height: 1px;
   background-color: ${colors.gray[700]};
-  margin-top: ${sizes(12)};
-  margin-bottom: ${sizes(24)};
+  margin: ${sizes(16)} 0;
 `
 
 export const AdditionalLink = styled(Button)`

src/components/InfiniteGrids/InfiniteVideoGrid.tsx

@@ -7,11 +7,11 @@ import {
   GetVideosConnectionQueryVariables,
   VideoWhereInput,
 } from '@/api/queries'
-import { Grid, GridHeadingContainer, LoadMoreButton } from '@/shared/components'
+import { Grid, GridHeadingContainer, LoadMoreButton, SkeletonLoader, Text } from '@/shared/components'
 import { SvgGlyphChevronRight } from '@/shared/icons'
 import { SentryLogger } from '@/utils/logs'
 
-import { AdditionalLink, LoadMoreButtonWrapper, StyledSkeletonLoader, Title, TitleWrapper } from './InfiniteGrid.style'
+import { AdditionalLink, LoadMoreButtonWrapper, TitleWrapper } from './InfiniteGrid.style'
 import { useInfiniteGrid } from './useInfiniteGrid'
 
 import { VideoTile } from '../VideoTile'
@@ -175,7 +175,7 @@ export const InfiniteVideoGrid: React.FC<InfiniteVideoGridProps> = ({
       <TitleWrapper>
         {title && (
           <GridHeadingContainer>
-            {!ready ? <StyledSkeletonLoader height={23} width={250} /> : <Title variant="h4">{title}</Title>}
+            {!ready ? <SkeletonLoader height={23} width={250} /> : <Text variant="h4">{title}</Text>}
             {additionalLink && (
               <AdditionalLink
                 to={additionalLink.url}

src/components/OfficialJoystreamUpdate.tsx

@@ -1,10 +1,8 @@
-import styled from '@emotion/styled'
 import React from 'react'
 
 import { useVideos } from '@/api/hooks'
 import { VideoGallery } from '@/components'
 import { readEnv } from '@/config/envs'
-import { sizes } from '@/shared/theme'
 
 const channelId = readEnv('OFFICIAL_JOYSTREAM_CHANNEL')
 const MAX_VIDEOS = 10
@@ -18,17 +16,13 @@ export const OfficialJoystreamUpdate = () => {
   })
 
   return (
-    <Wrapper>
+    <section>
       <VideoGallery
         title="Official Joystream updates"
         videos={videos || []}
         seeAllUrl={`/channel/${channelId}`}
         loading={loading}
       />
-    </Wrapper>
+    </section>
   )
 }
-
-const Wrapper = styled.div`
-  margin-top: ${sizes(18)};
-`

src/components/TopTenChannels.tsx

@@ -1,8 +1,6 @@
-import styled from '@emotion/styled'
 import React from 'react'
 
 import { useMostFollowedChannelsAllTime } from '@/api/hooks'
-import { sizes } from '@/shared/theme'
 
 import { ChannelGallery } from './ChannelGallery'
 
@@ -11,12 +9,8 @@ export const TopTenChannels = () => {
 
   const isLoading = loading || channels === null
   return (
-    <Wrapper>
+    <section>
       <ChannelGallery hasRanking channels={channels} loading={isLoading} title="Top 10 Channels" />
-    </Wrapper>
+    </section>
   )
 }
-
-const Wrapper = styled.div`
-  margin-top: ${sizes(18)};
-`

src/components/TopTenThisWeek.tsx

@@ -1,20 +1,14 @@
-import styled from '@emotion/styled'
 import React from 'react'
 
 import { useMostViewedVideos } from '@/api/hooks'
 import { VideoGallery } from '@/components'
-import { sizes } from '@/shared/theme'
 
 export const TopTenThisWeek = () => {
   const { videos, loading } = useMostViewedVideos({ limit: 10, viewedWithinDays: 7 })
 
   return (
-    <Wrapper>
+    <section>
       <VideoGallery title="Top 10 this week" videos={videos || []} loading={loading} hasRanking />
-    </Wrapper>
+    </section>
   )
 }
-
-const Wrapper = styled.div`
-  margin-top: ${sizes(18)};
-`

src/shared/components/CallToActionButton/CallToActionButton.style.ts

@@ -13,7 +13,7 @@ const mappedColors = {
 }
 
 export const CallToActionWrapper = styled.div`
-  margin-top: ${sizes(19)};
+  margin-top: ${sizes(32)};
 
   ${media.medium} {
     display: grid;

src/shared/components/Carousel/Carousel.style.ts

@@ -51,7 +51,8 @@ export const Track = styled.div`
 `
 
 export const Dots = styled.div`
-  margin-top: ${sizes(13)};
+  padding: ${sizes(5.5)} 0;
+  margin-top: ${sizes(12)};
   display: none;
 
   ${media.medium} {

src/shared/components/GridHeading/GridHeading.styles.ts

@@ -6,7 +6,7 @@ export const GridHeadingContainer = styled.div`
   display: flex;
   width: 100%;
   align-items: start;
-  margin-bottom: ${sizes(10)};
-  padding-bottom: ${sizes(4)};
+  margin-bottom: ${sizes(12)};
+  padding-bottom: ${sizes(5)};
   border-bottom: 1px solid ${colors.gray[700]};
 `

src/views/viewer/ChannelsView/ChannelsView.tsx

@@ -13,7 +13,7 @@ export const ChannelsView = () => {
       <Header variant="h2">Browse channels</Header>
       <TopTenChannels />
       <DiscoverChannels />
-      <StyledInfiniteChannelWithVideosGrid title="Channels in your language" languageSelector onDemand />
+      <InfiniteChannelWithVideosGrid title="Channels in your language" languageSelector onDemand />
       <CallToActionWrapper>
         <CallToActionButton
           label="Popular on Joystream"
@@ -43,11 +43,11 @@ const Header = styled(Text)`
 `
 
 const StyledViewWrapper = styled(ViewWrapper)`
-  padding-bottom: ${sizes(10)};
-`
+  padding-bottom: ${sizes(16)};
 
-const StyledInfiniteChannelWithVideosGrid = styled(InfiniteChannelWithVideosGrid)`
-  :not(:last-of-type) {
-    margin-bottom: ${sizes(38)};
+  > section {
+    :not(:first-of-type) {
+      margin-top: ${sizes(32)};
+    }
   }
 `

src/views/viewer/HomeView.tsx

@@ -49,14 +49,9 @@ export const HomeView: React.FC = () => {
       <VideoHero />
       <Container className={transitions.names.slide}>
         {!followedLoading && followedChannelsVideosCount ? (
-          <StyledInfiniteVideoGrid
-            title="Followed channels"
-            channelIdIn={channelIdIn}
-            ready={!followedLoading}
-            onDemand
-          />
+          <InfiniteVideoGrid title="Followed channels" channelIdIn={channelIdIn} ready={!followedLoading} onDemand />
         ) : null}
-        <StyledInfiniteVideoGrid
+        <InfiniteVideoGrid
           title="Popular on Joystream"
           idIn={mostViewedVideosIds}
           ready={!mostViewedVideosLoading}
@@ -64,7 +59,7 @@ export const HomeView: React.FC = () => {
         />
         <OfficialJoystreamUpdate />
         <TopTenThisWeek />
-        <StyledInfiniteVideoGrid title="All content" onDemand />
+        <InfiniteVideoGrid title="All content" onDemand />
         <CallToActionWrapper>
           <CallToActionButton
             label="Popular on Joystream"
@@ -92,17 +87,11 @@ export const HomeView: React.FC = () => {
 
 const Container = styled.div`
   position: relative;
+  padding-bottom: ${sizes(16)};
 
-  & > * {
-    margin-bottom: 3rem;
-  }
-`
-
-const StyledInfiniteVideoGrid = styled(InfiniteVideoGrid)`
-  margin: 0;
-  padding-bottom: 4rem;
-
-  :not(:first-of-type) {
-    margin-top: ${sizes(36)};
+  > section {
+    :not(:first-of-type) {
+      margin-top: ${sizes(32)};
+    }
   }
 `

src/views/viewer/NewView/NewView.tsx

@@ -11,8 +11,8 @@ import { sizes } from '@/shared/theme'
 export const NewView: React.FC = () => (
   <StyledViewWrapper>
     <Header variant="h2">New & Noteworthy</Header>
+    <InfiniteVideoGrid title="Videos worth watching" isFeatured onDemand />
     <PromisingNewChannels />
-    <StyledInfiniteVideoGrid title="Videos worth watching" isFeatured onDemand />
     <CallToActionWrapper>
       <CallToActionButton label="Home" to={absoluteRoutes.viewer.index()} colorVariant="yellow" icon={<SvgNavHome />} />
       <CallToActionButton
@@ -35,14 +35,12 @@ const Header = styled(Text)`
   margin: ${sizes(16)} 0;
 `
 
-const StyledInfiniteVideoGrid = styled(InfiniteVideoGrid)`
-  margin: 0;
-  padding-bottom: 4rem;
+const StyledViewWrapper = styled(ViewWrapper)`
+  padding-bottom: ${sizes(16)};
 
-  :not(:first-of-type) {
-    margin-top: ${sizes(36)};
+  > section {
+    :not(:first-of-type) {
+      margin-top: ${sizes(32)};
+    }
   }
 `
-const StyledViewWrapper = styled(ViewWrapper)`
-  padding-bottom: ${sizes(10)};
-`

src/views/viewer/PopularView/PopularView.tsx

@@ -29,14 +29,9 @@ export const PopularView: FC = () => {
 
   return (
     <StyledViewWrapper>
-      <Header variant="h2">Popular</Header>
-      <StyledVideoGallery hasRanking title="Top 10 this month" videos={videos || []} loading={loading} />
-      <StyledInfiniteVideoGrid
-        title="Popular videos"
-        idIn={mostViewedVideosIds}
-        ready={!mostViewedVideosLoading}
-        onDemand
-      />
+      <Header variant="h2">Popular on Joystream</Header>
+      <VideoGallery hasRanking title="Top 10 this month" videos={videos || []} loading={loading} />
+      <InfiniteVideoGrid title="Popular videos" idIn={mostViewedVideosIds} ready={!mostViewedVideosLoading} onDemand />
       <InfiniteChannelWithVideosGrid
         title="Popular channels"
         onDemand
@@ -68,19 +63,15 @@ export const PopularView: FC = () => {
 }
 
 const Header = styled(Text)`
-  margin: ${sizes(16)} 0;
-`
-
-const StyledVideoGallery = styled(VideoGallery)`
-  margin-bottom: ${sizes(38)};
+  margin: ${sizes(17)} 0;
 `
 
 const StyledViewWrapper = styled(ViewWrapper)`
-  padding-bottom: ${sizes(10)};
-`
+  padding-bottom: ${sizes(16)};
 
-const StyledInfiniteVideoGrid = styled(InfiniteVideoGrid)`
-  :not(:last-of-type) {
-    margin-bottom: ${sizes(38)};
+  > section {
+    :not(:first-of-type) {
+      margin-top: ${sizes(32)};
+    }
   }
 `