Code Review Fixes

package.json

@@ -95,7 +95,6 @@
     "react-dom": "^16.13.1",
     "react-glider": "^2.0.2",
     "react-player": "^2.2.0",
-    "react-responsive": "^8.1.0",
     "react-scripts": "3.4.1",
     "react-spring": "^8.0.27",
     "storybook-addon-jsx": "^7.1.15",
@@ -124,7 +123,5 @@
     "clearMocks": true,
     "coverageDirectory": ".coverage"
   },
-  "devDependencies": {
-    "@types/react-responsive": "^8.0.2"
-  }
+  "devDependencies": {}
 }

src/components/VideoBestMatch/VideoBestMatch.style.tsx

@@ -1,4 +1,5 @@
 import styled from '@emotion/styled'
+import { fluidRange } from 'polished'
 import { colors, breakpoints as bp } from '@/shared/theme'
 
 export const Container = styled.div`
@@ -8,28 +9,36 @@ export const Container = styled.div`
 
 export const Content = styled.div`
   display: grid;
-  grid-template-columns: minmax(50%, 650px) 1fr;
+  grid-template-columns: min(650px, 50%) 1fr;
   grid-column-gap: 24px;
 
-  @media (max-width: ${bp.mobile}) {
+  @media (max-width: 750px) {
     grid-template-columns: 1fr;
   }
 `
-export const Poster = styled.img`
+
+export const PosterContainer = styled.div`
+  position: relative;
   width: 100%;
+  height: 0;
   max-height: 350px;
-  object-fit: cover;
-  object-position: center;
-
+  padding-top: 56.25%;
   :hover {
     cursor: pointer;
   }
 `
+export const Poster = styled.img`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+`
 export const TitleContainer = styled.div`
   max-width: 500px;
 `
 export const Title = styled.h1`
-  font-size: 40px;
+  ${fluidRange({ prop: 'fontSize', fromSize: '32px', toSize: '40px' })};
   line-height: 1.2;
   margin: 0;
   margin-bottom: 12px;

src/components/VideoBestMatch/VideoBestMatch.tsx

@@ -2,7 +2,15 @@ import React from 'react'
 
 import { VideoFields } from '@/api/queries/__generated__/VideoFields'
 import { formatVideoViewsAndDate } from '@/utils/video'
-import { Container, Content, InnerContainer, Poster, Title, TitleContainer } from './VideoBestMatch.style'
+import {
+  Container,
+  Content,
+  InnerContainer,
+  Poster,
+  PosterContainer,
+  Title,
+  TitleContainer,
+} from './VideoBestMatch.style'
 
 type BestVideoMatchProps = {
   video: VideoFields
@@ -16,7 +24,9 @@ const BestVideoMatch: React.FC<BestVideoMatchProps> = ({
   <Container>
     <h3>Best Match</h3>
     <Content>
-      <Poster src={thumbnailURL} onClick={onClick} />
+      <PosterContainer>
+        <Poster src={thumbnailURL} onClick={onClick} />
+      </PosterContainer>
       <InnerContainer>
         <TitleContainer>
           <Title>{title}</Title>

src/shared/components/Grid/Grid.tsx

@@ -1,22 +1,22 @@
 import React from 'react'
 import styled from '@emotion/styled'
 import useResizeObserver from 'use-resize-observer'
-import { useMediaQuery } from 'react-responsive'
-import { spacing } from '../../theme'
+import { spacing, breakpoints } from '../../theme'
 
 const toPx = (n: number | string) => (typeof n === 'number' ? `${n}px` : n)
 
-const LARGE_VIEWPORT_BREAKPOINT = toPx(2000)
-
-type ContainerProps = {
-  gap: number | string
-  gridTemplateColumns: string
-}
+type ContainerProps = Required<Pick<GridProps, 'gap' | 'maxColumns' | 'minWidth' | 'repeat'>>
 
 const Container = styled.div<ContainerProps>`
   display: grid;
   gap: ${(props) => toPx(props.gap)};
-  grid-template-columns: ${(props) => props.gridTemplateColumns};
+  grid-template-columns: repeat(
+    auto-${(props) => props.repeat},
+    minmax(min(${(props) => toPx(props.minWidth)}, 100%), 1fr)
+  );
+  @media (min-width: ${toPx(breakpoints.largeViewport)}) {
+    grid-template-columns: repeat(${(props) => props.maxColumns}, 1fr);
+  }
 `
 
 type GridProps = {
@@ -46,14 +46,17 @@ const Grid: React.FC<GridProps> = ({
       }
     },
   })
-  const isLargeViewport = useMediaQuery({ query: `(min-width: ${LARGE_VIEWPORT_BREAKPOINT})` })
-
-  const gridTemplateColumns = isLargeViewport
-    ? `repeat(${maxColumns}, 1fr)`
-    : `repeat(auto-${repeat}, minmax(min(${toPx(minWidth)}, 100%), 1fr))`
 
   return (
-    <Container {...props} className={className} ref={gridRef} gap={gap} gridTemplateColumns={gridTemplateColumns} />
+    <Container
+      {...props}
+      className={className}
+      ref={gridRef}
+      gap={gap}
+      minWidth={minWidth}
+      maxColumns={maxColumns}
+      repeat={repeat}
+    />
   )
 }
 export default Grid

src/shared/components/VideoPreview/VideoPreview.styles.tsx

@@ -18,10 +18,6 @@ export const CoverImage = styled.img<CoverImageProps>`
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: ${colors.gray['400']};
-  background-size: cover;
-  object-fit: cover;
-  color: transparent;
 `
 
 export const CoverHoverOverlay = styled.div`

src/shared/theme/breakpoints.ts

@@ -1,4 +1,5 @@
 export default {
   mobile: '480px',
   tablet: '1156px',
+  largeViewport: '2000px',
 }

yarn.lock

@@ -2917,13 +2917,6 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-responsive@^8.0.2":
-  version "8.0.2"
-  resolved "https://registry.yarnpkg.com/@types/react-responsive/-/react-responsive-8.0.2.tgz#959fdc32f72e38b807e32be617a74be2c315081b"
-  integrity sha512-DTvm3Hb77v0hme7L4GYzRjLQqlZP+zNImFBzdKbSH7CsQ5c7QebGnSQX2Xf3BaA0rm/TQE57eFMhMGLcMe/A9w==
-  dependencies:
-    "@types/react" "*"
-
 "@types/react-syntax-highlighter@11.0.4":
   version "11.0.4"
   resolved "https://registry.yarnpkg.com/@types/react-syntax-highlighter/-/react-syntax-highlighter-11.0.4.tgz#d86d17697db62f98046874f62fdb3e53a0bbc4cd"
@@ -6222,11 +6215,6 @@ css-loader@^3.0.0:
     schema-utils "^2.7.0"
     semver "^6.3.0"
 
-css-mediaquery@^0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/css-mediaquery/-/css-mediaquery-0.1.2.tgz#6a2c37344928618631c54bd33cedd301da18bea0"
-  integrity sha1-aiw3NEkoYYYxxUvTPO3TAdoYvqA=
-
 css-prefers-color-scheme@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/css-prefers-color-scheme/-/css-prefers-color-scheme-3.1.1.tgz#6f830a2714199d4f0d0d0bb8a27916ed65cff1f4"
@@ -9094,11 +9082,6 @@ hyperlinker@^1.0.0:
   resolved "https://registry.yarnpkg.com/hyperlinker/-/hyperlinker-1.0.0.tgz#23dc9e38a206b208ee49bc2d6c8ef47027df0c0e"
   integrity sha512-Ty8UblRWFEcfSuIaajM34LdPXIhbs1ajEX/BBPv24J+enSVaEVY63xQ6lTO9VRYS5LAoghIG0IDJ+p+IPzKUQQ==
 
-hyphenate-style-name@^1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz#691879af8e220aea5750e8827db4ef62a54e361d"
-  integrity sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==
-
 iconv-lite@0.4.24, iconv-lite@^0.4.24:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
@@ -11285,13 +11268,6 @@ markdown-to-jsx@^6.11.4:
     prop-types "^15.6.2"
     unquote "^1.1.0"
 
-matchmediaquery@^0.3.0:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/matchmediaquery/-/matchmediaquery-0.3.1.tgz#8247edc47e499ebb7c58f62a9ff9ccf5b815c6d7"
-  integrity sha512-Hlk20WQHRIm9EE9luN1kjRjYXAQToHOIAHPJn9buxBwuhfTHoKUcX+lXBbxc85DVQfXYbEQ4HcwQdd128E3qHQ==
-  dependencies:
-    css-mediaquery "^0.1.2"
-
 material-colors@^1.2.1:
   version "1.2.6"
   resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.6.tgz#6d1958871126992ceecc72f4bcc4d8f010865f46"
@@ -14175,16 +14151,6 @@ react-popper@^1.3.7:
     typed-styles "^0.0.7"
     warning "^4.0.2"
 
-react-responsive@^8.1.0:
-  version "8.1.0"
-  resolved "https://registry.yarnpkg.com/react-responsive/-/react-responsive-8.1.0.tgz#afcc2293c46a37b1e7926ff7fef66bcb147e7cba"
-  integrity sha512-U8Nv2/ZWACIw/fAE9XNPbc2Xo33X5q1bcCASc2SufvJ9ifB+o/rokfogfznSVcvS22hN1rafGi0uZD6GiVFEHw==
-  dependencies:
-    hyphenate-style-name "^1.0.0"
-    matchmediaquery "^0.3.0"
-    prop-types "^15.6.1"
-    shallow-equal "^1.1.0"
-
 react-scripts@3.4.1:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-3.4.1.tgz#f551298b5c71985cc491b9acf3c8e8c0ae3ada0a"