From ec4b0f8cd95753fbdaa8897a43d6513e37140260 Mon Sep 17 00:00:00 2001 From: AmbrishRamachandiran Date: Thu, 17 Aug 2023 17:46:10 +0530 Subject: [PATCH 1/4] change color of delete icon to red play list entity table Signed-off-by: AmbrishRamachandiran --- .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: () => , tooltip: `Remove from ${singularTitleLowerCase}`, onClick: removeEntity, }, From fa541f3d9fd49039193762af531f1d80de8714f0 Mon Sep 17 00:00:00 2001 From: AmbrishRamachandiran Date: Thu, 17 Aug 2023 17:57:52 +0530 Subject: [PATCH 2/4] change color of delete icon to red play list menu Signed-off-by: AmbrishRamachandiran --- .../playlist/src/components/PlaylistPage/PlaylistHeader.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/plugins/playlist/src/components/PlaylistPage/PlaylistHeader.tsx b/plugins/playlist/src/components/PlaylistPage/PlaylistHeader.tsx index f892e8de7f..528c3be46a 100644 --- a/plugins/playlist/src/components/PlaylistPage/PlaylistHeader.tsx +++ b/plugins/playlist/src/components/PlaylistPage/PlaylistHeader.tsx @@ -43,6 +43,7 @@ import { } from '@material-ui/core'; import EditIcon from '@material-ui/icons/Edit'; import DeleteIcon from '@material-ui/icons/Delete'; +import { red } from '@material-ui/core/colors'; import React, { useCallback, useState } from 'react'; import { useNavigate } from 'react-router-dom'; import useAsyncFn from 'react-use/lib/useAsyncFn'; @@ -67,6 +68,9 @@ const useStyles = makeStyles({ marginTop: '5px', marginBottom: '5px', }, + deleteicon: { + color: red[600], + }, }); export type PlaylistHeaderProps = { @@ -166,7 +170,7 @@ export const PlaylistHeader = ({ playlist, onUpdate }: PlaylistHeaderProps) => { }, { label: `Delete ${singularTitle}`, - icon: , + icon: , disabled: !deleteAllowed, onClick: () => setOpenDeleteDialog(true), }, From f200ea457f630804e1bfc5188878aecf93bb9607 Mon Sep 17 00:00:00 2001 From: AmbrishRamachandiran Date: Mon, 21 Aug 2023 20:17:09 +0530 Subject: [PATCH 3/4] Review changes done delete icon color Signed-off-by: AmbrishRamachandiran --- .../components/PlaylistPage/PlaylistEntitiesTable.tsx | 11 +---------- .../src/components/PlaylistPage/PlaylistHeader.tsx | 6 +----- 2 files changed, 2 insertions(+), 15 deletions(-) diff --git a/plugins/playlist/src/components/PlaylistPage/PlaylistEntitiesTable.tsx b/plugins/playlist/src/components/PlaylistPage/PlaylistEntitiesTable.tsx index cf09ae53ba..c74859ce20 100644 --- a/plugins/playlist/src/components/PlaylistPage/PlaylistEntitiesTable.tsx +++ b/plugins/playlist/src/components/PlaylistPage/PlaylistEntitiesTable.tsx @@ -28,8 +28,6 @@ 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'; @@ -37,12 +35,6 @@ import { playlistApiRef } from '../../api'; import { useTitle } from '../../hooks'; import { AddEntitiesDrawer } from './AddEntitiesDrawer'; -const useStyles = makeStyles({ - deleteicon: { - color: red[600], - }, -}); - export const PlaylistEntitiesTable = ({ playlistId, }: { @@ -51,7 +43,6 @@ 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({ @@ -117,7 +108,7 @@ export const PlaylistEntitiesTable = ({ const actions = editAllowed ? [ { - icon: () => , + icon: () => , tooltip: `Remove from ${singularTitleLowerCase}`, onClick: removeEntity, }, diff --git a/plugins/playlist/src/components/PlaylistPage/PlaylistHeader.tsx b/plugins/playlist/src/components/PlaylistPage/PlaylistHeader.tsx index 528c3be46a..3a31dcaade 100644 --- a/plugins/playlist/src/components/PlaylistPage/PlaylistHeader.tsx +++ b/plugins/playlist/src/components/PlaylistPage/PlaylistHeader.tsx @@ -43,7 +43,6 @@ import { } from '@material-ui/core'; import EditIcon from '@material-ui/icons/Edit'; import DeleteIcon from '@material-ui/icons/Delete'; -import { red } from '@material-ui/core/colors'; import React, { useCallback, useState } from 'react'; import { useNavigate } from 'react-router-dom'; import useAsyncFn from 'react-use/lib/useAsyncFn'; @@ -68,9 +67,6 @@ const useStyles = makeStyles({ marginTop: '5px', marginBottom: '5px', }, - deleteicon: { - color: red[600], - }, }); export type PlaylistHeaderProps = { @@ -170,7 +166,7 @@ export const PlaylistHeader = ({ playlist, onUpdate }: PlaylistHeaderProps) => { }, { label: `Delete ${singularTitle}`, - icon: , + icon: , disabled: !deleteAllowed, onClick: () => setOpenDeleteDialog(true), }, From 61e0e077f421e5b2096b9e63c9509b34144cda2a Mon Sep 17 00:00:00 2001 From: AmbrishRamachandiran Date: Wed, 23 Aug 2023 17:30:45 +0530 Subject: [PATCH 4/4] changeset message changed Signed-off-by: AmbrishRamachandiran --- .changeset/brave-books-pretend.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/brave-books-pretend.md b/.changeset/brave-books-pretend.md index d81fc80840..ee80aedb18 100644 --- a/.changeset/brave-books-pretend.md +++ b/.changeset/brave-books-pretend.md @@ -2,4 +2,4 @@ '@backstage/plugin-playlist': patch --- -change color of delete icon to red in playlist table +change color of delete icon to secondary in playlist table