change color of delete icon to red play list entity table

Signed-off-by: AmbrishRamachandiran <ambrish.r@infosys.com>

.changeset/brave-books-pretend.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-playlist': patch
+---
+
+change color of delete icon to red in playlist table

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,
         },