CE-752 Final style updates for helpContent

.circleci/config.yml

@@ -2,7 +2,7 @@ version: 2.1
 
 orbs:
   node: circleci/node@5.1.0
-  browser-tools: circleci/browser-tools@1.4.5
+  browser-tools: circleci/browser-tools@1.4.6
 
 executors:
   java17:

package.json

@@ -6,7 +6,7 @@
       "@auth0/auth0-react": "1.10.2",
       "@emotion/react": "11.7.1",
       "@emotion/styled": "11.6.0",
-      "@kingsrook/qqq-frontend-core": "1.0.83",
+      "@kingsrook/qqq-frontend-core": "1.0.85",
       "@mui/icons-material": "5.4.1",
       "@mui/material": "5.11.1",
       "@mui/styles": "5.11.1",
@@ -42,6 +42,7 @@
       "react-dom": "18.0.0",
       "react-github-btn": "1.2.1",
       "react-google-drive-picker": "^1.2.0",
+      "react-markdown": "9.0.1",
       "react-router-dom": "6.2.1",
       "react-router-hash-link": "2.4.3",
       "react-table": "7.7.0",

pom.xml

@@ -77,13 +77,13 @@
       <dependency>
          <groupId>org.seleniumhq.selenium</groupId>
          <artifactId>selenium-java</artifactId>
-         <version>4.10.0</version>
+         <version>4.15.0</version>
          <scope>test</scope>
       </dependency>
       <dependency>
          <groupId>io.github.bonigarcia</groupId>
          <artifactId>webdrivermanager</artifactId>
-         <version>5.4.1</version>
+         <version>5.6.2</version>
          <scope>test</scope>
       </dependency>
       <dependency>

src/App.tsx

@@ -36,7 +36,7 @@ import {LicenseInfo} from "@mui/x-license-pro";
 import jwt_decode from "jwt-decode";
 import React, {JSXElementConstructor, Key, ReactElement, useEffect, useState,} from "react";
 import {useCookies} from "react-cookie";
-import {Navigate, Route, Routes, useLocation,} from "react-router-dom";
+import {Navigate, Route, Routes, useLocation, useSearchParams,} from "react-router-dom";
 import {Md5} from "ts-md5/dist/md5";
 import CommandMenu from "CommandMenu";
 import QContext from "QContext";
@@ -226,6 +226,7 @@ export default function App()
    const {miniSidenav, direction, layout, openConfigurator, sidenavColor} = controller;
    const [onMouseEnter, setOnMouseEnter] = useState(false);
    const {pathname} = useLocation();
+   const [queryParams] = useSearchParams();
 
    const [needToLoadRoutes, setNeedToLoadRoutes] = useState(true);
    const [sideNavRoutes, setSideNavRoutes] = useState([]);
@@ -517,7 +518,7 @@ export default function App()
                name: loggedInUser?.name ?? "Anonymous",
                key: "username",
                noCollapse: true,
-               icon: <Avatar src={profilePicture} alt="{user?.name}" />,
+               icon: <Avatar src={profilePicture} alt="{loggedInUser?.name}" />,
             };
             setProfileRoutes(profileRoutes);
 
@@ -659,6 +660,8 @@ export default function App()
    const [tableProcesses, setTableProcesses] = useState(null);
    const [dotMenuOpen, setDotMenuOpen] = useState(false);
    const [keyboardHelpOpen, setKeyboardHelpOpen] = useState(false);
+   const [helpHelpActive] = useState(queryParams.has("helpHelp"));
+
    return (
 
       appRoutes && (
@@ -669,6 +672,7 @@ export default function App()
             tableProcesses: tableProcesses,
             dotMenuOpen: dotMenuOpen,
             keyboardHelpOpen: keyboardHelpOpen,
+            helpHelpActive: helpHelpActive,
             setPageHeader: (header: string | JSX.Element) => setPageHeader(header),
             setAccentColor: (accentColor: string) => setAccentColor(accentColor),
             setTableMetaData: (tableMetaData: QTableMetaData) => setTableMetaData(tableMetaData),
@@ -700,4 +704,4 @@ export default function App()
          </QContext.Provider>
       )
    );
-}
+}

src/QContext.tsx

@@ -51,6 +51,7 @@ interface QContext
    ///////////////////////////////////
    pathToLabelMap?: {[path: string]: string};
    branding?: QBrandingMetaData;
+   helpHelpActive?: boolean;
 }
 
 const defaultState = {
@@ -59,6 +60,7 @@ const defaultState = {
    dotMenuOpen: false,
    keyboardHelpOpen: false,
    pathToLabelMap: {},
+   helpHelpActive: false,
 };
 
 const QContext = createContext<QContext>(defaultState);

src/qqq/assets/theme-dark/base/typography.ts

@@ -149,7 +149,7 @@ interface Types {
 }
 
 const baseProperties = {
-  fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+  fontFamily: '"SF Pro Display", "Roboto", "Helvetica", "Arial", sans-serif',
   fontWeightLighter: 100,
   fontWeightLight: 300,
   fontWeightRegular: 400,

src/qqq/assets/theme/base/colors.ts

@@ -78,6 +78,19 @@ interface Types
       light: string;
       main: string;
       focus: string;
+   }
+   blueGray:
+      | {
+      main: string;
+   }
+   gray:
+      | {
+      main: string;
+      focus: string;
+   }
+   grayLines:
+      | {
+      main: string;
    }
       | any;
    primary: ColorsTypes | any;
@@ -174,6 +187,19 @@ const colors: Types = {
       focus: "#ffffff",
    },
 
+   blueGray: {
+      main: "#546E7A"
+   },
+
+   gray: {
+      main: "#757575",
+      focus: "#757575",
+   },
+
+   grayLines: {
+      main: "#D6D6D6"
+   },
+
    black: {
       light: "#000000",
       main: "#000000",
@@ -216,7 +242,7 @@ const colors: Types = {
    },
 
    dark: {
-      main: "#344767",
+      main: "#212121",
       focus: "#2c3c58",
    },
 

src/qqq/assets/theme/base/typography.ts

@@ -149,7 +149,7 @@ interface Types {
 }
 
 const baseProperties = {
-  fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+  fontFamily: '"SF Pro Display", "Roboto", "Helvetica", "Arial", sans-serif',
   fontWeightLighter: 100,
   fontWeightLight: 300,
   fontWeightRegular: 400,
@@ -199,9 +199,10 @@ const typography: Types = {
   },
 
   h3: {
-    fontSize: pxToRem(30),
+    fontSize: "1.75rem",
     lineHeight: 1.375,
     ...baseHeadingProperties,
+    fontWeight: 600
   },
 
   h4: {
@@ -217,9 +218,10 @@ const typography: Types = {
   },
 
   h6: {
-    fontSize: pxToRem(16),
+    fontSize: "1.125rem",
     lineHeight: 1.625,
     ...baseHeadingProperties,
+    fontWeight: 500
   },
 
   subtitle1: {

src/qqq/assets/theme/components/card/index.ts

@@ -42,7 +42,7 @@ const card: Types = {
          wordWrap: "break-word",
          backgroundColor: white.main,
          backgroundClip: "border-box",
-         border: `${borderWidth[1]} solid ${rgba(black.main, 0.25)}`,
+         border: `${borderWidth[1]} solid ${colors.grayLines.main}`,
          borderRadius: borderRadius.xl,
          overflow: "visible",
       },

src/qqq/assets/theme/components/tabs/index.ts

@@ -33,7 +33,10 @@ const tabs: Types = {
          borderBottomColor: grey[400],
          minHeight: "unset",
          padding: "0",
-         margin: "0"
+         margin: "0",
+         "& button": {
+            fontWeight: 500
+         }
       },
 
       scroller: {

src/qqq/assets/theme/components/tooltip.ts

@@ -48,7 +48,7 @@ const tooltip: Types = {
       borderRadius: borderRadius.md,
       opacity: 0.7,
       padding: "1rem",
-      boxShadow: "rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px"
+      boxShadow: "0px 0px 12px rgba(128, 128, 128, 0.40)"
     },
 
     arrow: {

src/qqq/components/audits/AuditBody.tsx

@@ -402,14 +402,16 @@ function AuditBody({tableMetaData, recordId, record}: Props): JSX.Element
 
                      return (
                         <Box key={audit0.values.get("id")} className="auditGroupBlock">
-                           <Box display="flex" flexDirection="row" justifyContent="center" fontSize={14}>
+                           <Box position="sticky" top="0" zIndex={3}>
-                              <Box borderTop={1} mt={1.25} mr={1} width="100%" borderColor="#B0B0B0" />
+                              <Box display="flex" flexDirection="row" justifyContent="center" fontSize={14} position={"relative"} top={"-1px"} pb={"6px"} sx={{backgroundImage: "linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,1) 80%, rgba(255,255,255,0))"}}>
-                              <Box whiteSpace="nowrap">
+                                 <Box borderTop={1} mt={1.25} mr={1} width="100%" borderColor="#B0B0B0" />
-                                 {ValueUtils.getFullWeekday(audit0.values.get("timestamp"))} {timestampParts[0]}
+                                 <Box whiteSpace="nowrap">
-                                 {timestampParts[0] == todayFormatted ? " (Today)" : ""}
+                                    {ValueUtils.getFullWeekday(audit0.values.get("timestamp"))} {timestampParts[0]}
-                                 {timestampParts[0] == yesterdayFormatted ? " (Yesterday)" : ""}
+                                    {timestampParts[0] == todayFormatted ? " (Today)" : ""}
+                                    {timestampParts[0] == yesterdayFormatted ? " (Yesterday)" : ""}
+                                 </Box>
+                                 <Box borderTop={1} mt={1.25} ml={1} width="100%" borderColor="#B0B0B0" />
                               </Box>
-                              <Box borderTop={1} mt={1.25} ml={1} width="100%" borderColor="#B0B0B0" />
                            </Box>
 
                            {

src/qqq/components/forms/BooleanFieldSwitch.tsx

@@ -29,8 +29,8 @@ import React, {SyntheticEvent} from "react";
 import colors from "qqq/assets/theme/base/colors";
 
 const AntSwitch = styled(Switch)(({theme}) => ({
-   width: 28,
+   width: 32,
-   height: 16,
+   height: 20,
    padding: 0,
    display: "flex",
    "&:active": {
@@ -54,18 +54,19 @@ const AntSwitch = styled(Switch)(({theme}) => ({
    },
    "& .MuiSwitch-thumb": {
       boxShadow: "0 2px 4px 0 rgb(0 35 11 / 20%)",
-      width: 12,
+      width: 16,
-      height: 12,
+      height: 16,
-      borderRadius: 6,
+      borderRadius: 8,
       transition: theme.transitions.create([ "width" ], {
          duration: 200,
       }),
    },
    "&.nullSwitch .MuiSwitch-thumb": {
-      width: 24,
+      width: 28,
    },
    "& .MuiSwitch-track": {
-      borderRadius: 16 / 2,
+      height: 20,
+      borderRadius: 20 / 2,
       opacity: 1,
       backgroundColor:
          theme.palette.mode === "dark" ? "rgba(255,255,255,.35)" : "rgba(0,0,0,.25)",
@@ -106,9 +107,9 @@ function BooleanFieldSwitch({name, label, value, isDisabled}: Props) : JSX.Eleme
    return (
       <Box bgcolor={isDisabled ? colors.grey[200] : ""}>
          <InputLabel shrink={true}>{label}</InputLabel>
-         <Stack direction="row" spacing={1} alignItems="center">
+         <Stack direction="row" spacing={1} alignItems="center" height="37px">
             <Typography
-               fontSize="0.875rem"
+               fontSize="1rem"
                color={value === false ? "auto" : "#bfbfbf" }
                onClick={(e) => setSwitch(e, false)}
                sx={{cursor: value === false || isDisabled ? "inherit" : "pointer"}}>
@@ -116,7 +117,7 @@ function BooleanFieldSwitch({name, label, value, isDisabled}: Props) : JSX.Eleme
             </Typography>
             <AntSwitch className={classNullSwitch} name={name} checked={value} onClick={toggleSwitch} disabled={isDisabled} />
             <Typography
-               fontSize="0.875rem"
+               fontSize="1rem"
                color={value === true ? "auto" : "#bfbfbf"}
                onClick={(e) => setSwitch(e, true)}
                sx={{cursor: value === true || isDisabled ? "inherit" : "pointer"}}>

src/qqq/components/forms/DynamicForm.tsx

@@ -32,6 +32,7 @@ import React, {useState} from "react";
 import QDynamicFormField from "qqq/components/forms/DynamicFormField";
 import DynamicSelect from "qqq/components/forms/DynamicSelect";
 import MDTypography from "qqq/components/legacy/MDTypography";
+import HelpContent from "qqq/components/misc/HelpContent";
 import ValueUtils from "qqq/utils/qqq/ValueUtils";
 
 interface Props
@@ -41,16 +42,13 @@ interface Props
    bulkEditMode?: boolean;
    bulkEditSwitchChangeHandler?: any;
    record?: QRecord;
+   helpRoles?: string[];
+   helpContentKeyPrefix?: string;
 }
 
-function QDynamicForm(props: Props): JSX.Element
+function QDynamicForm({formData, formLabel, bulkEditMode, bulkEditSwitchChangeHandler, record, helpRoles, helpContentKeyPrefix}: Props): JSX.Element
 {
-   const {
+   const {formFields, values, errors, touched} = formData;
-      formData, formLabel, bulkEditMode, bulkEditSwitchChangeHandler,
-   } = props;
-   const {
-      formFields, values, errors, touched,
-   } = formData;
 
    const formikProps = useFormikContext();
    const [fileName, setFileName] = useState(null as string);
@@ -70,8 +68,8 @@ function QDynamicForm(props: Props): JSX.Element
    {
       setFileName(null);
       formikProps.setFieldValue(fieldName, null);
-      props.record?.values.delete(fieldName)
+      record?.values.delete(fieldName)
-      props.record?.displayValues.delete(fieldName)
+      record?.displayValues.delete(fieldName)
    };
 
    const bulkEditSwitchChanged = (name: string, value: boolean) =>
@@ -79,6 +77,7 @@ function QDynamicForm(props: Props): JSX.Element
       bulkEditSwitchChangeHandler(name, value);
    };
 
+
    return (
       <Box>
          <Box lineHeight={0}>
@@ -96,29 +95,38 @@ function QDynamicForm(props: Props): JSX.Element
                   && Object.keys(formFields).map((fieldName: any) =>
                   {
                      const field = formFields[fieldName];
+                     if (field.omitFromQDynamicForm)
+                     {
+                        return null;
+                     }
+
                      if (values[fieldName] === undefined)
                      {
                         values[fieldName] = "";
                      }
 
-                     if (field.omitFromQDynamicForm)
+                     let formattedHelpContent = <HelpContent helpContents={field.fieldMetaData.helpContents} roles={helpRoles} helpContentKey={`${helpContentKeyPrefix ?? ""}field:${fieldName}`} />;
+                     if(formattedHelpContent)
                      {
-                        return null;
+                        formattedHelpContent = <Box color="#757575" fontSize="0.875rem" mt="-0.25rem">{formattedHelpContent}</Box>
                      }
 
+                     const labelElement = <Box fontSize="1rem" fontWeight="500" marginBottom="0.25rem">
+                        <label htmlFor={field.name}>{field.label}</label>
+                     </Box>
+
                      if (field.type === "file")
                      {
                         const pseudoField = new QFieldMetaData({name: fieldName, type: QFieldType.BLOB});
                         return (
                            <Grid item xs={12} sm={6} key={fieldName}>
                               <Box mb={1.5}>
-
+                                 {labelElement}
-                                 <InputLabel shrink={true}>{field.label}</InputLabel>
                                  {
-                                    props.record && props.record.values.get(fieldName) && <Box fontSize="0.875rem" pb={1}>
+                                    record && record.values.get(fieldName) && <Box fontSize="0.875rem" pb={1}>
                                        Current File:
                                        <Box display="inline-flex" pl={1}>
-                                          {ValueUtils.getDisplayValue(pseudoField, props.record, "view")}
+                                          {ValueUtils.getDisplayValue(pseudoField, record, "view")}
                                           <Tooltip placement="bottom" title="Remove current file">
                                              <Icon className="blobIcon" fontSize="small" onClick={(e) => removeFile(fieldName)}>delete</Icon>
                                           </Tooltip>
@@ -162,18 +170,20 @@ function QDynamicForm(props: Props): JSX.Element
 
                         return (
                            <Grid item xs={12} sm={6} key={fieldName}>
+                              {labelElement}
                               <DynamicSelect
                                  tableName={field.possibleValueProps.tableName}
                                  processName={field.possibleValueProps.processName}
                                  fieldName={fieldName}
                                  isEditable={field.isEditable}
-                                 fieldLabel={field.label}
+                                 fieldLabel=""
                                  initialValue={values[fieldName]}
                                  initialDisplayValue={field.possibleValueProps.initialDisplayValue}
                                  bulkEditMode={bulkEditMode}
                                  bulkEditSwitchChangeHandler={bulkEditSwitchChanged}
                                  otherValues={otherValuesMap}
                               />
+                              {formattedHelpContent}
                            </Grid>
                         );
                      }
@@ -182,9 +192,11 @@ function QDynamicForm(props: Props): JSX.Element
                      // todo? placeholder={password.placeholder}
                      return (
                         <Grid item xs={12} sm={6} key={fieldName}>
+                           {labelElement}
                            <QDynamicFormField
+                              id={field.name}
                               type={field.type}
-                              label={field.label}
+                              label=""
                               isEditable={field.isEditable}
                               name={fieldName}
                               displayFormat={field.displayFormat}
@@ -195,6 +207,7 @@ function QDynamicForm(props: Props): JSX.Element
                               success={`${values[fieldName]}` !== "" && !errors[fieldName] && touched[fieldName]}
                               formFieldObject={field}
                            />
+                           {formattedHelpContent}
                         </Grid>
                      );
                   })}
@@ -207,6 +220,7 @@ function QDynamicForm(props: Props): JSX.Element
 QDynamicForm.defaultProps = {
    formLabel: undefined,
    bulkEditMode: false,
+   helpRoles: ["ALL_SCREENS"],
    bulkEditSwitchChangeHandler: () =>
    {
    },

src/qqq/components/forms/DynamicFormField.tsx

@@ -25,6 +25,7 @@ import Switch from "@mui/material/Switch";
 import {ErrorMessage, Field, useFormikContext} from "formik";
 import React, {useState} from "react";
 import AceEditor from "react-ace";
+import colors from "qqq/assets/theme/base/colors";
 import BooleanFieldSwitch from "qqq/components/forms/BooleanFieldSwitch";
 import MDInput from "qqq/components/legacy/MDInput";
 import MDTypography from "qqq/components/legacy/MDTypography";
@@ -52,6 +53,7 @@ function QDynamicFormField({
 {
    const [switchChecked, setSwitchChecked] = useState(false);
    const [isDisabled, setIsDisabled] = useState(!isEditable || bulkEditMode);
+   const {inputBorderColor} = colors;
 
    const {setFieldValue} = useFormikContext();
 
@@ -122,7 +124,7 @@ function QDynamicFormField({
                width="100%"
                height="300px"
                value={value}
-               style={{border: "1px solid gray"}}
+               style={{border: `1px solid ${inputBorderColor}`, borderRadius: "0.75rem"}}
             />
          </>
       );
@@ -131,7 +133,7 @@ function QDynamicFormField({
    {
       field = (
          <>
-            <Field {...rest} onWheel={handleOnWheel} name={name} type={type} as={MDInput} variant="standard" label={label} InputLabelProps={inputLabelProps} InputProps={inputProps} fullWidth disabled={isDisabled}
+            <Field {...rest} onWheel={handleOnWheel} name={name} type={type} as={MDInput} variant="outlined" label={label} InputLabelProps={inputLabelProps} InputProps={inputProps} fullWidth disabled={isDisabled}
                onKeyPress={(e: any) =>
                {
                   if (e.key === "Enter")
@@ -171,6 +173,14 @@ function QDynamicFormField({
                   id={`bulkEditSwitch-${name}`}
                   checked={switchChecked}
                   onClick={bulkEditSwitchChanged}
+                  sx={{top: "-4px",
+                     "& .MuiSwitch-track": {
+                        height: 20,
+                        borderRadius: 10,
+                        top: -3,
+                        position: "relative"
+                     }
+                  }}
                />
             </Box>
             <Box width="100%" sx={{background: (type == "checkbox" && isDisabled) ? "#f0f2f5!important" : "initial"}}>

src/qqq/components/forms/DynamicFormUtils.ts

@@ -89,6 +89,7 @@ class DynamicFormUtils
       label += field.isRequired ? " *" : "";
 
       return ({
+         fieldMetaData: field,
          name: field.name,
          label: label,
          isRequired: field.isRequired,

src/qqq/components/forms/DynamicSelect.tsx

@@ -29,6 +29,7 @@ import Switch from "@mui/material/Switch";
 import TextField from "@mui/material/TextField";
 import {ErrorMessage, useFormikContext} from "formik";
 import React, {useEffect, useState} from "react";
+import colors from "qqq/assets/theme/base/colors";
 import MDTypography from "qqq/components/legacy/MDTypography";
 import Client from "qqq/utils/qqq/Client";
 
@@ -49,6 +50,7 @@ interface Props
    bulkEditMode?: boolean;
    bulkEditSwitchChangeHandler?: any;
    otherValues?: Map<string, any>;
+   variant: "standard" | "outlined";
 }
 
 DynamicSelect.defaultProps = {
@@ -63,6 +65,7 @@ DynamicSelect.defaultProps = {
    isMultiple: false,
    bulkEditMode: false,
    otherValues: new Map<string, any>(),
+   variant: "outlined",
    bulkEditSwitchChangeHandler: () =>
    {
    },
@@ -70,12 +73,13 @@ DynamicSelect.defaultProps = {
 
 const qController = Client.getInstance();
 
-function DynamicSelect({tableName, processName, fieldName, overrideId, fieldLabel, inForm, initialValue, initialDisplayValue, initialValues, onChange, isEditable, isMultiple, bulkEditMode, bulkEditSwitchChangeHandler, otherValues}: Props)
+function DynamicSelect({tableName, processName, fieldName, overrideId, fieldLabel, inForm, initialValue, initialDisplayValue, initialValues, onChange, isEditable, isMultiple, bulkEditMode, bulkEditSwitchChangeHandler, otherValues, variant}: Props)
 {
    const [open, setOpen] = useState(false);
    const [options, setOptions] = useState<readonly QPossibleValue[]>([]);
    const [searchTerm, setSearchTerm] = useState(null);
    const [firstRender, setFirstRender] = useState(true);
+   const {inputBorderColor} = colors;
 
    ////////////////////////////////////////////////////////////////////////////////////////////////
    // default value - needs to be an array (from initialValues (array) prop) for multiple mode - //
@@ -230,7 +234,7 @@ function DynamicSelect({tableName, processName, fieldName, overrideId, fieldLabe
       // attributes.  so, doing this, w/ key=id, seemed to fix it.                                 //
       ///////////////////////////////////////////////////////////////////////////////////////////////
       return (
-         <li {...props} key={option.id}>
+         <li {...props} key={option.id} style={{fontSize: "1rem"}}>
             {content}
          </li>
       );
@@ -244,13 +248,35 @@ function DynamicSelect({tableName, processName, fieldName, overrideId, fieldLabe
       bulkEditSwitchChangeHandler(fieldName, newSwitchValue);
    };
 
-   // console.log(`default value: ${JSON.stringify(defaultValue)}`);
+   ////////////////////////////////////////////
+   // for outlined style, adjust some styles //
+   ////////////////////////////////////////////
+   let autocompleteSX = {};
+   if (variant == "outlined")
+   {
+      autocompleteSX = {
+         "& .MuiOutlinedInput-root": {
+            borderRadius: "0.75rem",
+         },
+         "& .MuiInputBase-root": {
+            padding: "0.5rem",
+            background: isDisabled ? "#f0f2f5!important" : "initial",
+         },
+         "& .MuiOutlinedInput-root .MuiAutocomplete-input": {
+            padding: "0",
+            fontSize: "1rem"
+         },
+         "& .Mui-disabled .MuiOutlinedInput-notchedOutline": {
+            borderColor: inputBorderColor
+         }
+      }
+   }
 
    const autocomplete = (
       <Box>
          <Autocomplete
             id={overrideId ?? fieldName}
-            sx={{background: isDisabled ? "#f0f2f5!important" : "initial"}}
+            sx={autocompleteSX}
             open={open}
             fullWidth
             onOpen={() =>
@@ -305,7 +331,7 @@ function DynamicSelect({tableName, processName, fieldName, overrideId, fieldLabe
                <TextField
                   {...params}
                   label={fieldLabel}
-                  variant="standard"
+                  variant={variant}
                   autoComplete="off"
                   type="search"
                   InputProps={{
@@ -341,6 +367,14 @@ function DynamicSelect({tableName, processName, fieldName, overrideId, fieldLabe
                   id={`bulkEditSwitch-${fieldName}`}
                   checked={switchChecked}
                   onClick={bulkEditSwitchChanged}
+                  sx={{top: "-4px",
+                     "& .MuiSwitch-track": {
+                        height: 20,
+                        borderRadius: 10,
+                        top: -3,
+                        position: "relative"
+                     }
+                  }}
                />
             </Box>
             <Box width="100%">

src/qqq/components/forms/EntityForm.tsx

@@ -37,10 +37,12 @@ import React, {useContext, useEffect, useReducer, useState} from "react";
 import {useLocation, useNavigate, useParams} from "react-router-dom";
 import * as Yup from "yup";
 import QContext from "QContext";
+import colors from "qqq/assets/theme/base/colors";
 import {QCancelButton, QSaveButton} from "qqq/components/buttons/DefaultButtons";
 import QDynamicForm from "qqq/components/forms/DynamicForm";
 import DynamicFormUtils from "qqq/components/forms/DynamicFormUtils";
 import MDTypography from "qqq/components/legacy/MDTypography";
+import HelpContent from "qqq/components/misc/HelpContent";
 import QRecordSidebar from "qqq/components/misc/RecordSidebar";
 import HtmlUtils from "qqq/utils/HtmlUtils";
 import Client from "qqq/utils/qqq/Client";
@@ -79,6 +81,7 @@ function EntityForm(props: Props): JSX.Element
    const [validations, setValidations] = useState({});
    const [initialValues, setInitialValues] = useState({} as { [key: string]: any });
    const [formFields, setFormFields] = useState(null as Map<string, any>);
+   const [t1section, setT1Section] = useState(null as QTableSection);
    const [t1sectionName, setT1SectionName] = useState(null as string);
    const [nonT1Sections, setNonT1Sections] = useState([] as QTableSection[]);
 
@@ -151,7 +154,9 @@ function EntityForm(props: Props): JSX.Element
       {
          return <div>Loading...</div>;
       }
-      return <QDynamicForm formData={formData} record={record} />;
+
+      const helpRoles = [props.id ? "EDIT_SCREEN" : "INSERT_SCREEN", "WRITE_SCREENS", "ALL_SCREENS"]
+      return <QDynamicForm formData={formData} record={record} helpRoles={helpRoles} helpContentKeyPrefix={`table:${tableName};`} />;
    }
 
    if (!asyncLoadInited)
@@ -330,6 +335,7 @@ function EntityForm(props: Props): JSX.Element
          /////////////////////////////////////
          const dynamicFormFieldsBySection = new Map<string, any>();
          let t1sectionName;
+         let t1section;
          const nonT1Sections: QTableSection[] = [];
          for (let i = 0; i < tableSections.length; i++)
          {
@@ -382,6 +388,7 @@ function EntityForm(props: Props): JSX.Element
             if (section.tier === "T1")
             {
                t1sectionName = section.name;
+               t1section = section;
             }
             else
             {
@@ -389,6 +396,7 @@ function EntityForm(props: Props): JSX.Element
             }
          }
          setT1SectionName(t1sectionName);
+         setT1Section(t1section);
          setNonT1Sections(nonT1Sections);
          setFormFields(dynamicFormFieldsBySection);
          setValidations(Yup.object().shape(formValidations));
@@ -471,6 +479,10 @@ function EntityForm(props: Props): JSX.Element
                   console.log(`${fieldName} value was a string, so, we're deleting it from the values array, to not submit it to the backend, to not change it.`);
                   delete(valuesToPost[fieldName]);
                }
+               else
+               {
+                  valuesToPost[fieldName] = values[fieldName];
+               }
             }
          }
 
@@ -548,6 +560,19 @@ function EntityForm(props: Props): JSX.Element
    const formId = props.id != null ? `edit-${tableMetaData?.name}-form` : `create-${tableMetaData?.name}-form`;
 
    let body;
+
+   const getSectionHelp = (section: QTableSection) =>
+   {
+      const helpRoles = [props.id ? "EDIT_SCREEN" : "INSERT_SCREEN", "WRITE_SCREENS", "ALL_SCREENS"]
+      const formattedHelpContent = <HelpContent helpContents={section.helpContents} roles={helpRoles} helpContentKey={`table:${tableMetaData.name};section:${section.name}`} />;
+
+      return formattedHelpContent && (
+         <Box px={"1.5rem"} fontSize={"0.875rem"}>
+            {formattedHelpContent}
+         </Box>
+      )
+   }
+
    if (notAllowedError)
    {
       body = (
@@ -569,23 +594,26 @@ function EntityForm(props: Props): JSX.Element
    }
    else
    {
-      const cardElevation = props.isModal ? 3 : 1;
+      const cardElevation = props.isModal ? 3 : 0;
       body = (
          <Box mb={3}>
-            <Grid container spacing={3}>
+            {
-               <Grid item xs={12}>
+               (alertContent || warningContent) &&
-                  {alertContent ? (
+               <Grid container spacing={3}>
-                     <Box mb={3}>
+                  <Grid item xs={12}>
-                        <Alert severity="error" onClose={() => setAlertContent(null)}>{alertContent}</Alert>
+                     {alertContent ? (
-                     </Box>
+                        <Box mb={3}>
-                  ) : ("")}
+                           <Alert severity="error" onClose={() => setAlertContent(null)}>{alertContent}</Alert>
-                  {warningContent ? (
+                        </Box>
-                     <Box mb={3}>
+                     ) : ("")}
-                        <Alert severity="warning" onClose={() => setWarningContent(null)}>{warningContent}</Alert>
+                     {warningContent ? (
-                     </Box>
+                        <Box mb={3}>
-                  ) : ("")}
+                           <Alert severity="warning" onClose={() => setWarningContent(null)}>{warningContent}</Alert>
+                        </Box>
+                     ) : ("")}
+                  </Grid>
                </Grid>
-            </Grid>
+            }
             <Grid container spacing={3}>
                {
                   !props.isModal &&
@@ -623,10 +651,11 @@ function EntityForm(props: Props): JSX.Element
                                        <MDTypography variant="h5">{formTitle}</MDTypography>
                                     </Box>
                                  </Box>
+                                 {t1section && getSectionHelp(t1section)}
                                  {
                                     t1sectionName && formFields ? (
-                                       <Box pb={1} px={3}>
+                                       <Box px={3}>
-                                          <Box p={3} width="100%">
+                                          <Box pb={"0.25rem"} width="100%">
                                              {getFormSection(values, touched, formFields.get(t1sectionName), errors)}
                                           </Box>
                                        </Box>
@@ -640,8 +669,9 @@ function EntityForm(props: Props): JSX.Element
                                     <MDTypography variant="h6" p={3} pb={1}>
                                        {section.label}
                                     </MDTypography>
+                                    {getSectionHelp(section)}
                                     <Box pb={1} px={3}>
-                                       <Box p={3} width="100%">
+                                       <Box pb={"0.75rem"} width="100%">
                                           {getFormSection(values, touched, formFields.get(section.name), errors)}
                                        </Box>
                                     </Box>

src/qqq/components/horseshoe/Breadcrumbs.tsx

@@ -25,6 +25,7 @@ import Icon from "@mui/material/Icon";
 import {ReactNode, useContext} from "react";
 import {Link} from "react-router-dom";
 import QContext from "QContext";
+import colors from "qqq/assets/theme/base/colors";
 import MDTypography from "qqq/components/legacy/MDTypography";
 
 interface Props
@@ -112,43 +113,35 @@ function QBreadcrumbs({icon, title, route, light}: Props): JSX.Element
       <Box mr={{xs: 0, xl: 8}}>
          <MuiBreadcrumbs
             sx={{
+               fontSize: "1.125rem",
+               fontWeight: "500",
+               color: colors.dark.main,
+               "& li": {
+                  lineHeight: "unset!important"
+               },
+               "& a": {
+                  color: colors.gray.main
+               },
                "& .MuiBreadcrumbs-separator": {
-                  color: ({palette: {white, grey}}) => (light ? white.main : grey[600]),
+                  fontSize: "1.125rem",
+                  fontWeight: "500",
+                  color: colors.dark.main
                },
             }}
          >
             <Link to="/">
-               <MDTypography
+               <Icon sx={{fontSize: "1.25rem!important", position: "relative", top: "0.25rem"}}>{icon}</Icon>
-                  component="span"
-                  variant="body2"
-                  color={light ? "white" : "dark"}
-                  opacity={light ? 0.8 : 0.5}
-                  sx={{lineHeight: 0}}
-               >
-                  <Icon>{icon}</Icon>
-               </MDTypography>
             </Link>
             {fullRoutes.map((fullRoute: string) => (
                <Link to={fullRoute} key={fullRoute}>
-                  <MDTypography
+                  {fullPathToLabel(fullRoute, fullRoute.replace(/.*\//, ""))}
-                     component="span"
-                     variant="button"
-                     fontWeight="regular"
-                     textTransform="capitalize"
-                     color={light ? "white" : "dark"}
-                     opacity={light ? 0.8 : 0.5}
-                     sx={{lineHeight: 0}}
-                  >
-                     {fullPathToLabel(fullRoute, fullRoute.replace(/.*\//, ""))}
-                  </MDTypography>
                </Link>
             ))}
          </MuiBreadcrumbs>
          <MDTypography
             pt={1}
-            fontWeight="bold"
             textTransform="capitalize"
-            variant="h5"
+            variant="h3"
             color={light ? "white" : "dark"}
             noWrap
          >

src/qqq/components/horseshoe/NavBar.tsx

@@ -159,7 +159,7 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
             options={history}
             autoHighlight
             blurOnSelect
-            style={{width: "200px"}}
+            style={{width: "16rem"}}
             onOpen={handleHistoryOnOpen}
             onChange={handleAutocompleteOnChange}
             PopperComponent={CustomPopper}

src/qqq/components/horseshoe/Styles.ts

@@ -20,6 +20,7 @@
  */
 
 import {Theme} from "@mui/material/styles";
+import colors from "qqq/assets/theme/base/colors";
 
 function navbar(theme: Theme | any, ownerState: any)
 {
@@ -151,6 +152,16 @@ const navbarDesktopMenu = ({breakpoints}: Theme) => ({
 });
 
 const recentlyViewedMenu = ({breakpoints}: Theme) => ({
+   "& .MuiInputLabel-root": {
+      color: colors.gray.main,
+      fontWeight: "500",
+      fontSize: "1rem"
+   },
+   "& .MuiInputAdornment-root": {
+      marginTop: "0.5rem",
+      color: colors.gray.main,
+      fontSize: "1rem"
+   },
    "& .MuiOutlinedInput-root": {
       borderRadius: "0",
       padding: "0"

src/qqq/components/horseshoe/sidenav/SideNavRoot.tsx

@@ -27,7 +27,7 @@ export default styled(Drawer)(({theme, ownerState}: { theme?: Theme | any; owner
    const {palette, boxShadows, transitions, breakpoints, functions} = theme;
    const {transparentSidenav, whiteSidenav, miniSidenav, darkMode} = ownerState;
 
-   const sidebarWidth = 275;
+   const sidebarWidth = 245;
    const {transparent, gradients, white, background} = palette;
    const {xxl} = boxShadows;
    const {pxToRem, linearGradient} = functions;

src/qqq/components/horseshoe/sidenav/styles/SideNavCollapse.ts

@@ -64,7 +64,8 @@ function collapseItem(theme: Theme, ownerState: any)
       borderRadius: borderRadius.md,
       cursor: "pointer",
       userSelect: "none",
-      whiteSpace: "nowrap",
+      whiteSpace: "wrap",
+      overflow: "hidden",
       boxShadow: active && !whiteSidenav && !darkMode && !transparentSidenav ? md : "none",
       [breakpoints.up("xl")]: {
          transition: transitions.create(["box-shadow", "background-color"], {
@@ -73,6 +74,10 @@ function collapseItem(theme: Theme, ownerState: any)
          }),
       },
 
+      "& .MuiListItemText-primary": {
+         lineHeight: "revert"
+      },
+
       "&:hover, &:focus": {
          backgroundColor:
         transparentSidenav && !darkMode

src/qqq/components/legacy/MDInput/MDInputRoot.tsx

@@ -69,7 +69,15 @@ export default styled(TextField)(({theme, ownerState}: { theme?: Theme; ownerSta
    });
 
    return {
-      backgroundColor: disabled ? `${grey[200]} !important` : transparent.main,
+      "& .MuiInputBase-root": {
+         backgroundColor: disabled ? `${grey[200]} !important` : transparent.main,
+         borderRadius: "0.75rem",
+      },
+      "& input": {
+         backgroundColor: `${transparent.main}!important`,
+         padding: "0.5rem",
+         fontSize: "1rem",
+      },
       pointerEvents: disabled ? "none" : "auto",
       ...(error && errorStyles()),
       ...(success && successStyles()),

src/qqq/components/legacy/Theme/base/typography.ts

@@ -149,7 +149,7 @@ interface Types {
 }
 
 const baseProperties = {
-  fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+  fontFamily: '"SF Pro Display", "Roboto", "Helvetica", "Arial", sans-serif',
   fontWeightLighter: 100,
   fontWeightLight: 300,
   fontWeightRegular: 400,

src/qqq/components/legacy/typography.ts

@@ -153,7 +153,7 @@ interface Types
 }
 
 const baseProperties = {
-   fontFamily: "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
+   fontFamily: "\"SF Pro Display\", \"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
    fontWeightLighter: 100,
    fontWeightLight: 300,
    fontWeightRegular: 400,

src/qqq/components/misc/HelpContent.tsx

@@ -0,0 +1,139 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2023.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import {QHelpContent} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QHelpContent";
+import Box from "@mui/material/Box";
+import parse from "html-react-parser";
+import React, {useContext} from "react";
+import Markdown from "react-markdown";
+import QContext from "QContext";
+
+interface Props
+{
+   helpContents: QHelpContent[];
+   roles: string[];
+   heading?: string;
+   helpContentKey?: string;
+}
+
+HelpContent.defaultProps = {};
+
+
+/*******************************************************************************
+ ** format some content - meaning, change it from string to JSX element(s) or string.
+ ** does a parse() for HTML, and a <Markdown> for markdown, else just text.
+ *******************************************************************************/
+const formatHelpContent = (content: string, format: string): string | JSX.Element | JSX.Element[] =>
+{
+   if (format == "HTML")
+   {
+      return parse(content);
+   }
+   else if (format == "MARKDOWN")
+   {
+      return (<Markdown>{content}</Markdown>)
+   }
+
+   return content;
+}
+
+
+/*******************************************************************************
+ ** return the first help content from the list that matches the first role
+ ** in the roles list.
+ *******************************************************************************/
+const getMatchingHelpContent = (helpContents: QHelpContent[], roles: string[]): QHelpContent =>
+{
+   if (helpContents)
+   {
+      if (helpContents.length == 1 && helpContents[0].roles.size == 0)
+      {
+         //////////////////////////////////////////////////////////////////////////////////////////////////
+         // if there's only 1 entry, and it has no roles, then assume user wanted it globally and use it //
+         //////////////////////////////////////////////////////////////////////////////////////////////////
+         return (helpContents[0]);
+      }
+      else
+      {
+         for (let i = 0; i < roles.length; i++)
+         {
+            for (let j = 0; j < helpContents.length; j++)
+            {
+               if (helpContents[j].roles.has(roles[i]))
+               {
+                  return(helpContents[j])
+               }
+            }
+         }
+      }
+   }
+
+   return (null);
+}
+
+
+/*******************************************************************************
+ ** test if a list of help contents would find any matches from a list of roles.
+ *******************************************************************************/
+export const hasHelpContent = (helpContents: QHelpContent[], roles: string[]) =>
+{
+   return getMatchingHelpContent(helpContents, roles) != null;
+}
+
+
+/*******************************************************************************
+ ** component that renders a box of formatted help content, from a list of
+ ** helpContents (from meta-data), and for a list of roles (based on what screen
+ *******************************************************************************/
+function HelpContent({helpContents, roles, heading, helpContentKey}: Props): JSX.Element
+{
+   const {helpHelpActive} = useContext(QContext);
+   let selectedHelpContent = getMatchingHelpContent(helpContents, roles);
+
+   let content = null;
+   if (helpHelpActive)
+   {
+      if (!selectedHelpContent)
+      {
+         selectedHelpContent = new QHelpContent({content: ""});
+      }
+      content = selectedHelpContent.content + ` [${helpContentKey ?? "?"}]`;
+   }
+   else if(selectedHelpContent)
+   {
+      content = selectedHelpContent.content;
+   }
+
+   ///////////////////////////////////////////////////
+   // if content was found, format it and return it //
+   ///////////////////////////////////////////////////
+   if (content)
+   {
+      return <Box display="inline" className="helpContent">
+         {heading && <span className="header">{heading}</span>}
+         {formatHelpContent(content, selectedHelpContent.format)}
+      </Box>;
+   }
+
+   return (null);
+}
+
+export default HelpContent;

src/qqq/components/misc/RecordSidebar.tsx

@@ -76,7 +76,7 @@ function QRecordSidebar({tableSections, widgetMetaDataList, light, stickyTop}: P
 
 
    return (
-      <Card sx={{borderRadius: ({borders: {borderRadius}}) => borderRadius.lg, position: "sticky", top: stickyTop}}>
+      <Card sx={{borderRadius: "0.75rem", position: "sticky", top: stickyTop, overflow: "auto", maxHeight: "calc(100vh - 200px)"}}>
          <Box component="ul" display="flex" flexDirection="column" p={2} m={0} sx={{listStyle: "none"}}>
             {
                sidebarEntries ? sidebarEntries.map((entry: SidebarEntry, key: number) => (

src/qqq/components/query/FilterCriteriaRowValues.tsx

@@ -215,6 +215,7 @@ function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueC
                initialDisplayValue={selectedPossibleValue?.label}
                inForm={false}
                onChange={(value: any) => valueChangeHandler(null, 0, value)}
+               variant="standard"
             />
          </Box>;
       case ValueMode.PVS_MULTI:
@@ -242,6 +243,7 @@ function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueC
                initialValues={initialValues}
                inForm={false}
                onChange={(value: any) => valueChangeHandler(null, "all", value)}
+               variant="standard"
             />
          </Box>;
    }

src/qqq/components/widgets/DashboardWidgets.tsx

@@ -254,7 +254,7 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
          const topRightInsideCardIcon = widgetMetaData.icons.get("topRightInsideCard");
          if (topRightInsideCardIcon)
          {
-            labelAdditionalComponentsRight.push(new HeaderIcon(topRightInsideCardIcon.name, topRightInsideCardIcon.color));
+            labelAdditionalComponentsRight.push(new HeaderIcon(topRightInsideCardIcon.name, topRightInsideCardIcon.path, topRightInsideCardIcon.color));
          }
       }
 
@@ -343,7 +343,7 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
                      reloadWidgetCallback={(data) => reloadWidget(i, data)}
                      widgetData={widgetData[i]}
                   >
-                     <Box px={3} pt={0} pb={2}>
+                     <Box>
                         <MDTypography component="div" variant="button" color="text" fontWeight="light">
                            {
                               widgetData && widgetData[i] && widgetData[i].html ? (
@@ -497,6 +497,11 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
       );
    };
 
+   if(wrapWidgetsInTabPanels)
+   {
+      omitWrappingGridContainer = true;
+   }
+
    const body: JSX.Element =
       (
          <>
@@ -515,7 +520,12 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
 
                   if (wrapWidgetsInTabPanels)
                   {
-                     renderedWidget = (<TabPanel index={i} value={selectedTab} style={{padding: "1rem 0 0 1.5rem", width: "100%", marginBottom: "-1.5rem"}}>
+                     renderedWidget = (<TabPanel index={i} value={selectedTab} style={{
+                        padding: 0,
+                        margin: "-1rem",
+                        marginBottom: "-3.5rem",
+                        width: "calc(100% + 2rem)"
+                     }}>
                         {renderedWidget}
                      </TabPanel>);
                   }
@@ -528,7 +538,11 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
 
    const tabs = widgetMetaDataList && wrapWidgetsInTabPanels ?
       <Tabs
-         sx={{m: 0, mb: 1.5}}
+         sx={{m: 0, mb: 1.5, ml: -2, mr: -2, mt: -3,
+            "& .MuiTabs-scroller": {
+               ml: 0
+            }
+         }}
          value={selectedTab}
          onChange={(event, newValue) => changeTab(newValue)}
          variant="standard"
@@ -545,7 +559,7 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
             {tabs}
             {
                omitWrappingGridContainer ? body : (
-                  <Grid container spacing={3} pb={4}>
+                  <Grid container spacing={2.5}>
                      {body}
                   </Grid>
                )

src/qqq/components/widgets/ParentWidget.tsx

@@ -106,9 +106,15 @@ function ParentWidget({urlParams, widgetMetaData, widgetIndex, data, reloadWidge
    ///////////////////////////////////////////////////////////////////////////////////////////
    // if this parent widget is in card form, and its children are too, then we need some px //
    ///////////////////////////////////////////////////////////////////////////////////////////
-   const px = (widgetMetaData && widgetMetaData.isCard && widgets && widgets[0] && widgets[0].isCard) ? 3 : 0;
+   const parentIsCard = widgetMetaData && widgetMetaData.isCard;
+   const childrenAreCards = widgetMetaData && widgets && widgets[0] && widgets[0].isCard;
+   const px = (parentIsCard && childrenAreCards) ? 3 : 0;
+
+   //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+   // if this is a parent, which is not a card, then we need to omit the padding, i think, on the Widget that ultimately gets rendered //
+   //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+   const omitPadding = !parentIsCard;
 
-   // @ts-ignore
    return (
       qInstance && data ? (
          <Widget
@@ -116,6 +122,7 @@ function ParentWidget({urlParams, widgetMetaData, widgetIndex, data, reloadWidge
             widgetData={data}
             storeDropdownSelections={storeDropdownSelections}
             reloadWidgetCallback={parentReloadWidgetCallback}
+            omitPadding={omitPadding}
          >
             <Box sx={{height: "100%", width: "100%"}} px={px}>
                <DashboardWidgets widgetMetaDataList={widgets} entityPrimaryKey={entityPrimaryKey} tableName={tableName} childUrlParams={childUrlParams} areChildren={true} parentWidgetMetaData={widgetMetaData} wrapWidgetsInTabPanels={data.layoutType == "TABS"}/>

src/qqq/components/widgets/Widget.tsx

@@ -25,14 +25,13 @@ import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Card from "@mui/material/Card";
 import Icon from "@mui/material/Icon";
-import LinearProgress from "@mui/material/LinearProgress";
 import Tooltip from "@mui/material/Tooltip/Tooltip";
 import Typography from "@mui/material/Typography";
 import parse from "html-react-parser";
 import React, {useEffect, useState} from "react";
 import {NavigateFunction, useNavigate} from "react-router-dom";
-import colors from "qqq/components/legacy/colors";
+import colors from "qqq/assets/theme/base/colors";
-import DropdownMenu, {DropdownOption} from "qqq/components/widgets/components/DropdownMenu";
+import WidgetDropdownMenu, {DropdownOption} from "qqq/components/widgets/components/WidgetDropdownMenu";
 
 export interface WidgetData
 {
@@ -43,6 +42,7 @@ export interface WidgetData
       id: string,
       label: string
    }[][];
+   dropdownDefaultValueList?: string[];
    dropdownNeedsSelectedText?: string;
    hasPermission?: boolean;
    errorLoading?: boolean;
@@ -56,6 +56,7 @@ interface Props
    labelAdditionalComponentsLeft: LabelComponent[];
    labelAdditionalElementsLeft: JSX.Element[];
    labelAdditionalComponentsRight: LabelComponent[];
+   labelBoxAdditionalSx?: any;
    widgetMetaData?: QWidgetMetaData;
    widgetData?: WidgetData;
    children: JSX.Element;
@@ -64,6 +65,7 @@ interface Props
    isChild?: boolean;
    footerHTML?: string;
    storeDropdownSelections?: boolean;
+   omitPadding: boolean;
 }
 
 Widget.defaultProps = {
@@ -74,6 +76,8 @@ Widget.defaultProps = {
    labelAdditionalComponentsLeft: [],
    labelAdditionalElementsLeft: [],
    labelAdditionalComponentsRight: [],
+   labelBoxAdditionalSx: {},
+   omitPadding: false,
 };
 
 
@@ -102,16 +106,18 @@ export class LabelComponent
 export class HeaderIcon extends LabelComponent
 {
    iconName: string;
+   iconPath: string;
    color: string;
    coloredBG: boolean;
 
    iconColor: string;
    bgColor: string;
 
-   constructor(iconName: string, color: string, coloredBG: boolean = true)
+   constructor(iconName: string, iconPath: string, color: string, coloredBG: boolean = true)
    {
       super();
       this.iconName = iconName;
+      this.iconPath = iconPath;
       this.color = color;
       this.coloredBG = coloredBG;
 
@@ -122,20 +128,23 @@ export class HeaderIcon extends LabelComponent
 
    render = (args: LabelComponentRenderArgs): JSX.Element =>
    {
-      return (
+      const styles = {
-         <Icon sx={{
+         width: "1.75rem",
-            m: 2,
+         height: "1.75rem",
-            mr: 0,
+         color: this.iconColor,
-            mb: 0,
+         backgroundColor: this.bgColor,
-            width: "1.75rem",
+         borderRadius: "0.25rem"
-            height: "1.75rem",
+      };
-            color: this.iconColor,
+
-            backgroundColor: this.bgColor,
+      if (this.iconPath)
-            padding: "0.25rem",
+      {
-            borderRadius: "0.25rem"
+         return (<Box sx={{textAlign: "center", ...styles}}><img src={this.iconPath} width="16" height="16" /></Box>);
-         }} fontSize="small">{this.iconName}</Icon>
+      }
-      )
+      else
-   }
+      {
+         return (<Icon sx={{padding: "0.25rem", ...styles}} fontSize="small">{this.iconName}</Icon>);
+      }
+   };
 }
 
 
@@ -167,7 +176,7 @@ export class AddNewRecordButton extends LabelComponent
    render = (args: LabelComponentRenderArgs): JSX.Element =>
    {
       return (
-         <Typography variant="body2" p={2} pr={0} display="inline" position="relative" top="0.25rem">
+         <Typography variant="body2" p={2} pr={0} display="inline" position="relative" top="-0.5rem">
             <Button sx={{mt: 0.75}} onClick={() => this.openEditForm(args.navigate, this.table, null, this.defaultValues, this.disabledFields)}>{this.label}</Button>
          </Typography>
       );
@@ -181,41 +190,111 @@ export class AddNewRecordButton extends LabelComponent
 export class Dropdown extends LabelComponent
 {
    label: string;
+   dropdownMetaData: any;
    options: DropdownOption[];
+   dropdownDefaultValue?: string;
    dropdownName: string;
    onChangeCallback: any;
 
-   constructor(label: string, options: DropdownOption[], dropdownName: string, onChangeCallback: any)
+   constructor(label: string, dropdownMetaData: any, options: DropdownOption[], dropdownDefaultValue: string, dropdownName: string, onChangeCallback: any)
    {
       super();
       this.label = label;
+      this.dropdownMetaData = dropdownMetaData;
       this.options = options;
+      this.dropdownDefaultValue = dropdownDefaultValue;
       this.dropdownName = dropdownName;
       this.onChangeCallback = onChangeCallback;
    }
 
    render = (args: LabelComponentRenderArgs): JSX.Element =>
    {
+      const label = `Select ${this.label}`;
       let defaultValue = null;
       const localStorageKey = `${WIDGET_DROPDOWN_SELECTION_LOCAL_STORAGE_KEY_ROOT}.${args.widgetProps.widgetMetaData.name}.${this.dropdownName}`;
       if (args.widgetProps.storeDropdownSelections)
       {
-         ///////////////////////////////////////////////////////////////////////////////////////
+         ////////////////////////////////////////////////////////////////////////////////////////////
-         // see if an existing value is stored in local storage, and if so set it in dropdown //
+         // see if an existing value is stored in local storage, and if so set it in dropdown      //
-         ///////////////////////////////////////////////////////////////////////////////////////
+         // originally we used the full object from localStorage - but - in case the label         //
-         defaultValue = JSON.parse(localStorage.getItem(localStorageKey));
+         // changed since it was stored, we'll instead just find the option by id (or in case that //
-         args.dropdownData[args.componentIndex] = defaultValue?.id;
+         // option isn't available anymore, then we'll select nothing instead of a missing value   //
+         ////////////////////////////////////////////////////////////////////////////////////////////
+         try
+         {
+            const localStorageOption = JSON.parse(localStorage.getItem(localStorageKey));
+            if(localStorageOption)
+            {
+               const id = localStorageOption.id;
+               for (let i = 0; i < this.options.length; i++)
+               {
+                  if (this.options[i].id == id)
+                  {
+                     defaultValue = this.options[i]
+                     args.dropdownData[args.componentIndex] = defaultValue?.id;
+                  }
+               }
+            }
+         }
+         catch(e)
+         {
+            console.log(`Error getting default value for dropdown [${this.dropdownName}] from local storage`, e)
+         }
+      }
+
+      /////////////////////////////////////////////////////////////////////////////////////////////
+      // if there wasn't a value selected, but there is a default from the backend, then use it. //
+      /////////////////////////////////////////////////////////////////////////////////////////////
+      if (defaultValue == null && this.dropdownDefaultValue != null)
+      {
+         for (let i = 0; i < this.options.length; i++)
+         {
+            if(this.options[i].id == this.dropdownDefaultValue)
+            {
+               defaultValue = this.options[i];
+               args.dropdownData[args.componentIndex] = defaultValue?.id;
+
+               if (args.widgetProps.storeDropdownSelections)
+               {
+                  localStorage.setItem(localStorageKey, JSON.stringify(defaultValue));
+               }
+
+               this.onChangeCallback(label, defaultValue);
+               break;
+            }
+         }
+      }
+
+      /////////////////////////////////////////////////////////////////////////////
+      // if there's a 'label for null value' (and no default from the backend),  //
+      // then add that as an option (and select it if nothing else was selected) //
+      /////////////////////////////////////////////////////////////////////////////
+      let options = this.options;
+      if (this.dropdownMetaData.labelForNullValue && !this.dropdownDefaultValue)
+      {
+         const nullOption = {id: null as string, label: this.dropdownMetaData.labelForNullValue};
+         options = [nullOption, ...this.options];
+
+         if (!defaultValue)
+         {
+            defaultValue = nullOption;
+         }
       }
 
       return (
-         <Box my={2} sx={{float: "right"}}>
+         <Box mb={2} sx={{float: "right"}}>
-            <DropdownMenu
+            <WidgetDropdownMenu
                name={this.dropdownName}
                defaultValue={defaultValue}
-               sx={{width: 200, marginLeft: "15px"}}
+               sx={{marginLeft: "1rem"}}
-               label={`Select ${this.label}`}
+               label={label}
-               dropdownOptions={this.options}
+               startIcon={this.dropdownMetaData.startIconName}
+               allowBackAndForth={this.dropdownMetaData.allowBackAndForth}
+               backAndForthInverted={this.dropdownMetaData.backAndForthInverted}
+               disableClearable={this.dropdownMetaData.disableClearable}
+               dropdownOptions={options}
                onChangeCallback={this.onChangeCallback}
+               width={this.dropdownMetaData.width ?? 225}
             />
          </Box>
       );
@@ -239,8 +318,8 @@ export class ReloadControl extends LabelComponent
    render = (args: LabelComponentRenderArgs): JSX.Element =>
    {
       return (
-         <Typography variant="body2" py={2} px={0} display="inline" position="relative" top="-0.375rem">
+         <Typography variant="body2" py={2} px={0} display="inline" position="relative" top="-0.175rem">
-            <Tooltip title="Refresh"><Button sx={{px: 1, py: 0, minWidth: "initial"}} onClick={() => this.callback()}><Icon>refresh</Icon></Button></Tooltip>
+            <Tooltip title="Refresh"><Button sx={{px: 1, py: 0, minWidth: "initial"}} onClick={() => this.callback()}><Icon sx={{color: colors.gray.main, fontSize: 1.125}}>refresh</Icon></Button></Tooltip>
          </Typography>
       );
    };
@@ -325,7 +404,12 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
          props.widgetData.dropdownDataList?.map((dropdownData: any, index: number) =>
          {
             // console.log(`${props.widgetMetaData.name} building a Dropdown, data is: ${dropdownData}`);
-            updatedStateLabelComponentsRight.push(new Dropdown(props.widgetData.dropdownLabelList[index], dropdownData, props.widgetData.dropdownNameList[index], handleDataChange));
+            let defaultValue = null;
+            if(props.widgetData.dropdownDefaultValueList && props.widgetData.dropdownDefaultValueList.length >= index)
+            {
+               defaultValue = props.widgetData.dropdownDefaultValueList[index];
+            }
+            updatedStateLabelComponentsRight.push(new Dropdown(props.widgetData.dropdownLabelList[index], props.widgetMetaData.dropdowns[index], dropdownData, defaultValue, props.widgetData.dropdownNameList[index], handleDataChange));
          });
          setLabelComponentsRight(updatedStateLabelComponentsRight);
       }
@@ -453,16 +537,16 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
    // first look for a label in the widget data, which would override that in the metadata //
    // note - previously this had a ?: and one was pl={2}, the other was pl={3}...          //
    //////////////////////////////////////////////////////////////////////////////////////////
-   const labelToUse = props.widgetData?.label ?? props.widgetMetaData?.label
+   const labelToUse = props.widgetData?.label ?? props.widgetMetaData?.label;
    let labelElement = (
-      <Typography sx={{position: "relative", top: -4, cursor: "default"}} variant="h6" fontWeight="medium" display="inline">
+      <Typography sx={{cursor: "default", pl: "auto", pt: props.widgetMetaData.type == "parentWidget" ? "1rem" : "auto", fontWeight: 600}} variant="h6" display="inline">
          {labelToUse}
       </Typography>
    );
 
-   if(props.widgetMetaData.tooltip)
+   if (props.widgetMetaData.tooltip)
    {
-      labelElement = <Tooltip title={props.widgetMetaData.tooltip} arrow={false} followCursor={true} placement="bottom-start">{labelElement}</Tooltip>
+      labelElement = <Tooltip title={props.widgetMetaData.tooltip} arrow={false} followCursor={true} placement="bottom-start">{labelElement}</Tooltip>;
    }
 
    const errorLoading = props.widgetData?.errorLoading !== undefined && props.widgetData?.errorLoading === true;
@@ -470,26 +554,22 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
       <Box sx={{width: "100%", height: "100%", minHeight: props.widgetMetaData?.minHeight ? props.widgetMetaData?.minHeight : "initial"}}>
          {
             needLabelBox &&
-            <Box pr={2} display="flex" justifyContent="space-between" alignItems="flex-start" sx={{width: "100%"}} minHeight={"3.5rem"}>
+            <Box display="flex" justifyContent="space-between" alignItems="flex-start" sx={{width: "100%", ...props.labelBoxAdditionalSx}} minHeight={"2.5rem"}>
-               <Box pt={2} pb={1} ml={2}>
+               <Box>
                   {
                      hasPermission ?
                         props.widgetMetaData?.icon && (
-                           <Box
+                           <Box ml={1} mr={2} mt={-4} sx={{
-                              ml={1}
+                              display: "flex",
-                              mr={2}
+                              justifyContent: "center",
-                              mt={-4}
+                              alignItems: "center",
-                              sx={{
+                              width: "64px",
-                                 display: "flex",
+                              height: "64px",
-                                 justifyContent: "center",
+                              borderRadius: "8px",
-                                 alignItems: "center",
+                              background: colors.info.main,
-                                 width: "64px",
+                              color: "#ffffff",
-                                 height: "64px",
+                              float: "left"
-                                 borderRadius: "8px",
+                           }}
-                                 background: colors.info.main,
-                                 color: "#ffffff",
-                                 float: "left"
-                              }}
                            >
                               <Icon fontSize="medium" color="inherit">
                                  {props.widgetMetaData.icon}
@@ -497,20 +577,17 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
                            </Box>
                         ) :
                         (
-                           <Box
+                           <Box ml={3} mt={-4} sx={{
-                              ml={3}
+                              display: "flex",
-                              mt={-4}
+                              justifyContent: "center",
-                              sx={{
+                              alignItems: "center",
-                                 display: "flex",
+                              width: "64px",
-                                 justifyContent: "center",
+                              height: "64px",
-                                 alignItems: "center",
+                              borderRadius: "8px",
-                                 width: "64px",
+                              background: colors.info.main,
-                                 height: "64px",
+                              color: "#ffffff",
-                                 borderRadius: "8px",
+                              float: "left"
-                                 background: colors.info.main,
+                           }}
-                                 color: "#ffffff",
-                                 float: "left"
-                              }}
                            >
                               <Icon fontSize="medium" color="inherit">lock</Icon>
                            </Box>
@@ -542,7 +619,12 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
             </Box>
          }
          {
-            props.widgetMetaData?.isCard && (reloading ? <LinearProgress color="info" sx={{overflow: "hidden", borderRadius: "0"}} /> : <Box height="0.375rem" />)
+            ///////////////////////////////////////////////////////////////////
+            // turning this off... for now.  maybe make a property in future //
+            ///////////////////////////////////////////////////////////////////
+            /*
+            props.widgetMetaData?.isCard && (reloading ? <LinearProgress color="info" sx={{overflow: "hidden", borderRadius: "0", mx:-2}} /> : <Box height="0.375rem" />)
+            */
          }
          {
             errorLoading ? (
@@ -552,7 +634,7 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
                </Box>
             ) : (
                hasPermission && props.widgetData?.dropdownNeedsSelectedText ? (
-                  <Box pb={3} pr={3} sx={{width: "100%", textAlign: "right"}}>
+                  <Box pb={3} sx={{width: "100%", textAlign: "right"}}>
                      <Typography variant="body2">
                         {props.widgetData?.dropdownNeedsSelectedText}
                      </Typography>
@@ -573,11 +655,12 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
          }
       </Box>;
 
+   const padding = props.omitPadding ? "auto" : "24px 16px";
    return props.widgetMetaData?.isCard
-      ? <Card sx={{marginTop: props.widgetMetaData?.icon ? 2 : 0, width: "100%"}} className={fullScreenWidgetClassName}>
+      ? <Card sx={{marginTop: props.widgetMetaData?.icon ? 2 : 0, width: "100%", p: padding}} className={fullScreenWidgetClassName}>
          {widgetContent}
       </Card>
-      : <span style={{width: "100%"}}>{widgetContent}</span>;
+      : <span style={{width: "100%", padding: padding}}>{widgetContent}</span>;
 }
 
 export default Widget;

src/qqq/components/widgets/charts/StackedBarChart.tsx

@@ -45,18 +45,39 @@ export const options = {
    animation: {
       duration: 0
    },
+   elements: {
+      bar: {
+         borderRadius: 4
+      }
+   },
    plugins: {
       tooltip: {
          // todo - some configs around this
-         enabled: false
+         callbacks: {
+            title: function(context: any)
+            {
+               return ("");
+            },
+            label: function(context: any)
+            {
+               if(context.dataset.label.startsWith(context.label))
+               {
+                  return `${context.label}: ${context.formattedValue}`;
+               }
+               else
+               {
+                  return ("");
+               }
+            }
+         }
       },
       legend: {
          position: "bottom",
          labels: {
             usePointStyle: true,
             pointStyle: "circle",
-            boxHeight: 8,
+            boxHeight: 6,
-            boxWidth: 8,
+            boxWidth: 6,
             padding: 12,
             font: {
                size: 14
@@ -127,7 +148,7 @@ function StackedBarChart({data, chartSubheaderData}: Props): JSX.Element
 
 
    return data ? (
-      <Box p={3} pt={1}>
+      <Box>
          {chartSubheaderData && (<ChartSubheaderWithData chartSubheaderData={chartSubheaderData} />)}
          <Box width="100%" height="300px">
             <Bar data={data} options={options} getElementsAtEvent={handleClick} />

src/qqq/components/widgets/charts/barchart/BarChart.tsx

@@ -63,7 +63,7 @@ const options = {
             font: {
                size: 14,
                weight: 300,
-               family: "Roboto",
+               family: "SF Pro Display,Roboto",
                style: "normal",
                lineHeight: 2,
             },
@@ -86,7 +86,7 @@ const options = {
             font: {
                size: 14,
                weight: 300,
-               family: "Roboto",
+               family: "SF Pro Display,Roboto",
                style: "normal",
                lineHeight: 2,
             },

src/qqq/components/widgets/charts/barchart/HorizontalBarChart.tsx

@@ -67,7 +67,7 @@ const options = {
             font: {
                size: 14,
                weight: 300,
-               family: "Roboto",
+               family: "SF Pro Display,Roboto",
                style: "normal",
                lineHeight: 2,
             },
@@ -88,7 +88,7 @@ const options = {
             font: {
                size: 14,
                weight: 300,
-               family: "Roboto",
+               family: "SF Pro Display,Roboto",
                style: "normal",
                lineHeight: 2,
             },

src/qqq/components/widgets/charts/linechart/DefaultLineChart.tsx

@@ -81,7 +81,7 @@ const options = {
             font: {
                size: 14,
                weight: 300,
-               family: "Roboto",
+               family: "SF Pro Display,Roboto",
                style: "normal",
                lineHeight: 2,
             },
@@ -107,7 +107,7 @@ const options = {
             font: {
                size: 14,
                weight: 300,
-               family: "Roboto",
+               family: "SF Pro Display,Roboto",
                style: "normal",
                lineHeight: 2,
             },

src/qqq/components/widgets/charts/linechart/LineChartConfigs.ts

@@ -69,7 +69,7 @@ function configs(labels: any, datasets: any)
                   font: {
                      size: 14,
                      weight: 300,
-                     family: "Roboto",
+                     family: "SF Pro Display,Roboto",
                      style: "normal",
                      lineHeight: 2,
                   },
@@ -90,7 +90,7 @@ function configs(labels: any, datasets: any)
                   font: {
                      size: 14,
                      weight: 300,
-                     family: "Roboto",
+                     family: "SF Pro Display,Roboto",
                      style: "normal",
                      lineHeight: 2,
                   },

src/qqq/components/widgets/charts/piechart/PieChart.tsx

@@ -91,49 +91,41 @@ function PieChart({description, chartData, chartSubheaderData}: Props): JSX.Elem
 
    return (
       <Card sx={{boxShadow: "none", height: "100%", width: "100%", display: "flex", flexGrow: 1, border: 0}}>
-         <Box mt={1}>
+         <Box>
-            <Box px={3}>
+            <Box>
                {chartSubheaderData && (<ChartSubheaderWithData chartSubheaderData={chartSubheaderData} />)}
             </Box>
-            <Grid container alignItems="center">
+            <Box width="100%" height="300px">
-               <Grid item xs={12} justifyContent="center">
+               {useMemo(
-                  <Box width="100%" height="300px" py={2} pr={2} pl={2}>
+                  () => (
-                     {useMemo(
+                     <Pie data={data} options={options} getElementsAtEvent={handleClick} />
-                        () => (
+                  ),
-                           <Pie data={data} options={options} getElementsAtEvent={handleClick} />
+                  [chartData]
-                        ),
+               )}
-                        [chartData]
+            </Box>
-                     )}
+            {
+               !chartData && (
+                  <Box sx={{
+                     position: "absolute",
+                     top: "40%",
+                     left: "50%",
+                     transform: "translate(-50%, -50%)",
+                     display: "flex",
+                     justifyContent: "center"
+                  }}>
+                     <Skeleton sx={{width: "150px", height: "150px"}} variant="circular" />
                   </Box>
-                  {
+               )
-                     !chartData && (
+            }
-                        <Box sx={{
-                           position: "absolute",
-                           top: "40%",
-                           left: "50%",
-                           transform: "translate(-50%, -50%)",
-                           display: "flex",
-                           justifyContent: "center"
-                        }}>
-                           <Skeleton sx={{width: "150px", height: "150px"}} variant="circular" />
-                        </Box>
-                     )
-                  }
-               </Grid>
-            </Grid>
             {
                description && (
                   <>
                      <Divider />
-                     <Grid container>
+                     <Box display="flex" flexDirection={{xs: "column", sm: "row"}} mt="auto">
-                        <Grid item xs={12}>
+                        <MDTypography variant="button" color="text" fontWeight="light">
-                           <Box pb={2} px={2} display="flex" flexDirection={{xs: "column", sm: "row"}} mt="auto">
+                           {parse(description)}
-                              <MDTypography variant="button" color="text" fontWeight="light">
+                        </MDTypography>
-                                 {parse(description)}
+                     </Box>
-                              </MDTypography>
-                           </Box>
-                        </Grid>
-                     </Grid>
                   </>
                )
             }

src/qqq/components/widgets/charts/piechart/PieChartConfigs.ts

@@ -71,11 +71,27 @@ function configs(labels: any, datasets: any)
                callbacks: {
                   label: function(context: any)
                   {
+                     let percentSuffix = "";
+                     try
+                     {
+                        //////////////////////////////////////////////////////////////////////////
+                        // make percent by dividing this slice's value by the sum of all values //
+                        //////////////////////////////////////////////////////////////////////////
+                        const thisSlice = context.dataset.data[context.dataIndex];
+                        const sum = context.dataset.data.reduce((acc: number, val: number) => acc + val, 0);
+                        percentSuffix = " (" + Number(100 * thisSlice / sum).toFixed(1) + "%)";
+                     }
+                     catch(e)
+                     {
+                        // leave percentSuffix empty
+                     }
+
                      ////////////////////////////////////////////////////////////////////////////////
                      // our labels already have the value in them - so just use the label in the   //
                      // tooltip (lib by default puts label + value, so we were duplicating value!) //
+                     // oh, and we add percent if we can                                           //
                      ////////////////////////////////////////////////////////////////////////////////
-                     return context.label;
+                     return context.label + percentSuffix;
                   }
                }
             },

src/qqq/components/widgets/components/ChartSubheaderWithData.tsx

@@ -65,7 +65,7 @@ function StackedBarChart({chartSubheaderData}: Props): JSX.Element
       iconName = chartSubheaderData.isUpVsPrevious ? UP_ICON : DOWN_ICON;
    }
 
-   let mainNumberElement = <Typography variant="h2" display="inline">{ValueUtils.getFormattedNumber(chartSubheaderData.mainNumber)}</Typography>;
+   let mainNumberElement = <Typography variant="h3" display="inline">{ValueUtils.getFormattedNumber(chartSubheaderData.mainNumber)}</Typography>;
    if(chartSubheaderData.mainNumberUrl)
    {
       mainNumberElement = <Link to={chartSubheaderData.mainNumberUrl}>{mainNumberElement}</Link>
@@ -74,7 +74,7 @@ function StackedBarChart({chartSubheaderData}: Props): JSX.Element
 
    let previousNumberElement = (
       <>
-         <Typography display="inline" variant="body2" sx={{color: colors.black.main}}>
+         <Typography display="block" variant="body2" sx={{color: colors.gray.main, fontSize: ".875rem", fontWeight: 500}}>
             &nbsp;{chartSubheaderData.vsDescription}
             {chartSubheaderData.vsPreviousNumber && (<>&nbsp;({ValueUtils.getFormattedNumber(chartSubheaderData.vsPreviousNumber)})</>)}
          </Typography>
@@ -91,9 +91,9 @@ function StackedBarChart({chartSubheaderData}: Props): JSX.Element
          {mainNumberElement}
          {
             chartSubheaderData.vsPreviousPercent != null && iconName != null && (
-               <Box display="inline-flex" alignItems="flex-end" pb={1} ml={-0.5}>
+               <Box display="inline-flex" alignItems="baseline" pb={0.5} ml={-0.5}>
-                  <Icon fontSize="medium" sx={{color: color}}>{iconName}</Icon>
+                  <Icon fontSize="medium" sx={{color: color, alignSelf: "flex-end"}}>{iconName}</Icon>
-                  <Typography display="inline" variant="body2" sx={{color: color}}>{chartSubheaderData.vsPreviousPercent}%</Typography>
+                  <Typography display="inline" variant="body2" sx={{color: color, fontSize: ".875rem", fontWeight: 500}}>{chartSubheaderData.vsPreviousPercent}%</Typography>
                   {previousNumberElement}
                </Box>
             )

src/qqq/components/widgets/components/DropdownMenu.tsx

@@ -1,179 +0,0 @@
-/*
- * QQQ - Low-code Application Framework for Engineers.
- * Copyright (C) 2021-2022.  Kingsrook, LLC
- * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
- * contact@kingsrook.com
- * https://github.com/Kingsrook/
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <https://www.gnu.org/licenses/>.
- */
-
-import {Collapse, Theme} from "@mui/material";
-import Autocomplete from "@mui/material/Autocomplete";
-import Box from "@mui/material/Box";
-import TextField from "@mui/material/TextField";
-import {SxProps} from "@mui/system";
-import {Field, Form, Formik} from "formik";
-import React, {useState} from "react";
-import MDInput from "qqq/components/legacy/MDInput";
-import FilterUtils from "qqq/utils/qqq/FilterUtils";
-import ValueUtils from "qqq/utils/qqq/ValueUtils";
-
-
-export interface DropdownOption
-{
-   id: string;
-   label: string;
-}
-
-/////////////////////////
-// inputs and defaults //
-/////////////////////////
-interface Props
-{
-   name: string;
-   defaultValue?: any;
-   label?: string;
-   dropdownOptions?: DropdownOption[];
-   onChangeCallback?: (dropdownLabel: string, data: any) => void;
-   sx?: SxProps<Theme>;
-}
-
-interface StartAndEndDate
-{
-   startDate?: string,
-   endDate?: string
-}
-
-function parseCustomTimeValuesFromDefaultValue(defaultValue: any): StartAndEndDate
-{
-   const customTimeValues: StartAndEndDate = {};
-   if(defaultValue && defaultValue.id)
-   {
-      var parts = defaultValue.id.split(",");
-      if(parts.length >= 2)
-      {
-         customTimeValues["startDate"] = ValueUtils.formatDateTimeValueForForm(parts[1]);
-      }
-      if(parts.length >= 3)
-      {
-         customTimeValues["endDate"] = ValueUtils.formatDateTimeValueForForm(parts[2]);
-      }
-   }
-
-   return (customTimeValues);
-}
-
-function makeBackendValuesFromFrontendValues(frontendDefaultValues: StartAndEndDate): StartAndEndDate
-{
-   const backendTimeValues: StartAndEndDate = {};
-   if(frontendDefaultValues && frontendDefaultValues.startDate)
-   {
-      backendTimeValues.startDate = ValueUtils.frontendLocalZoneDateTimeStringToUTCStringForBackend(frontendDefaultValues.startDate);
-   }
-   if(frontendDefaultValues && frontendDefaultValues.endDate)
-   {
-      backendTimeValues.endDate = ValueUtils.frontendLocalZoneDateTimeStringToUTCStringForBackend(frontendDefaultValues.endDate);
-   }
-   return (backendTimeValues);
-}
-
-function DropdownMenu({name, defaultValue, label, dropdownOptions, onChangeCallback, sx}: Props): JSX.Element
-{
-   const [customTimesVisible, setCustomTimesVisible] = useState(defaultValue && defaultValue.id && defaultValue.id.startsWith("custom,"));
-   const [customTimeValuesFrontend, setCustomTimeValuesFrontend] = useState(parseCustomTimeValuesFromDefaultValue(defaultValue) as StartAndEndDate);
-   const [customTimeValuesBackend, setCustomTimeValuesBackend] = useState(makeBackendValuesFromFrontendValues(customTimeValuesFrontend) as StartAndEndDate);
-   const [debounceTimeout, setDebounceTimeout] = useState(null as any);
-
-   const handleOnChange = (event: any, newValue: any, reason: string) =>
-   {
-      const isTimeframeCustom = name == "timeframe" && newValue && newValue.id == "custom"
-      setCustomTimesVisible(isTimeframeCustom);
-
-      if(isTimeframeCustom)
-      {
-         callOnChangeCallbackIfCustomTimeframeHasDateValues();
-      }
-      else
-      {
-         onChangeCallback(label, newValue);
-      }
-   };
-
-   const callOnChangeCallbackIfCustomTimeframeHasDateValues = () =>
-   {
-      if(customTimeValuesBackend["startDate"] && customTimeValuesBackend["endDate"])
-      {
-         onChangeCallback(label, {id: `custom,${customTimeValuesBackend["startDate"]},${customTimeValuesBackend["endDate"]}`, label: "Custom"});
-      }
-   }
-
-   let customTimes = <></>;
-   if (name == "timeframe")
-   {
-      const handleSubmit = async (values: any, actions: any) =>
-      {
-      };
-
-      const dateChanged = (fieldName: "startDate" | "endDate", event: any) =>
-      {
-         customTimeValuesFrontend[fieldName] = event.target.value;
-         customTimeValuesBackend[fieldName] = ValueUtils.frontendLocalZoneDateTimeStringToUTCStringForBackend(event.target.value);
-
-         clearTimeout(debounceTimeout);
-         const newDebounceTimeout = setTimeout(() =>
-         {
-            callOnChangeCallbackIfCustomTimeframeHasDateValues();
-         }, 500);
-         setDebounceTimeout(newDebounceTimeout);
-      };
-
-      customTimes = <Box sx={{display: "inline-block", position: "relative", top: "-7px"}}>
-         <Collapse orientation="horizontal" in={customTimesVisible}>
-            <Formik initialValues={customTimeValuesFrontend} onSubmit={handleSubmit}>
-               {({}) => (
-                  <Form id="timeframe-form" autoComplete="off">
-                     <Field name="startDate" type="datetime-local" as={MDInput} variant="standard" label="Custom Timeframe Start" InputLabelProps={{shrink: true}} InputProps={{size: "small"}} sx={{ml: 2, width: 198}} onChange={(event: any) => dateChanged("startDate", event)} />
-                     <Field name="endDate" type="datetime-local" as={MDInput} variant="standard" label="Custom Timeframe End" InputLabelProps={{shrink: true}} InputProps={{size: "small"}} sx={{ml: 2, width: 198}} onChange={(event: any) => dateChanged("endDate", event)} />
-                  </Form>
-               )}
-            </Formik>
-         </Collapse>
-      </Box>;
-   }
-
-   return (
-      dropdownOptions ? (
-         <span style={{whiteSpace: "nowrap", display: "flex"}} className="dashboardDropdownMenu">
-            <Autocomplete
-               defaultValue={defaultValue}
-               size="small"
-               disablePortal
-               id={`${label}-combo-box`}
-               options={dropdownOptions}
-               sx={{...sx, cursor: "pointer", display: "inline-block"}}
-               onChange={handleOnChange}
-               isOptionEqualToValue={(option, value) => option.id === value.id}
-               renderInput={(params: any) => <TextField {...params} label={label} />}
-               renderOption={(props, option: DropdownOption) => (
-                  <li {...props} style={{whiteSpace: "normal"}}>{option.label}</li>
-               )}
-            />
-            {customTimes}
-         </span>
-      ) : null
-   );
-}
-
-export default DropdownMenu;

src/qqq/components/widgets/components/WidgetDropdownMenu.tsx

@@ -0,0 +1,335 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2022.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import {Collapse, Theme, InputAdornment} from "@mui/material";
+import Autocomplete from "@mui/material/Autocomplete";
+import Box from "@mui/material/Box";
+import Icon from "@mui/material/Icon";
+import IconButton from "@mui/material/IconButton";
+import TextField from "@mui/material/TextField";
+import {SxProps} from "@mui/system";
+import {Field, Form, Formik} from "formik";
+import React, {useState} from "react";
+import colors from "qqq/assets/theme/base/colors";
+import MDInput from "qqq/components/legacy/MDInput";
+import ValueUtils from "qqq/utils/qqq/ValueUtils";
+
+
+export interface DropdownOption
+{
+   id: string;
+   label: string;
+}
+
+/////////////////////////
+// inputs and defaults //
+/////////////////////////
+interface Props
+{
+   name: string;
+   defaultValue?: any;
+   label?: string;
+   startIcon?: string;
+   width?: number;
+   disableClearable?: boolean;
+   allowBackAndForth?: boolean;
+   backAndForthInverted?: boolean;
+   dropdownOptions?: DropdownOption[];
+   onChangeCallback?: (dropdownLabel: string, data: any) => void;
+   sx?: SxProps<Theme>;
+}
+
+interface StartAndEndDate
+{
+   startDate?: string,
+   endDate?: string
+}
+
+function parseCustomTimeValuesFromDefaultValue(defaultValue: any): StartAndEndDate
+{
+   const customTimeValues: StartAndEndDate = {};
+   if (defaultValue && defaultValue.id)
+   {
+      var parts = defaultValue.id.split(",");
+      if (parts.length >= 2)
+      {
+         customTimeValues["startDate"] = ValueUtils.formatDateTimeValueForForm(parts[1]);
+      }
+      if (parts.length >= 3)
+      {
+         customTimeValues["endDate"] = ValueUtils.formatDateTimeValueForForm(parts[2]);
+      }
+   }
+
+   return (customTimeValues);
+}
+
+function makeBackendValuesFromFrontendValues(frontendDefaultValues: StartAndEndDate): StartAndEndDate
+{
+   const backendTimeValues: StartAndEndDate = {};
+   if (frontendDefaultValues && frontendDefaultValues.startDate)
+   {
+      backendTimeValues.startDate = ValueUtils.frontendLocalZoneDateTimeStringToUTCStringForBackend(frontendDefaultValues.startDate);
+   }
+   if (frontendDefaultValues && frontendDefaultValues.endDate)
+   {
+      backendTimeValues.endDate = ValueUtils.frontendLocalZoneDateTimeStringToUTCStringForBackend(frontendDefaultValues.endDate);
+   }
+   return (backendTimeValues);
+}
+
+function WidgetDropdownMenu({name, defaultValue, label, startIcon, width, disableClearable, allowBackAndForth, backAndForthInverted, dropdownOptions, onChangeCallback, sx}: Props): JSX.Element
+{
+   const [customTimesVisible, setCustomTimesVisible] = useState(defaultValue && defaultValue.id && defaultValue.id.startsWith("custom,"));
+   const [customTimeValuesFrontend, setCustomTimeValuesFrontend] = useState(parseCustomTimeValuesFromDefaultValue(defaultValue) as StartAndEndDate);
+   const [customTimeValuesBackend, setCustomTimeValuesBackend] = useState(makeBackendValuesFromFrontendValues(customTimeValuesFrontend) as StartAndEndDate);
+   const [debounceTimeout, setDebounceTimeout] = useState(null as any);
+
+   const [isOpen, setIsOpen] = useState(false);
+   const [value, setValue] = useState(defaultValue);
+   const [inputValue, setInputValue] = useState("");
+
+   const [backDisabled, setBackDisabled] = useState(false);
+   const [forthDisabled, setForthDisabled] = useState(false);
+
+   const doForceOpen = (event: React.MouseEvent<HTMLDivElement>) =>
+   {
+      setIsOpen(true);
+   };
+
+   function getSelectedIndex(value: DropdownOption)
+   {
+      let currentIndex = null;
+      for (let i = 0; i < dropdownOptions.length; i++)
+      {
+         if (value && dropdownOptions[i].id == value.id)
+         {
+            currentIndex = i;
+            break;
+         }
+      }
+      return currentIndex;
+   }
+
+   const navigateBackAndForth = (event: React.MouseEvent, direction: -1 | 1) =>
+   {
+      event.stopPropagation();
+      let currentIndex = getSelectedIndex(value);
+
+      if (currentIndex == null)
+      {
+         console.log("No current value.... TODO");
+         return;
+      }
+
+      if (currentIndex == 0 && direction == -1)
+      {
+         console.log("Can't go -1");
+         return;
+      }
+
+      if (currentIndex == dropdownOptions.length - 1 && direction == 1)
+      {
+         console.log("Can't go +1");
+         return;
+      }
+
+      handleOnChange(event, dropdownOptions[currentIndex + direction], "navigatedBackAndForth");
+   };
+
+
+   const handleOnChange = (event: any, newValue: any, reason: string) =>
+   {
+      setValue(newValue);
+
+      const isTimeframeCustom = name == "timeframe" && newValue && newValue.id == "custom";
+      setCustomTimesVisible(isTimeframeCustom);
+
+      if (isTimeframeCustom)
+      {
+         callOnChangeCallbackIfCustomTimeframeHasDateValues();
+      }
+      else
+      {
+         onChangeCallback(label, newValue);
+      }
+
+      /* this had bugs (seemed to not take immediate effect?), so don't use for now.
+      let currentIndex = getSelectedIndex(value);
+      if(currentIndex == 0)
+      {
+         backAndForthInverted ? setForthDisabled(true) : setBackDisabled(true);
+      }
+      else
+      {
+         backAndForthInverted ? setForthDisabled(false) : setBackDisabled(false);
+      }
+
+      if (currentIndex == dropdownOptions.length - 1)
+      {
+         backAndForthInverted ? setBackDisabled(true) : setForthDisabled(true);
+      }
+      else
+      {
+         backAndForthInverted ? setBackDisabled(false) : setForthDisabled(false);
+      }
+      */
+   };
+
+   const handleOnInputChange = (event: any, newValue: any, reason: string) =>
+   {
+      setInputValue(newValue);
+   };
+
+   const callOnChangeCallbackIfCustomTimeframeHasDateValues = () =>
+   {
+      if (customTimeValuesBackend["startDate"] && customTimeValuesBackend["endDate"])
+      {
+         onChangeCallback(label, {id: `custom,${customTimeValuesBackend["startDate"]},${customTimeValuesBackend["endDate"]}`, label: "Custom"});
+      }
+   };
+
+   let customTimes = <></>;
+   if (name == "timeframe")
+   {
+      const handleSubmit = async (values: any, actions: any) =>
+      {
+      };
+
+      const dateChanged = (fieldName: "startDate" | "endDate", event: any) =>
+      {
+         customTimeValuesFrontend[fieldName] = event.target.value;
+         customTimeValuesBackend[fieldName] = ValueUtils.frontendLocalZoneDateTimeStringToUTCStringForBackend(event.target.value);
+
+         clearTimeout(debounceTimeout);
+         const newDebounceTimeout = setTimeout(() =>
+         {
+            callOnChangeCallbackIfCustomTimeframeHasDateValues();
+         }, 500);
+         setDebounceTimeout(newDebounceTimeout);
+      };
+
+      customTimes = <Box sx={{display: "inline-block", position: "relative", top: "-7px"}}>
+         <Collapse orientation="horizontal" in={customTimesVisible}>
+            <Formik initialValues={customTimeValuesFrontend} onSubmit={handleSubmit}>
+               {({}) => (
+                  <Form id="timeframe-form" autoComplete="off">
+                     <Field name="startDate" type="datetime-local" as={MDInput} variant="standard" label="Custom Timeframe Start" InputLabelProps={{shrink: true}} InputProps={{size: "small"}} sx={{ml: 2, width: 198}} onChange={(event: any) => dateChanged("startDate", event)} />
+                     <Field name="endDate" type="datetime-local" as={MDInput} variant="standard" label="Custom Timeframe End" InputLabelProps={{shrink: true}} InputProps={{size: "small"}} sx={{ml: 2, width: 198}} onChange={(event: any) => dateChanged("endDate", event)} />
+                  </Form>
+               )}
+            </Formik>
+         </Collapse>
+      </Box>;
+   }
+
+   const startAdornment = startIcon ? <Icon sx={{fontSize: "1.25rem!important", color: colors.gray.main, paddingLeft: allowBackAndForth ? "auto" : "0.25rem", width: allowBackAndForth ? "1.5rem" : "1.75rem"}}>{startIcon}</Icon> : null;
+
+   ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+   // we tried this end-adornment, for a different style of down-arrow - but by using it, we then messed something else up (i forget what), so... not used right now //
+   ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+   const endAdornment = <InputAdornment position="end" sx={{position: "absolute", right: allowBackAndForth ? "-0.5rem" : "0.5rem"}}><Icon sx={{fontSize: "1.75rem!important", color: colors.gray.main}}>keyboard_arrow_down</Icon></InputAdornment>;
+
+   const fontSize = "1rem";
+   let optionPaddingLeftRems = 0.75;
+   if(startIcon)
+   {
+      optionPaddingLeftRems += allowBackAndForth ? 1.5 : 1.75
+   }
+   if(allowBackAndForth)
+   {
+      optionPaddingLeftRems += 2.5;
+   }
+
+   return (
+      dropdownOptions ? (
+         <Box sx={{whiteSpace: "nowrap", display: "flex",
+            "& .MuiPopperUnstyled-root": {
+               border: `1px solid ${colors.grayLines.main}`,
+               borderTop: "none",
+               borderRadius: "0 0 0.75rem 0.75rem",
+               padding: 0,
+            }, "& .MuiPaper-rounded": {
+               borderRadius: "0 0 0.75rem 0.75rem",
+            }
+         }} className="dashboardDropdownMenu">
+            <Autocomplete
+               id={`${label}-combo-box`}
+
+               defaultValue={defaultValue}
+               value={value}
+               onChange={handleOnChange}
+               inputValue={inputValue}
+               onInputChange={handleOnInputChange}
+
+               isOptionEqualToValue={(option, value) => option.id === value.id}
+
+               open={isOpen}
+               onOpen={() => setIsOpen(true)}
+               onClose={() => setIsOpen(false)}
+
+               size="small"
+               disablePortal
+               disableClearable={disableClearable}
+               options={dropdownOptions}
+               sx={{
+                  ...sx,
+                  cursor: "pointer",
+                  display: "inline-block",
+                  "& .MuiOutlinedInput-notchedOutline": {
+                     border: "none"
+                  },
+               }}
+               renderInput={(params: any) =>
+                  <>
+                     <Box sx={{width: `${width}px`, background: "white", borderRadius: isOpen ? "0.75rem 0.75rem 0 0" : "0.75rem", border: `1px solid ${colors.grayLines.main}`, "& *": {cursor: "pointer"}}} display="flex" alignItems="center" onClick={(event) => doForceOpen(event)}>
+                        {allowBackAndForth && <IconButton onClick={(event) => navigateBackAndForth(event, backAndForthInverted ? 1 : -1)} disabled={backDisabled}><Icon>navigate_before</Icon></IconButton>}
+                        <TextField {...params} placeholder={label} sx={{
+                           "& .MuiInputBase-input": {
+                              fontSize: fontSize
+                           }
+                        }} InputProps={{...params.InputProps, startAdornment: startAdornment/*, endAdornment: endAdornment*/}}
+                        />
+                        {allowBackAndForth && <IconButton onClick={(event) => navigateBackAndForth(event, backAndForthInverted ? -1 : 1)} disabled={forthDisabled}><Icon>navigate_next</Icon></IconButton>}
+                     </Box>
+                  </>
+               }
+               renderOption={(props, option: DropdownOption) => (
+                  <li {...props} style={{whiteSpace: "normal", fontSize: fontSize, paddingLeft: `${optionPaddingLeftRems}rem`}}>{option.label}</li>
+               )}
+
+               noOptionsText={<Box fontSize={fontSize}>No options found</Box>}
+
+               slotProps={{
+                  popper: {
+                     sx: {
+                        width: `${width}px!important`
+                     }
+                  }
+               }}
+            />
+            {customTimes}
+         </Box>
+      ) : null
+   );
+}
+
+export default WidgetDropdownMenu;

src/qqq/components/widgets/misc/RecordGridWidget.tsx

@@ -22,6 +22,7 @@
 import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
 import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
 import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
+import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Icon from "@mui/material/Icon";
 import Tooltip from "@mui/material/Tooltip/Tooltip";
@@ -134,7 +135,7 @@ function RecordGridWidget({widgetMetaData, data}: Props): JSX.Element
    if(data && data.viewAllLink)
    {
       labelAdditionalElementsLeft.push(
-         <Typography variant="body2" p={2} display="inline" fontSize=".875rem" pt="0" position="relative" top="-0.25rem">
+         <Typography variant="body2" p={2} display="inline" fontSize=".875rem" pt="0" position="relative">
             <Link to={data.viewAllLink}>View All</Link>
          </Typography>
       )
@@ -174,8 +175,8 @@ function RecordGridWidget({widgetMetaData, data}: Props): JSX.Element
    if(widgetMetaData?.showExportButton)
    {
       labelAdditionalElementsLeft.push(
-         <Typography key={1} variant="body2" py={2} px={0} display="inline" position="relative" top="-0.375rem">
+         <Typography key={1} variant="body2" py={2} px={0} display="inline" position="relative">
-            <Tooltip title={tooltipTitle}><Button sx={{px: 1, py: 0, minWidth: "initial"}} onClick={onExportClick} disabled={isExportDisabled}><Icon>save_alt</Icon></Button></Tooltip>
+            <Tooltip title={tooltipTitle}><Button sx={{px: 1, py: 0, minWidth: "initial"}} onClick={onExportClick} disabled={isExportDisabled}><Icon sx={{color: "#757575", fontSize: 1.25}}>save_alt</Icon></Button></Tooltip>
          </Typography>
       );
    }
@@ -215,41 +216,49 @@ function RecordGridWidget({widgetMetaData, data}: Props): JSX.Element
          widgetData={data}
          labelAdditionalElementsLeft={labelAdditionalElementsLeft}
          labelAdditionalComponentsRight={labelAdditionalComponentsRight}
+         labelBoxAdditionalSx={{position: "relative", top: "-0.375rem"}}
       >
-         <DataGridPro
+         <Box mx={-2} mb={-3}>
-            autoHeight
+            <DataGridPro
-            rows={rows}
+               autoHeight
-            disableSelectionOnClick
+               sx={{
-            columns={columns}
+                  borderBottom: "none",
-            rowBuffer={10}
+                  borderLeft: "none",
-            getRowClassName={(params) => (params.indexRelativeToCurrentPage % 2 === 0 ? "even" : "odd")}
+                  borderRight: "none"
-            onRowClick={handleRowClick}
+               }}
-            // getRowHeight={() => "auto"} // maybe nice?  wraps values in cells...
+               rows={rows}
-            // components={{Toolbar: CustomToolbar, Pagination: CustomPagination, LoadingOverlay: Loading}}
+               disableSelectionOnClick
-            // pinnedColumns={pinnedColumns}
+               columns={columns}
-            // onPinnedColumnsChange={handlePinnedColumnsChange}
+               rowBuffer={10}
-            // pagination
+               getRowClassName={(params) => (params.indexRelativeToCurrentPage % 2 === 0 ? "even" : "odd")}
-            // paginationMode="server"
+               onRowClick={handleRowClick}
-            // rowsPerPageOptions={[20]}
+               // getRowHeight={() => "auto"} // maybe nice?  wraps values in cells...
-            // sortingMode="server"
+               // components={{Toolbar: CustomToolbar, Pagination: CustomPagination, LoadingOverlay: Loading}}
-            // filterMode="server"
+               // pinnedColumns={pinnedColumns}
-            // page={pageNumber}
+               // onPinnedColumnsChange={handlePinnedColumnsChange}
-            // checkboxSelection
+               // pagination
-            rowCount={data && data.totalRows}
+               // paginationMode="server"
-            // onPageSizeChange={handleRowsPerPageChange}
+               // rowsPerPageOptions={[20]}
-            // onStateChange={handleStateChange}
+               // sortingMode="server"
-            // density={density}
+               // filterMode="server"
-            // loading={loading}
+               // page={pageNumber}
-            // filterModel={filterModel}
+               // checkboxSelection
-            // onFilterModelChange={handleFilterChange}
+               rowCount={data && data.totalRows}
-            // columnVisibilityModel={columnVisibilityModel}
+               // onPageSizeChange={handleRowsPerPageChange}
-            // onColumnVisibilityModelChange={handleColumnVisibilityChange}
+               // onStateChange={handleStateChange}
-            // onColumnOrderChange={handleColumnOrderChange}
+               // density={density}
-            // onSelectionModelChange={selectionChanged}
+               // loading={loading}
-            // onSortModelChange={handleSortChange}
+               // filterModel={filterModel}
-            // sortingOrder={[ "asc", "desc" ]}
+               // onFilterModelChange={handleFilterChange}
-            // sortModel={columnSortModel}
+               // columnVisibilityModel={columnVisibilityModel}
-         />
+               // onColumnVisibilityModelChange={handleColumnVisibilityChange}
+               // onColumnOrderChange={handleColumnOrderChange}
+               // onSelectionModelChange={selectionChanged}
+               // onSortModelChange={handleSortChange}
+               // sortingOrder={[ "asc", "desc" ]}
+               // sortModel={columnSortModel}
+            />
+         </Box>
       </Widget>
    );
 }

src/qqq/components/widgets/misc/ScriptViewer.tsx

@@ -392,14 +392,8 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
       return JSON.stringify(new QQueryFilter([new QFilterCriteria("scriptRevisionId", QCriteriaOperator.EQUALS, [scriptRevisionId])]));
    }
 
-   /*
-    position: relative;
-    left: -356px;
-    width: calc(100% + 380px);
-   */
-
    return (
-      <Grid container className="scriptViewer">
+      <Grid container className="scriptViewer" m={-2} pt={4} width={"calc(100% + 2rem)"}>
          <Grid item xs={12}>
             <Box>
                {

src/qqq/components/widgets/tables/DataTable.tsx

@@ -31,6 +31,7 @@ import Tooltip from "@mui/material/Tooltip";
 import parse from "html-react-parser";
 import {useEffect, useMemo, useState} from "react";
 import {useAsyncDebounce, useGlobalFilter, usePagination, useSortBy, useTable, useExpanded} from "react-table";
+import colors from "qqq/assets/theme/base/colors";
 import MDInput from "qqq/components/legacy/MDInput";
 import MDPagination from "qqq/components/legacy/MDPagination";
 import MDTypography from "qqq/components/legacy/MDTypography";
@@ -284,11 +285,12 @@ function DataTable({
       let boxStyle = {};
       if(fixedStickyLastRow)
       {
-         boxStyle = isFooter ? {overflowY: "visible", borderTop: "0.0625rem solid #f0f2f5;"} : {height: fixedHeight ? `${fixedHeight}px` : "360px", overflowY: "auto"};
+         boxStyle = isFooter
+            ? {borderTop: `0.0625rem solid ${colors.grayLines.main};`, overflow: "auto", scrollbarGutter: "stable"}
+            : {height: fixedHeight ? `${fixedHeight}px` : "360px", overflowY: "scroll", scrollbarGutter: "stable", marginBottom: "-1px"};
       }
 
-      const className = isFooter ? "hideScrollbars" : "";
+      return <Box sx={boxStyle}>
-      return <Box sx={boxStyle} className={className}>
          <Table {...getTableProps()}>
             {
                includeHead && (
@@ -316,27 +318,50 @@ function DataTable({
                {rows.map((row: any, key: any) =>
                {
                   prepareRow(row);
+
+                  let overrideNoEndBorder = false;
+
+                  //////////////////////////////////////////////////////////////////////////////////
+                  // don't do an end-border on nested rows - unless they're the last one in a set //
+                  //////////////////////////////////////////////////////////////////////////////////
+                  if(row.depth > 0)
+                  {
+                     overrideNoEndBorder = true;
+                     if(key + 1 < rows.length && rows[key + 1].depth == 0)
+                     {
+                        overrideNoEndBorder = false;
+                     }
+                  }
+
+                  ///////////////////////////////////////
+                  // don't do end-border on the footer //
+                  ///////////////////////////////////////
+                  if(isFooter)
+                  {
+                     overrideNoEndBorder = true;
+                  }
+
                   return (
                      <TableRow sx={{verticalAlign: "top", display: "grid", gridTemplateColumns: gridTemplateColumns, background: (row.depth > 0 ? "#FAFAFA" : "initial")}} key={key} {...row.getRowProps()}>
                         {row.cells.map((cell: any) => (
                            cell.column.type !== "hidden" && (
                               <DataTableBodyCell
                                  key={key}
-                                 noBorder={noEndBorder && rows.length - 1 === key}
+                                 noBorder={noEndBorder || overrideNoEndBorder}
+                                 depth={row.depth}
                                  align={cell.column.align ? cell.column.align : "left"}
                                  {...cell.getCellProps()}
                               >
                                  {
                                     cell.column.type === "default" && (
                                        cell.value && "number" === typeof cell.value ? (
-                                          <DefaultCell>{cell.value.toLocaleString()}</DefaultCell>
+                                          <DefaultCell isFooter={isFooter}>{cell.value.toLocaleString()}</DefaultCell>
-                                       ) : (<DefaultCell>{cell.render("Cell")}</DefaultCell>)
+                                       ) : (<DefaultCell isFooter={isFooter}>{cell.render("Cell")}</DefaultCell>)
                                     )
                                  }
                                  {
                                     cell.column.type === "htmlAndTooltip" && (
-                                       <DefaultCell>
+                                       <DefaultCell isFooter={isFooter}>
-
                                           <NoMaxWidthTooltip title={parse(row.values["tooltip"])}>
                                              <Box>
                                                 {parse(cell.value)}
@@ -347,7 +372,7 @@ function DataTable({
                                  }
                                  {
                                     cell.column.type === "html" && (
-                                       <DefaultCell>{parse(cell.value)}</DefaultCell>
+                                       <DefaultCell isFooter={isFooter}>{parse(cell.value)}</DefaultCell>
                                     )
                                  }
                                  {
@@ -369,6 +394,7 @@ function DataTable({
                      </TableRow>
                   );
                })}
+
             </TableBody>
          </Table>
       </Box>

src/qqq/components/widgets/tables/TableCard.tsx

@@ -74,7 +74,7 @@ function TableCard({noRowsFoundHTML, data, rowsPerPage, hidePaginationDropdown,
    }, []);
 
    return (
-      <Box py={1}>
+      <Box py={1} mx={-2}>
          {
             data && data.columns && !noRowsFoundHTML ?
                <DataTable
@@ -85,7 +85,6 @@ function TableCard({noRowsFoundHTML, data, rowsPerPage, hidePaginationDropdown,
                   fixedHeight={fixedHeight}
                   showTotalEntries={false}
                   isSorted={false}
-                  noEndBorder
                />
                : noRowsFoundHTML ?
                   <Box p={3} pt={1} pb={1} sx={{textAlign: "center"}}>
@@ -118,7 +117,7 @@ function TableCard({noRowsFoundHTML, data, rowsPerPage, hidePaginationDropdown,
                               <TableRow sx={{verticalAlign: "top"}} key={`row-${i}`}>
                                  {Array(8).fill(0).map((_, j) =>
                                     <DataTableBodyCell key={`cell-${i}-${j}`} align="center">
-                                       <DefaultCell><Skeleton /></DefaultCell>
+                                       <DefaultCell isFooter={false}><Skeleton /></DefaultCell>
                                     </DataTableBodyCell>
                                  )}
                               </TableRow>

src/qqq/components/widgets/tables/TableWidget.tsx

@@ -28,6 +28,7 @@ import Typography from "@mui/material/Typography";
 // @ts-ignore
 import {htmlToText} from "html-to-text";
 import React, {useEffect, useState} from "react";
+import colors from "qqq/assets/theme/base/colors";
 import TableCard from "qqq/components/widgets/tables/TableCard";
 import Widget, {WidgetData} from "qqq/components/widgets/Widget";
 import HtmlUtils from "qqq/utils/HtmlUtils";
@@ -124,8 +125,8 @@ function TableWidget(props: Props): JSX.Element
    if(props.widgetMetaData?.showExportButton)
    {
       labelAdditionalElementsLeft.push(
-         <Typography key={1} variant="body2" py={2} px={0} display="inline" position="relative" top="-0.375rem">
+         <Typography key={1} variant="body2" py={2} px={0} display="inline" position="relative" top="-0.25rem">
-            <Tooltip title="Export"><Button sx={{px: 1, py: 0, minWidth: "initial"}} onClick={onExportClick} disabled={false}><Icon>save_alt</Icon></Button></Tooltip>
+            <Tooltip title="Export"><Button sx={{px: 1, py: 0, minWidth: "initial"}} onClick={onExportClick} disabled={false}><Icon sx={{color: colors.gray.main, fontSize: 1.125}}>save_alt</Icon></Button></Tooltip>
          </Typography>
       );
    }

src/qqq/components/widgets/tables/cells/DataTableBodyCell.tsx

@@ -22,6 +22,7 @@
 import Box from "@mui/material/Box";
 import {Theme} from "@mui/material/styles";
 import {ReactNode} from "react";
+import colors from "qqq/assets/theme/base/colors";
 
 // Declaring prop types for DataTableBodyCell
 interface Props
@@ -40,14 +41,26 @@ function DataTableBodyCell({noBorder, align, children}: Props): JSX.Element
          py={1.5}
          px={3}
          sx={({palette: {light}, typography: {size}, borders: {borderWidth}}: Theme) => ({
-            fontSize: size.sm,
+            borderBottom: noBorder ? "none" : `${borderWidth[1]} solid ${colors.grayLines.main}`,
-            borderBottom: noBorder ? "none" : `${borderWidth[1]} solid ${light.main}`,
+            fontSize: "0.875rem",
+            "@media (min-width: 1440px)": {
+               fontSize: "1rem"
+            },
+            "@media (max-width: 1440px)": {
+               fontSize: "0.875rem"
+            },
+            "&:nth-child(1)": {
+               paddingLeft: "1rem"
+            },
+            "&:last-child": {
+               paddingRight: "1rem"
+            }
          })}
       >
          <Box
             display="initial"
             width="max-content"
-            color="text"
+            color={colors.dark.main}
          >
             {children}
          </Box>

src/qqq/components/widgets/tables/cells/DataTableHeadCell.tsx

@@ -23,6 +23,7 @@ import Box from "@mui/material/Box";
 import Icon from "@mui/material/Icon";
 import {Theme} from "@mui/material/styles";
 import {ReactNode} from "react";
+import colors from "qqq/assets/theme/base/colors";
 import {useMaterialUIController} from "qqq/context";
 
 // Declaring props types for DataTableHeadCell
@@ -46,18 +47,28 @@ function DataTableHeadCell({width, children, sorted, align, ...rest}: Props): JS
          py={1.5}
          px={3}
          sx={({palette: {light}, borders: {borderWidth}}: Theme) => ({
-            borderBottom: `${borderWidth[1]} solid ${light.main}`,
+            borderBottom: `${borderWidth[1]} solid ${colors.grayLines.main}`,
+            "&:nth-child(1)": {
+               paddingLeft: "1rem"
+            },
+            "&:last-child": {
+               paddingRight: "1rem"
+            },
          })}
       >
          <Box
             {...rest}
             sx={({typography: {size, fontWeightBold}}: Theme) => ({
                position: "relative",
-               opacity: "0.7",
+               color: colors.grey[700],
                textAlign: align,
-               fontSize: size.xxs,
+               "@media (min-width: 1440px)": {
-               fontWeight: fontWeightBold,
+                  fontSize: "1rem"
-               textTransform: "uppercase",
+               },
+               "@media (max-width: 1440px)": {
+                  fontSize: "0.875rem"
+               },
+               fontWeight: 600,
                cursor: sorted && "pointer",
                userSelect: sorted && "none",
             })}

src/qqq/components/widgets/tables/cells/DefaultCell.tsx

@@ -14,12 +14,31 @@ Coded by www.creative-tim.com
 */
 
 import {ReactNode} from "react";
+import colors from "qqq/assets/theme/base/colors";
 import MDTypography from "qqq/components/legacy/MDTypography";
 
-function DefaultCell({children}: { children: ReactNode }): JSX.Element
+interface Props
+{
+   isFooter: boolean
+   children: ReactNode;
+}
+
+
+function DefaultCell({isFooter, children}: Props): JSX.Element
 {
    return (
-      <MDTypography variant="button" fontWeight="regular" color="text">
+      <MDTypography variant="button" color={colors.dark.main} sx={{
+         fontWeight: isFooter ? 600 : 500,
+         "@media (min-width: 1440px)": {
+            fontSize: "1rem"
+         },
+         "@media (max-width: 1440px)": {
+            fontSize: "0.875rem"
+         },
+         "& a": {
+            color: colors.blueGray.main
+         }
+      }}>
          {children}
       </MDTypography>
    );

src/qqq/layouts/DashboardLayout.tsx

@@ -38,11 +38,11 @@ function DashboardLayout({children}: { children: ReactNode }): JSX.Element
    return (
       <Box
          sx={({breakpoints, transitions, functions: {pxToRem}}) => ({
-            p: 3,
+            p: "20px",
             position: "relative",
 
             [breakpoints.up("xl")]: {
-               marginLeft: miniSidenav ? pxToRem(120) : pxToRem(274),
+               marginLeft: miniSidenav ? pxToRem(120) : pxToRem(245),
                transition: transitions.create(["margin-left", "margin-right"], {
                   easing: transitions.easing.easeInOut,
                   duration: transitions.duration.standard,

src/qqq/pages/apps/Home.tsx

@@ -204,7 +204,9 @@ function AppHome({app}: Props): JSX.Element
       <BaseLayout>
          <Box>
             {app.widgets && (
-               <DashboardWidgets widgetMetaDataList={widgets} />
+               <Box pb={app.sections ? 2.375 : 0}>
+                  <DashboardWidgets widgetMetaDataList={widgets} />
+               </Box>
             )}
             <Grid container spacing={3}>
                {

src/qqq/pages/processes/ProcessRun.tsx

@@ -414,228 +414,238 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
                //////////////////////////////////////////////////
                // render all of the components for this screen //
                //////////////////////////////////////////////////
-               step.components && (step.components.map((component: QFrontendComponent, index: number) => (
+               step.components && (step.components.map((component: QFrontendComponent, index: number) =>
-                  <div key={index}>
+               {
-                     {
+                  let helpRoles = ["PROCESS_SCREEN", "ALL_SCREENS"]
-                        component.type === QComponentType.HELP_TEXT && (
+                  if(component.type == QComponentType.BULK_EDIT_FORM)
-                           component.values.previewText ?
+                  {
-                              <>
+                     helpRoles = ["EDIT_SCREEN", "WRITE_SCREENS", "ALL_SCREENS"]
-                                 <Box mt={1}>
+                  }
-                                    <Button onClick={toggleShowFullHelpText} startIcon={<Icon>{showFullHelpText ? "expand_less" : "expand_more"}</Icon>} sx={{pl: 1}}>
+
-                                       {showFullHelpText ? "Hide " : "Show "}
+                  return (
-                                       {component.values.previewText}
+                     <div key={index}>
-                                    </Button>
+                        {
-                                 </Box>
+                           component.type === QComponentType.HELP_TEXT && (
-                                 <Box mt={1} style={{display: showFullHelpText ? "block" : "none"}}>
+                              component.values.previewText ?
-                                    <Typography variant="body2" color="info">
+                                 <>
-                                       {ValueUtils.breakTextIntoLines(component.values.text)}
+                                    <Box mt={1}>
-                                    </Typography>
+                                       <Button onClick={toggleShowFullHelpText} startIcon={<Icon>{showFullHelpText ? "expand_less" : "expand_more"}</Icon>} sx={{pl: 1}}>
-                                 </Box>
+                                          {showFullHelpText ? "Hide " : "Show "}
-                              </>
+                                          {component.values.previewText}
-                              :
+                                       </Button>
-                              <MDTypography variant="button" color="info">
+                                    </Box>
-                                 {ValueUtils.breakTextIntoLines(component.values.text)}
+                                    <Box mt={1} style={{display: showFullHelpText ? "block" : "none"}}>
-                              </MDTypography>
+                                       <Typography variant="body2" color="info">
-                        )
+                                          {ValueUtils.breakTextIntoLines(component.values.text)}
-                     }
+                                       </Typography>
-                     {
+                                    </Box>
-                        component.type === QComponentType.BULK_EDIT_FORM && (
+                                 </>
-                           tableMetaData && localTableSections ?
+                                 :
-                              <Grid container spacing={3} mt={2}>
+                                 <MDTypography variant="button" color="info">
-                                 {
+                                    {ValueUtils.breakTextIntoLines(component.values.text)}
-                                    localTableSections.length == 0 &&
+                                 </MDTypography>
-                                    <Grid item xs={12}>
+                           )
-                                       <Alert color="error">There are no editable fields on this table.</Alert>
+                        }
+                        {
+                           component.type === QComponentType.BULK_EDIT_FORM && (
+                              tableMetaData && localTableSections ?
+                                 <Grid container spacing={3} mt={2}>
+                                    {
+                                       localTableSections.length == 0 &&
+                                       <Grid item xs={12}>
+                                          <Alert color="error">There are no editable fields on this table.</Alert>
+                                       </Grid>
+                                    }
+                                    <Grid item xs={12} lg={3}>
+                                       {
+                                          localTableSections.length > 0 && <QRecordSidebar tableSections={localTableSections} stickyTop="20px" />
+                                       }
                                     </Grid>
-                                 }
+                                    <Grid item xs={12} lg={9}>
-                                 <Grid item xs={12} lg={3}>
-                                    {
-                                       localTableSections.length > 0 && <QRecordSidebar tableSections={localTableSections} stickyTop="20px" />
-                                    }
-                                 </Grid>
-                                 <Grid item xs={12} lg={9}>
-
-                                    {localTableSections.map((section: QTableSection, index: number) =>
-                                    {
-                                       const name = section.name;
-
-                                       if (section.isHidden)
                                        {
-                                          return;
+                                          localTableSections.map((section: QTableSection, index: number) =>
-                                       }
-
-                                       const sectionFormFields = {};
-                                       for (let i = 0; i < section.fieldNames.length; i++)
-                                       {
-                                          const fieldName = section.fieldNames[i];
-                                          if (formFields[fieldName])
                                           {
-                                             // @ts-ignore
+                                             const name = section.name;
-                                             sectionFormFields[fieldName] = formFields[fieldName];
-                                          }
-                                       }
 
-                                       if (Object.keys(sectionFormFields).length > 0)
+                                             if (section.isHidden)
-                                       {
+                                             {
-                                          const sectionFormData = {
+                                                return;
-                                             formFields: sectionFormFields,
+                                             }
-                                             values: values,
-                                             errors: errors,
-                                             touched: touched
-                                          };
 
-                                          return (
+                                             const sectionFormFields = {};
-                                             <Box key={name} pb={3}>
+                                             for (let i = 0; i < section.fieldNames.length; i++)
-                                                <Card id={name} sx={{scrollMarginTop: "20px"}} elevation={5}>
+                                             {
-                                                   <MDTypography variant="h5" p={3} pb={1}>
+                                                const fieldName = section.fieldNames[i];
-                                                      {section.label}
+                                                if (formFields[fieldName])
-                                                   </MDTypography>
+                                                {
-                                                   <Box px={2}>
+                                                   // @ts-ignore
-                                                      <QDynamicForm formData={sectionFormData} bulkEditMode bulkEditSwitchChangeHandler={bulkEditSwitchChanged} />
+                                                   sectionFormFields[fieldName] = formFields[fieldName];
+                                                }
+                                             }
+
+                                             if (Object.keys(sectionFormFields).length > 0)
+                                             {
+                                                const sectionFormData = {
+                                                   formFields: sectionFormFields,
+                                                   values: values,
+                                                   errors: errors,
+                                                   touched: touched
+                                                };
+
+                                                return (
+                                                   <Box key={name} pb={3}>
+                                                      <Card id={name} sx={{scrollMarginTop: "20px"}} elevation={5}>
+                                                         <MDTypography variant="h5" p={3} pb={1}>
+                                                            {section.label}
+                                                         </MDTypography>
+                                                         <Box px={2}>
+                                                            <QDynamicForm formData={sectionFormData} bulkEditMode bulkEditSwitchChangeHandler={bulkEditSwitchChanged} helpRoles={helpRoles} helpContentKeyPrefix={`table:${tableMetaData?.name};`} />
+                                                         </Box>
+                                                      </Card>
                                                    </Box>
-                                                </Card>
+                                                );
-                                             </Box>
+                                             }
-                                          );
+                                             else
+                                             {
+                                                return (<br />);
+                                             }
+                                          })
                                        }
-                                       else
+                                    </Grid>
-                                       {
-                                          return (<br />);
-                                       }
-                                    }
-                                    )}
                                  </Grid>
-                              </Grid>
+                                 : <QDynamicForm formData={formData} bulkEditMode bulkEditSwitchChangeHandler={bulkEditSwitchChanged} helpRoles={helpRoles} helpContentKeyPrefix={`table:${tableMetaData?.name};`} />
-                              : <QDynamicForm formData={formData} bulkEditMode bulkEditSwitchChangeHandler={bulkEditSwitchChanged} />
+                           )
-                        )
+                        }
-                     }
+                        {
-                     {
+                           component.type === QComponentType.EDIT_FORM && (
-                        component.type === QComponentType.EDIT_FORM && (
+                              <QDynamicForm formData={formData} helpRoles={helpRoles} helpContentKeyPrefix={`process:${processName};`} />
-                           <QDynamicForm formData={formData} />
+                           )
-                        )
+                        }
-                     }
+                        {
-                     {
+                           component.type === QComponentType.VIEW_FORM && step.viewFields && (
-                        component.type === QComponentType.VIEW_FORM && step.viewFields && (
+                              <div>
-                           <div>
+                                 {step.viewFields.map((field: QFieldMetaData) => (
-                              {step.viewFields.map((field: QFieldMetaData) => (
+                                    field.hasAdornment(AdornmentType.ERROR) ? (
-                                 field.hasAdornment(AdornmentType.ERROR) ? (
+                                       processValues[field.name] && (
-                                    processValues[field.name] && (
+                                          <Box key={field.name} display="flex" py={1} pr={2}>
+                                             <MDTypography variant="button" fontWeight="regular">
+                                                {ValueUtils.getValueForDisplay(field, processValues[field.name], undefined, "view")}
+                                             </MDTypography>
+                                          </Box>
+                                       )
+                                    ) : (
                                        <Box key={field.name} display="flex" py={1} pr={2}>
-                                          <MDTypography variant="button" fontWeight="regular">
+                                          <MDTypography variant="button" fontWeight="bold">
+                                             {field.label}
+                                             : &nbsp;
+                                          </MDTypography>
+                                          <MDTypography variant="button" fontWeight="regular" color="text">
                                              {ValueUtils.getValueForDisplay(field, processValues[field.name], undefined, "view")}
                                           </MDTypography>
                                        </Box>
-                                    )
+                                    )))
-                                 ) : (
+                                 }
-                                    <Box key={field.name} display="flex" py={1} pr={2}>
+                              </div>
-                                       <MDTypography variant="button" fontWeight="bold">
+                           )
-                                          {field.label}
+                        }
-                                          : &nbsp;
+                        {
-                                       </MDTypography>
+                           component.type === QComponentType.DOWNLOAD_FORM && (
-                                       <MDTypography variant="button" fontWeight="regular" color="text">
+                              <Grid container display="flex" justifyContent="center">
-                                          {ValueUtils.getValueForDisplay(field, processValues[field.name], undefined, "view")}
+                                 <Grid item xs={12} sm={12} xl={8} m={3} p={3} mt={6} sx={{border: "1px solid gray", borderRadius: "1rem"}}>
+                                    <Box mx={2} mt={-6} p={1} sx={{width: "fit-content", borderColor: "rgb(70%, 70%, 70%)", borderWidth: "2px", borderStyle: "solid", borderRadius: ".25em", backgroundColor: "#FFFFFF"}} width="initial" color="white">
+                                       Download
+                                    </Box>
+                                    <Box display="flex" py={1} pr={2}>
+                                       <MDTypography variant="button" fontWeight="bold" onClick={() => download(`/download/${processValues.downloadFileName}?filePath=${processValues.serverFilePath}`, processValues.downloadFileName)} sx={{cursor: "pointer"}}>
+                                          <Box display="flex" alignItems="center" gap={1} py={1} pr={2}>
+                                             <Icon fontSize="large">download_for_offline</Icon>
+                                             {processValues.downloadFileName}
+                                          </Box>
                                        </MDTypography>
                                     </Box>
-                                 )))
+                                 </Grid>
-                              }
-                           </div>
-                        )
-                     }
-                     {
-                        component.type === QComponentType.DOWNLOAD_FORM && (
-                           <Grid container display="flex" justifyContent="center">
-                              <Grid item xs={12} sm={12} xl={8} m={3} p={3} mt={6} sx={{border: "1px solid gray", borderRadius: "1rem"}}>
-                                 <Box mx={2} mt={-6} p={1} sx={{width: "fit-content", borderColor: "rgb(70%, 70%, 70%)", borderWidth: "2px", borderStyle: "solid", borderRadius: ".25em", backgroundColor: "#FFFFFF"}} width="initial" color="white">
-                                    Download
-                                 </Box>
-                                 <Box display="flex" py={1} pr={2}>
-                                    <MDTypography variant="button" fontWeight="bold" onClick={() => download(`/download/${processValues.downloadFileName}?filePath=${processValues.serverFilePath}`, processValues.downloadFileName)} sx={{cursor: "pointer"}}>
-                                       <Box display="flex" alignItems="center" gap={1} py={1} pr={2}>
-                                          <Icon fontSize="large">download_for_offline</Icon>
-                                          {processValues.downloadFileName}
-                                       </Box>
-                                    </MDTypography>
-                                 </Box>
                               </Grid>
-                           </Grid>
+                           )
-                        )
+                        }
-                     }
+                        {
-                     {
+                           component.type === QComponentType.VALIDATION_REVIEW_SCREEN && (
-                        component.type === QComponentType.VALIDATION_REVIEW_SCREEN && (
+                              <ValidationReview
-                           <ValidationReview
+                                 qInstance={qInstance}
-                              qInstance={qInstance}
+                                 process={processMetaData}
-                              process={processMetaData}
+                                 table={tableMetaData}
-                              table={tableMetaData}
+                                 processValues={processValues}
-                              processValues={processValues}
+                                 step={step}
-                              step={step}
+                                 previewRecords={records}
-                              previewRecords={records}
+                                 formValues={formData.values}
-                              formValues={formData.values}
+                                 doFullValidationRadioChangedHandler={(event: any) =>
-                              doFullValidationRadioChangedHandler={(event: any) =>
+                                 {
-                              {
+                                    const {value} = event.currentTarget;
-                                 const {value} = event.currentTarget;
 
-                                 //////////////////////////////////////////////////////////////
+                                    //////////////////////////////////////////////////////////////
-                                 // call the formik function to set the value in this field. //
+                                    // call the formik function to set the value in this field. //
-                                 //////////////////////////////////////////////////////////////
+                                    //////////////////////////////////////////////////////////////
-                                 setFieldValue("doFullValidation", value);
+                                    setFieldValue("doFullValidation", value);
 
-                                 setOverrideOnLastStep(value !== "true");
+                                    setOverrideOnLastStep(value !== "true");
-                              }}
+                                 }}
-                           />
+                              />
-                        )
+                           )
-                     }
+                        }
-                     {
+                        {
-                        component.type === QComponentType.PROCESS_SUMMARY_RESULTS && (
+                           component.type === QComponentType.PROCESS_SUMMARY_RESULTS && (
-                           <ProcessSummaryResults qInstance={qInstance} process={processMetaData} table={tableMetaData} processValues={processValues} step={step} />
+                              <ProcessSummaryResults qInstance={qInstance} process={processMetaData} table={tableMetaData} processValues={processValues} step={step} />
-                        )
+                           )
-                     }
+                        }
-                     {
+                        {
-                        component.type === QComponentType.GOOGLE_DRIVE_SELECT_FOLDER && (
+                           component.type === QComponentType.GOOGLE_DRIVE_SELECT_FOLDER && (
-                           // todo - make these booleans configurable (values on the component)
+                              // todo - make these booleans configurable (values on the component)
-                           <GoogleDriveFolderPickerWrapper showSharedDrivesView={true} showDefaultFoldersView={false} qInstance={qInstance} />
+                              <GoogleDriveFolderPickerWrapper showSharedDrivesView={true} showDefaultFoldersView={false} qInstance={qInstance} />
-                        )
+                           )
-                     }
+                        }
-                     {
+                        {
-                        component.type === QComponentType.RECORD_LIST && step.recordListFields && recordConfig.columns && (
+                           component.type === QComponentType.RECORD_LIST && step.recordListFields && recordConfig.columns && (
-                           <div>
+                              <div>
-                              <MDTypography variant="button" fontWeight="bold">Records</MDTypography>
+                                 <MDTypography variant="button" fontWeight="bold">Records</MDTypography>
-                              {" "}
+                                 {" "}
-                              <br />
+                                 <br />
-                              <Box height="100%">
+                                 <Box height="100%">
-                                 <DataGridPro
+                                    <DataGridPro
-                                    components={{Pagination: CustomPagination}}
+                                       components={{Pagination: CustomPagination}}
-                                    page={recordConfig.pageNo}
+                                       page={recordConfig.pageNo}
-                                    disableSelectionOnClick
+                                       disableSelectionOnClick
-                                    autoHeight
+                                       autoHeight
-                                    rows={recordConfig.rows}
+                                       rows={recordConfig.rows}
-                                    columns={recordConfig.columns}
+                                       columns={recordConfig.columns}
-                                    rowBuffer={10}
+                                       rowBuffer={10}
-                                    rowCount={recordConfig.totalRecords}
+                                       rowCount={recordConfig.totalRecords}
-                                    pageSize={recordConfig.rowsPerPage}
+                                       pageSize={recordConfig.rowsPerPage}
-                                    rowsPerPageOptions={[10, 25, 50]}
+                                       rowsPerPageOptions={[10, 25, 50]}
-                                    onPageSizeChange={recordConfig.handleRowsPerPageChange}
+                                       onPageSizeChange={recordConfig.handleRowsPerPageChange}
-                                    onPageChange={recordConfig.handlePageChange}
+                                       onPageChange={recordConfig.handlePageChange}
-                                    onRowClick={recordConfig.handleRowClick}
+                                       onRowClick={recordConfig.handleRowClick}
-                                    getRowId={(row) => row.__idForDataGridPro__}
+                                       getRowId={(row) => row.__idForDataGridPro__}
-                                    paginationMode="server"
+                                       paginationMode="server"
-                                    pagination
+                                       pagination
-                                    density="compact"
+                                       density="compact"
-                                    loading={recordConfig.loading}
+                                       loading={recordConfig.loading}
-                                    disableColumnFilter
+                                       disableColumnFilter
-                                 />
+                                    />
+                                 </Box>
+                              </div>
+                           )
+                        }
+                        {
+                           component.type === QComponentType.HTML && (
+                              processValues[`${step.name}.html`] &&
+                              <Box fontSize="1rem">
+                                 {parse(processValues[`${step.name}.html`])}
                               </Box>
-                           </div>
+                           )
-                        )
+                        }
-                     }
+                     </div>
-                     {
+                  );
-                        component.type === QComponentType.HTML && (
+               }))
-                           processValues[`${step.name}.html`] &&
+            }
-                           <Box fontSize="1rem">
-                              {parse(processValues[`${step.name}.html`])}
-                           </Box>
-                        )
-                     }
-                  </div>
-               )))}
          </>
       );
    };

src/qqq/pages/records/create/RecordCreate.tsx

@@ -34,12 +34,8 @@ function EntityCreate({table}: Props): JSX.Element
 {
    return (
       <BaseLayout>
-         <Box mt={4}>
+         <Box mb={3}>
-            <Grid container spacing={3}>
+            <EntityForm table={table} />
-               <Grid item xs={12} lg={12}>
-                  <EntityForm table={table} />
-               </Grid>
-            </Grid>
          </Box>
       </BaseLayout>
    );

src/qqq/pages/records/edit/RecordEdit.tsx

@@ -43,18 +43,8 @@ function EntityEdit({table, isCopy}: Props): JSX.Element
 
    return (
       <BaseLayout>
-         <Box mt={4}>
+         <Box mb={3}>
-            <Grid container spacing={3}>
+            <EntityForm table={table} id={id} isCopy={isCopy} />
-               <Grid item xs={12} lg={12}>
-                  <Box mb={3}>
-                     <Grid container spacing={3}>
-                        <Grid item xs={12}>
-                           <EntityForm table={table} id={id} isCopy={isCopy} />
-                        </Grid>
-                     </Grid>
-                  </Box>
-               </Grid>
-            </Grid>
          </Box>
       </BaseLayout>
    );

src/qqq/pages/records/query/RecordQuery.tsx

@@ -1118,7 +1118,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
                exportWindow.document.write(`<html lang="en">
                   <head>
                      <style>
-                        * { font-family: "Roboto","Helvetica","Arial",sans-serif; }
+                        * { font-family: "SF Pro Display","Roboto","Helvetica","Arial",sans-serif; }
                      </style>
                      <title>${filename}</title>
                      <script>

src/qqq/pages/records/view/RecordView.tsx

@@ -45,13 +45,16 @@ import ListItemIcon from "@mui/material/ListItemIcon";
 import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
 import Modal from "@mui/material/Modal";
+import Tooltip from "@mui/material/Tooltip/Tooltip";
 import React, {useContext, useEffect, useState} from "react";
 import {useLocation, useNavigate, useParams} from "react-router-dom";
 import QContext from "QContext";
+import colors from "qqq/assets/theme/base/colors";
 import AuditBody from "qqq/components/audits/AuditBody";
 import {QActionsMenuButton, QCancelButton, QDeleteButton, QEditButton} from "qqq/components/buttons/DefaultButtons";
 import EntityForm from "qqq/components/forms/EntityForm";
 import {GotoRecordButton} from "qqq/components/misc/GotoRecordDialog";
+import HelpContent, {hasHelpContent} from "qqq/components/misc/HelpContent";
 import QRecordSidebar from "qqq/components/misc/RecordSidebar";
 import DashboardWidgets from "qqq/components/widgets/DashboardWidgets";
 import BaseLayout from "qqq/layouts/BaseLayout";
@@ -98,6 +101,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
    const [metaData, setMetaData] = useState(null as QInstance);
    const [record, setRecord] = useState(null as QRecord);
    const [tableSections, setTableSections] = useState([] as QTableSection[]);
+   const [t1Section, setT1Section] = useState(null as QTableSection);
    const [t1SectionName, setT1SectionName] = useState(null as string);
    const [t1SectionElement, setT1SectionElement] = useState(null as JSX.Element);
    const [nonT1TableSections, setNonT1TableSections] = useState([] as QTableSection[]);
@@ -117,7 +121,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
    const openActionsMenu = (event: any) => setActionsMenu(event.currentTarget);
    const closeActionsMenu = () => setActionsMenu(null);
 
-   const {accentColor, setPageHeader, tableMetaData, setTableMetaData, tableProcesses, setTableProcesses, dotMenuOpen, keyboardHelpOpen} = useContext(QContext);
+   const {accentColor, setPageHeader, tableMetaData, setTableMetaData, tableProcesses, setTableProcesses, dotMenuOpen, keyboardHelpOpen, helpHelpActive} = useContext(QContext);
 
    if (localStorage.getItem(tableVariantLocalStorageKey))
    {
@@ -351,6 +355,23 @@ function RecordView({table, launchProcess}: Props): JSX.Element
       return (visibleJoinTables);
    };
 
+
+   /*******************************************************************************
+    ** get an element (or empty) to use as help content for a section
+    *******************************************************************************/
+   const getSectionHelp = (section: QTableSection) =>
+   {
+      const helpRoles = ["VIEW_SCREEN", "READ_SCREENS", "ALL_SCREENS"]
+      const formattedHelpContent = <HelpContent helpContents={section.helpContents} roles={helpRoles} helpContentKey={`table:${tableName};section:${section.name}`} />;
+
+      return formattedHelpContent && (
+         <Box px={"1.5rem"} fontSize={"0.875rem"} color={colors.blueGray.main}>
+            {formattedHelpContent}
+         </Box>
+      )
+   }
+
+
    if (!asyncLoadInited)
    {
       setAsyncLoadInited(true);
@@ -502,15 +523,24 @@ function RecordView({table, launchProcess}: Props): JSX.Element
                         {
                            let [field, tableForField] = TableUtils.getFieldAndTable(tableMetaData, fieldName);
                            let label = field.label;
+
+                           const helpRoles = ["VIEW_SCREEN", "READ_SCREENS", "ALL_SCREENS"]
+                           const showHelp = helpHelpActive || hasHelpContent(field.helpContents, helpRoles);
+                           const formattedHelpContent = <HelpContent helpContents={field.helpContents} roles={helpRoles} heading={label} helpContentKey={`table:${tableName};field:${fieldName}`} />;
+
+                           const labelElement = <Typography variant="button" textTransform="none" fontWeight="bold" pr={1} color="rgb(52, 71, 103)" sx={{cursor: "default"}}>{label}:</Typography>
+
                            return (
                               <Box key={fieldName} flexDirection="row" pr={2}>
-                                 <Typography variant="button" textTransform="none" fontWeight="bold" pr={1} color="rgb(52, 71, 103)">
+                                 <>
-                                    {label}:
+                                    {
+                                       showHelp && formattedHelpContent ? <Tooltip title={formattedHelpContent}>{labelElement}</Tooltip> : labelElement
+                                    }
                                     <div style={{display: "inline-block", width: 0}}>&nbsp;</div>
-                                 </Typography>
+                                    <Typography variant="button" textTransform="none" fontWeight="regular" color="rgb(123, 128, 154)">
-                                 <Typography variant="button" textTransform="none" fontWeight="regular" color="rgb(123, 128, 154)">
+                                       {ValueUtils.getDisplayValue(field, record, "view", fieldName)}
-                                    {ValueUtils.getDisplayValue(field, record, "view", fieldName)}
+                                    </Typography>
-                                 </Typography>
+                                 </>
                               </Box>
                            )
                         })
@@ -531,6 +561,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
                               <Typography variant="h6" p={3} pb={1}>
                                  {section.label}
                               </Typography>
+                              {getSectionHelp(section)}
                               <Box p={3} pt={0} flexDirection="column">
                                  {fields}
                               </Box>
@@ -549,6 +580,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
             {
                setT1SectionElement(sectionFieldElements.get(section.name));
                setT1SectionName(section.name);
+               setT1Section(section);
             }
             else
             {
@@ -879,6 +911,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
                                                    {renderActionsMenu}
                                                 </Box>
                                              </Box>
+                                             {t1Section && getSectionHelp(t1Section)}
                                              {t1SectionElement ? (<Box p={3} pt={0}>{t1SectionElement}</Box>) : null}
                                           </Card>
                                        </Grid>

src/qqq/styles/qqq-override-styles.css

@@ -100,9 +100,12 @@
 }
 
 /* move the green check / red x down to align with the calendar icon */
-.MuiFormControl-root
+.MuiFormControl-root:has(input[type="datetime-local"]),
+.MuiFormControl-root:has(input[type="date"]),
+.MuiFormControl-root:has(input[type="time"]),
+.MuiFormControl-root:has(.MuiInputBase-inputAdornedEnd)
 {
-   background-position-y: 1.4rem !important;
+   background-position: right 2rem center;
 }
 
 .MuiInputAdornment-sizeMedium *
@@ -565,13 +568,32 @@ input[type="search"]::-webkit-search-results-decoration { display: none; }
    right: .5rem
 }
 
-.hideScrollbars::-webkit-scrollbar {
+/* help-content */
-   background: transparent; /* Chrome/Safari/Webkit */
+.helpContent
-   width: 0;
+{
+   color: #757575;
 }
 
-.hideScrollbars {
+.helpContent .header
-   padding-right: 8px; /* pad-right for about half the width of a scrollbar.. */
+{
-   scrollbar-width: none; /* Firefox */
+   color: #212121;
-   -ms-overflow-style: none;  /* IE 10+ */
+   font-weight: 500;
+   display: block;
+   margin-bottom: 0.25rem;
+}
+
+.MuiTooltip-tooltip .helpContent P + P
+{
+   margin-top: 1rem;
+}
+
+.helpContent UL
+{
+   margin-left: 1rem;
+}
+
+/* for query screen column-header tooltips, move them up a little bit, to be more closely attached to the text. */
+.dataGridHeaderTooltip
+{
+   top: -1.25rem;
 }

src/qqq/utils/DataGridUtils.tsx

@@ -25,10 +25,13 @@ import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QField
 import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
 import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
 import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
+import Tooltip from "@mui/material/Tooltip/Tooltip";
 import {GridColDef, GridFilterItem, GridRowsProp} from "@mui/x-data-grid-pro";
 import {GridFilterOperator} from "@mui/x-data-grid/models/gridFilterOperator";
+import {GridColumnHeaderParams} from "@mui/x-data-grid/models/params/gridColumnHeaderParams";
 import React from "react";
 import {Link} from "react-router-dom";
+import HelpContent, {hasHelpContent} from "qqq/components/misc/HelpContent";
 import {buildQGridPvsOperators, QGridBlobOperators, QGridBooleanOperators, QGridNumericOperators, QGridStringOperators} from "qqq/pages/records/query/GridFilterOperators";
 import ValueUtils from "qqq/utils/qqq/ValueUtils";
 
@@ -310,6 +313,20 @@ export default class DataGridUtils
          (cellValues.value)
       );
 
+      const helpRoles = ["QUERY_SCREEN", "READ_SCREENS", "ALL_SCREENS"]
+      const showHelp = hasHelpContent(field.helpContents, helpRoles); // todo - maybe - take helpHelpActive from context all the way down to here?
+      if(showHelp)
+      {
+         const formattedHelpContent = <HelpContent helpContents={field.helpContents} roles={helpRoles} heading={headerName} helpContentKey={`table:${tableMetaData.name};field:${fieldName}`} />;
+         column.renderHeader = (params: GridColumnHeaderParams) => (
+            <Tooltip title={formattedHelpContent}>
+               <div className="MuiDataGrid-columnHeaderTitle" style={{lineHeight: "initial"}}>
+                  {headerName}
+               </div>
+            </Tooltip>
+         );
+      }
+
       return (column);
    }
 

src/qqq/utils/HtmlUtils.ts

@@ -134,7 +134,7 @@ export default class HtmlUtils
       openInWindow.document.write(`<html lang="en">
             <head>
                <style>
-                  * { font-family: "Roboto","Helvetica","Arial",sans-serif; }
+                  * { font-family: "SF Pro Display","Roboto","Helvetica","Arial",sans-serif; }
                </style>
                <title>${filename}</title>
                <script>

src/test/java/com/kingsrook/qqq/materialdashboard/lib/QBaseSeleniumTest.java

@@ -46,7 +46,7 @@ public class QBaseSeleniumTest
       String headless = System.getenv("QQQ_SELENIUM_HEADLESS");
       if("true".equals(headless))
       {
-         chromeOptions.setHeadless(true);
+         chromeOptions.addArguments("--headless=new");
       }
 
       WebDriverManager.chromiumdriver().setup();

src/test/java/com/kingsrook/qqq/materialdashboard/lib/QQQMaterialDashboardSelectors.java

@@ -1,3 +1,24 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2023.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
 package com.kingsrook.qqq.materialdashboard.lib;
 
 
@@ -7,7 +28,7 @@ package com.kingsrook.qqq.materialdashboard.lib;
 public interface QQQMaterialDashboardSelectors
 {
    String SIDEBAR_ITEM      = ".MuiDrawer-paperAnchorDockedLeft li.MuiListItem-root";
-   String BREADCRUMB_HEADER = ".MuiToolbar-root h5";
+   String BREADCRUMB_HEADER = ".MuiToolbar-root h3";
 
    String QUERY_GRID_CELL    = ".MuiDataGrid-root .MuiDataGrid-cellContent";
    String QUERY_FILTER_INPUT = ".customFilterPanel input.MuiInput-input";

src/test/java/com/kingsrook/qqq/materialdashboard/tests/DashboardTableWidgetExportTest.java

@@ -30,7 +30,6 @@ import com.kingsrook.qqq.materialdashboard.lib.javalin.QSeleniumJavalin;
 import org.apache.commons.io.FileUtils;
 import org.junit.jupiter.api.Test;
 import org.openqa.selenium.By;
-import static org.assertj.core.api.Assertions.assertThat;
 import static org.junit.jupiter.api.Assertions.assertEquals;
 
 
@@ -95,8 +94,8 @@ public class DashboardTableWidgetExportTest extends QBaseSeleniumTest
          .click();
 
       qSeleniumLib.waitForCondition("Should have downloaded 1 file", () -> getDownloadedFiles().size() == 1);
+      qSeleniumLib.waitForCondition("Expected file name", () -> getDownloadedFiles().get(0).getName().matches("Sample Table Widget.*.csv"));
       File csvFile = getDownloadedFiles().get(0);
-      assertThat(csvFile.getName()).matches("Sample Table Widget.*.csv");
       String fileContents = FileUtils.readFileToString(csvFile, StandardCharsets.UTF_8);
       assertEquals("""
          "Id","Name"
@@ -105,7 +104,7 @@ public class DashboardTableWidgetExportTest extends QBaseSeleniumTest
          "3","Bart J."
          """, fileContents);
 
-      // qSeleniumLib.waitForever();
+      qSeleniumLib.waitForever();
    }
 
 }

src/test/java/com/kingsrook/qqq/materialdashboard/tests/SavedFiltersTest.java

@@ -110,7 +110,7 @@ public class SavedFiltersTest extends QBaseSeleniumTest
       //////////////////////
       qSeleniumLib.waitForSelectorContaining(".MuiDataGrid-toolbarContainer BUTTON", "Filter").click();
       addQueryFilterInput(qSeleniumLib, 1, "First Name", "contains", "Jam", "Or");
-      qSeleniumLib.waitForSelectorContaining("H5", "Person").click();
+      qSeleniumLib.waitForSelectorContaining("H3", "Person").click();
       qSeleniumLib.waitForSelectorContaining("DIV", "Current Filter: Some People")
          .findElement(By.cssSelector("CIRCLE"));
       qSeleniumLib.waitForSelectorContaining(".MuiBadge-badge", "2");