diff --git a/frontend/src/component/admin/adminRoutes.ts b/frontend/src/component/admin/adminRoutes.ts index ff5e7916ed..eed5467cd1 100644 --- a/frontend/src/component/admin/adminRoutes.ts +++ b/frontend/src/component/admin/adminRoutes.ts @@ -90,7 +90,7 @@ export const adminRoutes: INavigationMenuItem[] = [ { path: '/admin/admin-invoices', title: 'Billing & invoices', - menu: { adminSettings: true, mode: ['pro'], billing: true }, + menu: { adminSettings: true, billing: true }, group: 'instance', }, { diff --git a/frontend/src/component/admin/invoice/InvoiceList.tsx b/frontend/src/component/admin/invoice/InvoiceList.tsx index 5e14509599..a690f43536 100644 --- a/frontend/src/component/admin/invoice/InvoiceList.tsx +++ b/frontend/src/component/admin/invoice/InvoiceList.tsx @@ -115,7 +115,9 @@ const InvoiceList = () => { } - elseShow={
{isLoaded && 'No invoices to show.'}
} + elseShow={ + {isLoaded && 'No invoices to show.'} + } /> ); }; diff --git a/frontend/src/component/admin/menu/AdminTabsMenu.tsx b/frontend/src/component/admin/menu/AdminTabsMenu.tsx index 685f4f76a2..81c758984b 100644 --- a/frontend/src/component/admin/menu/AdminTabsMenu.tsx +++ b/frontend/src/component/admin/menu/AdminTabsMenu.tsx @@ -55,6 +55,7 @@ export const AdminTabsMenu: VFC = () => { > {tabs.map(tab => ( { - const navLinkStyle = { - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - width: '100%', - textDecoration: 'none', - color: 'inherit', - padding: props.theme.spacing(1.5, 3), - }; - - const activeNavLinkStyle: React.CSSProperties = { +const StyledNavLink = styled(NavLink)(({ theme }) => ({ + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + width: '100%', + height: '100%', + textDecoration: 'none', + color: 'inherit', + padding: theme.spacing(0, 5), + '&.active': { fontWeight: 'bold', - borderRadius: '3px', - padding: props.theme.spacing(1.5, 3), - }; - - return props.isActive - ? { ...navLinkStyle, ...activeNavLinkStyle } - : navLinkStyle; -}; + }, +})); export const CenteredNavLink: FC<{ to: string }> = ({ to, children }) => { - const theme = useTheme(); - return ( - createNavLinkStyle({ isActive, theme })} - > - {children} - - ); + return {children}; }; diff --git a/frontend/src/component/admin/network/Network.tsx b/frontend/src/component/admin/network/Network.tsx index a6fa643b24..33d32d6216 100644 --- a/frontend/src/component/admin/network/Network.tsx +++ b/frontend/src/component/admin/network/Network.tsx @@ -43,6 +43,7 @@ export const Network = () => { {label} } + sx={{ padding: 0 }} /> ))} diff --git a/frontend/src/component/admin/roles/RolesPage.tsx b/frontend/src/component/admin/roles/RolesPage.tsx index e708b02e98..681ae9e6d5 100644 --- a/frontend/src/component/admin/roles/RolesPage.tsx +++ b/frontend/src/component/admin/roles/RolesPage.tsx @@ -97,6 +97,7 @@ export const RolesPage = () => { } + sx={{ padding: 0 }} /> ))} diff --git a/frontend/src/component/admin/useAdminRoutes.ts b/frontend/src/component/admin/useAdminRoutes.ts index 61b85f11de..1e4b529f86 100644 --- a/frontend/src/component/admin/useAdminRoutes.ts +++ b/frontend/src/component/admin/useAdminRoutes.ts @@ -10,8 +10,19 @@ export const useAdminRoutes = () => { const showEnterpriseOptionsInPro = Boolean( uiConfig?.flags?.frontendNavigationUpdate ); + const routes = [...adminRoutes]; - return adminRoutes + if (uiConfig.flags.UNLEASH_CLOUD) { + const adminBillingMenuItem = adminRoutes.findIndex( + route => route.title === 'Billing & invoices' + ); + routes[adminBillingMenuItem] = { + ...routes[adminBillingMenuItem], + path: '/admin/billing', + }; + } + + return routes .filter(filterByConfig(uiConfig)) .filter(route => filterAdminRoutes( diff --git a/frontend/src/component/menu/Header/NavigationMenu/NavigationMenu.tsx b/frontend/src/component/menu/Header/NavigationMenu/NavigationMenu.tsx index da60c200cb..56b538a987 100644 --- a/frontend/src/component/menu/Header/NavigationMenu/NavigationMenu.tsx +++ b/frontend/src/component/menu/Header/NavigationMenu/NavigationMenu.tsx @@ -98,9 +98,9 @@ export const NavigationMenu = ({ } arrow placement="left" + key={option.path} >