From ec4b0f8cd95753fbdaa8897a43d6513e37140260 Mon Sep 17 00:00:00 2001
From: AmbrishRamachandiran <ambrish.r@infosys.com>
Date: Thu, 17 Aug 2023 17:46:10 +0530
Subject: [PATCH] change color of delete icon to red play list entity table

Signed-off-by: AmbrishRamachandiran <ambrish.r@infosys.com>
---
 .changeset/brave-books-pretend.md                     |  5 +++++
 .../components/PlaylistPage/PlaylistEntitiesTable.tsx | 11 ++++++++++-
 2 files changed, 15 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/brave-books-pretend.md

diff --git a/.changeset/brave-books-pretend.md b/.changeset/brave-books-pretend.md
new file mode 100644
index 0000000000..d81fc80840
--- /dev/null
+++ b/.changeset/brave-books-pretend.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-playlist': patch
+---
+
+change color of delete icon to red in playlist table
diff --git a/plugins/playlist/src/components/PlaylistPage/PlaylistEntitiesTable.tsx b/plugins/playlist/src/components/PlaylistPage/PlaylistEntitiesTable.tsx
index 3d6ffc5f8c..cf09ae53ba 100644
--- a/plugins/playlist/src/components/PlaylistPage/PlaylistEntitiesTable.tsx
+++ b/plugins/playlist/src/components/PlaylistPage/PlaylistEntitiesTable.tsx
@@ -28,6 +28,8 @@ import { permissions } from '@backstage/plugin-playlist-common';
 import AddBoxIcon from '@material-ui/icons/AddBox';
 import DeleteIcon from '@material-ui/icons/Delete';
 import SearchIcon from '@material-ui/icons/Search';
+import { makeStyles } from '@material-ui/core';
+import { red } from '@material-ui/core/colors';
 import React, { forwardRef, useCallback, useEffect, useState } from 'react';
 import useAsyncFn from 'react-use/lib/useAsyncFn';
 
@@ -35,6 +37,12 @@ import { playlistApiRef } from '../../api';
 import { useTitle } from '../../hooks';
 import { AddEntitiesDrawer } from './AddEntitiesDrawer';
 
+const useStyles = makeStyles({
+  deleteicon: {
+    color: red[600],
+  },
+});
+
 export const PlaylistEntitiesTable = ({
   playlistId,
 }: {
@@ -43,6 +51,7 @@ export const PlaylistEntitiesTable = ({
   const errorApi = useApi(errorApiRef);
   const playlistApi = useApi(playlistApiRef);
   const alertApi = useApi(alertApiRef);
+  const classes = useStyles();
   const [openAddEntitiesDrawer, setOpenAddEntitiesDrawer] = useState(false);
 
   const { allowed: editAllowed } = usePermission({
@@ -108,7 +117,7 @@ export const PlaylistEntitiesTable = ({
   const actions = editAllowed
     ? [
         {
-          icon: DeleteIcon,
+          icon: () => <DeleteIcon className={classes.deleteicon} />,
           tooltip: `Remove from ${singularTitleLowerCase}`,
           onClick: removeEntity,
         },