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}
>