Refactor: page container (#967)

* refactor: page container

* refactor: table page header

frontend/src/component/addons/AddonForm/AddonForm.tsx

@@ -15,7 +15,7 @@ import { IAddon, IAddonProvider } from 'interfaces/addons';
 import { AddonParameters } from './AddonParameters/AddonParameters';
 import { AddonEvents } from './AddonEvents/AddonEvents';
 import cloneDeep from 'lodash.clonedeep';
-import PageContent from 'component/common/PageContent/PageContent';
+import { PageContent } from 'component/common/PageContent/PageContent';
 import { useNavigate } from 'react-router-dom';
 import useAddonsApi from 'hooks/api/actions/useAddonsApi/useAddonsApi';
 import useToast from 'hooks/useToast';
@@ -184,7 +184,7 @@ export const AddonForm: VFC<IAddonFormProps> = ({
     } = provider ? provider : ({} as Partial<IAddonProvider>);
 
     return (
-        <PageContent headerContent={`Configure ${name} addon`}>
+        <PageContent header={`Configure ${name} addon`}>
             <section className={styles.formSection}>
                 {description}&nbsp;
                 <a href={documentationUrl} target="_blank" rel="noreferrer">

frontend/src/component/addons/AddonList/AvailableAddons/AvailableAddons.tsx

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
-import PageContent from 'component/common/PageContent/PageContent';
+import { PageContent } from 'component/common/PageContent/PageContent';
 import {
     List,
     ListItem,
@@ -49,7 +49,7 @@ export const AvailableAddons = ({
         </ListItem>
     );
     return (
-        <PageContent headerContent="Available addons">
+        <PageContent header="Available addons">
             <List>
                 {providers.map((provider: IProvider) =>
                     renderProvider(provider)

frontend/src/component/addons/AddonList/ConfiguredAddons/ConfiguredAddons.tsx

@@ -12,7 +12,7 @@ import {
     UPDATE_ADDON,
 } from 'component/providers/AccessProvider/permissions';
 import { Link, useNavigate } from 'react-router-dom';
-import PageContent from 'component/common/PageContent/PageContent';
+import { PageContent } from 'component/common/PageContent/PageContent';
 import useAddons from 'hooks/api/getters/useAddons/useAddons';
 import useToast from 'hooks/useToast';
 import useAddonsApi from 'hooks/api/actions/useAddonsApi/useAddonsApi';
@@ -142,7 +142,7 @@ export const ConfiguredAddons = ({ getAddonIcon }: IConfigureAddonsProps) => {
         </ListItem>
     );
     return (
-        <PageContent headerContent="Configured addons">
+        <PageContent header="Configured addons">
             <List>
                 {sortAddons(addons).map((addon: IAddon) => renderAddon(addon))}
             </List>

frontend/src/component/admin/apiToken/ApiTokenPage/ApiTokenPage.tsx

@@ -3,8 +3,8 @@ import { useNavigate } from 'react-router-dom';
 import { Button } from '@mui/material';
 import AccessContext from 'contexts/AccessContext';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
-import PageContent from 'component/common/PageContent';
+import { PageContent } from 'component/common/PageContent/PageContent';
-import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle';
+import { PageHeader } from 'component/common/PageHeader/PageHeader';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import {
     CREATE_API_TOKEN,
@@ -24,8 +24,8 @@ export const ApiTokenPage = () => {
 
     return (
         <PageContent
-            headerContent={
+            header={
-                <HeaderTitle
+                <PageHeader
                     title="API Access"
                     actions={
                         <ConditionallyRender

frontend/src/component/admin/auth/AuthSettings.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import AdminMenu from '../menu/AdminMenu';
 import { Alert } from '@mui/material';
-import PageContent from 'component/common/PageContent/PageContent';
+import { PageContent } from 'component/common/PageContent/PageContent';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { OidcAuth } from './OidcAuth/OidcAuth';
@@ -35,7 +35,7 @@ export const AuthSettings = () => {
     return (
         <div>
             <AdminMenu />
-            <PageContent headerContent="Single Sign-On">
+            <PageContent header="Single Sign-On">
                 <ConditionallyRender
                     condition={authenticationType === 'enterprise'}
                     show={<TabNav tabData={tabs} />}

frontend/src/component/admin/auth/GoogleAuth/GoogleAuth.tsx

@@ -7,7 +7,7 @@ import {
     TextField,
 } from '@mui/material';
 import { Alert } from '@mui/material';
-import PageContent from 'component/common/PageContent/PageContent';
+import { PageContent } from 'component/common/PageContent/PageContent';
 import AccessContext from 'contexts/AccessContext';
 import { ADMIN } from 'component/providers/AccessProvider/permissions';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
@@ -74,7 +74,7 @@ export const GoogleAuth = () => {
     };
 
     return (
-        <PageContent headerContent="">
+        <PageContent>
             <Grid container style={{ marginBottom: '1rem' }}>
                 <Grid item xs={12}>
                     <Alert severity="info">

frontend/src/component/admin/auth/OidcAuth/OidcAuth.tsx

@@ -7,7 +7,7 @@ import {
     TextField,
 } from '@mui/material';
 import { Alert } from '@mui/material';
-import PageContent from 'component/common/PageContent/PageContent';
+import { PageContent } from 'component/common/PageContent/PageContent';
 import AccessContext from 'contexts/AccessContext';
 import { ADMIN } from 'component/providers/AccessProvider/permissions';
 import { AutoCreateForm } from '../AutoCreateForm/AutoCreateForm';
@@ -85,7 +85,7 @@ export const OidcAuth = () => {
     };
 
     return (
-        <PageContent headerContent="">
+        <PageContent>
             <Grid container style={{ marginBottom: '1rem' }}>
                 <Grid item md={12}>
                     <Alert severity="info">

frontend/src/component/admin/auth/PasswordAuth/PasswordAuth.tsx

@@ -1,7 +1,7 @@
 import React, { useContext, useEffect, useState } from 'react';
 import { Button, FormControlLabel, Grid, Switch } from '@mui/material';
 import { Alert } from '@mui/material';
-import PageContent from 'component/common/PageContent/PageContent';
+import { PageContent } from 'component/common/PageContent/PageContent';
 import AccessContext from 'contexts/AccessContext';
 import { ADMIN } from 'component/providers/AccessProvider/permissions';
 import useAuthSettings from 'hooks/api/getters/useAuthSettings/useAuthSettings';
@@ -57,7 +57,7 @@ export const PasswordAuth = () => {
         }
     };
     return (
-        <PageContent headerContent="">
+        <PageContent>
             <form onSubmit={onSubmit}>
                 <Grid container spacing={3} mb={2}>
                     <Grid item md={5}>

frontend/src/component/admin/auth/SamlAuth/SamlAuth.tsx

@@ -7,7 +7,7 @@ import {
     TextField,
 } from '@mui/material';
 import { Alert } from '@mui/material';
-import PageContent from 'component/common/PageContent/PageContent';
+import { PageContent } from 'component/common/PageContent/PageContent';
 import AccessContext from 'contexts/AccessContext';
 import { ADMIN } from 'component/providers/AccessProvider/permissions';
 import { AutoCreateForm } from '../AutoCreateForm/AutoCreateForm';
@@ -81,7 +81,7 @@ export const SamlAuth = () => {
     };
 
     return (
-        <PageContent headerContent="">
+        <PageContent>
             <Grid container style={{ marginBottom: '1rem' }}>
                 <Grid item md={12}>
                     <Alert severity="info">

frontend/src/component/admin/invoice/InvoiceList.tsx

@@ -8,8 +8,8 @@ import {
     Button,
 } from '@mui/material';
 import OpenInNew from '@mui/icons-material/OpenInNew';
-import PageContent from 'component/common/PageContent';
+import { PageContent } from 'component/common/PageContent/PageContent';
-import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle';
+import { PageHeader } from 'component/common/PageHeader/PageHeader';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { formatApiPath } from 'utils/formatPath';
 import useInvoices from 'hooks/api/getters/useInvoices/useInvoices';
@@ -35,8 +35,8 @@ const InvoiceList = () => {
             condition={invoices.length > 0}
             show={
                 <PageContent
-                    headerContent={
+                    header={
-                        <HeaderTitle
+                        <PageHeader
                             title="Invoices"
                             actions={
                                 <Button

frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoles.tsx

@@ -3,8 +3,8 @@ import { useContext } from 'react';
 import { useNavigate } from 'react-router-dom';
 import AccessContext from 'contexts/AccessContext';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle';
+import { PageHeader } from 'component/common/PageHeader/PageHeader';
-import PageContent from 'component/common/PageContent';
+import { PageContent } from 'component/common/PageContent/PageContent';
 import { ADMIN } from 'component/providers/AccessProvider/permissions';
 import AdminMenu from 'component/admin/menu/AdminMenu';
 import { useStyles } from './ProjectRoles.styles';
@@ -21,8 +21,8 @@ const ProjectRoles = () => {
             <AdminMenu />
             <PageContent
                 bodyClass={styles.rolesListBody}
-                headerContent={
+                header={
-                    <HeaderTitle
+                    <PageHeader
                         title="Project Roles"
                         actions={
                             <ConditionallyRender

frontend/src/component/admin/users/UsersAdmin.tsx

@@ -1,13 +1,13 @@
 import { useContext, useState } from 'react';
 import UsersList from './UsersList/UsersList';
 import AdminMenu from '../menu/AdminMenu';
-import PageContent from 'component/common/PageContent/PageContent';
+import { PageContent } from 'component/common/PageContent/PageContent';
 import AccessContext from 'contexts/AccessContext';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { ADMIN } from 'component/providers/AccessProvider/permissions';
 import { Button } from '@mui/material';
 import { TableActions } from 'component/common/Table/TableActions/TableActions';
-import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle';
+import { PageHeader } from 'component/common/PageHeader/PageHeader';
 import { useStyles } from './UserAdmin.styles';
 import { useNavigate } from 'react-router-dom';
 import { AdminAlert } from 'component/common/AdminAlert/AdminAlert';
@@ -23,8 +23,8 @@ const UsersAdmin = () => {
             <AdminMenu />
             <PageContent
                 bodyClass={styles.userListBody}
-                headerContent={
+                header={
-                    <HeaderTitle
+                    <PageHeader
                         title="Users"
                         actions={
                             <ConditionallyRender

frontend/src/component/application/ApplicationEdit/ApplicationEdit.tsx

@@ -15,8 +15,8 @@ import { ApplicationView } from '../ApplicationView/ApplicationView';
 import { ApplicationUpdate } from '../ApplicationUpdate/ApplicationUpdate';
 import { TabNav } from 'component/common/TabNav/TabNav/TabNav';
 import { Dialogue } from 'component/common/Dialogue/Dialogue';
-import PageContent from 'component/common/PageContent';
+import { PageContent } from 'component/common/PageContent/PageContent';
-import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle';
+import { PageHeader } from 'component/common/PageHeader/PageHeader';
 import AccessContext from 'contexts/AccessContext';
 import useApplicationsApi from 'hooks/api/actions/useApplicationsApi/useApplicationsApi';
 import useApplication from 'hooks/api/getters/useApplication/useApplication';
@@ -92,8 +92,8 @@ export const ApplicationEdit = () => {
     }
     return (
         <PageContent
-            headerContent={
+            header={
-                <HeaderTitle
+                <PageHeader
                     titleElement={
                         <span
                             style={{

frontend/src/component/application/ApplicationList/ApplicationList.tsx

@@ -3,8 +3,8 @@ import { CircularProgress } from '@mui/material';
 import { Warning } from '@mui/icons-material';
 import { AppsLinkList, styles as themeStyles } from 'component/common';
 import { SearchField } from 'component/common/SearchField/SearchField';
-import PageContent from 'component/common/PageContent/PageContent';
+import { PageContent } from 'component/common/PageContent/PageContent';
-import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle';
+import { PageHeader } from 'component/common/PageHeader/PageHeader';
 import useApplications from 'hooks/api/getters/useApplications/useApplications';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 
@@ -47,7 +47,7 @@ export const ApplicationList = () => {
             <div className={themeStyles.searchField}>
                 <SearchField initialValue={filter} updateValue={setFilter} />
             </div>
-            <PageContent headerContent={<HeaderTitle title="Applications" />}>
+            <PageContent header={<PageHeader title="Applications" />}>
                 <div className={themeStyles.fullwidth}>
                     <ConditionallyRender
                         condition={filteredApplications.length > 0}

frontend/src/component/common/HeaderTitle/HeaderTitle.tsx

@@ -1,52 +0,0 @@
-import { ReactNode, VFC } from 'react';
-import classnames from 'classnames';
-
-import { Typography, TypographyProps } from '@mui/material';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-
-import { useStyles } from './styles';
-import { usePageTitle } from 'hooks/usePageTitle';
-
-interface IHeaderTitleProps {
-    title: string;
-    titleElement?: ReactNode;
-    subtitle?: string;
-    variant?: TypographyProps['variant'];
-    loading?: boolean;
-    actions?: ReactNode;
-    className?: string;
-}
-
-export const HeaderTitle: VFC<IHeaderTitleProps> = ({
-    title,
-    titleElement,
-    actions,
-    subtitle,
-    variant,
-    loading,
-    className = '',
-}) => {
-    const { classes: styles } = useStyles();
-    const headerClasses = classnames({ skeleton: loading });
-
-    usePageTitle(title);
-
-    return (
-        <div className={styles.headerTitleContainer}>
-            <div className={headerClasses} data-loading>
-                <Typography
-                    variant={variant || 'h1'}
-                    className={classnames(styles.headerTitle, className)}
-                >
-                    {titleElement || title}
-                </Typography>
-                {subtitle && <small>{subtitle}</small>}
-            </div>
-
-            <ConditionallyRender
-                condition={Boolean(actions)}
-                show={<div className={styles.headerActions}>{actions}</div>}
-            />
-        </div>
-    );
-};

frontend/src/component/common/HeaderTitle/styles.ts

@@ -1,18 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()(theme => ({
-    headerTitleContainer: {
-        display: 'flex',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        position: 'relative',
-    },
-    headerTitle: {
-        fontSize: theme.fontSizes.mainHeader,
-        fontWeight: 'normal',
-    },
-    headerActions: {
-        position: 'absolute',
-        right: 0,
-    },
-}));

frontend/src/component/common/PageContent/PageContent.jsx

@@ -1,63 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import classnames from 'classnames';
-import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle';
-import { Paper } from '@mui/material';
-import { useStyles } from './styles';
-
-const PageContent = ({
-    children,
-    headerContent,
-    disablePadding = false,
-    disableBorder = false,
-    bodyClass = '',
-    ...rest
-}) => {
-    const { classes: styles } = useStyles();
-
-    const headerClasses = classnames(styles.headerContainer, {
-        [styles.paddingDisabled]: disablePadding,
-        [styles.borderDisabled]: disableBorder,
-    });
-
-    const bodyClasses = classnames(styles.bodyContainer, {
-        [styles.paddingDisabled]: disablePadding,
-        [styles.borderDisabled]: disableBorder,
-        [bodyClass]: bodyClass,
-    });
-
-    let header = null;
-    if (headerContent) {
-        if (typeof headerContent === 'string') {
-            header = (
-                <div className={headerClasses}>
-                    <HeaderTitle title={headerContent} />
-                </div>
-            );
-        } else {
-            header = <div className={headerClasses}>{headerContent}</div>;
-        }
-    }
-
-    const paperProps = disableBorder ? { elevation: 0 } : {};
-
-    return (
-        <Paper
-            {...rest}
-            {...paperProps}
-            style={{ borderRadius: '10px', boxShadow: 'none' }}
-        >
-            {header}
-            <div className={bodyClasses}>{children}</div>
-        </Paper>
-    );
-};
-
-export default PageContent;
-
-PageContent.propTypes = {
-    headerContent: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
-    disablePadding: PropTypes.bool,
-    disableBorder: PropTypes.bool,
-};

frontend/src/component/common/PageContent/PageContent.styles.ts

@@ -1,9 +1,15 @@
 import { makeStyles } from 'tss-react/mui';
 
 export const useStyles = makeStyles()(theme => ({
+    container: {
+        borderRadius: theme.shape.borderRadiusLarge,
+        boxShadow: 'none',
+    },
     headerContainer: {
         padding: theme.spacing(2, 4),
-        borderBottom: `1px solid ${theme.palette.grey[100]}`,
+        borderBottomStyle: 'solid',
+        borderBottomWidth: 1,
+        borderBottomColor: theme.palette.divider,
         [theme.breakpoints.down('md')]: {
             padding: '1.5rem 1rem',
         },

frontend/src/component/common/PageContent/PageContent.tsx

@@ -0,0 +1,72 @@
+import React, { FC, ReactNode } from 'react';
+import classnames from 'classnames';
+import { PageHeader } from 'component/common/PageHeader/PageHeader';
+import { Paper, PaperProps } from '@mui/material';
+import { useStyles } from './PageContent.styles';
+import useLoading from 'hooks/useLoading';
+import { ConditionallyRender } from '../ConditionallyRender/ConditionallyRender';
+
+interface IPageContentProps extends PaperProps {
+    header?: ReactNode;
+    isLoading?: boolean;
+    /**
+     * @deprecated fix feature event log and remove
+     */
+    disablePadding?: boolean;
+    /**
+     * @deprecated fix feature event log and remove
+     */
+    disableBorder?: boolean;
+    bodyClass?: string;
+}
+
+export const PageContent: FC<IPageContentProps> = ({
+    children,
+    header,
+    disablePadding = false,
+    disableBorder = false,
+    bodyClass = '',
+    isLoading = false,
+    className,
+    ...rest
+}) => {
+    const { classes: styles } = useStyles();
+    const ref = useLoading(isLoading);
+
+    const headerClasses = classnames(styles.headerContainer, {
+        [styles.paddingDisabled]: disablePadding,
+        [styles.borderDisabled]: disableBorder,
+    });
+
+    const bodyClasses = classnames(styles.bodyContainer, {
+        [styles.paddingDisabled]: disablePadding,
+        [styles.borderDisabled]: disableBorder,
+        [bodyClass]: bodyClass,
+    });
+
+    const paperProps = disableBorder ? { elevation: 0 } : {};
+
+    return (
+        <div ref={ref}>
+            <Paper
+                {...rest}
+                {...paperProps}
+                className={classnames(styles.container, className)}
+            >
+                <ConditionallyRender
+                    condition={Boolean(header)}
+                    show={
+                        <div className={headerClasses}>
+                            <ConditionallyRender
+                                condition={typeof header === 'string'}
+                                show={<PageHeader title={header as string} />}
+                                elseShow={header}
+                            />
+                        </div>
+                    }
+                />
+                <div className={bodyClasses}>{children}</div>
+            </Paper>
+        </div>
+    );
+};

frontend/src/component/common/PageContent/index.jsx

@@ -1,3 +0,0 @@
-import PageContent from './PageContent';
-
-export default PageContent;

frontend/src/component/common/PageHeader/PageHeader.styles.ts

@@ -1,25 +1,30 @@
 import { makeStyles } from 'tss-react/mui';
 
 export const useStyles = makeStyles()(theme => ({
-    toolbar: {
+    headerContainer: {
-        paddingLeft: theme.spacing(4),
-        paddingRight: theme.spacing(4),
-        paddingTop: theme.spacing(2),
-        paddingBottom: theme.spacing(2),
-        borderBottom: `1px solid ${theme.palette.divider}`,
         display: 'flex',
-        flexWrap: 'wrap',
+        flexDirection: 'column',
-        alignItems: 'center',
     },
-    actions: {
+    topContainer: {
-        flex: 1,
         display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        position: 'relative',
+        flexWrap: 'wrap',
+    },
+    headerTitle: {
+        fontSize: theme.fontSizes.mainHeader,
+        fontWeight: 'normal',
+    },
+    headerActions: {
+        display: 'flex',
+        flexGrow: 1,
         justifyContent: 'flex-end',
         alignItems: 'center',
     },
     verticalSeparator: {
         height: '100%',
-        borderColor: theme.palette.grey[500],
+        borderColor: theme.palette.dividerAlternative,
         width: '1px',
         display: 'inline-block',
         marginLeft: theme.spacing(2),

frontend/src/component/common/PageHeader/PageHeader.tsx

@@ -0,0 +1,71 @@
+import { ReactNode, FC, VFC } from 'react';
+import classnames from 'classnames';
+
+import { Divider, Typography, TypographyProps } from '@mui/material';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+
+import { useStyles } from './PageHeader.styles';
+import { usePageTitle } from 'hooks/usePageTitle';
+
+interface IPageHeaderProps {
+    title: string;
+    titleElement?: ReactNode;
+    subtitle?: string;
+    variant?: TypographyProps['variant'];
+    loading?: boolean;
+    actions?: ReactNode;
+    className?: string;
+}
+
+const PageHeaderComponent: FC<IPageHeaderProps> & { Divider: VFC } = ({
+    title,
+    titleElement,
+    actions,
+    subtitle,
+    variant,
+    loading,
+    className = '',
+    children,
+}) => {
+    const { classes: styles } = useStyles();
+    const headerClasses = classnames({ skeleton: loading });
+
+    usePageTitle(title);
+
+    return (
+        <div className={styles.headerContainer}>
+            <div className={styles.topContainer}>
+                <div className={headerClasses} data-loading>
+                    <Typography
+                        variant={variant || 'h1'}
+                        className={classnames(styles.headerTitle, className)}
+                    >
+                        {titleElement || title}
+                    </Typography>
+                    {subtitle && <small>{subtitle}</small>}
+                </div>
+                <ConditionallyRender
+                    condition={Boolean(actions)}
+                    show={<div className={styles.headerActions}>{actions}</div>}
+                />
+            </div>
+            {children}
+        </div>
+    );
+};
+
+const PageHeaderDivider: VFC = () => {
+    const { classes: styles } = useStyles();
+
+    return (
+        <Divider
+            orientation="vertical"
+            variant="middle"
+            className={styles.verticalSeparator}
+        />
+    );
+};
+
+PageHeaderComponent.Divider = PageHeaderDivider;
+
+export const PageHeader = PageHeaderComponent;

frontend/src/component/common/Table/Table.tsx

@@ -1,8 +0,0 @@
-import { FC } from 'react';
-import { Box, Table as MUITable } from '@mui/material';
-
-export const Table: FC = ({ children }) => (
-    <Box sx={{ p: 4, pb: 0 }}>
-        <MUITable>{children}</MUITable>
-    </Box>
-);

frontend/src/component/common/Table/TableContainer/TableContainer.tsx

@@ -2,6 +2,9 @@ import { forwardRef } from 'react';
 import { Paper, PaperProps } from '@mui/material';
 import { useStyles } from './TableContainer.styles';
 
+/**
+ * @deprecated
+ */
 export const TableContainer = forwardRef<HTMLDivElement, PaperProps>(
     ({ children, ...props }, ref) => {
         const { classes } = useStyles();

frontend/src/component/common/Table/TableToolbar/TableToolbar.tsx

@@ -1,37 +0,0 @@
-import { FC, VFC } from 'react';
-import { Divider, Box, Toolbar } from '@mui/material';
-import { useStyles } from './TableToolbar.styles';
-import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle';
-
-interface ITableToolbarProps {
-    title: string;
-}
-
-export const TableToolbarComponent: FC<ITableToolbarProps> & {
-    Divider: VFC;
-} = ({ title, children }) => {
-    const { classes: styles } = useStyles();
-
-    return (
-        <Toolbar className={styles.toolbar}>
-            <HeaderTitle title={title} data-loading />
-            <Box className={styles.actions}>{children}</Box>
-        </Toolbar>
-    );
-};
-
-const ToolbarDivider: VFC = () => {
-    const { classes: styles } = useStyles();
-
-    return (
-        <Divider
-            orientation="vertical"
-            variant="middle"
-            className={styles.verticalSeparator}
-        />
-    );
-};
-
-TableToolbarComponent.Divider = ToolbarDivider;
-
-export const TableToolbar = TableToolbarComponent;

frontend/src/component/common/Table/index.ts

@@ -1,8 +1,5 @@
-export { TableContainer } from './TableContainer/TableContainer';
-export { TableToolbar } from './TableToolbar/TableToolbar';
 export { TableSearch } from './TableSearch/TableSearch';
-export { Table } from './Table';
 export { SortableTableHeader } from './SortableTableHeader/SortableTableHeader';
-export { TableBody, TableRow } from '@mui/material';
+export { Table, TableBody, TableRow } from '@mui/material';
 export { TableCell } from './TableCell/TableCell';
 export { TablePlaceholder } from './TablePlaceholder/TablePlaceholder';

frontend/src/component/context/ContextList/ContextList.tsx

@@ -11,8 +11,8 @@ import {
     Tooltip,
     useMediaQuery,
 } from '@mui/material';
-import PageContent from 'component/common/PageContent/PageContent';
+import { PageContent } from 'component/common/PageContent/PageContent';
-import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle';
+import { PageHeader } from 'component/common/PageHeader/PageHeader';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import {
     CREATE_CONTEXT_FIELD,
@@ -143,11 +143,8 @@ const ContextList: VFC = () => {
 
     return (
         <PageContent
-            headerContent={
+            header={
-                <HeaderTitle
+                <PageHeader actions={headerButton()} title={'Context fields'} />
-                    actions={headerButton()}
-                    title={'Context fields'}
-                />
             }
         >
             <List>

frontend/src/component/environments/CreateEnvironment/CreateEnvironment.tsx

@@ -11,9 +11,9 @@ import useToast from 'hooks/useToast';
 import { useEnvironments } from 'hooks/api/getters/useEnvironments/useEnvironments';
 import useProjectRolePermissions from 'hooks/api/getters/useProjectRolePermissions/useProjectRolePermissions';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import PageContent from 'component/common/PageContent/PageContent';
+import { PageContent } from 'component/common/PageContent/PageContent';
 import { ADMIN } from 'component/providers/AccessProvider/permissions';
-import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle';
+import { PageHeader } from 'component/common/PageHeader/PageHeader';
 import { formatUnknownError } from 'utils/formatUnknownError';
 
 const CreateEnvironment = () => {
@@ -109,9 +109,7 @@ const CreateEnvironment = () => {
             elseShow={
                 <>
                     <PageContent
-                        headerContent={
+                        header={<PageHeader title="Create environment" />}
-                            <HeaderTitle title="Create environment" />
-                        }
                     >
                         <Alert severity="error">
                             <p>

frontend/src/component/environments/EnvironmentList/EnvironmentList.tsx

@@ -4,9 +4,9 @@ import { List } from '@mui/material';
 import { Add } from '@mui/icons-material';
 import useToast from 'hooks/useToast';
 import { IEnvironment, ISortOrderPayload } from 'interfaces/environments';
-import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle';
+import { PageHeader } from 'component/common/PageHeader/PageHeader';
 import ResponsiveButton from 'component/common/ResponsiveButton/ResponsiveButton';
-import PageContent from 'component/common/PageContent';
+import { PageContent } from 'component/common/PageContent/PageContent';
 import { useEnvironments } from 'hooks/api/getters/useEnvironments/useEnvironments';
 import useEnvironmentApi from 'hooks/api/actions/useEnvironmentApi/useEnvironmentApi';
 import useProjectRolePermissions from 'hooks/api/getters/useProjectRolePermissions/useProjectRolePermissions';
@@ -159,8 +159,8 @@ const EnvironmentList = () => {
     };
     return (
         <PageContent
-            headerContent={
+            header={
-                <HeaderTitle
+                <PageHeader
                     title="Environments"
                     actions={
                         <>

frontend/src/component/feature/FeatureToggleList/FeatureToggleArchiveList.tsx

@@ -6,8 +6,8 @@ import useMediaQuery from '@mui/material/useMediaQuery';
 import { IFlags } from 'interfaces/uiConfig';
 import { SearchField } from 'component/common/SearchField/SearchField';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import PageContent from 'component/common/PageContent/PageContent';
+import { PageContent } from 'component/common/PageContent/PageContent';
-import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle';
+import { PageHeader } from 'component/common/PageHeader/PageHeader';
 import AccessContext from 'contexts/AccessContext';
 import { IFeaturesFilter } from 'hooks/useFeaturesFilter';
 import { FeatureToggleListItem } from './FeatureToggleListItem/FeatureToggleListItem';
@@ -138,8 +138,8 @@ export const FeatureToggleList: VFC<IFeatureToggleListProps> = ({
             </div>
 
             <PageContent
-                headerContent={
+                header={
-                    <HeaderTitle
+                    <PageHeader
                         loading={loading}
                         title={headerTitle}
                         actions={

frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable/FeatureToggleListTable.tsx

@@ -4,8 +4,6 @@ import { Link as RouterLink } from 'react-router-dom';
 import { useGlobalFilter, useSortBy, useTable } from 'react-table';
 import useLoading from 'hooks/useLoading';
 import {
-    TableContainer,
-    TableToolbar,
     Table,
     SortableTableHeader,
     TableBody,
@@ -22,6 +20,8 @@ import { FeatureStaleCell } from './FeatureStaleCell/FeatureStaleCell';
 import { FeatureTypeCell } from './FeatureTypeCell/FeatureTypeCell';
 import { CreateFeatureButton } from '../../CreateFeatureButton/CreateFeatureButton';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+import { PageContent } from 'component/common/PageContent/PageContent';
+import { PageHeader } from 'component/common/PageHeader/PageHeader';
 
 interface IExperimentProps {
     data: Record<string, any>[];
@@ -106,7 +106,6 @@ export const FeatureToggleListTable: VFC<IExperimentProps> = ({
     const theme = useTheme();
     const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
     const isMediumScreen = useMediaQuery(theme.breakpoints.down('lg'));
-    const ref = useLoading(isLoading);
 
     const initialState = useMemo(
         () => ({
@@ -155,26 +154,35 @@ export const FeatureToggleListTable: VFC<IExperimentProps> = ({
     }, [setHiddenColumns, isSmallScreen, isMediumScreen]);
 
     return (
-        <TableContainer ref={ref}>
+        <PageContent
-            <TableToolbar title={`Feature toggles (${data.length})`}>
+            isLoading={isLoading}
-                <TableSearch
+            header={
-                    initialValue={globalFilter}
+                <PageHeader
-                    onChange={setGlobalFilter}
+                    title={`Feature toggles (${data.length})`}
+                    actions={
+                        <>
+                            <TableSearch
+                                initialValue={globalFilter}
+                                onChange={setGlobalFilter}
+                            />
+                            <PageHeader.Divider />
+                            <Link
+                                component={RouterLink}
+                                to="/archive"
+                                underline="always"
+                                sx={{ marginRight: 3 }}
+                            >
+                                View archive
+                            </Link>
+                            <CreateFeatureButton
+                                loading={false}
+                                filter={{ query: '', project: 'default' }}
+                            />
+                        </>
+                    }
                 />
-                <TableToolbar.Divider />
+            }
-                <Link
+        >
-                    component={RouterLink}
-                    to="/archive"
-                    underline="always"
-                    sx={{ marginRight: 3 }}
-                >
-                    View archive
-                </Link>
-                <CreateFeatureButton
-                    loading={false}
-                    filter={{ query: '', project: 'default' }}
-                />
-            </TableToolbar>
             <SearchHighlightProvider value={globalFilter}>
                 <Table {...getTableProps()}>
                     <SortableTableHeader headerGroups={headerGroups} />
@@ -215,6 +223,6 @@ export const FeatureToggleListTable: VFC<IExperimentProps> = ({
                     />
                 }
             />
-        </TableContainer>
+        </PageContent>
     );
 };

frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetrics.tsx

@@ -1,5 +1,5 @@
 import { useFeatureMetricsRaw } from 'hooks/api/getters/useFeatureMetricsRaw/useFeatureMetricsRaw';
-import PageContent from 'component/common/PageContent';
+import { PageContent } from 'component/common/PageContent/PageContent';
 import { useEffect, useMemo, useState } from 'react';
 import {
     FEATURE_METRIC_HOURS_BACK_MAX,
@@ -57,7 +57,7 @@ export const FeatureMetrics = () => {
     }
 
     return (
-        <PageContent headerContent="">
+        <PageContent>
             <Grid
                 container
                 component="header"

frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettings.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import PageContent from 'component/common/PageContent';
+import { PageContent } from 'component/common/PageContent/PageContent';
 import { useStyles } from './FeatureSettings.styles';
 import { List, ListItem } from '@mui/material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
@@ -17,7 +17,7 @@ export const FeatureSettings = () => {
     const [settings, setSettings] = useState(METADATA);
 
     return (
-        <PageContent headerContent="Settings" bodyClass={styles.bodyContainer}>
+        <PageContent header="Settings" bodyClass={styles.bodyContainer}>
             <div className={styles.innerContainer}>
                 <div className={styles.listContainer}>
                     <List>

frontend/src/component/history/EventLog/EventLog.jsx

@@ -1,8 +1,8 @@
 import { List, Switch, FormControlLabel } from '@mui/material';
 import PropTypes from 'prop-types';
 import EventJson from './EventJson/EventJson';
-import PageContent from 'component/common/PageContent/PageContent';
+import { PageContent } from 'component/common/PageContent/PageContent';
-import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle';
+import { PageHeader } from 'component/common/PageHeader/PageHeader';
 import EventCard from './EventCard/EventCard';
 import { useStyles } from './EventLog.styles';
 import { formatDateYMDHMS } from 'utils/formatDate';
@@ -50,8 +50,8 @@ const EventLog = ({
         <PageContent
             disablePadding={displayInline}
             disableBorder={displayInline}
-            headerContent={
+            header={
-                <HeaderTitle
+                <PageHeader
                     title={title}
                     actions={
                         <FormControlLabel

frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.styles.ts

@@ -20,8 +20,6 @@ export const useStyles = makeStyles()(theme => ({
         padding: '1rem',
     },
     title: {
-        fontSize: '1rem',
-        fontWeight: 'normal',
         display: 'unset',
         [theme.breakpoints.down(600)]: {
             display: 'none',

frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx

@@ -7,8 +7,8 @@ import AccessContext from 'contexts/AccessContext';
 import { SearchField } from 'component/common/SearchField/SearchField';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { PROJECTFILTERING } from 'component/common/flags';
-import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle';
+import { PageHeader } from 'component/common/PageHeader/PageHeader';
-import PageContent from 'component/common/PageContent';
+import { PageContent } from 'component/common/PageContent/PageContent';
 import ResponsiveButton from 'component/common/ResponsiveButton/ResponsiveButton';
 import FeatureToggleListNew from 'component/feature/FeatureToggleListNew/FeatureToggleListNew';
 import { IFeatureToggleListItem } from 'interfaces/featureToggle';
@@ -46,8 +46,8 @@ export const ProjectFeatureToggles = ({
         <PageContent
             className={styles.container}
             bodyClass={styles.bodyClass}
-            headerContent={
+            header={
-                <HeaderTitle
+                <PageHeader
                     className={styles.title}
                     title={`Project feature toggles (${filteredFeatures.length})`}
                     actions={

frontend/src/component/project/ProjectAccess/ProjectAccess.tsx

@@ -2,7 +2,7 @@
 import React, { useState } from 'react';
 import { Alert, SelectChangeEvent } from '@mui/material';
 import { ProjectAccessAddUser } from './ProjectAccessAddUser/ProjectAccessAddUser';
-import PageContent from 'component/common/PageContent';
+import { PageContent } from 'component/common/PageContent/PageContent';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { useStyles } from './ProjectAccess.styles';
 import usePagination from 'hooks/usePagination';
@@ -13,7 +13,7 @@ import useProjectAccess, {
     IProjectAccessUser,
 } from 'hooks/api/getters/useProjectAccess/useProjectAccess';
 import useProjectApi from 'hooks/api/actions/useProjectApi/useProjectApi';
-import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle';
+import { PageHeader } from 'component/common/PageHeader/PageHeader';
 import { ProjectAccessList } from './ProjectAccessList/ProjectAccessList';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
 
@@ -31,7 +31,7 @@ export const ProjectAccess = () => {
 
     if (isOss()) {
         return (
-            <PageContent headerContent={<HeaderTitle title="Project Access" />}>
+            <PageContent header={<PageHeader title="Project Access" />}>
                 <Alert severity="error">
                     Controlling access to projects requires a paid version of
                     Unleash. Check out{' '}
@@ -90,7 +90,7 @@ export const ProjectAccess = () => {
 
     return (
         <PageContent
-            headerContent={<HeaderTitle title="Project Roles"></HeaderTitle>}
+            header={<PageHeader title="Project Roles"></PageHeader>}
             className={styles.pageContent}
         >
             <ProjectAccessAddUser roles={access?.roles} />

frontend/src/component/project/ProjectEnvironment/ProjectEnvironment.tsx

@@ -3,8 +3,8 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit
 import { useStyles } from './ProjectEnvironment.styles';
 
 import useLoading from 'hooks/useLoading';
-import PageContent from 'component/common/PageContent';
+import { PageContent } from 'component/common/PageContent/PageContent';
-import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle';
+import { PageHeader } from 'component/common/PageHeader/PageHeader';
 import { UPDATE_PROJECT } from 'component/providers/AccessProvider/permissions';
 
 import ApiError from 'component/common/ApiError/ApiError';
@@ -174,8 +174,8 @@ const ProjectEnvironmentList = ({
     return (
         <div ref={ref}>
             <PageContent
-                headerContent={
+                header={
-                    <HeaderTitle
+                    <PageHeader
                         title={`Configure environments for "${project?.name}" project`}
                     />
                 }

frontend/src/component/project/ProjectList/ProjectList.tsx

@@ -9,9 +9,9 @@ import { useStyles } from './ProjectList.styles';
 import { IProjectCard } from 'interfaces/project';
 import loadingData from './loadingData';
 import useLoading from 'hooks/useLoading';
-import PageContent from 'component/common/PageContent';
+import { PageContent } from 'component/common/PageContent/PageContent';
 import AccessContext from 'contexts/AccessContext';
-import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle';
+import { PageHeader } from 'component/common/PageHeader/PageHeader';
 import ResponsiveButton from 'component/common/ResponsiveButton/ResponsiveButton';
 import { CREATE_PROJECT } from 'component/providers/AccessProvider/permissions';
 import { Add } from '@mui/icons-material';
@@ -140,8 +140,8 @@ export const ProjectListNew = () => {
                 />
             </div>
             <PageContent
-                headerContent={
+                header={
-                    <HeaderTitle
+                    <PageHeader
                         title="Projects"
                         actions={
                             <ResponsiveButton

frontend/src/component/segments/SegmentList/SegmentList.tsx

@@ -19,8 +19,8 @@ import useToast from 'hooks/useToast';
 import { formatUnknownError } from 'utils/formatUnknownError';
 import { Link, useNavigate } from 'react-router-dom';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle';
+import { PageHeader } from 'component/common/PageHeader/PageHeader';
-import PageContent from 'component/common/PageContent';
+import { PageContent } from 'component/common/PageContent/PageContent';
 import PermissionButton from 'component/common/PermissionButton/PermissionButton';
 import { SegmentDelete } from '../SegmentDelete/SegmentDelete';
 import { SegmentDocsWarning } from 'component/segments/SegmentDocs/SegmentDocs';
@@ -90,8 +90,8 @@ export const SegmentsList = () => {
 
     return (
         <PageContent
-            headerContent={
+            header={
-                <HeaderTitle
+                <PageHeader
                     title="Segments"
                     actions={
                         <PermissionButton

frontend/src/component/strategies/StrategiesList/StrategiesList.tsx

@@ -23,8 +23,8 @@ import {
     UPDATE_STRATEGY,
 } from 'component/providers/AccessProvider/permissions';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import PageContent from 'component/common/PageContent/PageContent';
+import { PageContent } from 'component/common/PageContent/PageContent';
-import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle';
+import { PageHeader } from 'component/common/PageHeader/PageHeader';
 import { useStyles } from './StrategiesList.styles';
 import AccessContext from 'contexts/AccessContext';
 import { Dialogue } from 'component/common/Dialogue/Dialogue';
@@ -281,9 +281,7 @@ export const StrategiesList = () => {
 
     return (
         <PageContent
-            headerContent={
+            header={<PageHeader title="Strategies" actions={headerButton()} />}
-                <HeaderTitle title="Strategies" actions={headerButton()} />
-            }
         >
             <Dialogue
                 open={dialogueMetaData.show}

frontend/src/component/strategies/StrategiesList/__snapshots__/StrategiesList.test.tsx.snap

@@ -2,128 +2,176 @@
 
 exports[`renders correctly 1`] = `
 [
-  <div
+  <div>
-    className="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 mui-45jkiv-MuiPaper-root"
-    style={
-      {
-        "borderRadius": "10px",
-        "boxShadow": "none",
-      }
-    }
-  >
     <div
-      className="tss-ee3n06-headerContainer"
+      className="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 tss-15amf7-container mui-45jkiv-MuiPaper-root"
     >
       <div
-        className="tss-14s7qul-headerTitleContainer"
+        className="tss-1yjkq3l-headerContainer"
       >
         <div
-          className=""
+          className="tss-1ylehva-headerContainer"
-          data-loading={true}
         >
-          <h1
+          <div
-            className="MuiTypography-root MuiTypography-h1 tss-7lbvh4-headerTitle mui-ylrecv-MuiTypography-root"
+            className="tss-1dw2af8-topContainer"
           >
-            Strategies
+            <div
-          </h1>
+              className=""
-        </div>
+              data-loading={true}
-        <div
+            >
-          className="tss-ap2nhp-headerActions"
+              <h1
-        >
+                className="MuiTypography-root MuiTypography-h1 tss-7lbvh4-headerTitle mui-ylrecv-MuiTypography-root"
-          <span
+              >
-            id="useId-0"
+                Strategies
-          >
+              </h1>
-            <button
+            </div>
-              aria-describedby="useId-0"
+            <div
-              className="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonBase-root  mui-1lmzhxi-MuiButtonBase-root-MuiButton-root"
+              className="tss-1u1bjy8-headerActions"
-              data-testid="ADD_NEW_STRATEGY_ID"
-              disabled={false}
-              onBlur={[Function]}
-              onClick={[Function]}
-              onContextMenu={[Function]}
-              onDragLeave={[Function]}
-              onFocus={[Function]}
-              onKeyDown={[Function]}
-              onKeyUp={[Function]}
-              onMouseDown={[Function]}
-              onMouseLeave={[Function]}
-              onMouseUp={[Function]}
-              onTouchEnd={[Function]}
-              onTouchMove={[Function]}
-              onTouchStart={[Function]}
-              tabIndex={0}
-              type="button"
             >
-              New strategy
               <span
-                className="MuiButton-endIcon MuiButton-iconSizeMedium mui-9tj150-MuiButton-endIcon"
+                id="useId-0"
-              />
+              >
-              <span
+                <button
-                className="MuiTouchRipple-root mui-8je8zh-MuiTouchRipple-root"
+                  aria-describedby="useId-0"
-              />
+                  className="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonBase-root  mui-1lmzhxi-MuiButtonBase-root-MuiButton-root"
-            </button>
+                  data-testid="ADD_NEW_STRATEGY_ID"
-          </span>
+                  disabled={false}
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onContextMenu={[Function]}
+                  onDragLeave={[Function]}
+                  onFocus={[Function]}
+                  onKeyDown={[Function]}
+                  onKeyUp={[Function]}
+                  onMouseDown={[Function]}
+                  onMouseLeave={[Function]}
+                  onMouseUp={[Function]}
+                  onTouchEnd={[Function]}
+                  onTouchMove={[Function]}
+                  onTouchStart={[Function]}
+                  tabIndex={0}
+                  type="button"
+                >
+                  New strategy
+                  <span
+                    className="MuiButton-endIcon MuiButton-iconSizeMedium mui-9tj150-MuiButton-endIcon"
+                  />
+                  <span
+                    className="MuiTouchRipple-root mui-8je8zh-MuiTouchRipple-root"
+                  />
+                </button>
+              </span>
+            </div>
+          </div>
         </div>
       </div>
-    </div>
+      <div
-    <div
+        className="tss-kiw3z8-bodyContainer"
-      className="tss-kiw3z8-bodyContainer"
-    >
-      <ul
-        className="MuiList-root MuiList-padding mui-h4y409-MuiList-root"
       >
-        <li
+        <ul
-          className="MuiListItem-root MuiListItem-gutters MuiListItem-padding tss-ynyzms-listItem mui-vlytkl-MuiListItem-root"
+          className="MuiList-root MuiList-padding mui-h4y409-MuiList-root"
-          disabled={false}
         >
-          <div
+          <li
-            className="MuiListItemAvatar-root mui-1e9lk82-MuiListItemAvatar-root"
+            className="MuiListItem-root MuiListItem-gutters MuiListItem-padding tss-ynyzms-listItem mui-vlytkl-MuiListItem-root"
+            disabled={false}
           >
-            <svg
+            <div
-              aria-hidden={true}
+              className="MuiListItemAvatar-root mui-1e9lk82-MuiListItemAvatar-root"
-              className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium mui-i4bv87-MuiSvgIcon-root"
+            >
-              data-testid="ExtensionIcon"
+              <svg
-              focusable="false"
+                aria-hidden={true}
-              style={
+                className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium mui-i4bv87-MuiSvgIcon-root"
-                {
+                data-testid="ExtensionIcon"
-                  "color": "#0000008a",
+                focusable="false"
+                style={
+                  {
+                    "color": "#0000008a",
+                  }
                 }
-              }
+                viewBox="0 0 24 24"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z"
-              />
-            </svg>
-          </div>
-          <div
-            className="MuiListItemText-root MuiListItemText-multiline mui-konndc-MuiListItemText-root"
-          >
-            <span
-              className="MuiTypography-root MuiTypography-body1 MuiListItemText-primary mui-1k7ov6f-MuiTypography-root"
-            >
-              <a
-                href="/strategies/flexibleRollout"
-                onClick={[Function]}
               >
-                <strong>
+                <path
-                  Gradual rollout
+                  d="M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z"
-                </strong>
+                />
-              </a>
+              </svg>
-            </span>
+            </div>
-            <p
+            <div
-              className="MuiTypography-root MuiTypography-body2 MuiListItemText-secondary mui-of6c4k-MuiTypography-root"
+              className="MuiListItemText-root MuiListItemText-multiline mui-konndc-MuiListItemText-root"
             >
-              Roll out to a percentage of your userbase, and ensure that the experience is the same for the user on each visit.
+              <span
-            </p>
+                className="MuiTypography-root MuiTypography-body1 MuiListItemText-primary mui-1k7ov6f-MuiTypography-root"
-          </div>
+              >
-          <div>
+                <a
-            <span
+                  href="/strategies/flexibleRollout"
-              aria-label="Deprecate strategy"
+                  onClick={[Function]}
+                >
+                  <strong>
+                    Gradual rollout
+                  </strong>
+                </a>
+              </span>
+              <p
+                className="MuiTypography-root MuiTypography-body2 MuiListItemText-secondary mui-of6c4k-MuiTypography-root"
+              >
+                Roll out to a percentage of your userbase, and ensure that the experience is the same for the user on each visit.
+              </p>
+            </div>
+            <div>
+              <span
+                aria-label="Deprecate strategy"
+                aria-labelledby={null}
+                className=""
+                data-mui-internal-clone-element={true}
+                id="useId-1"
+                onBlur={[Function]}
+                onFocus={[Function]}
+                onMouseLeave={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                onTouchStart={[Function]}
+              >
+                <button
+                  aria-labelledby="useId-1"
+                  className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge mui-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
+                  disabled={false}
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onContextMenu={[Function]}
+                  onDragLeave={[Function]}
+                  onFocus={[Function]}
+                  onKeyDown={[Function]}
+                  onKeyUp={[Function]}
+                  onMouseDown={[Function]}
+                  onMouseLeave={[Function]}
+                  onMouseUp={[Function]}
+                  onTouchEnd={[Function]}
+                  onTouchMove={[Function]}
+                  onTouchStart={[Function]}
+                  tabIndex={0}
+                  type="button"
+                >
+                  <svg
+                    aria-hidden={true}
+                    className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium mui-i4bv87-MuiSvgIcon-root"
+                    data-testid="VisibilityIcon"
+                    focusable="false"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"
+                    />
+                  </svg>
+                  <span
+                    className="MuiTouchRipple-root mui-8je8zh-MuiTouchRipple-root"
+                  />
+                </button>
+              </span>
+            </div>
+            <div
+              aria-label="You cannot delete a built-in strategy"
               aria-labelledby={null}
               className=""
               data-mui-internal-clone-element={true}
-              id="useId-1"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
@@ -132,11 +180,9 @@ exports[`renders correctly 1`] = `
               onTouchStart={[Function]}
             >
               <button
-                aria-labelledby="useId-1"
+                className="MuiButtonBase-root Mui-disabled MuiIconButton-root Mui-disabled MuiIconButton-sizeLarge mui-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
-                className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge mui-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
+                disabled={true}
-                disabled={false}
                 onBlur={[Function]}
-                onClick={[Function]}
                 onContextMenu={[Function]}
                 onDragLeave={[Function]}
                 onFocus={[Function]}
@@ -148,120 +194,74 @@ exports[`renders correctly 1`] = `
                 onTouchEnd={[Function]}
                 onTouchMove={[Function]}
                 onTouchStart={[Function]}
-                tabIndex={0}
+                tabIndex={-1}
                 type="button"
               >
                 <svg
-                  aria-hidden={true}
                   className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium mui-i4bv87-MuiSvgIcon-root"
-                  data-testid="VisibilityIcon"
+                  data-testid="EditIcon"
                   focusable="false"
+                  role="img"
                   viewBox="0 0 24 24"
                 >
                   <path
-                    d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"
+                    d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                   />
+                  <title>
+                    Edit strategy
+                  </title>
                 </svg>
-                <span
-                  className="MuiTouchRipple-root mui-8je8zh-MuiTouchRipple-root"
-                />
               </button>
-            </span>
+            </div>
-          </div>
+            <div
-          <div
+              aria-label="You cannot delete a built-in strategy"
-            aria-label="You cannot delete a built-in strategy"
+              aria-labelledby={null}
-            aria-labelledby={null}
+              className=""
-            className=""
+              data-mui-internal-clone-element={true}
-            data-mui-internal-clone-element={true}
-            onBlur={[Function]}
-            onFocus={[Function]}
-            onMouseLeave={[Function]}
-            onMouseOver={[Function]}
-            onTouchEnd={[Function]}
-            onTouchStart={[Function]}
-          >
-            <button
-              className="MuiButtonBase-root Mui-disabled MuiIconButton-root Mui-disabled MuiIconButton-sizeLarge mui-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
-              disabled={true}
               onBlur={[Function]}
-              onContextMenu={[Function]}
-              onDragLeave={[Function]}
               onFocus={[Function]}
-              onKeyDown={[Function]}
-              onKeyUp={[Function]}
-              onMouseDown={[Function]}
               onMouseLeave={[Function]}
-              onMouseUp={[Function]}
+              onMouseOver={[Function]}
               onTouchEnd={[Function]}
-              onTouchMove={[Function]}
               onTouchStart={[Function]}
-              tabIndex={-1}
-              type="button"
             >
-              <svg
+              <button
-                className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium mui-i4bv87-MuiSvgIcon-root"
+                className="MuiButtonBase-root Mui-disabled MuiIconButton-root Mui-disabled MuiIconButton-sizeLarge mui-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
-                data-testid="EditIcon"
+                disabled={true}
-                focusable="false"
+                onBlur={[Function]}
-                role="img"
+                onContextMenu={[Function]}
-                viewBox="0 0 24 24"
+                onDragLeave={[Function]}
+                onFocus={[Function]}
+                onKeyDown={[Function]}
+                onKeyUp={[Function]}
+                onMouseDown={[Function]}
+                onMouseLeave={[Function]}
+                onMouseUp={[Function]}
+                onTouchEnd={[Function]}
+                onTouchMove={[Function]}
+                onTouchStart={[Function]}
+                tabIndex={-1}
+                type="button"
               >
-                <path
+                <svg
-                  d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
+                  className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium mui-i4bv87-MuiSvgIcon-root"
-                />
+                  data-testid="DeleteIcon"
-                <title>
+                  focusable="false"
-                  Edit strategy
+                  role="img"
-                </title>
+                  viewBox="0 0 24 24"
-              </svg>
+                >
-            </button>
+                  <path
-          </div>
+                    d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-          <div
+                  />
-            aria-label="You cannot delete a built-in strategy"
+                  <title>
-            aria-labelledby={null}
+                    Delete strategy
-            className=""
+                  </title>
-            data-mui-internal-clone-element={true}
+                </svg>
-            onBlur={[Function]}
+              </button>
-            onFocus={[Function]}
+            </div>
-            onMouseLeave={[Function]}
+          </li>
-            onMouseOver={[Function]}
+        </ul>
-            onTouchEnd={[Function]}
+      </div>
-            onTouchStart={[Function]}
-          >
-            <button
-              className="MuiButtonBase-root Mui-disabled MuiIconButton-root Mui-disabled MuiIconButton-sizeLarge mui-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
-              disabled={true}
-              onBlur={[Function]}
-              onContextMenu={[Function]}
-              onDragLeave={[Function]}
-              onFocus={[Function]}
-              onKeyDown={[Function]}
-              onKeyUp={[Function]}
-              onMouseDown={[Function]}
-              onMouseLeave={[Function]}
-              onMouseUp={[Function]}
-              onTouchEnd={[Function]}
-              onTouchMove={[Function]}
-              onTouchStart={[Function]}
-              tabIndex={-1}
-              type="button"
-            >
-              <svg
-                className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium mui-i4bv87-MuiSvgIcon-root"
-                data-testid="DeleteIcon"
-                focusable="false"
-                role="img"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                />
-                <title>
-                  Delete strategy
-                </title>
-              </svg>
-            </button>
-          </div>
-        </li>
-      </ul>
     </div>
   </div>,
   <div

frontend/src/component/strategies/StrategyView/StrategyView.tsx

@@ -1,12 +1,12 @@
 import { Grid } from '@mui/material';
 import { useNavigate } from 'react-router-dom';
 import { UPDATE_STRATEGY } from 'component/providers/AccessProvider/permissions';
-import PageContent from 'component/common/PageContent/PageContent';
+import { PageContent } from 'component/common/PageContent/PageContent';
 import { useStrategies } from 'hooks/api/getters/useStrategies/useStrategies';
 import { useFeatures } from 'hooks/api/getters/useFeatures/useFeatures';
 import useApplications from 'hooks/api/getters/useApplications/useApplications';
 import { StrategyDetails } from './StrategyDetails/StrategyDetails';
-import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle';
+import { PageHeader } from 'component/common/PageHeader/PageHeader';
 import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
 import { Edit } from '@mui/icons-material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
@@ -32,8 +32,8 @@ export const StrategyView = () => {
     if (!strategy) return null;
     return (
         <PageContent
-            headerContent={
+            header={
-                <HeaderTitle
+                <PageHeader
                     title={strategy?.name}
                     subtitle={strategy?.description}
                     actions={

frontend/src/component/tags/TagTypeList/TagTypeList.tsx

@@ -10,8 +10,8 @@ import {
     Tooltip,
 } from '@mui/material';
 import { Add, Delete, Edit, Label } from '@mui/icons-material';
-import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle';
+import { PageHeader } from 'component/common/PageHeader/PageHeader';
-import PageContent from 'component/common/PageContent/PageContent';
+import { PageContent } from 'component/common/PageContent/PageContent';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import {
     DELETE_TAG_TYPE,
@@ -58,7 +58,7 @@ export const TagTypeList = () => {
     };
 
     let header = (
-        <HeaderTitle
+        <PageHeader
             title="Tag Types"
             actions={
                 <ConditionallyRender
@@ -143,7 +143,7 @@ export const TagTypeList = () => {
         );
     };
     return (
-        <PageContent headerContent={header}>
+        <PageContent header={header}>
             <List>
                 <ConditionallyRender
                     condition={tagTypes.length > 0}

frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap

@@ -2,71 +2,71 @@
 
 exports[`renders an empty list correctly 1`] = `
 [
-  <div
+  <div>
-    className="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 mui-45jkiv-MuiPaper-root"
-    style={
-      {
-        "borderRadius": "10px",
-        "boxShadow": "none",
-      }
-    }
-  >
     <div
-      className="tss-ee3n06-headerContainer"
+      className="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 tss-15amf7-container mui-45jkiv-MuiPaper-root"
     >
       <div
-        className="tss-14s7qul-headerTitleContainer"
+        className="tss-1yjkq3l-headerContainer"
       >
         <div
-          className=""
+          className="tss-1ylehva-headerContainer"
-          data-loading={true}
         >
-          <h1
+          <div
-            className="MuiTypography-root MuiTypography-h1 tss-7lbvh4-headerTitle mui-ylrecv-MuiTypography-root"
+            className="tss-1dw2af8-topContainer"
           >
-            Tag Types
+            <div
-          </h1>
+              className=""
-        </div>
+              data-loading={true}
-        <div
+            >
-          className="tss-ap2nhp-headerActions"
+              <h1
-        >
+                className="MuiTypography-root MuiTypography-h1 tss-7lbvh4-headerTitle mui-ylrecv-MuiTypography-root"
-          <button
+              >
-            className="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonBase-root  mui-1lmzhxi-MuiButtonBase-root-MuiButton-root"
+                Tag Types
-            disabled={false}
+              </h1>
-            onBlur={[Function]}
+            </div>
-            onClick={[Function]}
+            <div
-            onContextMenu={[Function]}
+              className="tss-1u1bjy8-headerActions"
-            onDragLeave={[Function]}
+            >
-            onFocus={[Function]}
+              <button
-            onKeyDown={[Function]}
+                className="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonBase-root  mui-1lmzhxi-MuiButtonBase-root-MuiButton-root"
-            onKeyUp={[Function]}
+                disabled={false}
-            onMouseDown={[Function]}
+                onBlur={[Function]}
-            onMouseLeave={[Function]}
+                onClick={[Function]}
-            onMouseUp={[Function]}
+                onContextMenu={[Function]}
-            onTouchEnd={[Function]}
+                onDragLeave={[Function]}
-            onTouchMove={[Function]}
+                onFocus={[Function]}
-            onTouchStart={[Function]}
+                onKeyDown={[Function]}
-            tabIndex={0}
+                onKeyUp={[Function]}
-            type="button"
+                onMouseDown={[Function]}
-          >
+                onMouseLeave={[Function]}
-            New tag type
+                onMouseUp={[Function]}
-          </button>
+                onTouchEnd={[Function]}
+                onTouchMove={[Function]}
+                onTouchStart={[Function]}
+                tabIndex={0}
+                type="button"
+              >
+                New tag type
+              </button>
+            </div>
+          </div>
         </div>
       </div>
-    </div>
+      <div
-    <div
+        className="tss-kiw3z8-bodyContainer"
-      className="tss-kiw3z8-bodyContainer"
-    >
-      <ul
-        className="MuiList-root MuiList-padding mui-h4y409-MuiList-root"
       >
-        <li
+        <ul
-          className="MuiListItem-root MuiListItem-gutters MuiListItem-padding mui-vlytkl-MuiListItem-root"
+          className="MuiList-root MuiList-padding mui-h4y409-MuiList-root"
-          disabled={false}
         >
-          No entries
+          <li
-        </li>
+            className="MuiListItem-root MuiListItem-gutters MuiListItem-padding mui-vlytkl-MuiListItem-root"
-      </ul>
+            disabled={false}
+          >
+            No entries
+          </li>
+        </ul>
+      </div>
     </div>
   </div>,
   <div

frontend/src/themes/theme.ts

@@ -89,13 +89,6 @@ export default createTheme({
         },
     },
     components: {
-        MuiTableHead: {
-            styleOverrides: {
-                root: {
-                    background: colors.grey[200],
-                },
-            },
-        },
         MuiLink: {
             styleOverrides: {
                 root: {
@@ -112,6 +105,13 @@ export default createTheme({
                 },
             },
         },
+        MuiTableHead: {
+            styleOverrides: {
+                root: {
+                    background: colors.grey[200],
+                },
+            },
+        },
         MuiTableRow: {
             styleOverrides: {
                 root: {
@@ -121,5 +121,12 @@ export default createTheme({
                 },
             },
         },
+        MuiTableCell: {
+            styleOverrides: {
+                root: {
+                    borderBottomColor: colors.grey[300],
+                },
+            },
+        },
     },
 });