diff --git a/src/features/ModelView/ModelNavigationBar/ModelNavigationBar.styled.tsx b/src/features/ModelView/ModelNavigationBar/ModelNavigationBar.styled.tsx index 95aea1cc..652fa190 100644 --- a/src/features/ModelView/ModelNavigationBar/ModelNavigationBar.styled.tsx +++ b/src/features/ModelView/ModelNavigationBar/ModelNavigationBar.styled.tsx @@ -11,6 +11,20 @@ export const StyledSidebarContent = styled(SideBar.Content)` } `; +export const StyledBackButton = styled(SideBar.Link)` + > p { + color: ${theme.light.primary.resting}; + font-weight: bold; + } + > svg { + fill: ${theme.light.primary.resting}; + } + &:hover { + background-color: ${theme.light.ui.background.light}; + } + + padding: 0 0 ${spacings.MEDIUM} ${spacings.SMALL}; +`; export const StyledSidebarLink = styled(SideBar.Link)` &.activeTab { background: transparent; @@ -59,6 +73,7 @@ export const StyledAccordionItem = styled(SideBar.AccordionItem)` export { StyledAccordionItem as AccordionItem, + StyledBackButton as Back, StyledSidebarContent as SidebarContent, StyledSidebarLink as SidebarLink, }; diff --git a/src/features/ModelView/ModelNavigationBar/ModelNavigationBar.tsx b/src/features/ModelView/ModelNavigationBar/ModelNavigationBar.tsx index fc789586..574f01ed 100644 --- a/src/features/ModelView/ModelNavigationBar/ModelNavigationBar.tsx +++ b/src/features/ModelView/ModelNavigationBar/ModelNavigationBar.tsx @@ -29,7 +29,7 @@ export const ModelNavigationBar = () => { const path2 = tab[tab.length - 2]; const backItems: SidebarLinkProps = { - label: 'Back', + label: 'Back to models', icon: BACK, href: '/', active: false, @@ -88,13 +88,13 @@ export const ModelNavigationBar = () => { return ( - { navigate('/'); }} - > + >