Add missing separator on browse channels and some other style changes (#1123)

* add missing separator

* fix font size

* change select height

* remove padding-bottom

* use select variant

* refactor

src/components/ChannelWithVideos.tsx

@@ -1,9 +1,9 @@
 import React, { FC, Fragment, useState } from 'react'
 
 import { GetVideosConnectionDocument, GetVideosConnectionQuery, GetVideosConnectionQueryVariables } from '@/api/queries'
-import { ChannelPreview } from '@/components/ChannelPreview'
+import { ChannelCard } from '@/components/ChannelCard'
 import { useInfiniteGrid } from '@/components/InfiniteGrids/useInfiniteGrid'
-import { VideoPreview } from '@/components/VideoPreview'
+import { VideoTile } from '@/components/VideoTile'
 import { Grid } from '@/shared/components'
 
 type ChannelWithVideosProps = {
@@ -39,14 +39,14 @@ export const ChannelWithVideos: FC<ChannelWithVideosProps> = ({ channelId }) =>
   const gridContent = (
     <>
       {[...displayedItems, ...placeholderItems]?.map((video, idx) => (
-        <VideoPreview id={video.id} key={`channels-with-videos-${idx}`} showChannel />
+        <VideoTile id={video.id} key={`channels-with-videos-${idx}`} showChannel />
       ))}
     </>
   )
 
   return (
     <>
-      <ChannelPreview id={channelId} variant="secondary" />
+      <ChannelCard id={channelId} variant="secondary" />
       <Grid onResize={(sizes) => setVideosPerRow(sizes.length)}>{gridContent}</Grid>
     </>
   )

src/components/InfiniteGrids/InfiniteChannelWithVideosGrid.tsx

@@ -105,14 +105,14 @@ export const InfiniteChannelWithVideosGrid: FC<InfiniteChannelWithVideosGridProp
   return (
     <section className={className}>
       <TitleWrapper>
-        {title && <Text variant="h5">{title}</Text>}
+        {title && <Text variant="h4">{title}</Text>}
         {languageSelector && (
           <LanguageSelectWrapper>
             <Select
               items={mappedLanguages || []}
               disabled={languagesLoading}
               value={selectedLanguage}
-              size="small"
+              size="regular"
               onChange={onSelectLanguage}
             />
           </LanguageSelectWrapper>

src/components/InfiniteGrids/InfiniteGrid.style.ts

@@ -17,6 +17,7 @@ export const LoadMoreButtonWrapper = styled.div`
 
 export const TitleWrapper = styled.div`
   display: flex;
+  border-bottom: 1px solid ${colors.gray[700]};
 `
 
 export const LanguageSelectWrapper = styled.div`

src/shared/components/Select/Select.style.ts

@@ -35,7 +35,7 @@ export const SelectButton = styled.button<SelectButtonProps>`
     switch (size) {
       case 'regular':
         return css`
-          min-height: 42px;
+          min-height: ${sizes(10)};
         `
       case 'small':
         return css`