From 1702acf61c8268da8637f305154370b5f9c764ad Mon Sep 17 00:00:00 2001
From: TheCatLady <52870424+TheCatLady@users.noreply.github.com>
Date: Sun, 18 Apr 2021 05:56:07 -0400
Subject: [PATCH] refactor(ui): add icons to PlayButton dropdown (#1457)

---
 src/components/Common/PlayButton/index.tsx |  9 +++++----
 src/components/MovieDetails/index.tsx      | 10 +++++++++-
 src/components/TvDetails/index.tsx         | 10 +++++++++-
 3 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/src/components/Common/PlayButton/index.tsx b/src/components/Common/PlayButton/index.tsx
index 614e2247a..6ca9faceb 100644
--- a/src/components/Common/PlayButton/index.tsx
+++ b/src/components/Common/PlayButton/index.tsx
@@ -1,5 +1,4 @@
-import { PlayIcon } from '@heroicons/react/outline';
-import React from 'react';
+import React, { ReactNode } from 'react';
 import ButtonWithDropdown from '../ButtonWithDropdown';
 
 interface PlayButtonProps {
@@ -9,6 +8,7 @@ interface PlayButtonProps {
 export interface PlayButtonLink {
   text: string;
   url: string;
+  svg: ReactNode;
 }
 
 const PlayButton: React.FC<PlayButtonProps> = ({ links }) => {
@@ -21,8 +21,8 @@ const PlayButton: React.FC<PlayButtonProps> = ({ links }) => {
       buttonType="ghost"
       text={
         <>
-          <PlayIcon className="w-5 h-5 mr-1" />
-          <span>{links[0].text}</span>
+          {links[0].svg}
+          {links[0].text}
         </>
       }
       onClick={() => {
@@ -39,6 +39,7 @@ const PlayButton: React.FC<PlayButtonProps> = ({ links }) => {
               }}
               buttonType="ghost"
             >
+              {link.svg}
               {link.text}
             </ButtonWithDropdown.Item>
           );
diff --git a/src/components/MovieDetails/index.tsx b/src/components/MovieDetails/index.tsx
index baa39a8e5..7db6b9465 100644
--- a/src/components/MovieDetails/index.tsx
+++ b/src/components/MovieDetails/index.tsx
@@ -1,4 +1,9 @@
-import { ArrowCircleRightIcon, CogIcon } from '@heroicons/react/outline';
+import {
+  ArrowCircleRightIcon,
+  CogIcon,
+  FilmIcon,
+  PlayIcon,
+} from '@heroicons/react/outline';
 import {
   CheckCircleIcon,
   DocumentRemoveIcon,
@@ -111,6 +116,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
     mediaLinks.push({
       text: intl.formatMessage(messages.playonplex),
       url: data.mediaInfo?.plexUrl,
+      svg: <PlayIcon className="w-5 h-5 mr-1" />,
     });
   }
 
@@ -123,6 +129,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
     mediaLinks.push({
       text: intl.formatMessage(messages.play4konplex),
       url: data.mediaInfo?.plexUrl4k,
+      svg: <PlayIcon className="w-5 h-5 mr-1" />,
     });
   }
 
@@ -135,6 +142,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
     mediaLinks.push({
       text: intl.formatMessage(messages.watchtrailer),
       url: trailerUrl,
+      svg: <FilmIcon className="w-5 h-5 mr-1" />,
     });
   }
 
diff --git a/src/components/TvDetails/index.tsx b/src/components/TvDetails/index.tsx
index 1d7d98fcb..69c0e9c39 100644
--- a/src/components/TvDetails/index.tsx
+++ b/src/components/TvDetails/index.tsx
@@ -1,4 +1,9 @@
-import { ArrowCircleRightIcon, CogIcon } from '@heroicons/react/outline';
+import {
+  ArrowCircleRightIcon,
+  CogIcon,
+  FilmIcon,
+  PlayIcon,
+} from '@heroicons/react/outline';
 import {
   CheckCircleIcon,
   DocumentRemoveIcon,
@@ -119,6 +124,7 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
     mediaLinks.push({
       text: intl.formatMessage(messages.playonplex),
       url: data.mediaInfo?.plexUrl,
+      svg: <PlayIcon className="w-5 h-5 mr-1" />,
     });
   }
 
@@ -131,6 +137,7 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
     mediaLinks.push({
       text: intl.formatMessage(messages.play4konplex),
       url: data.mediaInfo?.plexUrl4k,
+      svg: <PlayIcon className="w-5 h-5 mr-1" />,
     });
   }
 
@@ -143,6 +150,7 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
     mediaLinks.push({
       text: intl.formatMessage(messages.watchtrailer),
       url: trailerUrl,
+      svg: <FilmIcon className="w-5 h-5 mr-1" />,
     });
   }