Merge pull request #847 from cityofaustin/chia-barx-wsod

Add missing styles to dashboardstatusmodal
cityofaustin · Oct 27, 2022 · 0baf3db · 0baf3db
2 parents 2608119 + 1077e1b
commit 0baf3db
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 5 deletions.
diff --git a/moped-editor/src/theme/index.js b/moped-editor/src/theme/index.js
@@ -9,6 +9,7 @@ const theme = createTheme({
       paper: "#ffffff",
       mapControls: "#FFFFFF",
       mapControlsHover: "#e6e6e6",
+      summaryHover: "#f2f2f2"
     },
     primary: {
       main: "#1276D1",

diff --git a/moped-editor/src/views/dashboard/DashboardStatusModal.js b/moped-editor/src/views/dashboard/DashboardStatusModal.js
@@ -7,6 +7,7 @@ import {
   IconButton,
   Tooltip,
 } from "@material-ui/core";
+import clsx from "clsx";
 import CloseIcon from "@material-ui/icons/Close";
 import ControlPointIcon from "@material-ui/icons/ControlPoint";
 import ProjectComments from "../projects/projectView/ProjectComments";
@@ -31,7 +32,10 @@ const DashboardStatusModal = ({
     <>
       <Typography
         component={"span"}
-        className={classes.fieldLabelText}
+        className={clsx({
+          [classes.fieldLabelText]: modalParent === "summary",
+          [classes.statusUpdateText]: modalParent !== "summary",
+        })}
         onClick={() => setIsDialogOpen(true)}
       >
         {/* if there is no status update, render the add status icon */}
@@ -40,7 +44,7 @@ const DashboardStatusModal = ({
             {/* if the parent is the summary page, also render the status label */}
             {modalParent === "summary" && children}
             <Tooltip placement="bottom-start" title="Create new status update">
-              <ControlPointIcon />
+              <ControlPointIcon className={classes.tooltipIcon} />
             </Tooltip>
           </div>
         )}
@@ -71,4 +75,4 @@ const DashboardStatusModal = ({
   );
 };
 
-export default DashboardStatusModal;
+export default DashboardStatusModal;
diff --git a/moped-editor/src/views/dashboard/DashboardView.js b/moped-editor/src/views/dashboard/DashboardView.js
@@ -73,6 +73,18 @@ const useStyles = makeStyles((theme) => ({
   date: {
     paddingTop: "4px",
   },
+  dialogTitle: {
+    fontFamily: theme.typography.fontFamily,
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  statusUpdateText: {
+    cursor: "pointer",
+  },
+  tooltipIcon: {
+    fontSize: "20px",
+  },
 }));
 
 function a11yProps(index) {
@@ -223,6 +235,7 @@ const DashboardView = () => {
           modalParent="dashboard"
           statusUpdate={entry.status_update}
           queryRefetch={refetch}
+          classes={classes}
         >
           {parse(String(entry.status_update))}
         </DashboardStatusModal>

diff --git a/moped-editor/src/views/projects/projectView/ProjectFundingTable.js b/moped-editor/src/views/projects/projectView/ProjectFundingTable.js
@@ -126,7 +126,7 @@ const useStyles = makeStyles((theme) => ({
     width: "calc(100% - 2rem)",
     paddingLeft: theme.spacing(0.5),
     "&:hover": {
-      backgroundColor: "#f2f2f2",
+      backgroundColor: theme.palette.background.summaryHover,
       borderRadius: theme.spacing(0.5),
       cursor: "pointer",
     },

diff --git a/moped-editor/src/views/projects/projectView/ProjectSummary/ProjectSummary.js b/moped-editor/src/views/projects/projectView/ProjectSummary/ProjectSummary.js
@@ -62,7 +62,7 @@ const useStyles = makeStyles((theme) => ({
     width: "calc(100% - 2rem)",
     paddingLeft: theme.spacing(0.5),
     "&:hover": {
-      backgroundColor: "#f2f2f2",
+      backgroundColor: theme.palette.background.summaryHover,
       borderRadius: theme.spacing(0.5),
       cursor: "pointer",
     },
@@ -104,6 +104,9 @@ const useStyles = makeStyles((theme) => ({
     width: "calc(100% - 2rem)",
     paddingLeft: theme.spacing(0.5),
   },
+  tooltipIcon: {
+    fontSize: "20px",
+  },
 }));
 
 /**