feat(layout): ui tweaks

jwplayer · May 4, 2021 · f07809d · f07809d
1 parent 1f1a5fb
commit f07809d
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 45 deletions.
diff --git a/src/components/ButtonLink/ButtonLink.module.scss b/src/components/ButtonLink/ButtonLink.module.scss
@@ -14,7 +14,7 @@
   align-items: center;
   min-height: 38px;
   padding: 0 10px;
-  color: inherit;
+  color: variables.$white;
   font-family: theme.$body-alt-font-family;
   font-weight: 700;
   text-align: center;

diff --git a/src/components/Card/Card.module.scss b/src/components/Card/Card.module.scss
@@ -1,32 +1,35 @@
 @use 'sass:math';
 @use "../../styles/mixins/responsive";
+@use '../../styles/variables';
 
 .card {
   cursor: pointer;
-  transition: transform .2s ease-out,-webkit-transform .2s ease-out;
+  transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
+
+  .poster {
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+    background-color: var(--card-slider-loading-card-bg);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+    border-radius: 4px;
+    box-shadow: 0 8px 10px rgb(0 0 0 / 14%), 0 3px 14px rgb(0 0 0 / 12%),
+      0 4px 5px rgb(0 0 0 / 20%);
+    transition: box-shadow 0.1s ease;
+  }
 
   &:hover {
-    transform: scale(1.05);
     z-index: 10;
+    transform: scale(1.05);
     & .poster {
-      box-shadow: 0 0 0 3px var(--card-border-hover-color), 0 8px 10px rgb(0 0 0 / 14%), 0 3px 14px rgb(0 0 0 / 12%), 0 4px 5px rgb(0 0 0 / 20%);
+      box-shadow: 0 0 0 3px var(--highlight-color), 0 8px 10px rgb(0 0 0 / 14%),
+        0 3px 14px rgb(0 0 0 / 12%), 0 4px 5px rgb(0 0 0 / 20%);
     }
   }
 }
 
-.poster {
-  position: relative;
-  overflow: hidden;
-  width: 100%;
-  background-color: var(--card-slider-loading-card-bg);
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: cover;
-  border-radius: 4px;
-  transition: box-shadow .1s ease;
-  box-shadow: 0 8px 10px rgb(0 0 0 / 14%), 0 3px 14px rgb(0 0 0 / 12%), 0 4px 5px rgb(0 0 0 / 20%);
-}
-
 $aspects: ((1, 1), (2, 1), (2, 3), (4, 3), (5, 3), (16, 9), (9, 16));
 @each $base, $modifier in $aspects {
   .aspect#{$base}#{$modifier} {
@@ -36,30 +39,26 @@ $aspects: ((1, 1), (2, 1), (2, 3), (4, 3), (5, 3), (16, 9), (9, 16));
 
 .tag {
   position: absolute;
-  bottom: 15px;
-  right: 15px;
-  background-color: var(--card-tag-bg);
-  font-family: var(--body-font-family);
+  right: 8px;
+  bottom: 8px;
   padding: 4px 8px;
-  border-radius: 4px;
   color: var(--card-color);
-
-  @include responsive.mobile-and-tablet {
-    padding: 2px 4px;
-    bottom: 8px;
-    right: 8px;
-  }
+  font-family: var(--body-font-family);
+  font-size: 16px;
+  background-color: rgba(variables.$black, 0.7);
+  border-radius: 4px;
 }
 
 .title {
+  width: 100%;
+  min-height: 19px;
+  margin-top: 8px;
+  margin-bottom: 0;
   overflow: hidden;
-  font-family: var(--body-alt-font-family);
   color: var(--card-color);
+  font-family: var(--body-alt-font-family);
   font-weight: 700;
-  width: 100%;
-  text-overflow: ellipsis;
   white-space: nowrap;
-  margin-top: 8px;
-  margin-bottom: 0px;
-  min-height: 19px;
+  text-align: left;
+  text-overflow: ellipsis;
 }
diff --git a/src/components/CardGrid/CardGrid.module.scss b/src/components/CardGrid/CardGrid.module.scss
@@ -1,4 +1,4 @@
 .cardGrid {
   display: grid;
-  grid-gap: 8px;
+  grid-gap: 24px 16px;
 }
diff --git a/src/components/CardGrid/CardGrid.test.tsx b/src/components/CardGrid/CardGrid.test.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { render } from '@testing-library/react';
 
-import './matchMedia.mock';
+import '../../hooks/matchMedia.mock';
 import CardGrid from './CardGrid';
 
 describe('<CardGrid>', () => {
   it('renders card grid and children', () => {
-    const { getByText } = render((<CardGrid>aa</CardGrid>));
+    const { getByText } = render(<CardGrid>aa</CardGrid>);
     const cardGrid = getByText(/aa/i);
     expect(document.body.contains(cardGrid));
   });

diff --git a/src/components/CardGrid/CardGrid.tsx b/src/components/CardGrid/CardGrid.tsx
@@ -5,13 +5,13 @@ import useBreakpoint, { Breakpoint } from '../../hooks/useBreakpoint';
 import styles from './CardGrid.module.scss';
 
 // TEMP DATA
-const cols = { 
-  [Breakpoint.xs]: 2, 
-  [Breakpoint.sm]: 3, 
-  [Breakpoint.md]: 4, 
-  [Breakpoint.lg]: 5, 
-  [Breakpoint.xl]: 6 
-}
+const cols = {
+  [Breakpoint.xs]: 2,
+  [Breakpoint.sm]: 2,
+  [Breakpoint.md]: 2,
+  [Breakpoint.lg]: 4,
+  [Breakpoint.xl]: 5,
+};
 
 type CardGridProps = {
   children: React.ReactNode;
@@ -23,7 +23,9 @@ function CardGrid({ children }: CardGridProps) {
   return (
     <div
       className={styles.cardGrid}
-      style={{ gridTemplateColumns: `repeat(${cols[breakpoint]}, minmax(0,1fr))` }}
+      style={{
+        gridTemplateColumns: `repeat(${cols[breakpoint]}, minmax(0,1fr))`,
+      }}
     >
       {children}
     </div>