From dc9fd0acf9b9333212ac3152e5aba2734863302e Mon Sep 17 00:00:00 2001
From: Richard Luong <richardluong92@gmail.com>
Date: Tue, 8 Feb 2022 17:04:20 +0100
Subject: [PATCH 1/3] Use Avatar instead of custom svg icon

Signed-off-by: Richard Luong <richardluong92@gmail.com>
---
 .changeset/fresh-ears-knock.md         |  5 ++++
 plugins/shortcuts/src/ShortcutIcon.tsx | 41 +++++++++++---------------
 2 files changed, 23 insertions(+), 23 deletions(-)
 create mode 100644 .changeset/fresh-ears-knock.md

diff --git a/.changeset/fresh-ears-knock.md b/.changeset/fresh-ears-knock.md
new file mode 100644
index 0000000000..1e8b33fd03
--- /dev/null
+++ b/.changeset/fresh-ears-knock.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-shortcuts': minor
+---
+
+Use Avatar instead of custom icon for ShortcutIcon
diff --git a/plugins/shortcuts/src/ShortcutIcon.tsx b/plugins/shortcuts/src/ShortcutIcon.tsx
index 94a894fcb0..be78928452 100644
--- a/plugins/shortcuts/src/ShortcutIcon.tsx
+++ b/plugins/shortcuts/src/ShortcutIcon.tsx
@@ -15,33 +15,28 @@
  */
 
 import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Avatar from '@material-ui/core/Avatar';
 
 type Props = {
   text: string;
   color: string;
 };
 
-export const ShortcutIcon = ({ text, color }: Props) => {
-  const size = 28;
-  return (
-    <svg
-      viewBox={`0 0 ${size} ${size}`}
-      height={size}
-      width={size}
-      style={{ filter: 'contrast(150%) brightness(1.4)' }}
-    >
-      <circle r={size / 2} cx={size / 2} cy={size / 2} fill={color} />
-      <text
-        dy={2 + size / 2}
-        dx={size / 2}
-        fontWeight="bold"
-        fontSize="13"
-        textAnchor="middle"
-        alignmentBaseline="middle"
-        fill="black"
-      >
-        {text}
-      </text>
-    </svg>
-  );
+const useStyles = makeStyles(theme => ({
+  avatar: (props: Props) => ({
+    color: theme.palette.getContrastText(props.color),
+    backgroundColor: props.color,
+    width: 28,
+    height: 28,
+    fontWeight: 'bold',
+    fontSize: 13,
+    filter: 'contrast(150%) brightness(1.4)',
+  }),
+}));
+
+export const ShortcutIcon = (props: Props) => {
+  const classes = useStyles(props);
+
+  return <Avatar className={classes.avatar}>{props.text}</Avatar>;
 };

From c8d1f915e780231c94f9fa1487bb241beeeeb63e Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Wed, 16 Feb 2022 12:39:27 +0100
Subject: [PATCH 2/3] shortcuts: remove unnecessary test

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
---
 plugins/shortcuts/src/ShortcutItem.test.tsx | 23 ---------------------
 1 file changed, 23 deletions(-)

diff --git a/plugins/shortcuts/src/ShortcutItem.test.tsx b/plugins/shortcuts/src/ShortcutItem.test.tsx
index e080026f00..f002fb222e 100644
--- a/plugins/shortcuts/src/ShortcutItem.test.tsx
+++ b/plugins/shortcuts/src/ShortcutItem.test.tsx
@@ -77,27 +77,4 @@ describe('ShortcutItem', () => {
       expect(screen.getByText('MT')).toBeInTheDocument();
     });
   });
-
-  it('gets the color based on the theme', async () => {
-    const { rerender } = await renderInTestApp(
-      <ShortcutItem api={api} shortcut={shortcut} />,
-    );
-
-    expect(document.querySelector('circle')?.getAttribute('fill')).toEqual(
-      pageTheme.tool.colors[0],
-    );
-
-    const newShortcut: Shortcut = {
-      id: 'id',
-      url: '/catalog',
-      title: 'some title',
-    };
-    rerender(wrapInTestApp(<ShortcutItem api={api} shortcut={newShortcut} />));
-
-    await waitFor(() => {
-      expect(document.querySelector('circle')?.getAttribute('fill')).toEqual(
-        pageTheme.home.colors[0],
-      );
-    });
-  });
 });

From 64da85d7aa41a6769e8b990f6cd026d10b423566 Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Wed, 16 Feb 2022 13:09:05 +0100
Subject: [PATCH 3/3] shortcuts: remove unused import

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
---
 plugins/shortcuts/src/ShortcutItem.test.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/plugins/shortcuts/src/ShortcutItem.test.tsx b/plugins/shortcuts/src/ShortcutItem.test.tsx
index f002fb222e..528eb13efa 100644
--- a/plugins/shortcuts/src/ShortcutItem.test.tsx
+++ b/plugins/shortcuts/src/ShortcutItem.test.tsx
@@ -24,7 +24,6 @@ import {
   renderInTestApp,
   wrapInTestApp,
 } from '@backstage/test-utils';
-import { pageTheme } from '@backstage/theme';
 import { SidebarContext } from '@backstage/core-components';
 
 describe('ShortcutItem', () => {