Merge branch 'main' into fix/playground_virtualisation_loader

2025-06-27 01:19:00 +02:00 · 2022-08-10 07:37:58 +03:00 · 2022-08-10 07:37:58 +03:00 · 1a30f42635
commit 1a30f42635
parent a0091ffabc 2e8ebb1d9e
61 changed files with 527 additions and 588 deletions
--- a/frontend/package.json
+++ b/frontend/package.json
@ -1,7 +1,7 @@
 {
  "name": "unleash-frontend",
  "description": "unleash your features",
-  "version": "4.14.3",
+  "version": "4.15.0-beta.0",
  "keywords": [
    "unleash",
    "feature toggle",
--- a/frontend/src/component/admin/groups/GroupsList/GroupsList.tsx
+++ b/frontend/src/component/admin/groups/GroupsList/GroupsList.tsx
@ -1,12 +1,12 @@
 import { useEffect, useMemo, useState, VFC } from 'react';
 import { useGroups } from 'hooks/api/getters/useGroups/useGroups';
-import { Link, useNavigate, useSearchParams } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 import { IGroup } from 'interfaces/group';
 import { PageContent } from 'component/common/PageContent/PageContent';
 import { PageHeader } from 'component/common/PageHeader/PageHeader';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { Search } from 'component/common/Search/Search';
-import { Button, Grid, useMediaQuery } from '@mui/material';
+import { Grid, useMediaQuery } from '@mui/material';
 import theme from 'themes/theme';
 import { SearchHighlightProvider } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
 import { TablePlaceholder } from 'component/common/Table';
--- a/frontend/src/component/admin/users/UserForm/UserForm.tsx
+++ b/frontend/src/component/admin/users/UserForm/UserForm.tsx
@ -13,7 +13,7 @@ import React from 'react';
 import { useUsers } from 'hooks/api/getters/useUsers/useUsers';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { EDIT } from 'constants/misc';
-import useUiBootstrap from 'hooks/api/getters/useUiBootstrap/useUiBootstrap';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';

 interface IUserForm {
    email: string;
@ -49,7 +49,7 @@ const UserForm: React.FC<IUserForm> = ({
 }) => {
    const { classes: styles } = useStyles();
    const { roles } = useUsers();
-    const { bootstrap } = useUiBootstrap();
+    const { uiConfig } = useUiConfig();

    // @ts-expect-error
    const sortRoles = (a, b) => {
@ -127,7 +127,7 @@ const UserForm: React.FC<IUserForm> = ({
                    </RadioGroup>
                </FormControl>
                <ConditionallyRender
-                    condition={mode !== EDIT && bootstrap?.email}
+                    condition={mode !== EDIT && Boolean(uiConfig?.emailEnabled)}
                    show={
                        <FormControl>
                            <Typography
--- a/frontend/src/component/admin/users/hooks/useAddUserForm.ts
+++ b/frontend/src/component/admin/users/hooks/useAddUserForm.ts
@ -1,13 +1,13 @@
 import { useEffect, useState } from 'react';
-import useUiBootstrap from 'hooks/api/getters/useUiBootstrap/useUiBootstrap';
 import { useUsers } from 'hooks/api/getters/useUsers/useUsers';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';

 const useCreateUserForm = (
    initialName = '',
    initialEmail = '',
    initialRootRole = 1
 ) => {
-    const { bootstrap } = useUiBootstrap();
+    const { uiConfig } = useUiConfig();
    const [name, setName] = useState(initialName);
    const [email, setEmail] = useState(initialEmail);
    const [sendEmail, setSendEmail] = useState(false);
@ -25,8 +25,8 @@ const useCreateUserForm = (
    }, [initialEmail]);

    useEffect(() => {
-        setSendEmail(bootstrap?.email || false);
-    }, [bootstrap?.email]);
+        setSendEmail(uiConfig?.emailEnabled || false);
+    }, [uiConfig?.emailEnabled]);

    useEffect(() => {
        setRootRole(initialRootRole);
--- a/frontend/src/component/common/HelpIcon/HelpIcon.tsx
+++ b/frontend/src/component/common/HelpIcon/HelpIcon.tsx
@ -1,24 +1,19 @@
-import { Tooltip } from '@mui/material';
+import { Tooltip, TooltipProps } from '@mui/material';
 import { Info } from '@mui/icons-material';
 import { useStyles } from 'component/common/HelpIcon/HelpIcon.styles';
 import React from 'react';

 interface IHelpIconProps {
    tooltip: string;
-    style?: React.CSSProperties;
+    placement?: TooltipProps['placement'];
 }

-export const HelpIcon = ({ tooltip, style }: IHelpIconProps) => {
+export const HelpIcon = ({ tooltip, placement }: IHelpIconProps) => {
    const { classes: styles } = useStyles();

    return (
-        <Tooltip title={tooltip} arrow>
-            <span
-                className={styles.container}
-                style={style}
-                tabIndex={0}
-                aria-label="Help"
-            >
+        <Tooltip title={tooltip} placement={placement} arrow>
+            <span className={styles.container} tabIndex={0} aria-label="Help">
                <Info className={styles.icon} />
            </span>
        </Tooltip>
--- a/frontend/src/component/common/Search/Search.tsx
+++ b/frontend/src/component/common/Search/Search.tsx
@ -1,4 +1,4 @@
-import { useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { IconButton, InputBase, Tooltip } from '@mui/material';
 import { Search as SearchIcon, Close } from '@mui/icons-material';
 import classnames from 'classnames';
@ -18,6 +18,7 @@ interface ISearchProps {
    disabled?: boolean;
    getSearchContext?: () => IGetSearchContextOutput;
    containerStyles?: React.CSSProperties;
+    debounceTime?: number;
 }

 export const Search = ({
@ -29,14 +30,14 @@ export const Search = ({
    disabled,
    getSearchContext,
    containerStyles,
+    debounceTime = 200,
 }: ISearchProps) => {
    const ref = useRef<HTMLInputElement>();
    const { classes: styles } = useStyles();
    const [showSuggestions, setShowSuggestions] = useState(false);

    const [value, setValue] = useState(initialValue);
-
-    const debouncedOnChange = useAsyncDebounce(onChange, 200);
+    const debouncedOnChange = useAsyncDebounce(onChange, debounceTime);

    const onSearchChange = (value: string) => {
        debouncedOnChange(value);
--- a/frontend/src/component/events/EventCard/EventCard.tsx
+++ b/frontend/src/component/events/EventCard/EventCard.tsx
@ -0,0 +1,130 @@
+import EventDiff from 'component/events/EventDiff/EventDiff';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+import { IEvent } from 'interfaces/event';
+import { useLocationSettings } from 'hooks/useLocationSettings';
+import { formatDateYMDHMS } from 'utils/formatDate';
+import { Link } from 'react-router-dom';
+import { styled } from '@mui/material';
+
+interface IEventCardProps {
+    entry: IEvent;
+}
+
+const StyledDefinitionTerm = styled('dt')(({ theme }) => ({
+    color: theme.palette.text.secondary,
+}));
+
+const StyledChangesTitle = styled('strong')(({ theme }) => ({
+    fontWeight: 'inherit',
+    color: theme.palette.text.secondary,
+}));
+
+const StyledContainerListItem = styled('li')(({ theme }) => ({
+    display: 'grid',
+    backgroundColor: theme.palette.neutral.light,
+    borderRadius: theme.shape.borderRadiusLarge,
+    padding: theme.spacing(0.5),
+    [theme.breakpoints.up('md')]: {
+        gridTemplateColumns: 'auto minmax(0, 1fr)',
+    },
+
+    '& dl': {
+        display: 'grid',
+        gridTemplateColumns: 'auto 1fr',
+        alignContent: 'start',
+        gap: theme.spacing(1),
+        padding: theme.spacing(2),
+        [theme.breakpoints.up('md')]: {
+            padding: theme.spacing(4),
+        },
+    },
+}));
+
+const StyledCodeSection = styled('div')(({ theme }) => ({
+    backgroundColor: 'white',
+    overflowX: 'auto',
+    padding: theme.spacing(2),
+    borderBottomLeftRadius: theme.shape.borderRadiusLarge,
+    borderBottomRightRadius: theme.shape.borderRadiusLarge,
+    [theme.breakpoints.up('md')]: {
+        padding: theme.spacing(4),
+        borderRadius: 0,
+        borderTopRightRadius: theme.shape.borderRadiusLarge,
+        borderBottomRightRadius: theme.shape.borderRadiusLarge,
+    },
+
+    '& code': {
+        wordWrap: 'break-word',
+        whiteSpace: 'pre-wrap',
+        fontFamily: 'monospace',
+        lineHeight: 1.5,
+        fontSize: theme.fontSizes.smallBody,
+    },
+}));
+
+const EventCard = ({ entry }: IEventCardProps) => {
+    const { locationSettings } = useLocationSettings();
+
+    const createdAtFormatted = formatDateYMDHMS(
+        entry.createdAt,
+        locationSettings.locale
+    );
+
+    return (
+        <StyledContainerListItem>
+            <dl>
+                <StyledDefinitionTerm>Event id:</StyledDefinitionTerm>
+                <dd>{entry.id}</dd>
+                <StyledDefinitionTerm>Changed at:</StyledDefinitionTerm>
+                <dd>{createdAtFormatted}</dd>
+                <StyledDefinitionTerm>Event:</StyledDefinitionTerm>
+                <dd>{entry.type}</dd>
+                <StyledDefinitionTerm>Changed by:</StyledDefinitionTerm>
+                <dd title={entry.createdBy}>{entry.createdBy}</dd>
+                <ConditionallyRender
+                    condition={Boolean(entry.project)}
+                    show={
+                        <>
+                            <StyledDefinitionTerm>
+                                Project:
+                            </StyledDefinitionTerm>
+                            <dd>
+                                <Link to={`/projects/${entry.project}`}>
+                                    {entry.project}
+                                </Link>
+                            </dd>
+                        </>
+                    }
+                />
+                <ConditionallyRender
+                    condition={Boolean(entry.featureName)}
+                    show={
+                        <>
+                            <StyledDefinitionTerm>
+                                Feature:
+                            </StyledDefinitionTerm>
+                            <dd>
+                                <Link
+                                    to={`/projects/${entry.project}/features/${entry.featureName}`}
+                                >
+                                    {entry.featureName}
+                                </Link>
+                            </dd>
+                        </>
+                    }
+                />
+            </dl>
+            <ConditionallyRender
+                condition={entry.data || entry.preData}
+                show={
+                    <StyledCodeSection>
+                        <StyledChangesTitle>Changes:</StyledChangesTitle>
+                        <EventDiff entry={entry} />
+                    </StyledCodeSection>
+                }
+            />
+        </StyledContainerListItem>
+    );
+};
+
+export default EventCard;
--- a/frontend/src/component/history/EventLog/EventCard/EventDiff/EventDiff.tsx
+++ b/frontend/src/component/history/EventLog/EventCard/EventDiff/EventDiff.tsx
@ -1,8 +1,9 @@
 import { diff } from 'deep-diff';
-import { useStyles } from './EventDiff.styles';
 import { IEvent } from 'interfaces/event';
+import { useTheme } from '@mui/system';
+import { CSSProperties } from 'react';

-const DIFF_PREFIXES = {
+const DIFF_PREFIXES: Record<string, string> = {
    A: ' ',
    E: ' ',
    D: '-',
@ -14,13 +15,13 @@ interface IEventDiffProps {
 }

 const EventDiff = ({ entry }: IEventDiffProps) => {
-    const { classes: styles } = useStyles();
+    const theme = useTheme();

-    const KLASSES = {
-        A: styles.blue, // array edited
-        E: styles.blue, // edited
-        D: styles.negative, // deleted
-        N: styles.positive, // added
+    const styles: Record<string, CSSProperties> = {
+        A: { color: theme.palette.code.edited }, // array edited
+        E: { color: theme.palette.code.edited }, // edited
+        D: { color: theme.palette.code.diffSub }, // deleted
+        N: { color: theme.palette.code.diffAdd }, // added
    };

    const diffs =
@ -32,18 +33,14 @@ const EventDiff = ({ entry }: IEventDiffProps) => {
        let change;
        if (diff.lhs !== undefined) {
            change = (
-                <div>
-                    <div className={KLASSES.D}>
-                        - {key}: {JSON.stringify(diff.lhs)}
-                    </div>
+                <div style={styles.D}>
+                    - {key}: {JSON.stringify(diff.lhs)}
                </div>
            );
        } else if (diff.rhs !== undefined) {
            change = (
-                <div>
-                    <div className={KLASSES.N}>
-                        + {key}: {JSON.stringify(diff.rhs)}
-                    </div>
+                <div style={styles.N}>
+                    + {key}: {JSON.stringify(diff.rhs)}
                </div>
            );
        }
@ -60,23 +57,19 @@ const EventDiff = ({ entry }: IEventDiffProps) => {
        } else if (diff.lhs !== undefined && diff.rhs !== undefined) {
            change = (
                <div>
-                    <div className={KLASSES.D}>
+                    <div style={styles.D}>
                        - {key}: {JSON.stringify(diff.lhs)}
                    </div>
-                    <div className={KLASSES.N}>
+                    <div style={styles.N}>
                        + {key}: {JSON.stringify(diff.rhs)}
                    </div>
                </div>
            );
        } else {
-            // @ts-expect-error
-            const spadenClass = KLASSES[diff.kind];
-            // @ts-expect-error
-            const prefix = DIFF_PREFIXES[diff.kind];
-
            change = (
-                <div className={spadenClass}>
-                    {prefix} {key}: {JSON.stringify(diff.rhs || diff.item)}
+                <div style={styles[diff.kind]}>
+                    {DIFF_PREFIXES[diff.kind]} {key}:{' '}
+                    {JSON.stringify(diff.rhs || diff.item)}
                </div>
            );
        }
@ -91,16 +84,15 @@ const EventDiff = ({ entry }: IEventDiffProps) => {
    } else {
        // Just show the data if there is no diff yet.
        const data = entry.data || entry.preData;
-        changes = (
-            <div className={entry.data ? KLASSES.N : KLASSES.D}>
+        changes = [
+            <div style={entry.data ? styles.N : styles.D}>
                {JSON.stringify(data, null, 2)}
-            </div>
-        );
+            </div>,
+        ];
    }

    return (
        <pre style={{ overflowX: 'auto', overflowY: 'hidden' }} tabIndex={0}>
-            {/* @ts-expect-error */}
            <code>{changes.length === 0 ? '(no changes)' : changes}</code>
        </pre>
    );
--- a/frontend/src/component/history/EventLog/EventJson/EventJson.tsx
+++ b/frontend/src/component/history/EventLog/EventJson/EventJson.tsx
@ -1,14 +1,25 @@
-import PropTypes from 'prop-types';
-import { useStyles } from './EventJson.styles';
 import { IEvent } from 'interfaces/event';
+import { styled } from '@mui/material';

 interface IEventJsonProps {
    entry: IEvent;
 }

-const EventJson = ({ entry }: IEventJsonProps) => {
-    const { classes: styles } = useStyles();
+export const StyledJsonListItem = styled('li')(({ theme }) => ({
+    padding: theme.spacing(4),
+    backgroundColor: theme.palette.neutral.light,
+    borderRadius: theme.shape.borderRadiusLarge,
+    fontSize: theme.fontSizes.smallBody,

+    '& code': {
+        wordWrap: 'break-word',
+        whiteSpace: 'pre',
+        fontFamily: 'monospace',
+        lineHeight: '100%',
+    },
+}));
+
+const EventJson = ({ entry }: IEventJsonProps) => {
    const localEventData = JSON.parse(JSON.stringify(entry));
    delete localEventData.description;
    delete localEventData.name;
@ -17,16 +28,12 @@ const EventJson = ({ entry }: IEventJsonProps) => {
    const prettyPrinted = JSON.stringify(localEventData, null, 2);

    return (
-        <li className={styles.historyItem}>
+        <StyledJsonListItem>
            <div>
                <code>{prettyPrinted}</code>
            </div>
-        </li>
+        </StyledJsonListItem>
    );
 };

-EventJson.propTypes = {
-    entry: PropTypes.object,
-};
-
 export default EventJson;
--- a/frontend/src/component/events/EventLog/EventLog.tsx
+++ b/frontend/src/component/events/EventLog/EventLog.tsx
@ -0,0 +1,108 @@
+import { Switch, FormControlLabel, useMediaQuery, Box } from '@mui/material';
+import EventJson from 'component/events/EventJson/EventJson';
+import { PageContent } from 'component/common/PageContent/PageContent';
+import { PageHeader } from 'component/common/PageHeader/PageHeader';
+import EventCard from 'component/events/EventCard/EventCard';
+import { useEventSettings } from 'hooks/useEventSettings';
+import React, { useState, useEffect } from 'react';
+import { Search } from 'component/common/Search/Search';
+import theme from 'themes/theme';
+import { useEventSearch } from 'hooks/api/getters/useEventSearch/useEventSearch';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+import { useOnVisible } from 'hooks/useOnVisible';
+import { IEvent } from 'interfaces/event';
+import { styled } from '@mui/system';
+
+interface IEventLogProps {
+    title: string;
+    project?: string;
+    feature?: string;
+    displayInline?: boolean;
+}
+
+const StyledEventsList = styled('ul')(({ theme }) => ({
+    listStyleType: 'none',
+    margin: 0,
+    padding: 0,
+    display: 'grid',
+    gap: theme.spacing(2),
+}));
+
+export const EventLog = ({
+    title,
+    project,
+    feature,
+    displayInline,
+}: IEventLogProps) => {
+    const [query, setQuery] = useState('');
+    const { events, fetchNextPage } = useEventSearch(project, feature, query);
+    const fetchNextPageRef = useOnVisible<HTMLDivElement>(fetchNextPage);
+    const { eventSettings, setEventSettings } = useEventSettings();
+    const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
+
+    // Cache the previous search results so that we can show those while
+    // fetching new results for a new search query in the background.
+    const [cache, setCache] = useState<IEvent[]>();
+    useEffect(() => events && setCache(events), [events]);
+
+    const onShowData = () => {
+        setEventSettings(prev => ({ showData: !prev.showData }));
+    };
+
+    const searchInputField = <Search onChange={setQuery} debounceTime={500} />;
+
+    const showDataSwitch = (
+        <FormControlLabel
+            label="Full events"
+            control={
+                <Switch
+                    checked={eventSettings.showData}
+                    onChange={onShowData}
+                    color="primary"
+                />
+            }
+        />
+    );
+
+    return (
+        <PageContent
+            disablePadding={displayInline}
+            disableBorder={displayInline}
+            header={
+                <PageHeader
+                    title={title}
+                    actions={
+                        <>
+                            {showDataSwitch}
+                            {!isSmallScreen && searchInputField}
+                        </>
+                    }
+                >
+                    {isSmallScreen && searchInputField}
+                </PageHeader>
+            }
+        >
+            {displayInline && <Box sx={{ mt: 4 }} />}
+            <ConditionallyRender
+                condition={Boolean(cache && cache.length === 0)}
+                show={() => <p>No events found.</p>}
+            />
+            <ConditionallyRender
+                condition={Boolean(cache && cache.length > 0)}
+                show={() => (
+                    <StyledEventsList>
+                        {cache?.map(entry => (
+                            <ConditionallyRender
+                                key={entry.id}
+                                condition={eventSettings.showData}
+                                show={() => <EventJson entry={entry} />}
+                                elseShow={() => <EventCard entry={entry} />}
+                            />
+                        ))}
+                    </StyledEventsList>
+                )}
+            />
+            <div ref={fetchNextPageRef} />
+        </PageContent>
+    );
+};
--- a/frontend/src/component/history/EventHistoryPage/EventHistoryPage.tsx
+++ b/frontend/src/component/history/EventHistoryPage/EventHistoryPage.tsx
@ -2,16 +2,16 @@ import React, { useContext } from 'react';
 import { ADMIN } from 'component/providers/AccessProvider/permissions';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import AccessContext from 'contexts/AccessContext';
-import { EventHistory } from '../EventHistory/EventHistory';
 import { AdminAlert } from 'component/common/AdminAlert/AdminAlert';
+import { EventLog } from 'component/events/EventLog/EventLog';

-export const EventHistoryPage = () => {
+export const EventPage = () => {
    const { hasAccess } = useContext(AccessContext);

    return (
        <ConditionallyRender
            condition={hasAccess(ADMIN)}
-            show={<EventHistory />}
+            show={() => <EventLog title="Event log" />}
            elseShow={<AdminAlert />}
        />
    );
--- a/frontend/src/component/feature/FeatureView/FeatureLog/FeatureLog.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureLog/FeatureLog.tsx
@ -1,7 +1,7 @@
 import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
 import { useStyles } from './FeatureLog.styles';
-import { FeatureEventHistory } from 'component/history/FeatureEventHistory/FeatureEventHistory';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
+import { EventLog } from 'component/events/EventLog/EventLog';

 const FeatureLog = () => {
    const projectId = useRequiredPathParam('projectId');
@ -15,7 +15,12 @@ const FeatureLog = () => {

    return (
        <div className={styles.container}>
-            <FeatureEventHistory featureId={feature.name} />
+            <EventLog
+                title="Event log"
+                project={projectId}
+                feature={featureId}
+                displayInline
+            />
        </div>
    );
 };
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitches.styles.ts
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitches.styles.ts
@ -1,27 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()(theme => ({
-    container: {
-        borderRadius: theme.shape.borderRadiusLarge,
-        backgroundColor: '#fff',
-        display: 'flex',
-        flexDirection: 'column',
-        padding: '1.5rem',
-        maxWidth: '350px',
-        minWidth: '350px',
-        marginRight: '1rem',
-        marginTop: '1rem',
-        [theme.breakpoints.down(1000)]: {
-            marginBottom: '1rem',
-            width: '100%',
-            maxWidth: 'none',
-            minWidth: 'auto',
-        },
-    },
-    header: {
-        fontSize: theme.fontSizes.bodySize,
-        fontWeight: 'normal',
-        margin: 0,
-        marginBottom: '0.5rem',
-    },
-}));
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitches.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitches.tsx
@ -1,14 +1,47 @@
-import { Tooltip } from '@mui/material';
 import { useState } from 'react';
 import useFeatureApi from 'hooks/api/actions/useFeatureApi/useFeatureApi';
 import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
 import EnvironmentStrategyDialog from 'component/common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog';
 import FeatureOverviewEnvSwitch from './FeatureOverviewEnvSwitch/FeatureOverviewEnvSwitch';
-import { useStyles } from './FeatureOverviewEnvSwitches.styles';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
+import { HelpIcon } from 'component/common/HelpIcon/HelpIcon';
+import { styled } from '@mui/material';
+
+const StyledContainer = styled('div')(({ theme }) => ({
+    borderRadius: theme.shape.borderRadiusLarge,
+    backgroundColor: '#fff',
+    display: 'flex',
+    flexDirection: 'column',
+    padding: '1.5rem',
+    maxWidth: '350px',
+    minWidth: '350px',
+    marginRight: '1rem',
+    marginTop: '1rem',
+    [theme.breakpoints.down(1000)]: {
+        marginBottom: '1rem',
+        width: '100%',
+        maxWidth: 'none',
+        minWidth: 'auto',
+    },
+}));
+
+const StyledHeader = styled('h3')(({ theme }) => ({
+    display: 'flex',
+    gap: theme.spacing(1),
+    alignItems: 'center',
+    fontSize: theme.fontSizes.bodySize,
+    fontWeight: 'normal',
+    margin: 0,
+    marginBottom: '0.5rem',
+
+    // Make the help icon align with the text.
+    '& > :last-child': {
+        position: 'relative',
+        top: 1,
+    },
+}));

 const FeatureOverviewEnvSwitches = () => {
-    const { classes: styles } = useStyles();
    const projectId = useRequiredPathParam('projectId');
    const featureId = useRequiredPathParam('featureId');
    const { feature } = useFeature(projectId, featureId);
@ -37,15 +70,14 @@ const FeatureOverviewEnvSwitches = () => {
    };

    return (
-        <div className={styles.container}>
-            <Tooltip
-                arrow
-                title="Environments can be switched off for a single toggle. Resulting in all calls towards the toggle to return false."
-            >
-                <h3 className={styles.header} data-loading>
-                    Feature toggle status
-                </h3>
-            </Tooltip>
+        <StyledContainer>
+            <StyledHeader data-loading>
+                Feature toggle status
+                <HelpIcon
+                    tooltip="When a feature is switched off in an environment, it will always return false. When switched on, it will return true or false depending on its strategies."
+                    placement="top"
+                />
+            </StyledHeader>
            {renderEnvironmentSwitches()}
            <EnvironmentStrategyDialog
                open={showInfoBox}
@ -54,7 +86,7 @@ const FeatureOverviewEnvSwitches = () => {
                featureId={featureId}
                environmentName={environmentName}
            />
-        </div>
+        </StyledContainer>
    );
 };

--- a/frontend/src/component/history/EventHistory/EventHistory.tsx
+++ b/frontend/src/component/history/EventHistory/EventHistory.tsx
@ -1,12 +0,0 @@
-import EventLog from '../EventLog';
-import { useEvents } from 'hooks/api/getters/useEvents/useEvents';
-
-export const EventHistory = () => {
-    const { events } = useEvents();
-
-    if (events.length < 0) {
-        return null;
-    }
-
-    return <EventLog events={events} title="Event log" />;
-};
--- a/frontend/src/component/history/EventLog/EventCard/EventCard.styles.ts
+++ b/frontend/src/component/history/EventLog/EventCard/EventCard.styles.ts
@ -1,7 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()({
-    eventLogHeader: {
-        minWidth: '110px',
-    },
-});
--- a/frontend/src/component/history/EventLog/EventCard/EventCard.tsx
+++ b/frontend/src/component/history/EventLog/EventCard/EventCard.tsx
@ -1,57 +0,0 @@
-import EventDiff from 'component/history/EventLog/EventCard/EventDiff/EventDiff';
-import { useStyles } from './EventCard.styles';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { IEvent } from 'interfaces/event';
-
-interface IEventCardProps {
-    entry: IEvent;
-    timeFormatted: string;
-}
-
-const EventCard = ({ entry, timeFormatted }: IEventCardProps) => {
-    const { classes: styles } = useStyles();
-
-    return (
-        <div>
-            <dl>
-                <dt className={styles.eventLogHeader}>Event id: </dt>
-                <dd>{entry.id}</dd>
-                <dt className={styles.eventLogHeader}>Changed at:</dt>
-                <dd>{timeFormatted}</dd>
-                <dt className={styles.eventLogHeader}>Event: </dt>
-                <dd>{entry.type}</dd>
-                <dt className={styles.eventLogHeader}>Changed by: </dt>
-                <dd title={entry.createdBy}>{entry.createdBy}</dd>
-                <ConditionallyRender
-                    condition={Boolean(entry.project)}
-                    show={
-                        <>
-                            <dt className={styles.eventLogHeader}>Project: </dt>
-                            <dd>{entry.project}</dd>
-                        </>
-                    }
-                />
-                <ConditionallyRender
-                    condition={Boolean(entry.featureName)}
-                    show={
-                        <>
-                            <dt className={styles.eventLogHeader}>Feature: </dt>
-                            <dd>{entry.featureName}</dd>
-                        </>
-                    }
-                />
-            </dl>
-            <ConditionallyRender
-                condition={entry.data || entry.preData}
-                show={
-                    <>
-                        <strong>Change</strong>
-                        <EventDiff entry={entry} />
-                    </>
-                }
-            />
-        </div>
-    );
-};
-
-export default EventCard;
--- a/frontend/src/component/history/EventLog/EventCard/EventDiff/EventDiff.styles.ts
+++ b/frontend/src/component/history/EventLog/EventCard/EventDiff/EventDiff.styles.ts
@ -1,13 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()(theme => ({
-    blue: {
-        color: theme.palette.code.edited,
-    },
-    negative: {
-        color: theme.palette.code.diffSub,
-    },
-    positive: {
-        color: theme.palette.code.diffAdd,
-    },
-}));
--- a/frontend/src/component/history/EventLog/EventJson/EventJson.styles.ts
+++ b/frontend/src/component/history/EventLog/EventJson/EventJson.styles.ts
@ -1,10 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()(theme => ({
-    historyItem: {
-        padding: '5px',
-        '&:nth-of-type(odd)': {
-            backgroundColor: theme.palette.code.background,
-        },
-    },
-}));
--- a/frontend/src/component/history/EventLog/EventLog.styles.ts
+++ b/frontend/src/component/history/EventLog/EventLog.styles.ts
@ -1,40 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()(theme => ({
-    eventEntry: {
-        border: `1px solid ${theme.palette.neutral.light}`,
-        padding: '1rem',
-        margin: '1rem 0',
-        borderRadius: theme.shape.borderRadius,
-    },
-    history: {
-        '& code': {
-            wordWrap: 'break-word',
-            whiteSpace: 'pre',
-            fontFamily: 'monospace',
-            lineHeight: '100%',
-            color: theme.palette.code.main,
-        },
-        '& code > .diff-N': {
-            color: theme.palette.code.diffAdd,
-        },
-        '& code > .diff-D': {
-            color: theme.palette.code.diffSub,
-        },
-        '& code > .diff-A, .diff-E': {
-            color: theme.palette.code.diffNeutral,
-        },
-        '& dl': {
-            padding: '0',
-        },
-        '& dt': {
-            float: 'left',
-            clear: 'left',
-            fontWeight: 'bold',
-        },
-        '& dd': {
-            margin: '0 0 0 83px',
-            padding: '0 0 0.5em 0',
-        },
-    },
-}));
--- a/frontend/src/component/history/EventLog/EventLog.tsx
+++ b/frontend/src/component/history/EventLog/EventLog.tsx
@ -1,90 +0,0 @@
-import { List, Switch, FormControlLabel } from '@mui/material';
-import EventJson from 'component/history/EventLog/EventJson/EventJson';
-import { PageContent } from 'component/common/PageContent/PageContent';
-import { PageHeader } from 'component/common/PageHeader/PageHeader';
-import EventCard from 'component/history/EventLog/EventCard/EventCard';
-import { useStyles } from './EventLog.styles';
-import { formatDateYMDHMS } from 'utils/formatDate';
-import { IEventSettings } from 'hooks/useEventSettings';
-import { IEvent } from 'interfaces/event';
-import React from 'react';
-import { ILocationSettings } from 'hooks/useLocationSettings';
-
-interface IEventLogProps {
-    title: string;
-    events: IEvent[];
-    eventSettings: IEventSettings;
-    setEventSettings: React.Dispatch<React.SetStateAction<IEventSettings>>;
-    locationSettings: ILocationSettings;
-    displayInline?: boolean;
-}
-
-const EventLog = ({
-    title,
-    events,
-    eventSettings,
-    setEventSettings,
-    locationSettings,
-    displayInline,
-}: IEventLogProps) => {
-    const { classes: styles } = useStyles();
-    const toggleShowDiff = () => {
-        setEventSettings({ showData: !eventSettings.showData });
-    };
-    const formatFulldateTime = (v: string) => {
-        return formatDateYMDHMS(v, locationSettings.locale);
-    };
-
-    if (!events || events.length < 0) {
-        return null;
-    }
-
-    let entries;
-
-    const renderListItemCards = (entry: IEvent) => (
-        <li key={entry.id} className={styles.eventEntry}>
-            <EventCard
-                entry={entry}
-                timeFormatted={formatFulldateTime(entry.createdAt)}
-            />
-        </li>
-    );
-
-    if (eventSettings.showData) {
-        entries = events.map(entry => (
-            <EventJson key={`log${entry.id}`} entry={entry} />
-        ));
-    } else {
-        entries = events.map(renderListItemCards);
-    }
-
-    return (
-        <PageContent
-            disablePadding={displayInline}
-            disableBorder={displayInline}
-            header={
-                <PageHeader
-                    title={title}
-                    actions={
-                        <FormControlLabel
-                            control={
-                                <Switch
-                                    checked={eventSettings.showData}
-                                    onChange={toggleShowDiff}
-                                    color="primary"
-                                />
-                            }
-                            label="Full events"
-                        />
-                    }
-                />
-            }
-        >
-            <div className={styles.history}>
-                <List>{entries}</List>
-            </div>
-        </PageContent>
-    );
-};
-
-export default EventLog;
--- a/frontend/src/component/history/EventLog/index.tsx
+++ b/frontend/src/component/history/EventLog/index.tsx
@ -1,28 +0,0 @@
-import EventLog from 'component/history/EventLog/EventLog';
-import { useEventSettings } from 'hooks/useEventSettings';
-import { useLocationSettings } from 'hooks/useLocationSettings';
-import { IEvent } from 'interfaces/event';
-
-interface IEventLogContainerProps {
-    title: string;
-    events: IEvent[];
-    displayInline?: boolean;
-}
-
-const EventLogContainer = (props: IEventLogContainerProps) => {
-    const { locationSettings } = useLocationSettings();
-    const { eventSettings, setEventSettings } = useEventSettings();
-
-    return (
-        <EventLog
-            title={props.title}
-            events={props.events}
-            eventSettings={eventSettings}
-            setEventSettings={setEventSettings}
-            locationSettings={locationSettings}
-            displayInline={props.displayInline}
-        />
-    );
-};
-
-export default EventLogContainer;
--- a/frontend/src/component/history/FeatureEventHistory/FeatureEventHistory.tsx
+++ b/frontend/src/component/history/FeatureEventHistory/FeatureEventHistory.tsx
@ -1,18 +0,0 @@
-import EventLog from '../EventLog';
-import { useFeatureEvents } from 'hooks/api/getters/useFeatureEvents/useFeatureEvents';
-
-interface IFeatureEventHistoryProps {
-    featureId: string;
-}
-
-export const FeatureEventHistory = ({
-    featureId,
-}: IFeatureEventHistoryProps) => {
-    const { events } = useFeatureEvents(featureId);
-
-    if (events.length === 0) {
-        return null;
-    }
-
-    return <EventLog events={events} title="Event log" displayInline />;
-};
--- a/frontend/src/component/history/FeatureEventHistoryPage/FeatureEventHistoryPage.tsx
+++ b/frontend/src/component/history/FeatureEventHistoryPage/FeatureEventHistoryPage.tsx
@ -1,9 +0,0 @@
-import React from 'react';
-import { FeatureEventHistory } from 'component/history/FeatureEventHistory/FeatureEventHistory';
-import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
-
-export const FeatureEventHistoryPage = () => {
-    const toggleName = useRequiredPathParam('toggleName');
-
-    return <FeatureEventHistory featureId={toggleName} />;
-};
--- a/frontend/src/component/menu/tests/snapshots/routes.test.tsx.snap
+++ b/frontend/src/component/menu/tests/snapshots/routes.test.tsx.snap
@ -319,14 +319,6 @@ exports[`returns all baseRoutes 1`] = `
    "title": "Segments",
    "type": "protected",
  },
-  {
-    "component": [Function],
-    "menu": {},
-    "parent": "/history",
-    "path": "/history/:toggleName",
-    "title": ":toggleName",
-    "type": "protected",
-  },
  {
    "component": [Function],
    "menu": {
--- a/frontend/src/component/menu/routes.ts
+++ b/frontend/src/component/menu/routes.ts
@ -39,8 +39,7 @@ import RedirectFeatureView from 'component/feature/RedirectFeatureView/RedirectF
 import { CreateAddon } from 'component/addons/CreateAddon/CreateAddon';
 import { EditAddon } from 'component/addons/EditAddon/EditAddon';
 import { CopyFeatureToggle } from 'component/feature/CopyFeature/CopyFeature';
-import { EventHistoryPage } from 'component/history/EventHistoryPage/EventHistoryPage';
-import { FeatureEventHistoryPage } from 'component/history/FeatureEventHistoryPage/FeatureEventHistoryPage';
+import { EventPage } from 'component/events/EventPage/EventPage';
 import { CreateStrategy } from 'component/strategies/CreateStrategy/CreateStrategy';
 import { EditStrategy } from 'component/strategies/EditStrategy/EditStrategy';
 import { SplashPage } from 'component/splash/SplashPage/SplashPage';
@ -363,18 +362,10 @@ export const routes: IRoute[] = [
    },

    // History
-    {
-        path: '/history/:toggleName',
-        title: ':toggleName',
-        parent: '/history',
-        component: FeatureEventHistoryPage,
-        type: 'protected',
-        menu: {},
-    },
    {
        path: '/history',
        title: 'Event log',
-        component: EventHistoryPage,
+        component: EventPage,
        type: 'protected',
        menu: { adminSettings: true },
    },
--- a/frontend/src/component/playground/Playground/Playground.tsx
+++ b/frontend/src/component/playground/Playground/Playground.tsx
@ -8,7 +8,7 @@ import { formatUnknownError } from 'utils/formatUnknownError';
 import { PlaygroundResultsTable } from './PlaygroundResultsTable/PlaygroundResultsTable';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { usePlaygroundApi } from 'hooks/api/actions/usePlayground/usePlayground';
-import { PlaygroundResponseSchema } from 'hooks/api/actions/usePlayground/playground.model';
+import { PlaygroundResponseSchema } from 'component/playground/Playground/interfaces/playground.model';
 import { useEnvironments } from 'hooks/api/getters/useEnvironments/useEnvironments';
 import { PlaygroundForm } from './PlaygroundForm/PlaygroundForm';
 import {
--- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/ContextBanner/ContextBanner.tsx
+++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/ContextBanner/ContextBanner.tsx
@ -1,6 +1,6 @@
 import { colors } from 'themes/colors';
 import { Alert, styled } from '@mui/material';
-import { SdkContextSchema } from 'hooks/api/actions/usePlayground/playground.model';
+import { SdkContextSchema } from 'component/playground/Playground/interfaces/playground.model';

 interface IContextBannerProps {
    environment: string;
--- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/FeatureDetails.tsx
+++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/FeatureDetails.tsx
@ -1,13 +1,13 @@
 import {
    PlaygroundFeatureSchema,
    PlaygroundRequestSchema,
-} from '../../../../../../hooks/api/actions/usePlayground/playground.model';
+} from 'component/playground/Playground/interfaces/playground.model';
 import { Alert, IconButton, Typography, useTheme } from '@mui/material';
 import { PlaygroundResultChip } from '../../PlaygroundResultChip/PlaygroundResultChip';
 import { useStyles } from './FeatureDetails.styles';
 import { CloseOutlined } from '@mui/icons-material';
 import React from 'react';
-import { ConditionallyRender } from '../../../../../common/ConditionallyRender/ConditionallyRender';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import {
    checkForEmptyValues,
    hasCustomStrategies,
@ -31,13 +31,17 @@ export const FeatureDetails = ({
        ? `This feature toggle is True in ${input?.environment} because `
        : `This feature toggle is False in ${input?.environment} because `;

-    const reason = feature.isEnabled
-        ? 'at least one strategy is True'
-        : !feature.isEnabledInCurrentEnvironment
-        ? 'the environment is disabled'
-        : hasOnlyCustomStrategies(feature)
-        ? 'no strategies could be fully evaluated'
-        : 'all strategies are either False or could not be fully evaluated';
+    const reason = (() => {
+        if (feature.isEnabled) return 'at least one strategy is True';
+
+        if (!feature.isEnabledInCurrentEnvironment)
+            return 'the environment is disabled';
+
+        if (hasOnlyCustomStrategies(feature))
+            return 'no strategies could be fully evaluated';
+
+        return 'all strategies are either False or could not be fully evaluated';
+    })();

    const color = feature.isEnabled
        ? theme.palette.success.main
@ -48,7 +52,7 @@ export const FeatureDetails = ({
        : undefined;

    const customStrategiesTxt = hasCustomStrategies(feature)
-        ? `You have custom strategies. Custom strategies can't be evaluated and they will be set as Unevaluated`
+        ? `This feature uses custom strategies. Custom strategies can't be evaluated, so they will be marked as Unevaluated`
        : undefined;

    const onCloseClick =
--- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/helpers.ts
+++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/helpers.ts
@ -1,4 +1,4 @@
-import { PlaygroundFeatureSchema } from '../../../../../../hooks/api/actions/usePlayground/playground.model';
+import { PlaygroundFeatureSchema } from 'component/playground/Playground/interfaces/playground.model';

 export const DEFAULT_STRATEGIES = [
    'default',
--- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx
+++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx
@ -1,7 +1,7 @@
 import {
    PlaygroundFeatureSchema,
    PlaygroundRequestSchema,
-} from 'hooks/api/actions/usePlayground/playground.model';
+} from 'component/playground/Playground/interfaces/playground.model';
 import { IconButton, Popover, styled } from '@mui/material';
 import { InfoOutlined } from '@mui/icons-material';
 import React, { useRef, useState } from 'react';
--- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/PlaygroundResultFeatureStrategyList.tsx
+++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/PlaygroundResultFeatureStrategyList.tsx
@ -3,7 +3,7 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit
 import {
    PlaygroundFeatureSchema,
    PlaygroundRequestSchema,
-} from 'hooks/api/actions/usePlayground/playground.model';
+} from 'component/playground/Playground/interfaces/playground.model';
 import { Alert } from '@mui/material';

 interface PlaygroundResultFeatureStrategyListProps {
--- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/FeatureStrategyItem.tsx
+++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/FeatureStrategyItem.tsx
@ -3,7 +3,7 @@ import { PlaygroundResultChip } from '../../../../PlaygroundResultChip/Playgroun
 import {
    PlaygroundStrategySchema,
    PlaygroundRequestSchema,
-} from 'hooks/api/actions/usePlayground/playground.model';
+} from 'component/playground/Playground/interfaces/playground.model';
 import { StrategyExecution } from './StrategyExecution/StrategyExecution';
 import { useStyles } from './FeatureStrategyItem.styles';
 import { StrategyItemContainer } from 'component/common/StrategyItemContainer/StrategyItemContainer';
--- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordion.styles.ts
+++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordion.styles.ts
@ -17,7 +17,7 @@ export const useStyles = makeStyles()(theme => ({
        fill: '#fff',
    },
    accordion: {
-        border: `1px solid ${theme.palette.grey[400]}`,
+        border: `1px solid ${theme.palette.dividerAlternative}`,
        borderRadius: theme.spacing(1),
        backgroundColor: '#fff',
        boxShadow: 'none',
--- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx
+++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx
@ -18,7 +18,7 @@ import { useStyles } from './ConstraintAccordion.styles';
 import {
    PlaygroundConstraintSchema,
    PlaygroundRequestSchema,
-} from 'hooks/api/actions/usePlayground/playground.model';
+} from 'component/playground/Playground/interfaces/playground.model';
 import { ConstraintAccordionViewBody } from 'component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewBody/ConstraintAccordionViewBody';

 interface IConstraintAccordionViewProps {
--- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx
+++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx
@ -4,7 +4,7 @@ import { useStyles } from 'component/common/ConstraintAccordion/ConstraintAccord
 import {
    PlaygroundConstraintSchema,
    PlaygroundRequestSchema,
-} from 'hooks/api/actions/usePlayground/playground.model';
+} from 'component/playground/Playground/interfaces/playground.model';

 interface PlaygroundConstraintAccordionViewHeaderProps {
    constraint: PlaygroundConstraintSchema;
--- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/ConstraintAccordionViewHeaderInfo.tsx
+++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/ConstraintAccordionViewHeaderInfo.tsx
@ -8,7 +8,7 @@ import { CancelOutlined } from '@mui/icons-material';
 import {
    PlaygroundConstraintSchema,
    PlaygroundRequestSchema,
-} from 'hooks/api/actions/usePlayground/playground.model';
+} from 'component/playground/Playground/interfaces/playground.model';
 import { ConstraintViewHeaderOperator } from 'component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintViewHeaderOperator/ConstraintViewHeaderOperator';

 const StyledHeaderText = styled('span')(({ theme }) => ({
--- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/PlaygroundMultipleValues/PLaygroundMultipleValues.tsx
+++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/PlaygroundMultipleValues/PLaygroundMultipleValues.tsx
@ -3,7 +3,7 @@ import { styled, Typography } from '@mui/material';
 import React, { useEffect, useMemo, useState } from 'react';
 import classnames from 'classnames';
 import { useStyles } from '../../../ConstraintAccordion.styles';
-import { PlaygroundConstraintSchema } from 'hooks/api/actions/usePlayground/playground.model';
+import { PlaygroundConstraintSchema } from 'component/playground/Playground/interfaces/playground.model';

 const StyledValuesSpan = styled('span')(({ theme }) => ({
    display: '-webkit-box',
--- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/PlaygroundSingleValue/PlaygroundSingleValue.tsx
+++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/PlaygroundSingleValue/PlaygroundSingleValue.tsx
@ -3,7 +3,7 @@ import { Chip, styled, Typography } from '@mui/material';
 import { formatConstraintValue } from 'utils/formatConstraintValue';
 import { useStyles } from '../../../ConstraintAccordion.styles';
 import { useLocationSettings } from 'hooks/useLocationSettings';
-import { PlaygroundConstraintSchema } from 'hooks/api/actions/usePlayground/playground.model';
+import { PlaygroundConstraintSchema } from 'component/playground/Playground/interfaces/playground.model';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';

 const StyledSingleValueChip = styled(Chip)(({ theme }) => ({
--- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintExecution.tsx
+++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintExecution.tsx
@ -2,7 +2,7 @@ import { Fragment, VFC } from 'react';
 import {
    PlaygroundConstraintSchema,
    PlaygroundRequestSchema,
-} from 'hooks/api/actions/usePlayground/playground.model';
+} from 'component/playground/Playground/interfaces/playground.model';
 import { objectId } from 'utils/objectId';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { StrategySeparator } from 'component/common/StrategySeparator/StrategySeparator';
--- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/CustomStrategyParams/CustomStrategyParams.tsx
+++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/CustomStrategyParams/CustomStrategyParams.tsx
@ -9,7 +9,7 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit
 import { StrategySeparator } from 'component/common/StrategySeparator/StrategySeparator';
 import { Chip } from '@mui/material';
 import PercentageCircle from 'component/common/PercentageCircle/PercentageCircle';
-import { PlaygroundConstraintSchema } from 'hooks/api/actions/usePlayground/playground.model';
+import { PlaygroundConstraintSchema } from 'component/playground/Playground/interfaces/playground.model';
 import { useStrategies } from 'hooks/api/getters/useStrategies/useStrategies';

 interface ICustomStrategyProps {
--- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/PlaygroundParameterItem/PlaygroundParameterItem.tsx
+++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/PlaygroundParameterItem/PlaygroundParameterItem.tsx
@ -32,7 +32,7 @@ export const PlaygroundParameterItem = ({
            )}
        >
            <Typography variant="subtitle1" color={theme.palette[color].main}>
-                {input}
+                {`${input}`}
            </Typography>
            <div className={styles.column}>
                <ConditionallyRender
--- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/SegmentExecution/SegmentExecution.tsx
+++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/SegmentExecution/SegmentExecution.tsx
@ -2,7 +2,7 @@ import { VFC } from 'react';
 import {
    PlaygroundSegmentSchema,
    PlaygroundRequestSchema,
-} from 'hooks/api/actions/usePlayground/playground.model';
+} from 'component/playground/Playground/interfaces/playground.model';
 import { ConstraintExecution } from '../ConstraintExecution/ConstraintExecution';
 import { CancelOutlined, DonutLarge } from '@mui/icons-material';
 import { Link } from 'react-router-dom';
--- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecution.tsx
+++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecution.tsx
@ -6,7 +6,7 @@ import { useStyles } from './StrategyExecution.styles';
 import {
    PlaygroundRequestSchema,
    PlaygroundStrategySchema,
-} from 'hooks/api/actions/usePlayground/playground.model';
+} from 'component/playground/Playground/interfaces/playground.model';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { ConstraintExecution } from './ConstraintExecution/ConstraintExecution';
 import { SegmentExecution } from './SegmentExecution/SegmentExecution';
--- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecutionParameters/StrategyExecutionParameters.tsx
+++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecutionParameters/StrategyExecutionParameters.tsx
@ -10,7 +10,7 @@ import { useStyles } from '../StrategyExecution.styles';
 import {
    PlaygroundConstraintSchema,
    PlaygroundRequestSchema,
-} from 'hooks/api/actions/usePlayground/playground.model';
+} from 'component/playground/Playground/interfaces/playground.model';
 import { getMappedParam } from '../helpers';

 export interface PlaygroundResultStrategyExecutionParametersProps {
@ -88,18 +88,8 @@ export const PlaygroundResultStrategyExecutionParameters = ({
                            key={key}
                            value={hosts}
                            text={'host'}
-                            input={
-                                Boolean(input?.context?.[getMappedParam(key)])
-                                    ? input?.context?.[getMappedParam(key)]
-                                    : 'no value'
-                            }
-                            showReason={
-                                Boolean(input?.context?.[getMappedParam(key)])
-                                    ? !hosts.includes(
-                                          input?.context?.[getMappedParam(key)]
-                                      )
-                                    : undefined
-                            }
+                            input={'no value'}
+                            showReason={undefined}
                        />
                    );
                case 'IPs':
--- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/helpers.ts
+++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/helpers.ts
@ -4,7 +4,6 @@ export const getMappedParam = (key: string) => {
            return 'userId';
        case 'IPS':
            return 'remoteAddress';
-        case 'HOSTNAMES':
        default:
            return key;
    }
--- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/playgroundResultStrategyLists.tsx
+++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/playgroundResultStrategyLists.tsx
@ -4,7 +4,7 @@ import {
    PlaygroundFeatureSchema,
    PlaygroundStrategySchema,
    PlaygroundRequestSchema,
-} from 'hooks/api/actions/usePlayground/playground.model';
+} from 'component/playground/Playground/interfaces/playground.model';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { FeatureStrategyItem } from './StrategyItem/FeatureStrategyItem';
 import { StrategySeparator } from 'component/common/StrategySeparator/StrategySeparator';
--- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureStatusCell/FeatureStatusCell.tsx
+++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureStatusCell/FeatureStatusCell.tsx
@ -1,9 +1,10 @@
 import React from 'react';
 import { Box, styled } from '@mui/material';
 import { PlaygroundResultChip } from '../PlaygroundResultChip/PlaygroundResultChip';
+import { PlaygroundFeatureSchema } from '../../interfaces/playground.model';

 interface IFeatureStatusCellProps {
-    enabled: boolean;
+    feature: PlaygroundFeatureSchema;
 }

 const StyledCellBox = styled(Box)(({ theme }) => ({
@ -16,13 +17,25 @@ const StyledChipWrapper = styled(Box)(() => ({
    marginRight: 'auto',
 }));

-export const FeatureStatusCell = ({ enabled }: IFeatureStatusCellProps) => {
+export const FeatureStatusCell = ({ feature }: IFeatureStatusCellProps) => {
+    const enabled = feature.isEnabled
+        ? true
+        : feature.strategies.result === false
+        ? false
+        : 'unknown';
+    const label = feature.isEnabled
+        ? 'True'
+        : feature.strategies.result === false
+        ? 'False'
+        : 'Unknown';
    return (
        <StyledCellBox>
            <StyledChipWrapper data-loading>
                <PlaygroundResultChip
                    enabled={enabled}
-                    label={enabled ? 'True' : 'False'}
+                    label={label}
+                    showIcon={enabled !== 'unknown'}
+                    size={'medium'}
                />
            </StyledChipWrapper>
        </StyledCellBox>
--- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultsTable.tsx
+++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultsTable.tsx
@ -22,7 +22,7 @@ import { FeatureStatusCell } from './FeatureStatusCell/FeatureStatusCell';
 import {
    PlaygroundFeatureSchema,
    PlaygroundRequestSchema,
-} from 'hooks/api/actions/usePlayground/playground.model';
+} from 'component/playground/Playground/interfaces/playground.model';
 import { Box, Typography, useMediaQuery, useTheme } from '@mui/material';
 import useLoading from 'hooks/useLoading';
 import { VariantCell } from './VariantCell/VariantCell';
@ -108,7 +108,9 @@ export const PlaygroundResultsTable = ({
                accessor: 'isEnabled',
                filterName: 'isEnabled',
                filterParsing: (value: boolean) => (value ? 'true' : 'false'),
-                Cell: ({ value }: any) => <FeatureStatusCell enabled={value} />,
+                Cell: ({ row }: any) => (
+                    <FeatureStatusCell feature={row.original} />
+                ),
                sortType: 'boolean',
                sortInverted: true,
            },
--- a/frontend/src/component/playground/Playground/interfaces/playground.model.ts
+++ b/frontend/src/component/playground/Playground/interfaces/playground.model.ts
@ -1,3 +1,12 @@
+/**
+ *
+ * 09/08/2022
+ * This was copied from the openapi-generator generated files and slightly modified
+ * because of malformed generation of `anyOf`, `oneOf`
+ *
+ * https://github.com/OpenAPITools/openapi-generator/issues/12256
+ */
+
 import { VariantSchema } from 'openapi';
 import { Operator } from 'constants/operators';

--- a/frontend/src/component/playground/Playground/playground.utils.ts
+++ b/frontend/src/component/playground/Playground/playground.utils.ts
@ -1,4 +1,4 @@
-import { PlaygroundResponseSchema } from 'hooks/api/actions/usePlayground/playground.model';
+import { PlaygroundResponseSchema } from 'component/playground/Playground/interfaces/playground.model';
 import { IEnvironment } from 'interfaces/environments';

 export const resolveProjects = (
--- a/frontend/src/hooks/api/actions/usePlayground/usePlayground.ts
+++ b/frontend/src/hooks/api/actions/usePlayground/usePlayground.ts
@ -2,7 +2,7 @@ import useAPI from '../useApi/useApi';
 import {
    PlaygroundRequestSchema,
    PlaygroundResponseSchema,
-} from './playground.model';
+} from '../../../../component/playground/Playground/interfaces/playground.model';

 export const usePlaygroundApi = () => {
    const { makeRequest, createRequest, errors, loading } = useAPI({
--- a/frontend/src/hooks/api/getters/useEventSearch/useEventSearch.ts
+++ b/frontend/src/hooks/api/getters/useEventSearch/useEventSearch.ts
@ -0,0 +1,79 @@
+import useSWR from 'swr';
+import { useCallback, useState, useEffect, useMemo } from 'react';
+import { formatApiPath } from 'utils/formatPath';
+import handleErrorResponses from '../httpErrorResponseHandler';
+import { IEvent } from 'interfaces/event';
+
+const PATH = formatApiPath('api/admin/events/search');
+
+export interface IUseEventSearchOutput {
+    events?: IEvent[];
+    fetchNextPage: () => void;
+    loading: boolean;
+    error?: Error;
+}
+
+interface IEventSearch {
+    type?: string;
+    project?: string;
+    feature?: string;
+    query?: string;
+    limit?: number;
+    offset?: number;
+}
+
+export const useEventSearch = (
+    project?: string,
+    feature?: string,
+    query?: string
+): IUseEventSearchOutput => {
+    const [events, setEvents] = useState<IEvent[]>();
+    const [offset, setOffset] = useState(0);
+
+    const search: IEventSearch = useMemo(
+        () => ({ project, feature, query, limit: 50 }),
+        [project, feature, query]
+    );
+
+    const { data, error, isValidating } = useSWR<{ events: IEvent[] }>(
+        [PATH, search, offset],
+        () => searchEvents(PATH, { ...search, offset })
+    );
+
+    // Reset the page when there are new search conditions.
+    useEffect(() => {
+        setOffset(0);
+        setEvents(undefined);
+    }, [search]);
+
+    // Append results to the page when more data has been fetched.
+    useEffect(() => {
+        if (data) {
+            setEvents(prev => [...(prev ?? []), ...data.events]);
+        }
+    }, [data]);
+
+    // Update the offset to fetch more results at the end of the page.
+    const fetchNextPage = useCallback(() => {
+        if (events && !isValidating) {
+            setOffset(events.length);
+        }
+    }, [events, isValidating]);
+
+    return {
+        events,
+        loading: !error && !data,
+        fetchNextPage,
+        error,
+    };
+};
+
+const searchEvents = (path: string, search: IEventSearch) => {
+    return fetch(path, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(search),
+    })
+        .then(handleErrorResponses('Event history'))
+        .then(res => res.json());
+};
--- a/frontend/src/hooks/api/getters/useEvents/useEvents.ts
+++ b/frontend/src/hooks/api/getters/useEvents/useEvents.ts
@ -1,39 +0,0 @@
-import useSWR, { mutate, SWRConfiguration } from 'swr';
-import { useCallback } from 'react';
-import { formatApiPath } from 'utils/formatPath';
-import handleErrorResponses from '../httpErrorResponseHandler';
-import { IEvent } from 'interfaces/event';
-
-const PATH = formatApiPath('api/admin/events');
-
-export interface IUseEventsOutput {
-    events: IEvent[];
-    refetchEvents: () => void;
-    loading: boolean;
-    error?: Error;
-}
-
-export const useEvents = (options?: SWRConfiguration): IUseEventsOutput => {
-    const { data, error } = useSWR<{ events: IEvent[] }>(
-        PATH,
-        fetchAllEvents,
-        options
-    );
-
-    const refetchEvents = useCallback(() => {
-        mutate(PATH).catch(console.warn);
-    }, []);
-
-    return {
-        events: data?.events || [],
-        loading: !error && !data,
-        refetchEvents,
-        error,
-    };
-};
-
-const fetchAllEvents = () => {
-    return fetch(PATH, { method: 'GET' })
-        .then(handleErrorResponses('Event history'))
-        .then(res => res.json());
-};
--- a/frontend/src/hooks/api/getters/useFeatureEvents/useFeatureEvents.ts
+++ b/frontend/src/hooks/api/getters/useFeatureEvents/useFeatureEvents.ts
@ -1,42 +0,0 @@
-import useSWR, { SWRConfiguration } from 'swr';
-import { useCallback } from 'react';
-import { formatApiPath } from 'utils/formatPath';
-import handleErrorResponses from '../httpErrorResponseHandler';
-import { IEvent } from 'interfaces/event';
-
-const PATH = formatApiPath('api/admin/events');
-
-export interface IUseEventsOutput {
-    events: IEvent[];
-    refetchEvents: () => void;
-    loading: boolean;
-    error?: Error;
-}
-
-export const useFeatureEvents = (
-    featureName: string,
-    options?: SWRConfiguration
-): IUseEventsOutput => {
-    const { data, error, mutate } = useSWR<{ events: IEvent[] }>(
-        [PATH, featureName],
-        () => fetchFeatureEvents(featureName),
-        options
-    );
-
-    const refetchEvents = useCallback(() => {
-        mutate().catch(console.warn);
-    }, [mutate]);
-
-    return {
-        events: data?.events || [],
-        loading: !error && !data,
-        refetchEvents,
-        error,
-    };
-};
-
-const fetchFeatureEvents = (featureName: string) => {
-    return fetch(`${PATH}/${featureName}`, { method: 'GET' })
-        .then(handleErrorResponses('Event history'))
-        .then(res => res.json());
-};
--- a/frontend/src/hooks/api/getters/useUiBootstrap/useUiBootstrap.ts
+++ b/frontend/src/hooks/api/getters/useUiBootstrap/useUiBootstrap.ts
@ -1,41 +0,0 @@
-import handleErrorResponses from '../httpErrorResponseHandler';
-import useSWR, { mutate, SWRConfiguration } from 'swr';
-import { useState, useEffect } from 'react';
-import { formatApiPath } from 'utils/formatPath';
-
-const useUiBootstrap = (options: SWRConfiguration = {}) => {
-    // The point of the bootstrap is to get multiple datasets in one call. Therefore,
-    // this needs to be refactored to seed other hooks with the correct data.
-    const BOOTSTRAP_CACHE_KEY = `api/admin/ui-bootstrap`;
-
-    const fetcher = () => {
-        const path = formatApiPath(`api/admin/ui-bootstrap`);
-
-        return fetch(path, {
-            method: 'GET',
-            credentials: 'include',
-        })
-            .then(handleErrorResponses('ui bootstrap'))
-            .then(res => res.json());
-    };
-
-    const { data, error } = useSWR(BOOTSTRAP_CACHE_KEY, fetcher, options);
-    const [loading, setLoading] = useState(!error && !data);
-
-    const refetchUiBootstrap = () => {
-        mutate(BOOTSTRAP_CACHE_KEY);
-    };
-
-    useEffect(() => {
-        setLoading(!error && !data);
-    }, [data, error]);
-
-    return {
-        bootstrap: data,
-        error,
-        loading,
-        refetchUiBootstrap,
-    };
-};
-
-export default useUiBootstrap;
--- a/frontend/src/hooks/useHiddenColumns.ts
+++ b/frontend/src/hooks/useHiddenColumns.ts
@ -9,7 +9,7 @@ const useHiddenColumns = (
    useEffect(() => {
        const hidden = condition ? hiddenColumns : [];
        setHiddenColumns(hidden);
-    }, [setHiddenColumns, condition]);
+    }, [setHiddenColumns, hiddenColumns, condition]);
 };

 export default useHiddenColumns;
--- a/frontend/src/hooks/useOnVisible.ts
+++ b/frontend/src/hooks/useOnVisible.ts
@ -0,0 +1,24 @@
+import { useRef, useEffect } from 'react';
+
+// Call `onVisible` when the `ref` element is fully visible in the viewport.
+// Useful for detecting when the user has scrolled to the bottom of the page.
+export const useOnVisible = <T extends HTMLElement>(onVisible: () => void) => {
+    const ref = useRef<T>(null);
+
+    useEffect(() => {
+        if (ref.current) {
+            const handler = (entries: IntersectionObserverEntry[]) => {
+                if (entries[0].isIntersecting) {
+                    onVisible();
+                }
+            };
+
+            const observer = new IntersectionObserver(handler);
+            observer.observe(ref.current);
+
+            return () => observer.disconnect();
+        }
+    }, [onVisible]);
+
+    return ref;
+};
--- a/frontend/src/interfaces/uiConfig.ts
+++ b/frontend/src/interfaces/uiConfig.ts
@ -12,6 +12,7 @@ export interface IUiConfig {
    versionInfo?: IVersionInfo;
    links: ILinks[];
    disablePasswordAuth?: boolean;
+    emailEnabled?: boolean;
    toast?: IProclamationToast;
    segmentValuesLimit?: number;
    strategySegmentsLimit?: number;
--- a/frontend/src/themes/theme.ts
+++ b/frontend/src/themes/theme.ts
@ -120,11 +120,10 @@ export default createTheme({
        },
        code: {
            main: '#0b8c8f',
-            diffAdd: 'green',
-            diffSub: 'red',
+            diffAdd: '#3b6600',
+            diffSub: '#d11525',
            diffNeutral: 'black',
-            edited: 'blue',
-            background: '#efefef',
+            edited: 'black',
        },
        activityIndicators: {
            unknown: colors.grey[100],
--- a/frontend/src/themes/themeTypes.ts
+++ b/frontend/src/themes/themeTypes.ts
@ -42,7 +42,6 @@ declare module '@mui/material/styles' {
            diffSub: string;
            diffNeutral: string;
            edited: string;
-            background: string;
        };
        /**
         * For 'Seen' column on feature toggles list and other.