From f8dffb1dea24fb3c270db06c7119d48f77d27da7 Mon Sep 17 00:00:00 2001
From: Alyssa Wang <alyssa.c.wang@gmail.com>
Date: Sat, 11 May 2024 10:52:29 -0400
Subject: [PATCH] FI-2525: Update colors in Core (#488)

* update blue

* simplify colors

* update request stules

* move collapse state out of detail modal

* update optional colors

* update icon colors

* rename greys

* refactor test item styles

* update tab styling

* adjust spacing in drawer on mobile

* prevent dialog from closing on tab through navigation

---------

Co-authored-by: Alyssa Wang <awang@mitre.org>
---
 client/src/components/Footer/Footer.tsx       |   8 +-
 client/src/components/Footer/styles.tsx       |   2 -
 client/src/components/Header/Header.tsx       |   7 +-
 client/src/components/Header/styles.tsx       |   4 +-
 client/src/components/InputsModal/styles.tsx  |   6 +-
 .../components/LandingPage/LandingPage.tsx    |   2 +-
 .../PresetsSelector/PresetsSelector.tsx       |   2 +-
 .../RequestDetailModal/CodeBlock.tsx          |  17 +-
 .../RequestDetailModal/RequestDetailModal.tsx |   3 +-
 .../src/components/Skeletons/AppSkeleton.tsx  |   3 +-
 .../Skeletons/LandingPageSkeleton.tsx         |   2 +-
 .../Skeletons/SuiteOptionsPageSkeleton.tsx    |   2 +-
 .../SuiteOptionsPage/SuiteOptionsPage.tsx     |  16 +-
 .../ConfigMessagesDetailsPanel.tsx            |   6 +-
 .../ConfigMessagesDetails/styles.tsx          |   2 +-
 .../TestSuite/TestRunButton/TestRunButton.tsx |   2 +-
 .../TestSuite/TestRunProgressBar/styles.tsx   |   2 +-
 .../src/components/TestSuite/TestSession.tsx  |   6 +-
 .../TestSuite/TestSuiteDetails/ResultIcon.tsx | 194 ++++++++----------
 .../NavigableGroupListItem.tsx                |   4 +-
 .../NestedDescriptionPanel.tsx                |  11 +-
 .../TestGroupListItem/TestGroupListItem.tsx   |   3 +-
 .../TestGroupListItem/styles.tsx              |  35 ++--
 .../TestListItem/TestListItem.tsx             | 127 ++++++------
 .../TestSuiteDetails/TestListItem/styles.tsx  |  20 +-
 .../TestSuiteDetails/TestSuiteReport.tsx      |  17 +-
 .../TestSuite/TestSuiteDetails/styles.tsx     |   4 +-
 .../TestSuite/TestSuiteTree/TestSuiteTree.tsx |  10 +-
 .../TestSuite/TestSuiteTree/styles.tsx        |   2 +-
 .../src/components/_common/CollapseButton.tsx |  16 +-
 client/src/components/_common/CopyButton.tsx  |   7 +-
 client/src/components/_common/CustomTab.tsx   |   4 +-
 .../src/components/_common/CustomTreeItem.tsx |   2 +-
 .../_common/SelectionPanel/styles.tsx         |   4 +-
 client/src/index.css                          |   3 +-
 client/src/styles/theme.tsx                   |  49 ++---
 36 files changed, 282 insertions(+), 322 deletions(-)

diff --git a/client/src/components/Footer/Footer.tsx b/client/src/components/Footer/Footer.tsx
index 32132e169..aeb8fe484 100644
--- a/client/src/components/Footer/Footer.tsx
+++ b/client/src/components/Footer/Footer.tsx
@@ -32,7 +32,7 @@ const Footer: FC<FooterProps> = ({ version, linkList }) => {
           href={`${apiBase}?scheme=${scheme}&host=${fullHost}`}
           target="_blank"
           rel="noreferrer"
-          color="secondary"
+          color="secondary.dark"
           className={classes.link}
           sx={{ fontSize: windowIsSmall ? '0.7rem' : '0.9rem' }}
         >
@@ -99,7 +99,7 @@ const Footer: FC<FooterProps> = ({ version, linkList }) => {
                     href={link.url}
                     target="_blank"
                     rel="noreferrer"
-                    color="secondary"
+                    color="secondary.dark"
                     className={classes.link}
                     style={{
                       fontSize: '0.8rem',
@@ -127,7 +127,7 @@ const Footer: FC<FooterProps> = ({ version, linkList }) => {
                   href={link.url}
                   target="_blank"
                   rel="noreferrer"
-                  color="secondary"
+                  color="secondary.dark"
                   className={classes.link}
                   style={{
                     fontSize: '1.1rem',
@@ -161,7 +161,7 @@ const Footer: FC<FooterProps> = ({ version, linkList }) => {
       >
         <Box display="flex" alignItems="center" px={2}>
           <Link
-            href="https://inferno-framework.github.io/inferno-core"
+            href="https://inferno-framework.github.io/"
             target="_blank"
             rel="noreferrer"
             aria-label="Inferno"
diff --git a/client/src/components/Footer/styles.tsx b/client/src/components/Footer/styles.tsx
index fafb9aeb0..cd37214d6 100644
--- a/client/src/components/Footer/styles.tsx
+++ b/client/src/components/Footer/styles.tsx
@@ -10,8 +10,6 @@ export default makeStyles()((theme: Theme) => ({
     display: 'flex',
     width: '100%',
     overflow: 'auto',
-    zIndex: `${theme.zIndex.drawer + 1} !important` as any,
-    backgroundColor: theme.palette.common.orangeLightest,
     borderTop: `1px ${theme.palette.divider} solid`,
     bottom: 0,
     '@media print': {
diff --git a/client/src/components/Header/Header.tsx b/client/src/components/Header/Header.tsx
index 6cb2f4b29..bfd5d90e8 100644
--- a/client/src/components/Header/Header.tsx
+++ b/client/src/components/Header/Header.tsx
@@ -103,12 +103,7 @@ const Header: FC<HeaderProps> = ({
             )}
           </Box>
           {suiteOptionsString && (
-            <Typography
-              variant="subtitle2"
-              component="h2"
-              className={classes.title}
-              color={lightTheme.palette.common.gray}
-            >
+            <Typography variant="subtitle2" component="h2" className={classes.title}>
               {suiteOptionsString}
             </Typography>
           )}
diff --git a/client/src/components/Header/styles.tsx b/client/src/components/Header/styles.tsx
index 298b6a1bc..a6a946b43 100644
--- a/client/src/components/Header/styles.tsx
+++ b/client/src/components/Header/styles.tsx
@@ -29,13 +29,13 @@ export default makeStyles()((theme: Theme) => ({
   title: {
     padding: '0 8px',
     whiteSpace: 'nowrap',
-    fontWeight: 600,
   },
   version: {
     fontStyle: 'italic',
   },
   homeLink: {
-    color: theme.palette.common.orangeDarker,
+    color: theme.palette.common.grayDark,
+    fontWeight: 600,
     textDecoration: 'none',
   },
 }));
diff --git a/client/src/components/InputsModal/styles.tsx b/client/src/components/InputsModal/styles.tsx
index 4812c7f41..6a8c11e1d 100644
--- a/client/src/components/InputsModal/styles.tsx
+++ b/client/src/components/InputsModal/styles.tsx
@@ -24,7 +24,7 @@ export default makeStyles()((theme: Theme) => ({
     },
   },
   inputLabel: {
-    color: theme.palette.common.grayDarker,
+    color: theme.palette.common.grayDark,
     fontWeight: 600,
   },
   inputDescription: {
@@ -48,7 +48,7 @@ export default makeStyles()((theme: Theme) => ({
   oauthCard: {
     width: '100%',
     mx: 2,
-    borderColor: theme.palette.common.grayLight,
+    borderColor: theme.palette.common.gray,
     '&:focus-within': {
       borderColor: theme.palette.secondary.main,
     },
@@ -82,7 +82,7 @@ export default makeStyles()((theme: Theme) => ({
   toggleButton: {
     color: theme.palette.common.grayDark,
     '&:hover, :focus-within': {
-      backgroundColor: theme.palette.common.grayLightest,
+      backgroundColor: theme.palette.common.grayLight,
       fontWeight: 'bolder',
     },
     '&.Mui-selected': {
diff --git a/client/src/components/LandingPage/LandingPage.tsx b/client/src/components/LandingPage/LandingPage.tsx
index 265611e28..2221c9fbe 100644
--- a/client/src/components/LandingPage/LandingPage.tsx
+++ b/client/src/components/LandingPage/LandingPage.tsx
@@ -127,7 +127,7 @@ const LandingPage: FC<LandingPageProps> = ({ testSuites }) => {
         width="100%"
         minHeight="200px"
         py={4}
-        sx={{ backgroundColor: lightTheme.palette.common.grayLightest }}
+        sx={{ backgroundColor: lightTheme.palette.common.grayLight }}
       >
         {testSuites ? (
           <SelectionPanel
diff --git a/client/src/components/PresetsSelector/PresetsSelector.tsx b/client/src/components/PresetsSelector/PresetsSelector.tsx
index 94672b5ba..46d9940e6 100644
--- a/client/src/components/PresetsSelector/PresetsSelector.tsx
+++ b/client/src/components/PresetsSelector/PresetsSelector.tsx
@@ -89,7 +89,7 @@ const PresetsSelector: FC<PresetsModalProps> = ({ presets, testSessionId, getSes
         select
         label="Preset"
         InputLabelProps={{
-          sx: { '&.Mui-focused': { color: lightTheme.palette.common.orangeDarker } },
+          sx: { '&.Mui-focused': { color: lightTheme.palette.primary.dark } },
         }}
         value={selectedPreset}
         onChange={handleOnChange}
diff --git a/client/src/components/RequestDetailModal/CodeBlock.tsx b/client/src/components/RequestDetailModal/CodeBlock.tsx
index 973699b17..960142763 100644
--- a/client/src/components/RequestDetailModal/CodeBlock.tsx
+++ b/client/src/components/RequestDetailModal/CodeBlock.tsx
@@ -10,14 +10,13 @@ import useStyles from './styles';
 
 export interface CodeBlockProps {
   body?: string | null;
-  collapsedState?: boolean;
   headers?: RequestHeader[] | null | undefined;
   title?: string;
 }
 
-const CodeBlock: FC<CodeBlockProps> = ({ body, collapsedState = false, headers, title }) => {
+const CodeBlock: FC<CodeBlockProps> = ({ body, headers, title }) => {
   const { classes } = useStyles();
-  const [collapsed, setCollapsed] = React.useState(collapsedState);
+  const [collapsed, setCollapsed] = React.useState(true);
   const [jsonBody, setJsonBody] = React.useState<string>('');
 
   useEffectOnce(() => {
@@ -30,17 +29,15 @@ const CodeBlock: FC<CodeBlockProps> = ({ body, collapsedState = false, headers,
     return (
       <Card variant="outlined" className={classes.codeblock} data-testid="code-block">
         <CardHeader
-          subheader={title || 'Code'}
+          title={title || 'Code'}
+          titleTypographyProps={{ sx: { fontSize: 20, cursor: 'pointer' } }}
           action={
             <Box display="flex">
-              <CopyButton copyText={jsonBody} size="small" />
-              <CollapseButton
-                setCollapsed={setCollapsed}
-                startState={collapsedState}
-                size="small"
-              />
+              <CopyButton copyText={jsonBody} />
+              <CollapseButton setCollapsed={setCollapsed} collapsed={collapsed} />
             </Box>
           }
+          onClick={() => setCollapsed(!collapsed)}
         />
         <Collapse in={!collapsed}>
           <Divider />
diff --git a/client/src/components/RequestDetailModal/RequestDetailModal.tsx b/client/src/components/RequestDetailModal/RequestDetailModal.tsx
index aaf719f16..403dfab6d 100644
--- a/client/src/components/RequestDetailModal/RequestDetailModal.tsx
+++ b/client/src/components/RequestDetailModal/RequestDetailModal.tsx
@@ -77,6 +77,7 @@ const RequestDetailModal: FC<RequestDetailModalProps> = ({
         maxWidth="md"
         onClose={hideModal}
         data-testid="requestDetailModal"
+        onKeyDown={(e) => e.stopPropagation()}
       >
         <DialogTitle>{requestDialogTitle}</DialogTitle>
         <Divider />
@@ -90,7 +91,6 @@ const RequestDetailModal: FC<RequestDetailModalProps> = ({
             {request.response_body && (
               <CodeBlock
                 body={request.request_body}
-                collapsedState={true}
                 headers={request.request_headers}
                 title="Request Body"
               />
@@ -104,7 +104,6 @@ const RequestDetailModal: FC<RequestDetailModalProps> = ({
             {request.response_body && (
               <CodeBlock
                 body={request.response_body}
-                collapsedState={true}
                 headers={request.response_headers}
                 title="Response Body"
               />
diff --git a/client/src/components/Skeletons/AppSkeleton.tsx b/client/src/components/Skeletons/AppSkeleton.tsx
index 104b7d1f1..6bfddd0d2 100644
--- a/client/src/components/Skeletons/AppSkeleton.tsx
+++ b/client/src/components/Skeletons/AppSkeleton.tsx
@@ -1,5 +1,6 @@
 import React, { FC } from 'react';
 import { Box } from '@mui/material';
+import { lighten } from '@mui/material/styles';
 import lightTheme from '~/styles/theme';
 import { useAppStore } from '~/store/app';
 import useStyles from '~/components/TestSuite/styles';
@@ -17,7 +18,7 @@ const AppSkeleton: FC<Record<string, never>> = () => {
         style={{
           overflow: 'auto',
           width: '100%',
-          backgroundColor: lightTheme.palette.common.grayLightest,
+          backgroundColor: lighten(lightTheme.palette.common.grayLight, 0.5),
         }}
       >
         <Box className={classes.contentContainer} p={windowIsSmall ? 1 : 4}>
diff --git a/client/src/components/Skeletons/LandingPageSkeleton.tsx b/client/src/components/Skeletons/LandingPageSkeleton.tsx
index 1229b2ab9..73aa681b6 100644
--- a/client/src/components/Skeletons/LandingPageSkeleton.tsx
+++ b/client/src/components/Skeletons/LandingPageSkeleton.tsx
@@ -54,7 +54,7 @@ const LandingPageSkeleton: FC<Record<string, never>> = () => {
         alignItems="center"
         width="100%"
         py={4}
-        sx={{ backgroundColor: lightTheme.palette.common.grayLightest }}
+        sx={{ backgroundColor: lightTheme.palette.common.grayLight }}
       >
         <SelectionSkeleton />
       </Box>
diff --git a/client/src/components/Skeletons/SuiteOptionsPageSkeleton.tsx b/client/src/components/Skeletons/SuiteOptionsPageSkeleton.tsx
index fa2229b16..dbf02552e 100644
--- a/client/src/components/Skeletons/SuiteOptionsPageSkeleton.tsx
+++ b/client/src/components/Skeletons/SuiteOptionsPageSkeleton.tsx
@@ -51,7 +51,7 @@ const SuiteOptionsPageSkeleton: FC<Record<string, never>> = () => {
         width={windowIsSmall ? '100%' : 'none'}
         justifyContent="center"
         alignItems="center"
-        sx={{ backgroundColor: lightTheme.palette.common.grayLightest }}
+        sx={{ backgroundColor: lightTheme.palette.common.grayLight }}
       >
         <Box display="flex" justifyContent="center" m={3}>
           <SelectionSkeleton />
diff --git a/client/src/components/SuiteOptionsPage/SuiteOptionsPage.tsx b/client/src/components/SuiteOptionsPage/SuiteOptionsPage.tsx
index 37bdf2daf..e8e698ffc 100644
--- a/client/src/components/SuiteOptionsPage/SuiteOptionsPage.tsx
+++ b/client/src/components/SuiteOptionsPage/SuiteOptionsPage.tsx
@@ -95,7 +95,7 @@ const SuiteOptionsPage: FC<SuiteOptionsPageProps> = ({ testSuite }) => {
         component="h1"
         align="center"
         sx={{
-          color: lightTheme.palette.common.grayDarker,
+          color: lightTheme.palette.common.grayDark,
           fontSize: windowIsSmall ? '2rem' : 'auto',
           fontWeight: 'bolder',
           letterSpacing: 2,
@@ -133,19 +133,19 @@ const SuiteOptionsPage: FC<SuiteOptionsPageProps> = ({ testSuite }) => {
         justifyContent="center"
         alignItems="center"
         maxWidth={windowIsSmall ? '100%' : '50%'}
-        maxHeight={windowIsSmall ? 'none' : '100%'}
-        minHeight={windowIsSmall ? 'none' : '100%'}
+        maxHeight={windowIsSmall ? 'unset' : '100%'}
+        minHeight={windowIsSmall ? 'unset' : '100%'}
         overflow="auto"
         px={windowIsSmall ? 0 : 8}
-        my={3}
       >
         {/* Title */}
         <Box
           display="flex"
           alignItems="center"
-          sx={windowIsSmall ? { mx: 2 } : { m: 4 }}
           maxWidth={descriptionWidth}
           maxHeight={windowIsSmall ? 'none' : '100%'}
+          pt={3}
+          sx={windowIsSmall ? { mx: 2 } : { m: 4 }}
         >
           {renderTitle()}
         </Box>
@@ -173,12 +173,12 @@ const SuiteOptionsPage: FC<SuiteOptionsPageProps> = ({ testSuite }) => {
       </Box>
       <Box
         display="flex"
-        height={windowIsSmall ? 'none' : '100%'}
-        width={windowIsSmall ? '100%' : 'none'}
+        height={windowIsSmall ? 'unset' : '100%'}
+        width={windowIsSmall ? '100%' : 'unset'}
         maxWidth={windowIsSmall ? '100%' : '50%'}
         justifyContent="center"
         alignItems="center"
-        sx={{ backgroundColor: lightTheme.palette.common.grayLightest }}
+        sx={{ backgroundColor: lightTheme.palette.common.grayLight }}
       >
         <Box display="flex" ref={selectionPanel} justifyContent="center" maxHeight="100%" m={3}>
           {testSuite?.suite_options ? (
diff --git a/client/src/components/TestSuite/ConfigMessagesDetails/ConfigMessagesDetailsPanel.tsx b/client/src/components/TestSuite/ConfigMessagesDetails/ConfigMessagesDetailsPanel.tsx
index 86f6199ff..5474bfbc5 100644
--- a/client/src/components/TestSuite/ConfigMessagesDetails/ConfigMessagesDetailsPanel.tsx
+++ b/client/src/components/TestSuite/ConfigMessagesDetails/ConfigMessagesDetailsPanel.tsx
@@ -35,9 +35,9 @@ const ConfigMessagesDetailsPanel: FC<ConfigDetailsPanelProps> = ({ testSuite: ru
   );
 
   const tabLabel = (label: string, count: number) => (
-    <Box alignItems="center">
-      <Box px={1}>{label}</Box>
-      {count > 0 && <Chip label={count} size="small" style={{ margin: '4px' }} />}
+    <Box alignItems="center" px={1}>
+      {count > 0 && <Chip label={count} size="small" sx={{ mx: 1 }} />}
+      {label}
     </Box>
   );
 
diff --git a/client/src/components/TestSuite/ConfigMessagesDetails/styles.tsx b/client/src/components/TestSuite/ConfigMessagesDetails/styles.tsx
index afcf3cd57..225e347f3 100644
--- a/client/src/components/TestSuite/ConfigMessagesDetails/styles.tsx
+++ b/client/src/components/TestSuite/ConfigMessagesDetails/styles.tsx
@@ -10,7 +10,7 @@ export default makeStyles()((theme: Theme) => ({
     fontWeight: 600,
     fontSize: '16px',
     borderBottom: `1px solid ${theme.palette.divider}`,
-    backgroundColor: theme.palette.common.blueGrayLightest,
+    backgroundColor: theme.palette.common.blueLightest,
     borderTopLeftRadius: '4px',
     borderTopRightRadius: '4px',
     display: 'flex',
diff --git a/client/src/components/TestSuite/TestRunButton/TestRunButton.tsx b/client/src/components/TestSuite/TestRunButton/TestRunButton.tsx
index ccb7f8312..da04dcc62 100644
--- a/client/src/components/TestSuite/TestRunButton/TestRunButton.tsx
+++ b/client/src/components/TestSuite/TestRunButton/TestRunButton.tsx
@@ -67,7 +67,7 @@ const TestRunButton: FC<TestRunButtonProps> = ({
           ':hover': inProgress
             ? {}
             : {
-                background: lightTheme.palette.common.grayLightest,
+                background: lightTheme.palette.common.grayLight,
                 borderRadius: '50%',
               },
         }}
diff --git a/client/src/components/TestSuite/TestRunProgressBar/styles.tsx b/client/src/components/TestSuite/TestRunProgressBar/styles.tsx
index 8619bcc00..7d15ab5d3 100644
--- a/client/src/components/TestSuite/TestRunProgressBar/styles.tsx
+++ b/client/src/components/TestSuite/TestRunProgressBar/styles.tsx
@@ -14,7 +14,7 @@ export default makeStyles()((theme: Theme) => ({
   },
   linearProgress: {
     height: 8,
-    backgroundColor: theme.palette.common.grayDarker,
+    backgroundColor: theme.palette.common.grayDark,
     borderRadius: 2,
   },
 }));
diff --git a/client/src/components/TestSuite/TestSession.tsx b/client/src/components/TestSuite/TestSession.tsx
index dcfd36aaa..9785b65c3 100644
--- a/client/src/components/TestSuite/TestSession.tsx
+++ b/client/src/components/TestSuite/TestSession.tsx
@@ -1,6 +1,7 @@
 import React, { FC, useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 import { Box, Drawer, SwipeableDrawer, Toolbar } from '@mui/material';
+import { lighten } from '@mui/material/styles';
 import {
   TestInput,
   RunnableType,
@@ -66,7 +67,6 @@ const TestSessionComponent: FC<TestSessionComponentProps> = ({
 }) => {
   const { classes } = useStyles();
   const { enqueueSnackbar } = useSnackbar();
-  const footerHeight = useAppStore((state) => state.footerHeight);
   const headerHeight = useAppStore((state) => state.headerHeight);
   const windowIsSmall = useAppStore((state) => state.windowIsSmall);
   const currentRunnables = useTestSessionStore((state) => state.currentRunnables);
@@ -382,8 +382,6 @@ const TestSessionComponent: FC<TestSessionComponentProps> = ({
           {/* Spacer to be updated with header height */}
           <Toolbar sx={{ minHeight: `${headerHeight}px !important` }} />
           {renderDrawerContents()}
-          {/* Spacer to be updated with footer height */}
-          <Toolbar sx={{ minHeight: `${footerHeight}px !important` }} />
         </SwipeableDrawer>
       ) : (
         <Drawer
@@ -399,7 +397,7 @@ const TestSessionComponent: FC<TestSessionComponentProps> = ({
         style={{
           overflow: 'auto',
           width: '100%',
-          backgroundColor: lightTheme.palette.common.grayLightest,
+          backgroundColor: lighten(lightTheme.palette.common.grayLight, 0.5),
         }}
       >
         <Box className={classes.contentContainer} p={windowIsSmall ? 0 : 4}>
diff --git a/client/src/components/TestSuite/TestSuiteDetails/ResultIcon.tsx b/client/src/components/TestSuite/TestSuiteDetails/ResultIcon.tsx
index e516c5fec..d3d326898 100644
--- a/client/src/components/TestSuite/TestSuiteDetails/ResultIcon.tsx
+++ b/client/src/components/TestSuite/TestSuiteDetails/ResultIcon.tsx
@@ -34,110 +34,98 @@ const ResultIcon: FC<ResultIconProps> = ({ result, isRunning }) => {
         />
       </CustomTooltip>
     );
-  } else if (result) {
-    switch (result.result) {
-      case 'pass':
-        return (
-          <CustomTooltip title="passed">
-            <CheckCircle
-              tabIndex={0}
-              aria-hidden="false"
-              style={{ color: result.optional ? green[100] : green[500] }}
-              data-testid={`${result.id}-${result.result}`}
-            />
-          </CustomTooltip>
-        );
-      case 'fail':
-        return (
-          <CustomTooltip title="failed">
-            <Cancel
-              tabIndex={0}
-              aria-hidden="false"
-              style={{ color: result.optional ? grey[500] : red[700] }}
-              data-testid={`${result.id}-${result.result}`}
-            />
-          </CustomTooltip>
-        );
-      case 'cancel':
-        return (
-          <CustomTooltip title="cancel">
-            <Cancel
-              tabIndex={0}
-              aria-hidden="false"
-              style={{ color: result.optional ? grey[500] : red[700] }}
-              data-testid={`${result.id}-${result.result}`}
-            />
-          </CustomTooltip>
-        );
-      case 'skip':
-        return (
-          <CustomTooltip title="skipped">
-            <Block
-              tabIndex={0}
-              aria-hidden="false"
-              style={{ color: result.optional ? grey[500] : orange[800] }}
-              data-testid={`${result.id}-${result.result}`}
-            />
-          </CustomTooltip>
-        );
-      case 'omit':
-        return (
-          <CustomTooltip title="omitted">
-            <Circle
-              tabIndex={0}
-              aria-hidden="false"
-              style={{ color: grey[500] }}
-              data-testid={`${result.id}-${result.result}`}
-            />
-          </CustomTooltip>
-        );
-      case 'error':
-        return (
-          <CustomTooltip title="error">
-            <Error
-              tabIndex={0}
-              aria-hidden="false"
-              style={{ color: result.optional ? grey[500] : purple[500] }}
-              data-testid={`${result.id}-${result.result}`}
-            />
-          </CustomTooltip>
-        );
-      case 'wait':
-        return (
-          <CustomTooltip title="wait">
-            <AccessTime
-              tabIndex={0}
-              aria-hidden="false"
-              data-testid={`${result.id}-${result.result}`}
-            />
-          </CustomTooltip>
-        );
+  }
 
-      default:
-        return (
-          <CustomTooltip title="no result">
-            <RadioButtonUnchecked
-              tabIndex={0}
-              aria-hidden="false"
-              style={{
-                color: grey[500],
-              }}
-            />
-          </CustomTooltip>
-        );
-    }
-  } else {
-    return (
-      <CustomTooltip title="no result">
-        <RadioButtonUnchecked
-          tabIndex={0}
-          aria-hidden="false"
-          style={{
-            color: grey[500],
-          }}
-        />
-      </CustomTooltip>
-    );
+  switch (result?.result) {
+    case 'pass':
+      return (
+        <CustomTooltip title="passed">
+          <CheckCircle
+            tabIndex={0}
+            aria-hidden="false"
+            style={{ color: result.optional ? green[100] : green[500] }}
+            data-testid={`${result.id}-${result.result}`}
+          />
+        </CustomTooltip>
+      );
+    case 'fail':
+      return (
+        <CustomTooltip title="failed">
+          <Cancel
+            tabIndex={0}
+            aria-hidden="false"
+            style={{ color: result.optional ? red[100] : red[700] }}
+            data-testid={`${result.id}-${result.result}`}
+          />
+        </CustomTooltip>
+      );
+    case 'cancel':
+      return (
+        <CustomTooltip title="cancel">
+          <Cancel
+            tabIndex={0}
+            aria-hidden="false"
+            style={{ color: result.optional ? red[100] : red[700] }}
+            data-testid={`${result.id}-${result.result}`}
+          />
+        </CustomTooltip>
+      );
+    case 'skip':
+      return (
+        <CustomTooltip title="skipped">
+          <Block
+            tabIndex={0}
+            aria-hidden="false"
+            style={{ color: result.optional ? orange[200] : orange[800] }}
+            data-testid={`${result.id}-${result.result}`}
+          />
+        </CustomTooltip>
+      );
+    case 'omit':
+      return (
+        <CustomTooltip title="omitted">
+          <Circle
+            tabIndex={0}
+            aria-hidden="false"
+            style={{ color: result.optional ? grey[300] : grey[600] }}
+            data-testid={`${result.id}-${result.result}`}
+          />
+        </CustomTooltip>
+      );
+    case 'error':
+      return (
+        <CustomTooltip title="error">
+          <Error
+            tabIndex={0}
+            aria-hidden="false"
+            style={{ color: result.optional ? purple[100] : purple[500] }}
+            data-testid={`${result.id}-${result.result}`}
+          />
+        </CustomTooltip>
+      );
+    case 'wait':
+      return (
+        <CustomTooltip title="wait">
+          <AccessTime
+            tabIndex={0}
+            aria-hidden="false"
+            data-testid={`${result.id}-${result.result}`}
+          />
+        </CustomTooltip>
+      );
+
+    default:
+      return (
+        <CustomTooltip title="no result">
+          <RadioButtonUnchecked
+            tabIndex={0}
+            aria-hidden="false"
+            style={{
+              color: grey[500],
+            }}
+          />
+        </CustomTooltip>
+      );
   }
 };
 
diff --git a/client/src/components/TestSuite/TestSuiteDetails/TestGroupListItem/NavigableGroupListItem.tsx b/client/src/components/TestSuite/TestSuiteDetails/TestGroupListItem/NavigableGroupListItem.tsx
index 131041ea3..ac2b757fe 100644
--- a/client/src/components/TestSuite/TestSuiteDetails/TestGroupListItem/NavigableGroupListItem.tsx
+++ b/client/src/components/TestSuite/TestSuiteDetails/TestGroupListItem/NavigableGroupListItem.tsx
@@ -32,10 +32,10 @@ const NavigableGroupListItem: FC<NavigableGroupListItemProps> = ({ testGroup })
                     <Typography className={classes.shortId}>{`${testGroup.short_id} `}</Typography>
                   )}
                   <Link
-                    color="secondary"
+                    color="secondary.dark"
+                    fontWeight="bold"
                     href={`${location.pathname}#${testGroup.id}`}
                     data-testid="navigable-group-item"
-                    sx={{ fontWeight: 'bold' }}
                   >
                     {testGroup.title}
                   </Link>
diff --git a/client/src/components/TestSuite/TestSuiteDetails/TestGroupListItem/NestedDescriptionPanel.tsx b/client/src/components/TestSuite/TestSuiteDetails/TestGroupListItem/NestedDescriptionPanel.tsx
index 8a5b4a1fb..7fd5878ab 100644
--- a/client/src/components/TestSuite/TestSuiteDetails/TestGroupListItem/NestedDescriptionPanel.tsx
+++ b/client/src/components/TestSuite/TestSuiteDetails/TestGroupListItem/NestedDescriptionPanel.tsx
@@ -25,12 +25,13 @@ const NestedDescriptionPanel: FC<NestedDescriptionPanelProps> = ({ testGroup })
   const [descriptionMouseHover, setDescriptionMouseHover] = React.useState(false);
 
   return (
-    <Box className={classes.nestedDescriptionContainer}>
+    <Box py={1} className={classes.descriptionContainer}>
       <Accordion
         disableGutters
+        elevation={0}
         key={`${testGroup.id}-description`}
         className={classes.accordion}
-        TransitionProps={{ unmountOnExit: true }}
+        slotProps={{ transition: { unmountOnExit: true } }}
         onMouseEnter={() => setDescriptionMouseHover(true)}
         onMouseLeave={() => setDescriptionMouseHover(false)}
       >
@@ -44,7 +45,7 @@ const NestedDescriptionPanel: FC<NestedDescriptionPanelProps> = ({ testGroup })
             <ListItem sx={{ p: 0 }}>
               <ListItemText
                 primary={
-                  <Typography className={classes.nestedDescriptionHeader}>
+                  <Typography className={classes.descriptionHeader}>
                     About {testGroup.short_title || testGroup.title}
                   </Typography>
                 }
@@ -55,11 +56,11 @@ const NestedDescriptionPanel: FC<NestedDescriptionPanelProps> = ({ testGroup })
         <Divider />
         <AccordionDetails
           title={descriptionMouseHover ? '' : `${testGroup.id}-description-detail`}
-          className={classes.accordionDetailContainer}
+          className={classes.descriptionDetailContainer}
         >
           <ReactMarkdown
             remarkPlugins={[remarkGfm]}
-            className={`${classes.accordionDetail} ${classes.nestedDescription}`}
+            className={`${classes.accordionDetail} ${classes.description}`}
           >
             {testGroup.description as string}
           </ReactMarkdown>
diff --git a/client/src/components/TestSuite/TestSuiteDetails/TestGroupListItem/TestGroupListItem.tsx b/client/src/components/TestSuite/TestSuiteDetails/TestGroupListItem/TestGroupListItem.tsx
index 9105c9863..002ded4b7 100644
--- a/client/src/components/TestSuite/TestSuiteDetails/TestGroupListItem/TestGroupListItem.tsx
+++ b/client/src/components/TestSuite/TestSuiteDetails/TestGroupListItem/TestGroupListItem.tsx
@@ -110,6 +110,7 @@ const TestGroupListItem: FC<TestGroupListItemProps> = ({
   const expandedGroupListItem = (
     <Accordion
       disableGutters
+      elevation={0}
       className={classes.accordion}
       sx={view === 'report' ? { pointerEvents: 'none' } : {}}
       expanded={expanded}
@@ -117,7 +118,7 @@ const TestGroupListItem: FC<TestGroupListItemProps> = ({
         setExpanded(!expanded);
         setManualExpand(!expanded);
       }}
-      TransitionProps={{ unmountOnExit: true }}
+      slotProps={{ transition: { unmountOnExit: true } }}
       onMouseEnter={() => setGroupMouseHover(true)}
       onMouseLeave={() => setGroupMouseHover(false)}
     >
diff --git a/client/src/components/TestSuite/TestSuiteDetails/TestGroupListItem/styles.tsx b/client/src/components/TestSuite/TestSuiteDetails/TestGroupListItem/styles.tsx
index 479d5a41d..12b738caa 100644
--- a/client/src/components/TestSuite/TestSuiteDetails/TestGroupListItem/styles.tsx
+++ b/client/src/components/TestSuite/TestSuiteDetails/TestGroupListItem/styles.tsx
@@ -1,5 +1,6 @@
 import { Theme } from '@mui/material/styles';
 import { makeStyles } from 'tss-react/mui';
+import { darken } from '@mui/material/styles';
 
 export default makeStyles()((theme: Theme) => ({
   root: {
@@ -12,7 +13,7 @@ export default makeStyles()((theme: Theme) => ({
     display: 'inline',
     fontWeight: 'bold',
     alignSelf: 'center',
-    color: theme.palette.common.grayDarker,
+    color: theme.palette.common.grayDark,
   },
   currentItem: {
     fontWeight: 600,
@@ -25,6 +26,7 @@ export default makeStyles()((theme: Theme) => ({
       borderBottom: `1px solid ${theme.palette.divider}`,
     },
     '@media print': {
+      borderTop: `1px solid ${theme.palette.divider}`,
       borderBottom: 'none !important',
     },
   },
@@ -38,7 +40,7 @@ export default makeStyles()((theme: Theme) => ({
     },
   },
   accordionDetailContainer: {
-    backgroundColor: theme.palette.common.grayLighter,
+    backgroundColor: theme.palette.common.grayLight,
     '@media print': {
       padding: '0 0 0 16px',
     },
@@ -52,17 +54,22 @@ export default makeStyles()((theme: Theme) => ({
       margin: 0,
     },
   },
-  nestedDescription: {
+  description: {
     padding: '8px 16px 24px 16px',
     overflow: 'auto',
   },
-  nestedDescriptionHeader: {
+  descriptionHeader: {
     fontWeight: 'bolder !important',
-    color: theme.palette.common.orangeDarker,
+    color: theme.palette.common.orangeDark,
   },
-  nestedDescriptionContainer: {
-    backgroundColor: theme.palette.common.grayLighter,
-    padding: '8px 0',
+  descriptionContainer: {
+    backgroundColor: theme.palette.common.grayLight,
+  },
+  descriptionDetailContainer: {
+    backgroundColor: darken(theme.palette.common.grayLight, 0.1),
+    '@media print': {
+      padding: '0 0 0 16px',
+    },
   },
 
   // these colors are here for the badges as well as the messages column
@@ -70,13 +77,13 @@ export default makeStyles()((theme: Theme) => ({
     color: theme.palette.error.dark,
   },
   warning: {
-    color: theme.palette.common.orangeDarker,
+    color: theme.palette.primary.dark,
   },
   info: {
     color: theme.palette.info.dark,
   },
   request: {
-    color: theme.palette.secondary.main,
+    color: theme.palette.info.main,
   },
 
   // each badge component inside a ProblemBadge has its own color
@@ -89,8 +96,8 @@ export default makeStyles()((theme: Theme) => ({
   },
   warningBadge: {
     '& .MuiBadge-badge': {
-      color: theme.palette.common.orangeDarker,
-      border: `1px solid ${theme.palette.common.orangeDarker}`,
+      color: theme.palette.primary.dark,
+      border: `1px solid ${theme.palette.primary.dark}`,
     },
   },
   infoBadge: {
@@ -101,8 +108,8 @@ export default makeStyles()((theme: Theme) => ({
   },
   requestBadge: {
     '& .MuiBadge-badge': {
-      color: theme.palette.secondary.main,
-      border: `1px solid ${theme.palette.secondary.main}`,
+      color: theme.palette.secondary.dark,
+      border: `1px solid ${theme.palette.info.dark}`,
     },
   },
 }));
diff --git a/client/src/components/TestSuite/TestSuiteDetails/TestListItem/TestListItem.tsx b/client/src/components/TestSuite/TestSuiteDetails/TestListItem/TestListItem.tsx
index b2d1291fc..4211334e5 100644
--- a/client/src/components/TestSuite/TestSuiteDetails/TestListItem/TestListItem.tsx
+++ b/client/src/components/TestSuite/TestSuiteDetails/TestListItem/TestListItem.tsx
@@ -209,74 +209,73 @@ const TestListItem: FC<TestListItemProps> = ({
   };
 
   return (
-    <>
-      <Accordion
-        disableGutters
-        className={classes.accordion}
-        sx={view === 'report' ? { pointerEvents: 'none' } : {}}
-        expanded={open}
-        slotProps={{ transition: { unmountOnExit: true } }}
-        onClick={handleAccordionClick}
+    <Accordion
+      disableGutters
+      elevation={0}
+      className={classes.accordion}
+      sx={view === 'report' ? { pointerEvents: 'none' } : {}}
+      expanded={open}
+      slotProps={{ transition: { unmountOnExit: true } }}
+      onClick={handleAccordionClick}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter') {
+          // Don't open/close accordion on enter
+          setTabIndex(findPopulatedTabIndex());
+        }
+        if (e.key === ' ') {
+          handleAccordionClick();
+        }
+      }}
+      onMouseEnter={() => setItemMouseHover(true)}
+      onMouseLeave={() => setItemMouseHover(false)}
+    >
+      <AccordionSummary
+        id={itemMouseHover ? '' : `${test.id}-summary`}
+        data-testid={`${test.id}-summary`}
+        aria-controls={`${test.id}-detail`}
+        role={view === 'report' ? 'region' : 'button'}
+        expandIcon={
+          view === 'run' && (
+            <CustomTooltip title="expand test">
+              <ExpandMoreIcon tabIndex={0} aria-hidden="false" />
+            </CustomTooltip>
+          )
+        }
+        className={classes.accordionSummary}
         onKeyDown={(e) => {
-          if (e.key === 'Enter') {
-            // Don't open/close accordion on enter
-            setTabIndex(findPopulatedTabIndex());
-          }
-          if (e.key === ' ') {
-            handleAccordionClick();
+          if (view !== 'report' && e.key === 'Enter') {
+            setOpen(!open);
           }
         }}
-        onMouseEnter={() => setItemMouseHover(true)}
-        onMouseLeave={() => setItemMouseHover(false)}
       >
-        <AccordionSummary
-          id={itemMouseHover ? '' : `${test.id}-summary`}
-          data-testid={`${test.id}-summary`}
-          aria-controls={`${test.id}-detail`}
-          role={view === 'report' ? 'region' : 'button'}
-          expandIcon={
-            view === 'run' && (
-              <CustomTooltip title="expand test">
-                <ExpandMoreIcon tabIndex={0} aria-hidden="false" />
-              </CustomTooltip>
-            )
-          }
-          className={classes.accordionSummary}
-          onKeyDown={(e) => {
-            if (view !== 'report' && e.key === 'Enter') {
-              setOpen(!open);
-            }
-          }}
-        >
-          <Box display="flex" alignItems="center" width="100%">
-            {resultIcon}
-            {testText}
-            {renderProblemBadge(messageTypeCounts)}
-            {requestsBadge}
-            {testRunButton}
-          </Box>
-        </AccordionSummary>
-        <Divider />
-        {/* Remove default tooltip on hover */}
-        <AccordionDetails
-          title={itemMouseHover ? '' : `${test.id}-detail`}
-          data-testid={`${test.id}-detail`}
-          className={classes.accordionDetailContainer}
-          onClick={(e) => e.stopPropagation()}
-        >
-          {view === 'run' && (
-            <TestRunDetail
-              test={test}
-              tabs={tabs}
-              currentTabIndex={tabIndex}
-              setTabIndex={setTabIndex}
-              updateRequest={updateRequest}
-            />
-          )}
-          {view === 'report' && showReportDetails && reportDetails}
-        </AccordionDetails>
-      </Accordion>
-    </>
+        <Box display="flex" alignItems="center" width="100%">
+          {resultIcon}
+          {testText}
+          {renderProblemBadge(messageTypeCounts)}
+          {requestsBadge}
+          {testRunButton}
+        </Box>
+      </AccordionSummary>
+      <Divider />
+      {/* Remove default tooltip on hover */}
+      <AccordionDetails
+        title={itemMouseHover ? '' : `${test.id}-detail`}
+        data-testid={`${test.id}-detail`}
+        className={classes.accordionDetailContainer}
+        onClick={(e) => e.stopPropagation()}
+      >
+        {view === 'run' && (
+          <TestRunDetail
+            test={test}
+            tabs={tabs}
+            currentTabIndex={tabIndex}
+            setTabIndex={setTabIndex}
+            updateRequest={updateRequest}
+          />
+        )}
+        {view === 'report' && showReportDetails && reportDetails}
+      </AccordionDetails>
+    </Accordion>
   );
 };
 
diff --git a/client/src/components/TestSuite/TestSuiteDetails/TestListItem/styles.tsx b/client/src/components/TestSuite/TestSuiteDetails/TestListItem/styles.tsx
index 664c3ed24..94b472764 100644
--- a/client/src/components/TestSuite/TestSuiteDetails/TestListItem/styles.tsx
+++ b/client/src/components/TestSuite/TestSuiteDetails/TestListItem/styles.tsx
@@ -1,5 +1,6 @@
 import { Theme } from '@mui/material/styles';
 import { makeStyles } from 'tss-react/mui';
+import { darken } from '@mui/material/styles';
 
 export default makeStyles()((theme: Theme) => ({
   root: {
@@ -70,6 +71,9 @@ export default makeStyles()((theme: Theme) => ({
     '&:not(last-child)': {
       borderBottom: `1px solid ${theme.palette.divider}`,
     },
+    '@media print': {
+      borderBottom: 'none !important',
+    },
   },
   accordionSummary: {
     userSelect: 'auto',
@@ -82,7 +86,7 @@ export default makeStyles()((theme: Theme) => ({
     },
   },
   accordionDetailContainer: {
-    backgroundColor: theme.palette.common.grayLighter,
+    backgroundColor: darken(theme.palette.common.grayLight, 0.1),
     padding: '16px',
     '@media print': {
       padding: '0 16px',
@@ -100,7 +104,7 @@ export default makeStyles()((theme: Theme) => ({
     margin: '0 8px',
     padding: '0.25em 0.25em', // offset for hover styling
     '&:hover': {
-      background: theme.palette.common.grayLightest,
+      background: theme.palette.common.grayLight,
       borderRadius: '50%',
     },
   },
@@ -110,13 +114,13 @@ export default makeStyles()((theme: Theme) => ({
     color: theme.palette.error.dark,
   },
   warning: {
-    color: theme.palette.common.orangeDarker,
+    color: theme.palette.primary.dark,
   },
   info: {
     color: theme.palette.info.dark,
   },
   request: {
-    color: theme.palette.secondary.main,
+    color: theme.palette.info.main,
   },
 
   // common styling for the badge component inside a ProblemBadge
@@ -140,8 +144,8 @@ export default makeStyles()((theme: Theme) => ({
   },
   warningBadge: {
     '& .MuiBadge-badge': {
-      color: theme.palette.common.orangeDarker,
-      border: `1px solid ${theme.palette.common.orangeDarker}`,
+      color: theme.palette.primary.dark,
+      border: `1px solid ${theme.palette.primary.dark}`,
     },
   },
   infoBadge: {
@@ -152,8 +156,8 @@ export default makeStyles()((theme: Theme) => ({
   },
   requestBadge: {
     '& .MuiBadge-badge': {
-      color: theme.palette.secondary.main,
-      border: `1px solid ${theme.palette.secondary.main}`,
+      color: theme.palette.info.dark,
+      border: `1px solid ${theme.palette.info.dark}`,
     },
   },
 }));
diff --git a/client/src/components/TestSuite/TestSuiteDetails/TestSuiteReport.tsx b/client/src/components/TestSuite/TestSuiteDetails/TestSuiteReport.tsx
index 4578d5911..c9fce83e2 100644
--- a/client/src/components/TestSuite/TestSuiteDetails/TestSuiteReport.tsx
+++ b/client/src/components/TestSuite/TestSuiteDetails/TestSuiteReport.tsx
@@ -8,6 +8,7 @@ import {
   Box,
   Button,
   Card,
+  Divider,
   FormControlLabel,
   FormGroup,
   IconButton,
@@ -50,9 +51,7 @@ const TestSuiteReport: FC<TestSuiteReportProps> = ({ testSuite, suiteOptions, up
               control={
                 <Switch
                   checked={showDetails}
-                  onChange={() => {
-                    setShowDetails(!showDetails);
-                  }}
+                  onChange={() => setShowDetails(!showDetails)}
                   inputProps={{ 'aria-label': 'controlled' }}
                   color="secondary"
                 />
@@ -82,29 +81,25 @@ const TestSuiteReport: FC<TestSuiteReportProps> = ({ testSuite, suiteOptions, up
           )}
         </span>
       </Box>
+      <Divider />
       <Box p={1}>
         <Box className={classes.reportSummaryItems}>
           <Box px={2}>
-            <Typography
-              variant="h5"
-              component="h1"
-              textTransform="uppercase"
-              sx={{ fontWeight: 'bold' }}
-            >
+            <Typography variant="h5" component="h1" textTransform="uppercase" fontWeight="bold">
               {testSuite.result?.result || 'pending'}
             </Typography>
             <Typography variant="button">Final Result</Typography>
           </Box>
           {testSuite.version && (
             <Box px={2}>
-              <Typography variant="h5" component="h1" sx={{ fontWeight: 'bold' }}>
+              <Typography variant="h5" component="h1" fontWeight="bold">
                 {testSuite.version}
               </Typography>
               <Typography variant="button">Version</Typography>
             </Box>
           )}
           <Box px={2}>
-            <Typography variant="h5" component="h1" sx={{ fontWeight: 'bold' }}>
+            <Typography variant="h5" component="h1" fontWeight="bold">
               {Intl.DateTimeFormat('en', {
                 year: 'numeric',
                 month: 'short',
diff --git a/client/src/components/TestSuite/TestSuiteDetails/styles.tsx b/client/src/components/TestSuite/TestSuiteDetails/styles.tsx
index 15d0cf917..26f017db2 100644
--- a/client/src/components/TestSuite/TestSuiteDetails/styles.tsx
+++ b/client/src/components/TestSuite/TestSuiteDetails/styles.tsx
@@ -12,7 +12,7 @@ export default makeStyles()((theme: Theme) => ({
     display: 'inline',
     fontWeight: 'bold',
     alignSelf: 'center',
-    color: theme.palette.common.grayDarker,
+    color: theme.palette.common.grayDark,
   },
   testGroupCardHeader: {
     display: 'flex',
@@ -20,7 +20,7 @@ export default makeStyles()((theme: Theme) => ({
     alignItems: 'center',
     minHeight: '36.5px',
     padding: '8px 16px',
-    backgroundColor: theme.palette.common.blueGrayLightest,
+    backgroundColor: theme.palette.common.blueLightest,
     '@media print': {
       padding: '0 8px',
     },
diff --git a/client/src/components/TestSuite/TestSuiteTree/TestSuiteTree.tsx b/client/src/components/TestSuite/TestSuiteTree/TestSuiteTree.tsx
index d6f25406e..145af23a3 100644
--- a/client/src/components/TestSuite/TestSuiteTree/TestSuiteTree.tsx
+++ b/client/src/components/TestSuite/TestSuiteTree/TestSuiteTree.tsx
@@ -9,12 +9,13 @@ import FlagIcon from '@mui/icons-material/Flag';
 import NotificationsIcon from '@mui/icons-material/Notifications';
 import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
 import WarningAmberIcon from '@mui/icons-material/WarningAmber';
-import useStyles from './styles';
-import TestGroupTreeItem from './TestGroupTreeItem';
-import TreeItemLabel from './TreeItemLabel';
+import { useAppStore } from '~/store/app';
 import CustomTreeItem from '~/components/_common/CustomTreeItem';
 import PresetsSelector from '~/components/PresetsSelector/PresetsSelector';
+import TestGroupTreeItem from '~/components/TestSuite/TestSuiteTree/TestGroupTreeItem';
+import TreeItemLabel from '~/components/TestSuite/TestSuiteTree/TreeItemLabel';
 import lightTheme from '~/styles/theme';
+import useStyles from './styles';
 
 export interface TestSuiteTreeProps {
   testSuite: TestSuite;
@@ -43,6 +44,7 @@ const TestSuiteTreeComponent: FC<TestSuiteTreeProps> = ({
   getSessionData,
 }) => {
   const { classes } = useStyles();
+  const windowIsSmall = useAppStore((state) => state.windowIsSmall);
 
   let selectedNode = selectedRunnable;
   if (view === 'report') {
@@ -149,7 +151,7 @@ const TestSuiteTreeComponent: FC<TestSuiteTreeProps> = ({
             // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any
             ContentProps={{ testId: `${testSuite.id}/report` } as any}
           />
-          <Box display="flex" alignItems="flex-end" flexGrow={1} mt={8}>
+          <Box display="flex" alignItems="flex-end" flexGrow={1} mt={windowIsSmall ? 0 : 8}>
             <Box width="100%">{renderConfigMessagesTreeItem()}</Box>
           </Box>
         </TreeView>
diff --git a/client/src/components/TestSuite/TestSuiteTree/styles.tsx b/client/src/components/TestSuite/TestSuiteTree/styles.tsx
index 5c77c78d3..ca2b9b5cc 100644
--- a/client/src/components/TestSuite/TestSuiteTree/styles.tsx
+++ b/client/src/components/TestSuite/TestSuiteTree/styles.tsx
@@ -22,7 +22,7 @@ export default makeStyles()((theme: Theme) => ({
     display: 'inline',
     fontWeight: 'bold',
     alignSelf: 'center',
-    color: theme.palette.common.grayDarker,
+    color: theme.palette.common.grayDark,
   },
   testSuiteTreePanel: {
     display: 'flex',
diff --git a/client/src/components/_common/CollapseButton.tsx b/client/src/components/_common/CollapseButton.tsx
index 579a0943c..92eab9cc9 100644
--- a/client/src/components/_common/CollapseButton.tsx
+++ b/client/src/components/_common/CollapseButton.tsx
@@ -1,26 +1,16 @@
-import React, { FC, useEffect } from 'react';
+import React, { FC } from 'react';
 import { IconButton, IconButtonPropsSizeOverrides } from '@mui/material';
 import { OverridableStringUnion } from '@mui/types';
 import { ExpandLess, ExpandMore } from '@mui/icons-material';
 import CustomTooltip from '~/components/_common/CustomTooltip';
 
 export interface CollapseButtonProps {
+  collapsed: boolean;
   setCollapsed: (collapsed: boolean) => void;
   size?: OverridableStringUnion<'small' | 'large' | 'medium', IconButtonPropsSizeOverrides>;
-  startState?: boolean;
 }
 
-const CollapseButton: FC<CollapseButtonProps> = ({
-  setCollapsed: setParentCollapsed,
-  size,
-  startState = false,
-}) => {
-  const [collapsed, setCollapsed] = React.useState(startState);
-
-  useEffect(() => {
-    setParentCollapsed(collapsed);
-  }, [collapsed]);
-
+const CollapseButton: FC<CollapseButtonProps> = ({ collapsed = false, setCollapsed, size }) => {
   return (
     <CustomTooltip title={collapsed ? 'Expand panel' : 'Collapse panel'}>
       <IconButton
diff --git a/client/src/components/_common/CopyButton.tsx b/client/src/components/_common/CopyButton.tsx
index ed1a7a509..db5b73f99 100644
--- a/client/src/components/_common/CopyButton.tsx
+++ b/client/src/components/_common/CopyButton.tsx
@@ -36,12 +36,15 @@ const CopyButton: FC<CopyButtonProps> = ({ copyText, size, view }) => {
           : {}
       }
     >
-      <Box pr={1}>
+      <Box px={1}>
         <IconButton
           size={size}
           color="secondary"
           aria-label="copy button"
-          onClick={() => void copyTextClick(copyText)}
+          onClick={(e) => {
+            void copyTextClick(copyText);
+            e.stopPropagation();
+          }}
         >
           <ContentCopy fontSize="inherit" />
         </IconButton>
diff --git a/client/src/components/_common/CustomTab.tsx b/client/src/components/_common/CustomTab.tsx
index e59a070f9..e51a3bace 100644
--- a/client/src/components/_common/CustomTab.tsx
+++ b/client/src/components/_common/CustomTab.tsx
@@ -15,9 +15,9 @@ const CustomTab = styled((props: CustomTabProps) => <Tab disableRipple {...props
       color: theme.palette.common.grayDarkest,
     },
     '&.Mui-selected': {
-      color: theme.palette.common.orangeDarker,
+      color: theme.palette.common.orangeDark,
       '&:hover, :focus-within': {
-        color: theme.palette.common.orangeDarkest,
+        color: theme.palette.primary.dark,
       },
     },
   })
diff --git a/client/src/components/_common/CustomTreeItem.tsx b/client/src/components/_common/CustomTreeItem.tsx
index 2c5e00312..150a00b46 100644
--- a/client/src/components/_common/CustomTreeItem.tsx
+++ b/client/src/components/_common/CustomTreeItem.tsx
@@ -109,7 +109,7 @@ const CustomTreeItem = styled((props: TreeItemProps) => (
   <TreeItem ContentComponent={CustomContent} {...props} />
 ))(() => ({
   [`& .${treeItemClasses.selected}`]: {
-    backgroundColor: `${lightTheme.palette.common.orangeLighter} !important`,
+    backgroundColor: `${lightTheme.palette.common.orangeLight} !important`,
   },
   [`& .${treeItemClasses.content}`]: {
     width: 'auto',
diff --git a/client/src/components/_common/SelectionPanel/styles.tsx b/client/src/components/_common/SelectionPanel/styles.tsx
index 9b7d2b5bf..7a5f14edd 100644
--- a/client/src/components/_common/SelectionPanel/styles.tsx
+++ b/client/src/components/_common/SelectionPanel/styles.tsx
@@ -4,7 +4,7 @@ import { makeStyles } from 'tss-react/mui';
 export default makeStyles()((theme: Theme) => ({
   label: {
     '& label.Mui-focused': {
-      color: theme.palette.common.orangeDarkest,
+      color: theme.palette.primary.dark,
     },
   },
   optionsList: {
@@ -16,6 +16,6 @@ export default makeStyles()((theme: Theme) => ({
     overflow: 'auto',
   },
   selectedItem: {
-    backgroundColor: `${theme.palette.common.orangeLighter} !important`,
+    backgroundColor: `${theme.palette.common.orangeLight} !important`,
   },
 }));
diff --git a/client/src/index.css b/client/src/index.css
index 981b5373a..84dfdd1df 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -9,7 +9,8 @@ code {
     monospace;
 }
 
-body, html {
+body,
+html {
   height: 100%;
 }
 
diff --git a/client/src/styles/theme.tsx b/client/src/styles/theme.tsx
index 6ec8556e4..6ee850561 100644
--- a/client/src/styles/theme.tsx
+++ b/client/src/styles/theme.tsx
@@ -4,51 +4,29 @@ import { createTheme } from '@mui/material/styles';
 declare module '@mui/material/styles/createPalette' {
   interface CommonColors {
     white: string;
-    black: string;
-    red: string;
-    orangeLightest: string;
-    orangeLighter: string;
+    orangeLight: string;
     orange: string;
-    orangeDarker: string;
-    orangeDarkest: string;
-    green: string;
-    blue: string;
+    orangeDark: string;
+    blueLightest: string;
     blueLight: string;
-    blueGray: string;
-    blueGrayLighter: string;
-    blueGrayLightest: string;
-    gray: string;
+    blue: string;
     grayLight: string;
-    grayLighter: string;
-    grayLightest: string;
-    grayMedium: string;
+    gray: string;
     grayDark: string;
-    grayDarker: string;
     grayDarkest: string;
   }
 }
 const colors = {
   white: '#fff',
-  black: '#222',
-  red: '#d95d77',
-  orangeLightest: '#fff8f2',
-  orangeLighter: '#ffe4ce',
-  orange: '#f88b30',
-  orangeDarker: '#c05702',
-  orangeDarkest: '#853c00',
-  green: '#2fa874',
-  blue: '#51788d',
+  orangeLight: '#fbe2cd',
+  orange: '#f77a25',
+  orangeDark: '#c05702',
+  blueLightest: '#f1f8ff',
   blueLight: '#9ad2f0',
-  blueGray: '#cbd5df',
-  blueGrayLighter: '#e6ebf2',
-  blueGrayLightest: '#f1f8ff',
+  blue: '#316DB1',
+  grayLight: '#F0F2F1',
   gray: '#707070',
-  grayLight: '#bdbdbd',
-  grayLighter: '#e0e0e0',
-  grayLightest: '#eeeeee',
-  grayMedium: '#757575',
   grayDark: '#616161',
-  grayDarker: '#424242',
   grayDarkest: '#191919',
 };
 
@@ -63,7 +41,10 @@ const paletteBase = {
 };
 
 const lightTheme = createTheme({
-  palette: { ...paletteBase },
+  palette: {
+    ...paletteBase,
+    contrastThreshold: 4.5,
+  },
   typography: {
     h2: {
       fontWeight: 'bold',