feat(home): add arrow icons to slider

src/components/Shelf/Shelf.module.scss

@@ -17,22 +17,6 @@
   white-space: nowrap;
 }
 
-.arrowButton {
-  position: absolute;
-  background: none;
-  color: white;
-  border: none;
-  font-size: 2em;
-  font-weight: 400;
-  font-variant: normal;
-  line-height: 1;
-  -webkit-font-smoothing: antialiased;
-  z-index: 1;
+.arrow {
   cursor: pointer;
 }
-.arrowLeft {
-  left: -30px;
-}
-.arrowRight {
-  right: -30px;
-}

src/components/Shelf/Shelf.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import type { Playlist, PlaylistItem } from 'types/playlist';
-import classNames from 'classnames';
 
 import Card from '../Card/Card';
 import TileDock from '../TileDock/TileDock';
 import useBreakpoint, { Breakpoint } from '../../hooks/useBreakpoint';
+import ArrowLeft from '../../icons/ArrowLeft';
+import ArrowRight from '../../icons/ArrowRight';
 
 import styles from './Shelf.module.scss';
 
@@ -47,14 +48,14 @@ const Shelf: React.FC<ShelfProps> = ({ playlist, onCardClick, onCardHover, featu
         transitionTime="0.3s"
         spacing={12}
         renderLeftControl={(handleClick) => (
-          <button className={classNames(styles['arrowButton'], styles['arrowLeft'])} onClick={handleClick}>
-            &lt;
-          </button>
+          <div className={styles.arrow} onClick={handleClick}>
+            <ArrowLeft />
+          </div>
         )}
         renderRightControl={(handleClick) => (
-          <button className={classNames(styles['arrowButton'], styles['arrowRight'])} onClick={handleClick}>
-            &gt;
-          </button>
+          <div className={styles.arrow} onClick={handleClick}>
+            <ArrowRight />
+          </div>
         )}
         renderTile={(item) => {
           const playlistItem = item as PlaylistItem;

src/components/TileDock/TileDock.css

@@ -20,15 +20,15 @@
   height: 100%;
 }
 .tileDock .leftControl {
-  left: 0px;
+  left: -40px;
   position: absolute;
-  top: 50%;
+  top: calc(50% + 20px);
   transform: translateY(-100%);
   z-index: 1;
 }
 .tileDock .rightControl {
   position: absolute;
-  right: 0px;
-  top: 50%;
+  right: -40px;
+  top: calc(50% + 20px);
   transform: translateY(-100%);
 }

src/container/Shelf/Shelf.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
+import type { PlaylistItem } from 'types/playlist';
+
 import usePlaylist, { UsePlaylistResult } from '../../hooks/usePlaylist';
 import ShelfComponent from '../../components/Shelf/Shelf';
-import type { PlaylistItem } from 'types/playlist';
 
 type ShelfProps = {
   playlistId: string;

src/icons/ArrowLeft.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>,
+);

src/icons/ArrowRight.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+import createIcon from './Icon';
+
+export default createIcon(
+  '0 0 24 24',
+  <g>
+    <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
+  </g>,
+);