From f07809d26403b5ec369da632d8fcc51ebd7a22a0 Mon Sep 17 00:00:00 2001
From: Robin van Zanten <38441984+RCVZ@users.noreply.github.com>
Date: Tue, 4 May 2021 21:03:12 +0200
Subject: [PATCH] feat(layout): ui tweaks

---
 .../ButtonLink/ButtonLink.module.scss         |  2 +-
 src/components/Card/Card.module.scss          | 65 +++++++++----------
 src/components/CardGrid/CardGrid.module.scss  |  2 +-
 src/components/CardGrid/CardGrid.test.tsx     |  4 +-
 src/components/CardGrid/CardGrid.tsx          | 18 ++---
 5 files changed, 46 insertions(+), 45 deletions(-)

diff --git a/src/components/ButtonLink/ButtonLink.module.scss b/src/components/ButtonLink/ButtonLink.module.scss
index 4fae5053b..998e8a8aa 100644
--- 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
index 39189dbd7..b516c366f 100644
--- 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
index 2ae6c4afd..ca07615ff 100644
--- 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
index 2c221de60..bdcab2c87 100644
--- 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
index 1dd40ed4a..8e93733f9 100644
--- 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>