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,13 +154,18 @@ export const FeatureToggleListTable: VFC<IExperimentProps> = ({
     }, [setHiddenColumns, isSmallScreen, isMediumScreen]);
 
     return (
-        <TableContainer ref={ref}>
+        <PageContent
-            <TableToolbar title={`Feature toggles (${data.length})`}>
+            isLoading={isLoading}
+            header={
+                <PageHeader
+                    title={`Feature toggles (${data.length})`}
+                    actions={
+                        <>
                             <TableSearch
                                 initialValue={globalFilter}
                                 onChange={setGlobalFilter}
                             />
-                <TableToolbar.Divider />
+                            <PageHeader.Divider />
                             <Link
                                 component={RouterLink}
                                 to="/archive"
@@ -174,7 +178,11 @@ export const FeatureToggleListTable: VFC<IExperimentProps> = ({
                                 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,20 +2,18 @@
 
 exports[`renders correctly 1`] = `
 [
+  <div>
     <div
-    className="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 mui-45jkiv-MuiPaper-root"
+      className="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 tss-15amf7-container mui-45jkiv-MuiPaper-root"
-    style={
-      {
-        "borderRadius": "10px",
-        "boxShadow": "none",
-      }
-    }
     >
       <div
-      className="tss-ee3n06-headerContainer"
+        className="tss-1yjkq3l-headerContainer"
       >
         <div
-        className="tss-14s7qul-headerTitleContainer"
+          className="tss-1ylehva-headerContainer"
+        >
+          <div
+            className="tss-1dw2af8-topContainer"
           >
             <div
               className=""
@@ -28,7 +26,7 @@ exports[`renders correctly 1`] = `
               </h1>
             </div>
             <div
-          className="tss-ap2nhp-headerActions"
+              className="tss-1u1bjy8-headerActions"
             >
               <span
                 id="useId-0"
@@ -66,6 +64,7 @@ exports[`renders correctly 1`] = `
             </div>
           </div>
         </div>
+      </div>
       <div
         className="tss-kiw3z8-bodyContainer"
       >
@@ -263,6 +262,7 @@ exports[`renders correctly 1`] = `
           </li>
         </ul>
       </div>
+    </div>
   </div>,
   <div
     aria-atomic={true}

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,20 +2,18 @@
 
 exports[`renders an empty list correctly 1`] = `
 [
+  <div>
     <div
-    className="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 mui-45jkiv-MuiPaper-root"
+      className="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 tss-15amf7-container mui-45jkiv-MuiPaper-root"
-    style={
-      {
-        "borderRadius": "10px",
-        "boxShadow": "none",
-      }
-    }
     >
       <div
-      className="tss-ee3n06-headerContainer"
+        className="tss-1yjkq3l-headerContainer"
       >
         <div
-        className="tss-14s7qul-headerTitleContainer"
+          className="tss-1ylehva-headerContainer"
+        >
+          <div
+            className="tss-1dw2af8-topContainer"
           >
             <div
               className=""
@@ -28,7 +26,7 @@ exports[`renders an empty list correctly 1`] = `
               </h1>
             </div>
             <div
-          className="tss-ap2nhp-headerActions"
+              className="tss-1u1bjy8-headerActions"
             >
               <button
                 className="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonBase-root  mui-1lmzhxi-MuiButtonBase-root-MuiButton-root"
@@ -54,6 +52,7 @@ exports[`renders an empty list correctly 1`] = `
             </div>
           </div>
         </div>
+      </div>
       <div
         className="tss-kiw3z8-bodyContainer"
       >
@@ -68,6 +67,7 @@ exports[`renders an empty list correctly 1`] = `
           </li>
         </ul>
       </div>
+    </div>
   </div>,
   <div
     aria-atomic={true}

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],
+                },
+            },
+        },
     },
 });