From 14917daacefcf757df2a41a8e9bc00f736f01cc3 Mon Sep 17 00:00:00 2001
From: Roy Schut <roy@videodock.com>
Date: Fri, 28 May 2021 12:13:17 +0200
Subject: [PATCH] feat(videodetail): add button icons

---
 src/components/Shelf/Shelf.module.scss         |  6 +++---
 src/components/Shelf/Shelf.tsx                 | 13 ++++++-------
 src/icons/ArrowLeft.tsx                        |  2 +-
 src/icons/ChevronLeft.tsx                      | 10 ++++++++++
 src/icons/{ArrowRight.tsx => ChevronRight.tsx} |  0
 src/icons/Favorite.tsx                         | 13 +++++++++++++
 src/icons/PlayTrailer.tsx                      | 13 +++++++++++++
 src/icons/Share.tsx                            | 13 +++++++++++++
 8 files changed, 59 insertions(+), 11 deletions(-)
 create mode 100644 src/icons/ChevronLeft.tsx
 rename src/icons/{ArrowRight.tsx => ChevronRight.tsx} (100%)
 create mode 100644 src/icons/Favorite.tsx
 create mode 100644 src/icons/PlayTrailer.tsx
 create mode 100644 src/icons/Share.tsx

diff --git a/src/components/Shelf/Shelf.module.scss b/src/components/Shelf/Shelf.module.scss
index 2d683e730..339c48811 100644
--- a/src/components/Shelf/Shelf.module.scss
+++ b/src/components/Shelf/Shelf.module.scss
@@ -18,7 +18,7 @@
   font-family: var(--body-alt-font-family);
 
   &:hover {
-    .arrow {
+    .chevron {
       opacity: 1;
       &.disabled {
         opacity: 0.3;
@@ -39,14 +39,14 @@
   text-overflow: ellipsis;
 }
 
-.arrow {
+.chevron {
   cursor: pointer;
   outline-color: var(--highlight-color, white);
   padding: 12px 0px;
   transition: transform 0.2s ease-out, opacity 0.2s ease-out;
   -webkit-transition: transform 0.3s ease-out, opacity 0.3s ease-out;
   opacity: 0;
-  
+
   > svg {
     width: 30px;
     height: 30px;
diff --git a/src/components/Shelf/Shelf.tsx b/src/components/Shelf/Shelf.tsx
index 070506911..084393e84 100644
--- a/src/components/Shelf/Shelf.tsx
+++ b/src/components/Shelf/Shelf.tsx
@@ -5,8 +5,8 @@ import classNames from 'classnames';
 import Card from '../Card/Card';
 import TileDock from '../TileDock/TileDock';
 import useBreakpoint, { Breakpoint, Breakpoints } from '../../hooks/useBreakpoint';
-import ArrowLeft from '../../icons/ArrowLeft';
-import ArrowRight from '../../icons/ArrowRight';
+import ChevronLeft from '../../icons/ChevronLeft';
+import ChevronRight from '../../icons/ChevronRight';
 import { findPlaylistImageForWidth } from '../../utils/collection';
 
 import styles from './Shelf.module.scss';
@@ -68,9 +68,8 @@ const Shelf: React.FC<ShelfProps> = ({
         transitionTime={loading ? '0s' : '0.3s'}
         spacing={8}
         renderLeftControl={(doSlide) => (
-        renderLeftControl={(handleClick) => (
           <div
-            className={classNames(styles.arrow, {
+            className={classNames(styles.chevron, {
               [styles.disabled]: !didSlideBefore,
             })}
             role="button"
@@ -81,12 +80,12 @@ const Shelf: React.FC<ShelfProps> = ({
             }
             onClick={() => handleSlide(doSlide)}
           >
-            <ArrowLeft />
+            <ChevronLeft />
           </div>
         )}
         renderRightControl={(doSlide) => (
           <div
-            className={classNames(styles.arrow)}
+            className={classNames(styles.chevron)}
             role="button"
             tabIndex={0}
             aria-label="Slide right"
@@ -95,7 +94,7 @@ const Shelf: React.FC<ShelfProps> = ({
             }
             onClick={() => handleSlide(doSlide)}
           >
-            <ArrowRight />
+            <ChevronRight />
           </div>
         )}
         renderTile={(item, isInView) => {
diff --git a/src/icons/ArrowLeft.tsx b/src/icons/ArrowLeft.tsx
index 35bcc0d33..994530793 100644
--- a/src/icons/ArrowLeft.tsx
+++ b/src/icons/ArrowLeft.tsx
@@ -5,6 +5,6 @@ import createIcon from './Icon';
 export default createIcon(
   '0 0 24 24',
   <g>
-    <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
+    <path fill="currentColor" d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z" />
   </g>,
 );
diff --git a/src/icons/ChevronLeft.tsx b/src/icons/ChevronLeft.tsx
new file mode 100644
index 000000000..35bcc0d33
--- /dev/null
+++ b/src/icons/ChevronLeft.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+
+import createIcon from './Icon';
+
+export default createIcon(
+  '0 0 24 24',
+  <g>
+    <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
+  </g>,
+);
diff --git a/src/icons/ArrowRight.tsx b/src/icons/ChevronRight.tsx
similarity index 100%
rename from src/icons/ArrowRight.tsx
rename to src/icons/ChevronRight.tsx
diff --git a/src/icons/Favorite.tsx b/src/icons/Favorite.tsx
new file mode 100644
index 000000000..a368520a9
--- /dev/null
+++ b/src/icons/Favorite.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+import createIcon from './Icon';
+
+export default createIcon(
+  '0 0 24 24',
+  <g>
+    <path
+      fill="currentColor"
+      d="M12.1,18.55L12,18.65L11.89,18.55C7.14,14.24 4,11.39 4,8.5C4,6.5 5.5,5 7.5,5C9.04,5 10.54,6 11.07,7.36H12.93C13.46,6 14.96,5 16.5,5C18.5,5 20,6.5 20,8.5C20,11.39 16.86,14.24 12.1,18.55M16.5,3C14.76,3 13.09,3.81 12,5.08C10.91,3.81 9.24,3 7.5,3C4.42,3 2,5.41 2,8.5C2,12.27 5.4,15.36 10.55,20.03L12,21.35L13.45,20.03C18.6,15.36 22,12.27 22,8.5C22,5.41 19.58,3 16.5,3Z"
+    />
+  </g>,
+);
diff --git a/src/icons/PlayTrailer.tsx b/src/icons/PlayTrailer.tsx
new file mode 100644
index 000000000..b210338e5
--- /dev/null
+++ b/src/icons/PlayTrailer.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+import createIcon from './Icon';
+
+export default createIcon(
+  '0 0 24 24',
+  <g>
+    <path
+      fill="currentColor"
+      d="M19,19H5V5H19M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M10,8V16L15,12L10,8Z"
+    />
+  </g>,
+);
diff --git a/src/icons/Share.tsx b/src/icons/Share.tsx
new file mode 100644
index 000000000..c6070ebdd
--- /dev/null
+++ b/src/icons/Share.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+import createIcon from './Icon';
+
+export default createIcon(
+  '0 0 24 24',
+  <g>
+    <path
+      fill="currentColor"
+      d="M18,16.08C17.24,16.08 16.56,16.38 16.04,16.85L8.91,12.7C8.96,12.47 9,12.24 9,12C9,11.76 8.96,11.53 8.91,11.3L15.96,7.19C16.5,7.69 17.21,8 18,8A3,3 0 0,0 21,5A3,3 0 0,0 18,2A3,3 0 0,0 15,5C15,5.24 15.04,5.47 15.09,5.7L8.04,9.81C7.5,9.31 6.79,9 6,9A3,3 0 0,0 3,12A3,3 0 0,0 6,15C6.79,15 7.5,14.69 8.04,14.19L15.16,18.34C15.11,18.55 15.08,18.77 15.08,19C15.08,20.61 16.39,21.91 18,21.91C19.61,21.91 20.92,20.61 20.92,19A2.92,2.92 0 0,0 18,16.08Z"
+    />
+  </g>,
+);