FI-2024: Minor usability review style updates (#372)

* add styled tooltip * convert transparent colors to opaque colors * add focus tab styles * style modal action buttons * add custom styled tab * update link colors to match * update link styling * add empty input field validation --------- Co-authored-by: Alyssa Wang <[email protected]>
inferno-framework · Aug 7, 2023 · f2db6fe · f2db6fe
1 parent 7127f3b
commit f2db6fe
Show file tree

Hide file tree

Showing 36 changed files with 284 additions and 212 deletions.
diff --git a/client/src/components/Footer/Footer.tsx b/client/src/components/Footer/Footer.tsx
@@ -32,8 +32,8 @@ const Footer: FC<FooterProps> = ({ version, linkList }) => {
           href={`${apiBase}?scheme=${scheme}&host=${fullHost}`}
           target="_blank"
           rel="noreferrer"
-          underline="hover"
-          className={`${classes.link} ${classes.logoLink}`}
+          color="secondary"
+          className={classes.link}
           sx={{ fontSize: windowIsSmall ? '0.7rem' : '0.9rem' }}
         >
           API
@@ -99,8 +99,8 @@ const Footer: FC<FooterProps> = ({ version, linkList }) => {
                     href={link.url}
                     target="_blank"
                     rel="noreferrer"
-                    underline="hover"
-                    className={`${classes.link} ${classes.linkText}`}
+                    color="secondary"
+                    className={classes.link}
                     style={{
                       fontSize: '0.8rem',
                     }}
@@ -127,8 +127,8 @@ const Footer: FC<FooterProps> = ({ version, linkList }) => {
                   href={link.url}
                   target="_blank"
                   rel="noreferrer"
-                  underline="hover"
-                  className={`${classes.link} ${classes.linkText}`}
+                  color="secondary"
+                  className={classes.link}
                   style={{
                     fontSize: '1.1rem',
                     margin: '0 16px',

diff --git a/client/src/components/Footer/styles.tsx b/client/src/components/Footer/styles.tsx
@@ -12,7 +12,7 @@ export default makeStyles()((theme: Theme) => ({
     overflow: 'auto',
     zIndex: `${theme.zIndex.drawer + 1} !important` as any,
     backgroundColor: theme.palette.common.orangeLightest,
-    borderTop: `1px ${theme.palette.common.grayLighter} solid`,
+    borderTop: `1px ${theme.palette.divider} solid`,
     bottom: 0,
     '@media print': {
       display: 'none',
@@ -37,11 +37,4 @@ export default makeStyles()((theme: Theme) => ({
     fontWeight: 'bolder',
     width: 'max-content',
   },
-  logoLink: {
-    fontStyle: 'normal',
-    color: theme.palette.common.orangeDarkest,
-  },
-  linkText: {
-    color: theme.palette.common.grayDark,
-  },
 }));
diff --git a/client/src/components/InputsModal/InputCheckboxGroup.tsx b/client/src/components/InputsModal/InputCheckboxGroup.tsx
@@ -94,6 +94,7 @@ const InputCheckboxGroup: FC<InputCheckboxGroupProps> = ({
         id={`requirement${index}_input`}
         disabled={requirement.locked}
         fullWidth
+        className={classes.inputField}
       >
         <FormLabel required={!requirement.optional} className={classes.inputLabel}>
           <FieldLabel requirement={requirement} />

diff --git a/client/src/components/InputsModal/InputOAuthCredentials.tsx b/client/src/components/InputsModal/InputOAuthCredentials.tsx
@@ -100,6 +100,7 @@ const InputOAuthCredentials: FC<InputOAuthCredentialsProps> = ({
         <TextField
           disabled={requirement.locked}
           required={field.required}
+          error={field.required && !oAuthCredentials[field.name as keyof OAuthCredentials]}
           id={`requirement${index}_${field.name}`}
           label={fieldLabel}
           helperText={requirement.description}

diff --git a/client/src/components/InputsModal/InputRadioGroup.tsx b/client/src/components/InputsModal/InputRadioGroup.tsx
@@ -48,6 +48,7 @@ const InputRadioGroup: FC<InputRadioGroupProps> = ({
         id={`requirement${index}_input`}
         disabled={requirement.locked}
         fullWidth
+        className={classes.inputField}
       >
         <FormLabel required={!requirement.optional} className={classes.inputLabel}>
           <FieldLabel requirement={requirement} />

diff --git a/client/src/components/InputsModal/InputTextArea.tsx b/client/src/components/InputsModal/InputTextArea.tsx
@@ -14,12 +14,14 @@ export interface InputTextAreaProps {
 
 const InputTextArea: FC<InputTextAreaProps> = ({ requirement, index, inputsMap, setInputsMap }) => {
   const { classes } = useStyles();
+  const [hasBeenModified, setHasBeenModified] = React.useState(false);
 
   return (
     <ListItem>
       <TextField
         disabled={requirement.locked}
         required={!requirement.optional}
+        error={hasBeenModified && !requirement.optional && !inputsMap.get(requirement.name)}
         id={`requirement${index}_input`}
         className={classes.inputField}
         variant="standard"
@@ -33,6 +35,7 @@ const InputTextArea: FC<InputTextAreaProps> = ({ requirement, index, inputsMap,
           const value = event.target.value;
           inputsMap.set(requirement.name, value);
           setInputsMap(new Map(inputsMap));
+          setHasBeenModified(true);
         }}
         FormHelperTextProps={{
           sx: { '&.Mui-disabled': { color: lightTheme.palette.common.grayDark } },

diff --git a/client/src/components/InputsModal/InputTextField.tsx b/client/src/components/InputsModal/InputTextField.tsx
@@ -19,12 +19,14 @@ const InputTextField: FC<InputTextFieldProps> = ({
   setInputsMap,
 }) => {
   const { classes } = useStyles();
+  const [hasBeenModified, setHasBeenModified] = React.useState(false);
 
   return (
     <ListItem>
       <TextField
         disabled={requirement.locked}
         required={!requirement.optional}
+        error={hasBeenModified && !requirement.optional && !inputsMap.get(requirement.name)}
         id={`requirement${index}_input`}
         className={classes.inputField}
         variant="standard"
@@ -36,6 +38,7 @@ const InputTextField: FC<InputTextFieldProps> = ({
           const value = event.target.value;
           inputsMap.set(requirement.name, value);
           setInputsMap(new Map(inputsMap));
+          setHasBeenModified(true);
         }}
         InputLabelProps={{ shrink: true }}
         FormHelperTextProps={{

diff --git a/client/src/components/InputsModal/InputsModal.tsx b/client/src/components/InputsModal/InputsModal.tsx
@@ -11,6 +11,8 @@ import {
   ToggleButtonGroup,
   ToggleButton,
   Typography,
+  Paper,
+  Box,
 } from '@mui/material';
 import ReactMarkdown from 'react-markdown';
 import YAML from 'js-yaml';
@@ -298,65 +300,75 @@ const InputsModal: FC<InputsModalProps> = ({
           ) : (
             <TextField
               id={`${inputType}-serial-input`}
-              fullWidth
-              multiline
               minRows={4}
               key={baseInput}
               error={invalidInput}
               defaultValue={baseInput}
+              label={invalidInput ? `ERROR: INVALID ${inputType}` : inputType}
+              InputProps={{
+                classes: {
+                  input: classes.serialInput,
+                },
+              }}
+              fullWidth
+              multiline
               data-testid="serial-input"
-              className={classes.serialInput}
               onChange={(e) => handleSerialChanges(e.target.value)}
-              label={invalidInput ? `ERROR: INVALID ${inputType}` : inputType}
             />
           )}
         </main>
       </DialogContent>
       <DialogActions className={classes.dialogActions}>
-        <ToggleButtonGroup
-          exclusive
-          role="group"
-          color="primary"
-          size="small"
-          value={inputType}
-          onChange={handleInputTypeChange}
-          className={classes.toggleButtonGroup}
-        >
-          <ToggleButton
-            value="Field"
-            disabled={invalidInput}
-            data-testid="field-button"
-            className={classes.toggleButton}
-          >
-            Field
-          </ToggleButton>
-          <ToggleButton
-            value="JSON"
-            disabled={invalidInput}
-            data-testid="json-button"
-            className={classes.toggleButton}
+        <Paper elevation={0} className={classes.toggleButtonGroupContainer}>
+          <ToggleButtonGroup
+            exclusive
+            role="group"
+            color="secondary"
+            size="small"
+            value={inputType}
+            onChange={handleInputTypeChange}
+            className={classes.toggleButtonGroup}
           >
-            JSON
-          </ToggleButton>
-          <ToggleButton
-            value="YAML"
-            disabled={invalidInput}
-            data-testid="yaml-button"
-            className={classes.toggleButton}
+            <ToggleButton
+              value="Field"
+              disabled={invalidInput}
+              data-testid="field-button"
+              className={classes.toggleButton}
+            >
+              Field
+            </ToggleButton>
+            <ToggleButton
+              value="JSON"
+              disabled={invalidInput}
+              data-testid="json-button"
+              className={classes.toggleButton}
+            >
+              JSON
+            </ToggleButton>
+            <ToggleButton
+              value="YAML"
+              disabled={invalidInput}
+              data-testid="yaml-button"
+              className={classes.toggleButton}
+            >
+              YAML
+            </ToggleButton>
+          </ToggleButtonGroup>
+        </Paper>
+        <Box>
+          <Button color="secondary" data-testid="cancel-button" onClick={closeModal} sx={{ mr: 1 }}>
+            Cancel
+          </Button>
+          <Button
+            color="secondary"
+            variant="contained"
+            disableElevation
+            onClick={submitClicked}
+            disabled={missingRequiredInput || invalidInput}
           >
-            YAML
-          </ToggleButton>
-        </ToggleButtonGroup>
-        <Button data-testid="cancel-button" className={classes.inputAction} onClick={closeModal}>
-          Cancel
-        </Button>
-        <Button
-          onClick={submitClicked}
-          disabled={missingRequiredInput || invalidInput}
-          className={classes.inputAction}
-        >
-          Submit
-        </Button>
+            Submit
+          </Button>
+        </Box>
       </DialogActions>
     </Dialog>
   );

diff --git a/client/src/components/InputsModal/RequiredInputWarning.tsx b/client/src/components/InputsModal/RequiredInputWarning.tsx
@@ -1,12 +1,12 @@
-import { Tooltip } from '@mui/material';
 import React, { FC } from 'react';
 import WarningIcon from '@mui/icons-material/Warning';
+import CustomTooltip from '~/components/_common/CustomTooltip';
 
 const RequiredInputWarning: FC = () => {
   return (
-    <Tooltip title="Missing value for required input">
-      <WarningIcon />
-    </Tooltip>
+    <CustomTooltip title="Missing value for required input">
+      <WarningIcon fontSize="small" color="error" />
+    </CustomTooltip>
   );
 };
 

diff --git a/client/src/components/InputsModal/styles.tsx b/client/src/components/InputsModal/styles.tsx
@@ -10,17 +10,20 @@ export default makeStyles()((theme: Theme) => ({
   inputField: {
     '& > label.MuiInputLabel-shrink': {
       fontWeight: 600,
-      color: 'rgba(0,0,0,0.85)',
+      color: theme.palette.common.grayDarkest,
     },
     '& label.Mui-focused': {
-      color: theme.palette.primary.main,
+      color: theme.palette.common.orangeDarkest,
     },
     '& label.Mui-disabled': {
       color: theme.palette.common.gray,
     },
+    '& label.Mui-error': {
+      color: theme.palette.error.main,
+    },
   },
   inputLabel: {
-    color: 'rgba(0,0,0,0.85)',
+    color: theme.palette.common.grayDarkest,
     fontWeight: 600,
     fontSize: '.75rem',
   },
@@ -31,26 +34,48 @@ export default makeStyles()((theme: Theme) => ({
   oauthCard: {
     width: '100%',
     margin: '8px 0',
-    borderColor: 'rgba(0,0,0,0.3)',
+    borderColor: theme.palette.common.grayLight,
     '&:focus-within': {
       borderColor: theme.palette.primary.main,
     },
   },
-  inputAction: {
-    color: theme.palette.primary.dark,
-  },
   serialInput: {
     height: 'max-content',
+    fontFamily: 'monospace',
   },
   dialogActions: {
     display: 'flex',
+    justifyContent: 'space-between',
+  },
+  toggleButtonGroupContainer: {
+    display: 'flex',
+    border: `1px solid ${theme.palette.divider}`,
+    flexWrap: 'wrap',
   },
   toggleButtonGroup: {
     flexGrow: 1,
+    '& .MuiToggleButtonGroup-grouped': {
+      margin: theme.spacing(0.5),
+      border: 0,
+      '&.Mui-disabled': {
+        border: 0,
+      },
+      '&:not(:first-of-type), :first-of-type': {
+        borderRadius: theme.shape.borderRadius,
+      },
+    },
   },
   toggleButton: {
+    color: theme.palette.common.grayDark,
+    '&:hover, :focus-within': {
+      backgroundColor: theme.palette.common.grayLightest,
+      fontWeight: 'bolder',
+    },
     '&.Mui-selected': {
-      color: theme.palette.primary.dark,
+      backgroundColor: 'unset',
+      border: `1px solid ${theme.palette.secondary.main} !important`,
+      color: theme.palette.secondary.main,
+      fontWeight: 'bolder',
     },
   },
 }));