From 8836aef4a3a59f0c08039ed6250442c775d1f7ae Mon Sep 17 00:00:00 2001 From: hiba-aldalaty Date: Mon, 29 Nov 2021 09:49:50 +0000 Subject: [PATCH] Remove icon svgs, replace with v4 mui icons. Signed-off-by: hiba-aldalaty --- .../src/layout/Sidebar/Bar.test.tsx | 12 ++---- .../src/layout/Sidebar/Items.tsx | 2 +- .../src/layout/Sidebar/Sidebar.stories.tsx | 20 +++++---- .../src/layout/Sidebar/icons/APIsIcon.tsx | 33 --------------- .../Sidebar/icons/CatalogSidebarLogo.tsx | 41 ------------------- .../layout/Sidebar/icons/DoubleArrowLeft.tsx | 40 +++++++++--------- .../layout/Sidebar/icons/DoubleArrowRight.tsx | 36 ++++++++-------- .../src/layout/Sidebar/icons/MiscIcon.tsx | 33 --------------- .../src/layout/Sidebar/icons/ServicesIcon.tsx | 33 --------------- 9 files changed, 53 insertions(+), 197 deletions(-) delete mode 100644 packages/core-components/src/layout/Sidebar/icons/APIsIcon.tsx delete mode 100644 packages/core-components/src/layout/Sidebar/icons/CatalogSidebarLogo.tsx delete mode 100644 packages/core-components/src/layout/Sidebar/icons/MiscIcon.tsx delete mode 100644 packages/core-components/src/layout/Sidebar/icons/ServicesIcon.tsx diff --git a/packages/core-components/src/layout/Sidebar/Bar.test.tsx b/packages/core-components/src/layout/Sidebar/Bar.test.tsx index 560f761531..d288aa94c5 100644 --- a/packages/core-components/src/layout/Sidebar/Bar.test.tsx +++ b/packages/core-components/src/layout/Sidebar/Bar.test.tsx @@ -20,8 +20,8 @@ import { screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import BuildRoundedIcon from '@material-ui/icons/BuildRounded'; import CreateComponentIcon from '@material-ui/icons/AddCircleOutline'; -import { CatalogSidebarLogo } from './icons/CatalogSidebarLogo'; -import { MiscIcon } from './icons/MiscIcon'; +import MenuBookIcon from '@material-ui/icons/MenuBook'; +import AcUnitIcon from '@material-ui/icons/AcUnit'; import { Sidebar, SidebarExpandButton } from './Bar'; import { SidebarItem, SidebarSearchField } from './Items'; import { SidebarSubmenuItem } from './SidebarSubmenuItem'; @@ -35,17 +35,13 @@ async function renderScalableSidebar() { > {}} to="/search" /> - {}} - text="Catalog" - > + {}} text="Catalog"> ((props, ref) => { variant="dot" overlap="circular" invisible={!hasNotifications} - className={clsx({ [classes.closeItemIcon]: !isOpen })} + className={clsx({ [classes.closedItemIcon]: !isOpen })} > diff --git a/packages/core-components/src/layout/Sidebar/Sidebar.stories.tsx b/packages/core-components/src/layout/Sidebar/Sidebar.stories.tsx index c070c90b2d..5e68aa8d62 100644 --- a/packages/core-components/src/layout/Sidebar/Sidebar.stories.tsx +++ b/packages/core-components/src/layout/Sidebar/Sidebar.stories.tsx @@ -32,10 +32,10 @@ import { SidebarSpace, } from '.'; import { SidebarSubmenuItem } from './SidebarSubmenuItem'; -import { CatalogSidebarLogo } from './icons/CatalogSidebarLogo'; -import { APIsIcon } from './icons/APIsIcon'; -import { ServicesIcon } from './icons/ServicesIcon'; -import { MiscIcon } from './icons/MiscIcon'; +import MenuBookIcon from '@material-ui/icons/MenuBook'; +import CloudQueueIcon from '@material-ui/icons/CloudQueue'; +import SettingsApplications from '@material-ui/icons/SettingsApplications'; +import AcUnitIcon from '@material-ui/icons/AcUnit'; import { SidebarSubmenu } from './SidebarSubmenu'; export default { @@ -72,11 +72,15 @@ export const SampleScalableSidebar = () => ( - + - - + + ( { - return ( - - - - ); -}; diff --git a/packages/core-components/src/layout/Sidebar/icons/CatalogSidebarLogo.tsx b/packages/core-components/src/layout/Sidebar/icons/CatalogSidebarLogo.tsx deleted file mode 100644 index fe37c9c74f..0000000000 --- a/packages/core-components/src/layout/Sidebar/icons/CatalogSidebarLogo.tsx +++ /dev/null @@ -1,41 +0,0 @@ -/* - * Copyright 2021 The Backstage Authors - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -import SvgIcon from '@material-ui/core/SvgIcon'; -import React from 'react'; - -export const CatalogSidebarLogo = () => { - return ( - - - - - ); -}; diff --git a/packages/core-components/src/layout/Sidebar/icons/DoubleArrowLeft.tsx b/packages/core-components/src/layout/Sidebar/icons/DoubleArrowLeft.tsx index 3e773221e2..eb487940a8 100644 --- a/packages/core-components/src/layout/Sidebar/icons/DoubleArrowLeft.tsx +++ b/packages/core-components/src/layout/Sidebar/icons/DoubleArrowLeft.tsx @@ -16,35 +16,33 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; +import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos'; const useStyles = makeStyles({ - svg: { - width: 'auto', - height: 15, + iconContainer: { + display: 'flex', + position: 'relative', + width: '100%', }, - path: { - fill: '#7df3e1', + arrow1: { + right: '6px', + position: 'absolute', }, }); -const DoubleArrowRight = () => { + +const DoubleArrowLeft = () => { const classes = useStyles(); return ( - - - - +
+
+ +
+
+ +
+
); }; -export default DoubleArrowRight; +export default DoubleArrowLeft; diff --git a/packages/core-components/src/layout/Sidebar/icons/DoubleArrowRight.tsx b/packages/core-components/src/layout/Sidebar/icons/DoubleArrowRight.tsx index f0700a8610..e1e9b9476d 100644 --- a/packages/core-components/src/layout/Sidebar/icons/DoubleArrowRight.tsx +++ b/packages/core-components/src/layout/Sidebar/icons/DoubleArrowRight.tsx @@ -16,34 +16,32 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; +import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos'; const useStyles = makeStyles({ - svg: { - width: 'auto', - height: 15, + iconContainer: { + display: 'flex', + position: 'relative', + width: '100%', }, - path: { - fill: '#7df3e1', + arrow1: { + right: '6px', + position: 'absolute', }, }); + const DoubleArrowRight = () => { const classes = useStyles(); return ( - - - - +
+
+ +
+
+ +
+
); }; diff --git a/packages/core-components/src/layout/Sidebar/icons/MiscIcon.tsx b/packages/core-components/src/layout/Sidebar/icons/MiscIcon.tsx deleted file mode 100644 index 67010baeb5..0000000000 --- a/packages/core-components/src/layout/Sidebar/icons/MiscIcon.tsx +++ /dev/null @@ -1,33 +0,0 @@ -/* - * Copyright 2021 The Backstage Authors - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -import React from 'react'; - -export const MiscIcon = () => { - return ( - - - - ); -}; diff --git a/packages/core-components/src/layout/Sidebar/icons/ServicesIcon.tsx b/packages/core-components/src/layout/Sidebar/icons/ServicesIcon.tsx deleted file mode 100644 index 49a619d422..0000000000 --- a/packages/core-components/src/layout/Sidebar/icons/ServicesIcon.tsx +++ /dev/null @@ -1,33 +0,0 @@ -/* - * Copyright 2021 The Backstage Authors - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -import React from 'react'; - -export const ServicesIcon = () => { - return ( - - - - ); -};