Merge pull request #1079 from cityofaustin/10596-summary-status

[Enhancement] Refinements to project summary status update
cityofaustin · Jul 19, 2023 · 9a7e1e7 · 9a7e1e7
2 parents 1ee64ea + 58d9966
commit 9a7e1e7
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 15 deletions.
diff --git a/moped-editor/src/utils/dateAndTime.js b/moped-editor/src/utils/dateAndTime.js
@@ -76,7 +76,7 @@ const MILLS_CONVERSION = {
  * Format millseconds into a relative description
  * @param {integer} millsElapsed - the elapsed time in milliseconds to format
  * @param {string} unitName - the name of the units to convert to - the string must
- * be defined in the MILLS_CONVERSION objeect
+ * be defined in the MILLS_CONVERSION object
  * @returns {string} in format  `<value> <unit-name> ago`
  */
 const formatRelativeTime = (millsElapsed, unitName) => {

diff --git a/moped-editor/src/views/projects/projectView/ProjectSummary/ProjectSummary.js b/moped-editor/src/views/projects/projectView/ProjectSummary/ProjectSummary.js
@@ -60,6 +60,12 @@ const useStyles = makeStyles((theme) => ({
     fontSize: ".8rem",
     paddingLeft: theme.spacing(0.5),
   },
+  fieldLabelSmall: {
+    width: "100%",
+    color: theme.palette.text.secondary,
+    fontSize: ".7rem",
+    paddingLeft: theme.spacing(0.5),
+  },
   fieldLabelText: {
     width: "calc(100% - 2rem)",
     paddingLeft: theme.spacing(0.5),
@@ -70,11 +76,6 @@ const useStyles = makeStyles((theme) => ({
     },
     overflowWrap: "break-word",
   },
-  fieldAuthor: {
-    marginRight: ".25rem",
-    fontSize: ".8rem",
-    fontWeight: "bold",
-  },
   knackFieldLabelText: {
     width: "calc(100% - 2rem)",
     cursor: "pointer",

diff --git a/moped-editor/src/views/projects/projectView/ProjectSummary/ProjectSummaryStatusUpdate.js b/moped-editor/src/views/projects/projectView/ProjectSummary/ProjectSummaryStatusUpdate.js
@@ -3,9 +3,9 @@ import React from "react";
 import { Box, Grid, Typography } from "@mui/material";
 import parse from "html-react-parser";
 
-import { makeUSExpandedFormDateFromTimeStampTZ } from "../../../../utils/dateAndTime";
 import DashboardStatusModal from "src/views/dashboard/DashboardStatusModal";
 import { getUserFullName } from "src/utils/userNames";
+import { formatRelativeDate } from "src/utils/dateAndTime";
 
 /**
  * ProjectSummaryStatusUpdate Component
@@ -24,9 +24,9 @@ const ProjectSummaryStatusUpdate = ({ projectId, data, refetch, classes }) => {
   const currentPhaseId =
     data.moped_project[0].moped_proj_phases[0]?.moped_phase.phase_id;
 
-  const dateCreated = makeUSExpandedFormDateFromTimeStampTZ(
+  const dateCreated = formatRelativeDate(
     data.moped_project[0].moped_proj_notes[0]?.date_created
-  ).toUpperCase();
+  );
 
   return (
     <Grid item xs={12} className={classes.fieldGridItem}>
@@ -50,11 +50,8 @@ const ProjectSummaryStatusUpdate = ({ projectId, data, refetch, classes }) => {
           {!!statusUpdate && (
             <div>
               <div>{parse(String(statusUpdate))}</div>
-              <span className={classes.fieldAuthor}>{addedBy}</span>
-              <span className={classes.fieldLabel}>
-                {makeUSExpandedFormDateFromTimeStampTZ(
-                  dateCreated
-                ).toUpperCase()}
+              <span className={classes.fieldLabelSmall}>
+                {addedBy} - {dateCreated}
               </span>
             </div>
           )}

diff --git a/moped-editor/src/views/projects/projectView/ProjectView.js b/moped-editor/src/views/projects/projectView/ProjectView.js
@@ -78,7 +78,7 @@ const useStyles = makeStyles((theme) => ({
     marginRight: theme.spacing(2),
   },
   title: {
-    height: "3rem",
+    minHeight: "3rem",
   },
   moreHorizontal: {
     fontSize: "2rem",