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>
inferno-framework · May 11, 2024 · f8dffb1 · f8dffb1
1 parent 993a2b4
commit f8dffb1
Show file tree

Hide file tree

Showing 36 changed files with 282 additions and 322 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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}>