update menu sidebar to use official Radius icons

packages/app/src/components/Root/Root.tsx

@@ -1,10 +1,5 @@
 import React, { PropsWithChildren } from 'react';
 import { makeStyles } from '@material-ui/core';
-import HomeIcon from '@material-ui/icons/Home';
-import PublicIcon from '@material-ui/icons/Public';
-import ListAltIcon from '@material-ui/icons/ListAlt';
-import AssessmentIcon from '@material-ui/icons/Assessment';
-import RestaurantIcon from '@material-ui/icons/Restaurant';
 import {
   Settings as SidebarSettings,
   UserSettingsSignInAvatar,
@@ -22,7 +17,14 @@ import {
   Link,
 } from '@backstage/core-components';
 import MenuIcon from '@material-ui/icons/Menu';
-import { RadiusLogo } from '@internal/plugin-radius';
+import {
+  RadiusLogo,
+  RadiusLogomarkReverse,
+  ApplicationIcon,
+  EnvironmentIcon,
+  ResourceIcon,
+  RecipeIcon,
+} from '@internal/plugin-radius';
 
 const useSidebarLogoStyles = makeStyles({
   root: {
@@ -67,11 +69,19 @@ export const Root = ({ children }: PropsWithChildren<NonNullable<object>>) => (
       <SidebarDivider />
       <SidebarGroup label="Menu" icon={<MenuIcon />}>
         {/* Global nav, not org-specific */}
-        <SidebarItem icon={HomeIcon} to="/" text="Home" />
-        <SidebarItem icon={PublicIcon} to="environments" text="Environments" />
-        <SidebarItem icon={ListAltIcon} to="applications" text="Applications" />
-        <SidebarItem icon={AssessmentIcon} to="resources" text="Resources" />
-        <SidebarItem icon={RestaurantIcon} to="recipes" text="Recipes" />
+        <SidebarItem icon={RadiusLogomarkReverse} to="/" text="Home" />
+        <SidebarItem
+          icon={EnvironmentIcon}
+          to="environments"
+          text="Environments"
+        />
+        <SidebarItem
+          icon={ApplicationIcon}
+          to="applications"
+          text="Applications"
+        />
+        <SidebarItem icon={ResourceIcon} to="resources" text="Resources" />
+        <SidebarItem icon={RecipeIcon} to="recipes" text="Recipes" />
         {/* End global nav */}
         <SidebarDivider />
         <SidebarScrollWrapper />

plugins/plugin-radius/src/components/applications/ApplicationIcon.test.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import ApplicationIcon from './ApplicationIcon';
+import { render } from '@testing-library/react';
+
+describe('ApplicationIcon', () => {
+  it('should render the full logo by default', () => {
+    const result = render(<ApplicationIcon />);
+    const svg = result.baseElement.querySelector('svg');
+    expect(svg).toBeInTheDocument();
+    expect(svg).toHaveAttribute('viewBox', '0 0 1080 1080');
+  });
+});

plugins/plugin-radius/src/components/applications/ApplicationIcon.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { SvgIcon } from '@material-ui/core';
+
+export const ApplicationIcon = () => {
+  const originalWidth = 1080;
+  const originalHeight = 1080;
+
+  return (
+    <SvgIcon viewBox={`0 0 ${originalWidth} ${originalHeight}`}>
+      <g>
+        <path
+          fill="#d0b1fc"
+          d="m910.77,167.2H169.23c-35.47,0-64.23,28.76-64.23,64.23v92.56h870v-92.56c0-35.47-28.76-64.23-64.23-64.23Z"
+        />
+        <path
+          fill="#861adf"
+          d="m105,324v524.57c0,35.47,28.76,64.23,64.23,64.23h741.55c35.47,0,64.23-28.76,64.23-64.23V324H105Z"
+        />
+        <path
+          fill="#fff"
+          d="m575.51,647.28c-19.93,19.61-51.98,19.36-71.59-.57-19.61-19.93-19.36-51.98.57-71.59,13.83-13.61,33.5-17.65,50.8-12.18l105.32-103.66c-30.74-24.45-69.13-39.86-111.36-41.87-107.03-5.11-197.94,77.51-203.05,184.54-5.11,107.03,77.51,197.94,184.54,203.05,107.03,5.11,197.94-77.51,203.05-184.54,2.3-48.14-13.19-92.98-40.62-128.26l-105.02,103.37c5.72,17.66,1.49,37.81-12.64,51.71Z"
+        />
+      </g>
+      <path
+        fill="#861adf"
+        d="m712.3,271.75c-11.17,0-20.23-9.06-20.23-20.23s9.06-20.23,20.23-20.23,20.23,9.06,20.23,20.23-9.06,20.23-20.23,20.23Z"
+      />
+      <path
+        fill="#861adf"
+        d="m803.02,271.75c-11.17,0-20.23-9.06-20.23-20.23s9.06-20.23,20.23-20.23,20.23,9.06,20.23,20.23-9.06,20.23-20.23,20.23Z"
+      />
+      <path
+        fill="#861adf"
+        d="m893.74,271.75c-11.17,0-20.23-9.06-20.23-20.23s9.06-20.23,20.23-20.23,20.23,9.06,20.23,20.23-9.06,20.23-20.23,20.23Z"
+      />
+    </SvgIcon>
+  );
+};
+
+export default ApplicationIcon;

plugins/plugin-radius/src/components/environments/EnvironmentIcon.test.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import EnvironmentIcon from './EnvironmentIcon';
+import { render } from '@testing-library/react';
+
+describe('EnvironmentIcon', () => {
+  it('should render the full logo by default', () => {
+    const result = render(<EnvironmentIcon />);
+    const svg = result.baseElement.querySelector('svg');
+    expect(svg).toBeInTheDocument();
+    expect(svg).toHaveAttribute('viewBox', '0 0 1080 1080');
+  });
+});

plugins/plugin-radius/src/components/environments/EnvironmentIcon.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { SvgIcon } from '@material-ui/core';
+
+export const EnvironmentIcon = () => {
+  const originalWidth = 1080;
+  const originalHeight = 1080;
+
+  return (
+    <SvgIcon viewBox={`0 0 ${originalWidth} ${originalHeight}`}>
+      <path
+        fill="#dd5630"
+        d="m940,722.58v-365.16c0-29.93-15.97-57.58-41.88-72.54l-316.24-182.58c-25.92-14.96-57.85-14.96-83.76,0l-316.24,182.58c-25.92,14.96-41.88,42.62-41.88,72.54v365.16c0,29.93,15.97,57.58,41.88,72.54l316.24,182.58c25.92,14.96,57.85,14.96,83.76,0l316.24-182.58c25.92-14.96,41.88-42.62,41.88-72.54Z"
+      />
+      <path
+        fill="#fff"
+        d="m577.11,576.75c-20.56,20.23-53.63,19.97-73.86-.59-20.23-20.56-19.97-53.63.59-73.86,14.27-14.05,34.57-18.2,52.41-12.57l108.66-106.94c-31.71-25.22-71.32-41.12-114.88-43.2-110.42-5.27-204.21,79.96-209.48,190.38-5.27,110.42,79.96,204.21,190.39,209.48,110.42,5.27,204.21-79.96,209.48-190.38,2.37-49.66-13.61-95.93-41.91-132.32l-108.35,106.64c5.9,18.22,1.54,39.01-13.04,53.35Z"
+      />
+    </SvgIcon>
+  );
+};
+
+export default EnvironmentIcon;

plugins/plugin-radius/src/components/logo/RadiusLogomarkReverse.test.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import RadiusLogomarkReverse from './RadiusLogomarkReverse';
+import { render } from '@testing-library/react';
+
+describe('RadiusLogomarkReverse', () => {
+  it('should render the full logo by default', () => {
+    const result = render(<RadiusLogomarkReverse />);
+    const svg = result.baseElement.querySelector('svg');
+    expect(svg).toBeInTheDocument();
+    expect(svg).toHaveAttribute('viewBox', '175 175 550 550');
+  });
+});

plugins/plugin-radius/src/components/logo/RadiusLogomarkReverse.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { SvgIcon } from '@material-ui/core';
+
+export const RadiusLogomarkReverse = () => {
+  const originalWidth = 550;
+  const originalHeight = 550;
+
+  return (
+    <SvgIcon viewBox={`175 175 ${originalWidth} ${originalHeight}`}>
+      <path
+        fill="#fbfbff"
+        d="m673.37,451.86c0-59.65-23.62-113.75-61.96-153.57l-116.95,126.65c11.91,18.83,10.29,43.99-5.54,61.14-18.9,20.46-50.81,21.74-71.27,2.84-20.46-18.9-21.74-50.81-2.84-71.27,15.55-16.84,39.89-20.65,59.43-10.96l117.13-126.84c-34.52-28.03-77.62-45.84-124.76-48.95.03-.01.05-.02.08-.03-.39-.03-.78-.02-1.17-.04-4.52-.28-9.07-.47-13.66-.47-7.65,0-15.2.39-22.65,1.14-7.45.76-14.78,1.88-21.99,3.36-14.42,2.95-28.33,7.3-41.58,12.91-13.25,5.6-25.84,12.46-37.63,20.42-14.73,9.95-28.2,21.63-40.12,34.74-4.77,5.24-9.29,10.72-13.54,16.41-8.5,11.37-15.94,23.59-22.16,36.5-4.14,8.59-7.69,17.52-10.71,26.68-1.78,5.4-3.37,10.89-4.73,16.47-4.15,16.95-6.4,34.65-6.4,52.89h0c0,19.12,2.42,37.67,6.97,55.36,9.1,35.39,26.74,67.35,50.57,93.58,7.15,7.87,14.86,15.22,23.06,21.99,5.47,4.51,11.16,8.77,17.05,12.75,4.64,3.13,9.44,6.05,14.32,8.83,3.03,1.73,6.1,3.39,9.22,4.97,30.12,15.34,64.19,24.03,100.31,24.03,1.31,0,2.61-.02,3.91-.05,3.31-.07,6.6-.22,9.88-.42.35-.02.7-.01,1.04-.04-.03-.01-.06-.02-.09-.04,115.46-7.59,206.78-103.59,206.78-220.97Z"
+      />
+      <rect fill="none" width={originalWidth} height={originalHeight} />
+    </SvgIcon>
+  );
+};
+
+export default RadiusLogomarkReverse;

plugins/plugin-radius/src/components/recipes/RecipeIcon.test.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import RecipeIcon from './RecipeIcon';
+import { render } from '@testing-library/react';
+
+describe('RecipeIcon', () => {
+  it('should render the full logo by default', () => {
+    const result = render(<RecipeIcon />);
+    const svg = result.baseElement.querySelector('svg');
+    expect(svg).toBeInTheDocument();
+    expect(svg).toHaveAttribute('viewBox', '0 0 1080 1080');
+  });
+});

plugins/plugin-radius/src/components/recipes/RecipeIcon.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { SvgIcon } from '@material-ui/core';
+
+export const RecipeIcon = () => {
+  const originalWidth = 1080;
+  const originalHeight = 1080;
+
+  return (
+    <SvgIcon viewBox={`0 0 ${originalWidth} ${originalHeight}`}>
+      <path
+        fill="#b3cc40"
+        d="m940,722.58v-365.16c0-29.93-15.97-57.58-41.88-72.54l-316.24-182.58c-25.92-14.96-57.85-14.96-83.76,0l-316.24,182.58c-25.92,14.96-41.88,42.62-41.88,72.54v365.16c0,29.93,15.97,57.58,41.88,72.54l316.24,182.58c25.92,14.96,57.85,14.96,83.76,0l316.24-182.58c25.92-14.96,41.88-42.62,41.88-72.54Z"
+      />
+      <g>
+        <path
+          fill="#799116"
+          d="m703.72,789.53h-327.43c-18.41,0-33.33-14.92-33.33-33.33v-375.27l90.62-90.46h270.14c18.41,0,33.33,14.92,33.33,33.33v432.4c0,18.41-14.92,33.33-33.33,33.33Z"
+        />
+        <path
+          fill="#fff"
+          d="m472.41,455.35c-5.58,0-10.1-4.52-10.1-10.1v-64.31c0-5.58,4.52-10.1,10.1-10.1s10.1,4.52,10.1,10.1v64.31c0,5.58-4.52,10.1-10.1,10.1Z"
+        />
+        <g>
+          <path
+            fill="#fff"
+            d="m534.44,462.29c-5.58,0-10.1-4.52-10.1-10.1v-73.96c0-5.58,4.52-10.1,10.1-10.1s10.1,4.52,10.1,10.1v73.96c0,5.58-4.52,10.1-10.1,10.1Z"
+          />
+          <path
+            fill="#fff"
+            d="m534.44,730.77c-5.58,0-10.1-4.52-10.1-10.1v-34.68c0-5.58,4.52-10.1,10.1-10.1s10.1,4.52,10.1,10.1v34.68c0,5.58-4.52,10.1-10.1,10.1Z"
+          />
+        </g>
+        <g>
+          <path
+            fill="#fff"
+            d="m596.47,533.2c-5.58,0-10.1-4.52-10.1-10.1v-144.87c0-5.58,4.52-10.1,10.1-10.1s10.1,4.52,10.1,10.1v144.87c0,5.58-4.52,10.1-10.1,10.1Z"
+          />
+          <path
+            fill="#fff"
+            d="m596.47,730.77c-5.58,0-10.1-4.52-10.1-10.1v-135.88c0-5.58,4.52-10.1,10.1-10.1s10.1,4.52,10.1,10.1v135.88c0,5.58-4.52,10.1-10.1,10.1Z"
+          />
+        </g>
+        <g>
+          <path
+            fill="#fff"
+            d="m658.5,502.71c-5.58,0-10.1-4.52-10.1-10.1v-114.39c0-5.58,4.52-10.1,10.1-10.1s10.1,4.52,10.1,10.1v114.39c0,5.58-4.52,10.1-10.1,10.1Z"
+          />
+          <path
+            fill="#fff"
+            d="m658.5,730.77c-5.58,0-10.1-4.52-10.1-10.1v-177.38c0-5.58,4.52-10.1,10.1-10.1s10.1,4.52,10.1,10.1v177.38c0,5.58-4.52,10.1-10.1,10.1Z"
+          />
+        </g>
+        <path
+          fill="#fff"
+          d="m342.96,380.93h70.58c11.07,0,20.04-8.97,20.04-20.04v-70.42"
+        />
+        <path
+          fill="#fff"
+          d="m484.04,592.27c-9.39,9.24-24.49,9.12-33.74-.27-9.24-9.39-9.12-24.49.27-33.74,6.52-6.42,15.79-8.32,23.94-5.74l49.63-48.85c-14.48-11.52-32.58-18.78-52.47-19.73-50.44-2.41-93.27,36.52-95.68,86.96-2.41,50.44,36.52,93.27,86.96,95.68,50.44,2.41,93.27-36.52,95.68-86.96,1.08-22.68-6.22-43.82-19.14-60.44l-49.49,48.71c2.69,8.32.7,17.82-5.95,24.37Z"
+        />
+      </g>
+    </SvgIcon>
+  );
+};
+
+export default RecipeIcon;

plugins/plugin-radius/src/components/resources/ResourceIcon.test.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import ResourceIcon from './ResourceIcon';
+import { render } from '@testing-library/react';
+
+describe('ResourceIcon', () => {
+  it('should render the full logo by default', () => {
+    const result = render(<ResourceIcon />);
+    const svg = result.baseElement.querySelector('svg');
+    expect(svg).toBeInTheDocument();
+    expect(svg).toHaveAttribute('viewBox', '0 0 1080 1080');
+  });
+});

plugins/plugin-radius/src/components/resources/ResourceIcon.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { SvgIcon } from '@material-ui/core';
+
+export const ResourceIcon = () => {
+  const originalWidth = 1080;
+  const originalHeight = 1080;
+
+  return (
+    <SvgIcon viewBox={`0 0 ${originalWidth} ${originalHeight}`}>
+      <path
+        fill="#dd5630"
+        d="m940,722.58v-365.16c0-29.93-15.97-57.58-41.88-72.54l-316.24-182.58c-25.92-14.96-57.85-14.96-83.76,0l-316.24,182.58c-25.92,14.96-41.88,42.62-41.88,72.54v365.16c0,29.93,15.97,57.58,41.88,72.54l316.24,182.58c25.92,14.96,57.85,14.96,83.76,0l316.24-182.58c25.92-14.96,41.88-42.62,41.88-72.54Z"
+      />
+    </SvgIcon>
+  );
+};
+
+export default ResourceIcon;

plugins/plugin-radius/src/index.ts

@@ -15,5 +15,10 @@ export {
   resourcePageRouteRef,
 } from './routes';
 export { RadiusLogo } from './components/logo/RadiusLogo';
+export { RadiusLogomarkReverse } from './components/logo/RadiusLogomarkReverse';
+export { ApplicationIcon } from './components/applications/ApplicationIcon';
+export { EnvironmentIcon } from './components/environments/EnvironmentIcon';
+export { ResourceIcon } from './components/resources/ResourceIcon';
+export { RecipeIcon } from './components/recipes/RecipeIcon';
 export { ApplicationListInfoCard } from './components/applications/ApplicationListInfoCard';
 export { EnvironmentListInfoCard } from './components/environments/EnvironmentListInfoCard';