[Publisher] Update data entry form page layout (#1654)

* Update data entry form page layout * UI & console error fixes * Add not reported tooltip to new input
Recidiviz · Feb 3, 2025 · 07d75c8 · 07d75c8
1 parent 94985db
commit 07d75c8
Show file tree

Hide file tree

Showing 9 changed files with 104 additions and 45 deletions.
diff --git a/common/components/Input/Input.styled.tsx b/common/components/Input/Input.styled.tsx
@@ -210,6 +210,7 @@ export const TooltipLink = styled.span`
 `;
 
 export const NewInputWrapper = styled.div`
+  position: relative;
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -259,8 +260,20 @@ export const NewInputLabel = styled.label<{ error: boolean }>`
 `;
 
 export const ErrorMessage = styled.div<{ settingsCustomMargin?: boolean }>`
-  ${typography.body}
+  ${typography.sizeCSS.small}
+  font-weight: 400;
   color: ${palette.solid.red};
   margin-top: ${({ settingsCustomMargin }) =>
     settingsCustomMargin ? "-4px" : "8px"};
 `;
+
+export const NewInputTooltipWrapper = styled.span`
+  position: absolute;
+  bottom: 6px;
+  right: 8px;
+
+  & > img {
+    width: 16px;
+    height: 16px;
+  }
+`;
diff --git a/common/components/Input/Input.tsx b/common/components/Input/Input.tsx
@@ -201,10 +201,27 @@ export function NewInput({
   fullWidth,
   agencySettingsConfigs,
   settingsCustomMargin,
+  notReported,
+  notReportedIconTooltip,
   ...props
 }: InputProps) {
+  const [showNotReportedTooltip, setShowNotReportedTooltip] =
+    useState<boolean>(false);
+  const tooltipId = replaceSymbolsWithDash(`input-${metricKey}-${name}`);
+
+  const showTooltip = () => {
+    setShowNotReportedTooltip(true);
+  };
+  const clearTooltip = () => {
+    setShowNotReportedTooltip(false);
+  };
+
   return (
-    <Styled.NewInputWrapper>
+    <Styled.NewInputWrapper
+      onMouseEnter={showTooltip}
+      onMouseLeave={clearTooltip}
+      onFocus={clearTooltip}
+    >
       {!hideLabel && (
         <Styled.NewInputLabel htmlFor={`input-${name}`} error={Boolean(error)}>
           {label}
@@ -228,6 +245,32 @@ export function NewInput({
           {error.message}
         </Styled.ErrorMessage>
       )}
+
+      {notReported && (
+        <Styled.NewInputTooltipWrapper>
+          <img id={`img-${tooltipId}`} src={notReportedIcon} alt="" />
+          {notReportedIconTooltip && (
+            <Tooltip
+              anchorId={`img-${tooltipId}`}
+              position="bottom"
+              content={
+                <>
+                  {notReportedIconTooltip.tooltipText}{" "}
+                  <Styled.TooltipLink
+                    onClick={notReportedIconTooltip.tooltipLink}
+                  >
+                    {notReportedIconTooltip.tooltipLinkLabel}
+                  </Styled.TooltipLink>
+                  .
+                </>
+              }
+              tooltipWidth="narrow"
+              clickable
+              isOpen={showNotReportedTooltip}
+            />
+          )}
+        </Styled.NewInputTooltipWrapper>
+      )}
     </Styled.NewInputWrapper>
   );
 }
diff --git a/common/components/RadioButton/RadioButton.styled.tsx b/common/components/RadioButton/RadioButton.styled.tsx
@@ -22,7 +22,7 @@ import { RadioButtonSize, WrapperSpacing } from "./types";
 
 /** TODO(#1167) Replace existing radio button styles with new styles */
 
-export const RadioButtonsWrapper = styled.form<{
+export const RadioButtonsWrapper = styled.div<{
   spacing?: WrapperSpacing;
 }>`
   width: 100%;

diff --git a/publisher/src/components/Forms/Form.styles.tsx b/publisher/src/components/Forms/Form.styles.tsx
@@ -100,8 +100,7 @@ export const TitleWrapper = styled.div<TitleWrapperProps>`
 `;
 
 export const DataEntryFormTitleWrapper = styled.div`
-  width: ${DATA_ENTRY_WIDTH + 2}px;
-  margin: 0 -1px;
+  width: ${DATA_ENTRY_WIDTH + 4}px;
   position: fixed;
   top: ${HEADER_BAR_HEIGHT}px;
   padding-top: 32px;
@@ -130,13 +129,14 @@ export const OnePanelBackLinkContainer = styled(PreTitle)`
 export const MetricSummarySectionTitle = styled.div`
   ${typography.sizeCSS.normal}
   text-transform: capitalize;
-  margin-top: 6px;
+  margin: 6px 0;
   margin-right: 17px;
 `;
 
 export const Title = styled.h1`
   ${typography.sizeCSS.title};
   margin-top: 16px;
+  margin-bottom: 8px;
   transition: 0.3s ease;
 `;
 
@@ -151,10 +151,10 @@ export const MetricSectionTitleWrapper = styled.div`
 `;
 
 export const MetricSectionTitle = styled.div<{ notReporting?: boolean }>`
-  ${typography.sizeCSS.large}
+  ${typography.sizeCSS.medium}
   text-transform: capitalize;
   margin-right: 17px;
-  margin-top: 32px;
+  margin-bottom: 8px;
   color: ${({ notReporting }) =>
     notReporting ? palette.highlight.grey8 : palette.solid.darkgrey};
 `;
@@ -163,30 +163,25 @@ export const MetricSystemTitle = styled(MetricSectionTitle)<{
   firstTitle?: boolean;
 }>`
   color: ${palette.highlight.grey8};
-  border-top: ${({ firstTitle }) =>
-    firstTitle ? `none` : `1px solid ${palette.highlight.grey8}`};
-  padding-top: ${({ firstTitle }) => (firstTitle ? `none` : `30px`)};
+  padding-top: ${({ firstTitle }) => (firstTitle ? `none` : `24px`)};
   width: 100%;
   text-transform: capitalize;
-
-  &:first-child {
-    border-top: none;
-  }
 `;
 
 export const MetricSectionSubTitle = styled.div`
-  ${typography.sizeCSS.medium}
+  ${typography.sizeCSS.normal}
+  font-weight: 400;
   color: ${palette.highlight.grey8};
-  margin-top: 8px;
-  margin-bottom: 16px;
+  margin-bottom: 24px;
 `;
 
 export const DisabledMetricsInfoWrapper = styled.div`
   ${typography.sizeCSS.normal}
+  font-weight: 400;
   color: ${palette.highlight.grey8};
   padding-top: 10px;
   margin-top: 1px;
-  border-top: 1px solid ${palette.highlight.grey9};
+  border-top: 1px solid ${palette.solid.lightgrey4};
 `;
 
 export const DisabledMetricsInfoLink = styled.span`
@@ -198,12 +193,14 @@ export const DisabledMetricsInfoLink = styled.span`
 export const DisaggregationDisplayContainer = styled.div`
   display: flex;
   flex-direction: column;
+  padding-bottom: 8px;
+  margin-bottom: 40px;
+  border-bottom: 1px solid ${palette.solid.lightgrey4};
 `;
 
 export const DisaggregationsTabbedBarContainer = styled.div`
   width: 100%;
-  margin-bottom: 32px;
-  border-bottom: 1px solid ${palette.solid.darkgrey};
+  margin: 24px 0;
 
   @media only screen and (max-width: ${MIN_TABLET_WIDTH}px) {
     display: none;
@@ -271,6 +268,7 @@ export const DisaggregationDimensions = styled.div`
 
 export const DisaggregationInputWrapper = styled.div`
   width: 49%;
+  padding-bottom: 24px;
 
   label {
     width: 100%;
@@ -280,6 +278,10 @@ export const DisaggregationInputWrapper = styled.div`
     text-overflow: ellipsis;
   }
 
+  input {
+    height: 36px;
+  }
+
   @media only screen and (max-width: ${SINGLE_COLUMN_MAX_WIDTH}px) {
     width: 100%;
 
@@ -342,5 +344,5 @@ export const OpacityGradient = styled.div`
 
 export const EthnicityHeader = styled.div`
   width: 100%;
-  margin-bottom: 20px;
+  margin-bottom: 16px;
 `;
diff --git a/publisher/src/components/Reports/DataEntryForm.tsx b/publisher/src/components/Reports/DataEntryForm.tsx
@@ -49,7 +49,6 @@ import {
   MetricSectionTitle,
   MetricSectionTitleWrapper,
   MetricSystemTitle,
-  PreTitle,
   TabbedDisaggregations,
   Title,
 } from "../Forms";
@@ -278,7 +277,6 @@ const DataEntryForm: React.FC<{
           <FormFieldSet disabled={isReadOnly}>
             {/* Form Title */}
             <DataEntryFormTitleWrapper>
-              <PreTitle>Enter Data</PreTitle>
               <Title>
                 {reportOverview &&
                   printReportTitle(

diff --git a/publisher/src/components/Reports/DataEntryFormComponents.tsx b/publisher/src/components/Reports/DataEntryFormComponents.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 // =============================================================================
 
-import { Input } from "@justice-counts/common/components/Input";
+import { NewInput } from "@justice-counts/common/components/Input";
 import {
   Metric,
   MetricDisaggregationDimensions,
@@ -53,7 +53,7 @@ export const MetricTextInput = observer(
       updateMetricsValues(reportID, metric.key, e.target.value, metric.enabled);
 
     return (
-      <Input
+      <NewInput
         label={metric.label}
         error={metricsValues[reportID]?.[metric.key]?.error}
         type="text"
@@ -73,6 +73,7 @@ export const MetricTextInput = observer(
         onFocus={updateFieldDescription}
         onBlur={clearFieldDescription}
         disabled={disabled}
+        settingsCustomMargin
       />
     );
   }
@@ -115,7 +116,7 @@ export const DisaggregationDimensionTextInput = observer(
       );
 
     return (
-      <Input
+      <NewInput
         key={dimension.key}
         label={customLabel || dimension.label}
         error={
@@ -153,6 +154,7 @@ export const DisaggregationDimensionTextInput = observer(
           tooltipLinkLabel: "Settings",
           tooltipLink: () => navigate(`/agency/${agencyId}/metric-config`),
         }}
+        settingsCustomMargin
       />
     );
   }

diff --git a/publisher/src/components/Reports/HelperText.tsx b/publisher/src/components/Reports/HelperText.tsx
@@ -69,7 +69,7 @@ const HelperTextContainer = styled.div`
 `;
 
 const HelperTextSection = styled.div`
-  margin-bottom: 31px;
+  margin-bottom: 24px;
 
   &:last-child {
     margin-bottom: 0;
@@ -98,12 +98,12 @@ const HelperTextContent = styled.div`
 `;
 
 const HelperTextMetricName = styled.div`
-  ${typography.sizeCSS.medium}
-  margin-bottom: 6px;
+  ${typography.sizeCSS.normal}
+  margin-bottom: 16px;
 `;
 
 const HelperTextMetricDescription = styled.div`
-  color: ${palette.highlight.grey10};
+  font-weight: 400;
 `;
 
 const Term = styled.span`
@@ -152,13 +152,13 @@ const HelperText: React.FC<{
       )}
 
       <HelperTextSection>
-        <HelperTextTitle>
+        <HelperTextMetricDescription>
           Additional context can be viewed and entered via the{" "}
           <HelperTextLink onClick={() => navigate("../metric-config")}>
             Metric Configuration
           </HelperTextLink>{" "}
           page in Settings.
-        </HelperTextTitle>
+        </HelperTextMetricDescription>
       </HelperTextSection>
     </HelperTextContainer>
   );

diff --git a/publisher/src/components/Reports/ReportSummaryPanel.tsx b/publisher/src/components/Reports/ReportSummaryPanel.tsx
@@ -102,7 +102,7 @@ export const ReportSummarySection = styled.a`
   justify-content: flex-start;
   position: relative;
   text-decoration: none;
-  margin-bottom: 2px;
+  margin-bottom: 6px;
   border-radius: 2px;
   color: ${palette.highlight.grey8};
   transition: 0.2s ease;
@@ -122,9 +122,7 @@ export const MetricDisplayName = styled.div<{ activeSection?: boolean }>`
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  border-bottom: 2px solid
-    ${({ activeSection }) =>
-      activeSection ? palette.solid.blue : `transparent`};
+  font-weight: 400;
   &:hover {
     cursor: pointer;
     color: ${palette.solid.darkgrey};
@@ -168,17 +166,20 @@ export const EditDetails = styled.div`
 `;
 
 export const EditDetailsTitle = styled.div`
-  ${typography.sizeCSS.small}
-  padding-top: 8px;
-  border-top: 1px solid ${palette.solid.darkgrey};
+  ${typography.sizeCSS.normal}
+  font-weight: 500;
+  padding-top: 16px;
+  margin-bottom: 4px;
+  border-top: 1px solid ${palette.solid.lightgrey4};
 `;
 
 export const EditDetailsContent = styled.div`
   display: flex;
   flex-wrap: wrap;
   ${typography.sizeCSS.normal}
-  color: ${palette.highlight.grey9};
-  margin-bottom: 18px;
+  font-weight: 400;
+  color: ${palette.highlight.grey8};
+  margin-bottom: 16px;
 `;
 
 const PublishContainer = styled.div`
@@ -187,7 +188,7 @@ const PublishContainer = styled.div`
   @media only screen and (max-width: ${TWO_PANEL_MAX_WIDTH}px) {
     display: block;
     position: absolute;
-    border-top: 1px solid ${palette.highlight.grey9};
+    border-top: 1px solid ${palette.solid.lightgrey4};
     background: ${palette.solid.white};
     right: 0;
     bottom: 0;

diff --git a/publisher/src/pages/Reports.tsx b/publisher/src/pages/Reports.tsx
@@ -323,7 +323,7 @@ const Reports: React.FC = () => {
       <>
         {filteredReportsMemoized.length > 0 ? (
           sortedReportsEntries.map(([reportYear, reports]) => (
-            <>
+            <Fragment key={reportYear}>
               {/* Only show report year marker for prior years (before current year) */}
               {new Date().getUTCFullYear() !== Number(reportYear) && (
                 <Row noHover isRowReportYear>
@@ -463,7 +463,7 @@ const Reports: React.FC = () => {
                     </Fragment>
                   );
                 })}
-            </>
+            </Fragment>
           ))
         ) : (
           <NoReportsDisplay>