CE-752 Final style updates for helpContent

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/forms/DynamicForm.tsx

@@ -108,10 +108,10 @@ function QDynamicForm({formData, formLabel, bulkEditMode, bulkEditSwitchChangeHa
                      let formattedHelpContent = <HelpContent helpContents={field.fieldMetaData.helpContents} roles={helpRoles} helpContentKey={`${helpContentKeyPrefix ?? ""}field:${fieldName}`} />;
                      if(formattedHelpContent)
                      {
-                        formattedHelpContent = <Box color="#757575" fontSize="0.875rem" mt="-0.5rem">{formattedHelpContent}</Box>
+                        formattedHelpContent = <Box color="#757575" fontSize="0.875rem" mt="-0.25rem">{formattedHelpContent}</Box>
                      }
 
-                     const labelElement = <Box fontSize="1rem" fontWeight="500">
+                     const labelElement = <Box fontSize="1rem" fontWeight="500" marginBottom="0.25rem">
                         <label htmlFor={field.name}>{field.label}</label>
                      </Box>
 

src/qqq/components/forms/DynamicSelect.tsx

@@ -50,6 +50,7 @@ interface Props
    bulkEditMode?: boolean;
    bulkEditSwitchChangeHandler?: any;
    otherValues?: Map<string, any>;
+   variant: "standard" | "outlined";
 }
 
 DynamicSelect.defaultProps = {
@@ -64,6 +65,7 @@ DynamicSelect.defaultProps = {
    isMultiple: false,
    bulkEditMode: false,
    otherValues: new Map<string, any>(),
+   variant: "outlined",
    bulkEditSwitchChangeHandler: () =>
    {
    },
@@ -71,7 +73,7 @@ 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[]>([]);
@@ -246,28 +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={{
+            sx={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
-               }
-            }}
             open={open}
             fullWidth
             onOpen={() =>
@@ -322,7 +331,7 @@ function DynamicSelect({tableName, processName, fieldName, overrideId, fieldLabe
                <TextField
                   {...params}
                   label={fieldLabel}
-                  variant="outlined"
+                  variant={variant}
                   autoComplete="off"
                   type="search"
                   InputProps={{

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>;
    }