Update video grid according to new designs (#1000)

src/components/InfiniteGrids/InfiniteGrid.style.ts

@@ -0,0 +1,16 @@
+import styled from '@emotion/styled'
+
+import { SkeletonLoader, Text } from '@/shared/components'
+import { 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)};
+`

src/components/InfiniteGrids/InfiniteVideoGrid.tsx

@@ -1,4 +1,3 @@
-import styled from '@emotion/styled'
 import React, { useCallback, useEffect, useState } from 'react'
 
 import {
@@ -8,10 +7,11 @@ import {
   GetVideosConnectionQueryVariables,
   VideoWhereInput,
 } from '@/api/queries'
-import { Grid, LoadMoreButton, SkeletonLoader, Text } from '@/shared/components'
-import { sizes } from '@/shared/theme'
+import { Button, Grid, GridHeadingContainer, LoadMoreButton } from '@/shared/components'
+import { SvgGlyphChevronRight } from '@/shared/icons'
 import { SentryLogger } from '@/utils/logs'
 
+import { LoadMoreButtonWrapper, StyledSkeletonLoader, Title } from './InfiniteGrid.style'
 import { useInfiniteGrid } from './useInfiniteGrid'
 
 import { VideoTile } from '../VideoTile'
@@ -31,6 +31,10 @@ type InfiniteVideoGridProps = {
   showChannel?: boolean
   className?: string
   currentlyWatchedVideoId?: string
+  additionalLink?: {
+    name: string
+    url: string
+  }
 }
 
 const INITIAL_ROWS = 2
@@ -51,6 +55,7 @@ export const InfiniteVideoGrid: React.FC<InfiniteVideoGridProps> = ({
   showChannel = true,
   className,
   currentlyWatchedVideoId,
+  additionalLink,
 }) => {
   const [videosPerRow, setVideosPerRow] = useState(INITIAL_VIDEOS_PER_ROW)
   const queryVariables: { where: VideoWhereInput } = {
@@ -156,7 +161,22 @@ export const InfiniteVideoGrid: React.FC<InfiniteVideoGridProps> = ({
   // Right now we'll make the first request and then right after another one based on the resized columns
   return (
     <section className={className}>
-      {title && (!ready ? <StyledSkeletonLoader height={23} width={250} /> : <Title variant="h5">{title}</Title>)}
+      {title && (
+        <GridHeadingContainer>
+          {!ready ? <StyledSkeletonLoader height={23} width={250} /> : <Title variant="h4">{title}</Title>}
+          {additionalLink && (
+            <Button
+              to={additionalLink.url}
+              size="medium"
+              variant="secondary"
+              iconPlacement="right"
+              icon={<SvgGlyphChevronRight width={12} height={12} />}
+            >
+              {additionalLink.name}
+            </Button>
+          )}
+        </GridHeadingContainer>
+      )}
       <Grid onResize={(sizes) => setVideosPerRow(sizes.length)}>{gridContent}</Grid>
       {!allItemsLoaded && !loading && (
         <LoadMoreButtonWrapper>
@@ -166,15 +186,3 @@ export const InfiniteVideoGrid: React.FC<InfiniteVideoGridProps> = ({
     </section>
   )
 }
-
-const Title = styled(Text)`
-  margin-bottom: ${sizes(4)};
-`
-
-const StyledSkeletonLoader = styled(SkeletonLoader)`
-  margin-bottom: ${sizes(4)};
-`
-
-const LoadMoreButtonWrapper = styled.div`
-  margin-top: ${sizes(10)};
-`

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

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled'
 
-import { colors, sizes, transitions, zIndex } from '@/shared/theme'
+import { colors, sizes, transitions, typography, zIndex } from '@/shared/theme'
 
 import { IconButton } from '../IconButton'
 
@@ -18,6 +18,8 @@ type HasPadding = {
 export const Arrow = styled(IconButton)`
   z-index: ${zIndex.nearOverlay};
   cursor: pointer;
+  font-size: ${typography.sizes.subtitle2};
+  padding: 0;
 
   &.disabled {
     opacity: 0.5;

src/shared/components/Gallery/Gallery.style.ts

@@ -1,29 +1,11 @@
 import styled from '@emotion/styled'
 
-import { colors, sizes, typography } from '../../theme'
+import { sizes } from '../../theme'
 
 export const Container = styled.section`
   display: flex;
   flex-direction: column;
 `
-export const HeadingContainer = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: start;
-  margin-bottom: ${sizes(10)};
-  padding-bottom: ${sizes(4)};
-  border-bottom: 1px solid ${colors.gray[700]};
-
-  > h4 {
-    font-size: ${typography.sizes.h4};
-    margin: 0;
-  }
-
-  > button {
-    font-size: ${typography.sizes.subtitle2};
-    padding: 0;
-  }
-`
 
 export const CarouselArrowsContainer = styled.div`
   display: grid;

src/shared/components/Gallery/Gallery.tsx

@@ -1,9 +1,10 @@
 import React, { ComponentProps, useRef } from 'react'
 
+import { GridHeadingContainer } from '@/shared/components'
 import { Arrow } from '@/shared/components/Carousel/Carousel.style'
 import { SvgGlyphChevronLeft, SvgGlyphChevronRight } from '@/shared/icons'
 
-import { CarouselArrowsContainer, Container, HeadingContainer } from './Gallery.style'
+import { CarouselArrowsContainer, Container } from './Gallery.style'
 
 import { Carousel, CarouselProps } from '../Carousel/Carousel'
 import { Text } from '../Text'
@@ -25,7 +26,7 @@ export const Gallery: React.FC<GalleryProps> = ({ title, className, ...carouselP
   const carouselRef = useRef<ImperativeHandleData>(null)
   return (
     <Container className={className}>
-      <HeadingContainer>
+      <GridHeadingContainer>
         {title && <Text variant="h4">{title}</Text>}
         <CarouselArrowsContainer>
           <Arrow {...carouselRef.current?.getPrevArrowProps()} ref={prevArrowRef} size="large" variant="secondary">
@@ -35,7 +36,7 @@ export const Gallery: React.FC<GalleryProps> = ({ title, className, ...carouselP
             <SvgGlyphChevronRight />
           </Arrow>
         </CarouselArrowsContainer>
-      </HeadingContainer>
+      </GridHeadingContainer>
       <Carousel
         {...carouselProps}
         prevArrowRef={prevArrowRef}

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

@@ -0,0 +1,12 @@
+import styled from '@emotion/styled'
+
+import { colors, sizes } from '@/shared/theme'
+
+export const GridHeadingContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: start;
+  margin-bottom: ${sizes(10)};
+  padding-bottom: ${sizes(4)};
+  border-bottom: 1px solid ${colors.gray[700]};
+`

src/shared/components/GridHeading/index.ts

@@ -0,0 +1 @@
+export * from './GridHeading.styles'

src/shared/components/index.ts

@@ -46,3 +46,4 @@ export * from './AnimatedError'
 export * from './EmptyFallback'
 export * from './LayoutGrid/LayoutGrid'
 export * from './LoadMoreButton'
+export * from './GridHeading'