Repository: CDOT-CV/jpo-cvmanager
Pull request #160: Help / Contact Support UI Updates
Author: login: mwodahl
Created: 2025-02-12T19:57:11Z | Merged: 2025-04-21T14:45:19Z

# PR Details

This PR updates the help page and contact support component styling to match the following Figma prototype: https://www.figma.com/proto/QG64ugNXpXMUk2vQ1wgPdZ/CV-Manager-Prototype-January-2025?page-id=2143%3A6061&node-id=2146-7749&viewport=-595%2C-659%2C0.22&t=A1CuORABoO0Qexzk-1&scaling=scale-down&content-scaling=fixed&starting-point-node-id=2146%3A6646

## Description

This PR includes the following changes:
- Help page background color updated
- Icon removed from contact support button
- Updated unit testing snapshots

## How Has This Been Tested?

This was tested locally using docker compose. Additionally, unit tests were verified to run using npm test.

## Types of changes

- [ X ] Defect fix (non-breaking change that fixes an issue)
- [ ] New feature (non-breaking change that adds functionality)
- [ ] Breaking change (fix or feature that cause existing functionality to change)

## Checklist:

- [ ] My changes require new environment variables:
  - [ ] I have updated the docker-compose, K8s YAML, and all dependent deployment configuration files.
- [ ] My changes require updates to the documentation:
  - [ ] I have updated the documentation accordingly.
- [ X ] My changes require updates and/or additions to the unit tests:
  - [ X ] I have modified/added tests to cover my changes.
- [ X ] All existing tests pass.



Diff:
diff --git a/webapp/src/components/ContactSupportMenu.tsx b/webapp/src/components/ContactSupportMenu.tsx
index e977c39c5..801c33a66 100644
--- a/webapp/src/components/ContactSupportMenu.tsx
+++ b/webapp/src/components/ContactSupportMenu.tsx
@@ -8,10 +8,8 @@ import RsuApi from '../apis/rsu-api'
 import './css/ContactSupportMenu.css'
 import toast from 'react-hot-toast'
 import Dialog from '@mui/material/Dialog'
-import { DialogActions, DialogContent, DialogTitle } from '@mui/material'
+import { Button, DialogActions, DialogContent, DialogTitle } from '@mui/material'
 import { AdminButton } from '../styles/components/AdminButton'
-import { LightButton } from '../styles/components/LightButton'
-import ContactSupportIcon from '@mui/icons-material/ContactSupport'
 import '../styles/fonts/museo-slab.css'
 
 const ContactSupportMenu = () => {
@@ -41,17 +39,15 @@ const ContactSupportMenu = () => {
 
   if (hidden) {
     return (
-      <div>
-        <LightButton
+      <div className="contactWrapper">
+        <Button
           variant="contained"
-          startIcon={<ContactSupportIcon />}
           onClick={() => {
             setHidden(!hidden)
           }}
-          sx={{ padding: 2, margin: 1, top: 5 }}
         >
           Contact Support
-        </LightButton>
+        </Button>
       </div>
     )
   }
diff --git a/webapp/src/components/Help.tsx b/webapp/src/components/Help.tsx
index 5772ae014..c87d9d1ed 100644
--- a/webapp/src/components/Help.tsx
+++ b/webapp/src/components/Help.tsx
@@ -9,36 +9,30 @@ import configure from '../icons/rsu_configure.PNG'
 import EnvironmentVars from '../EnvironmentVars'
 import ContactSupportMenu from './ContactSupportMenu'
 import { BorderedImage } from '../styles/components/BorderedImage'
-import { alpha, useTheme } from '@mui/material'
+import { Stack, Container, useTheme } from '@mui/material'
 
 const Help = () => {
   const theme = useTheme()
   return (
-    <div id="help">
-      <h1 className="helpHeader">Welcome to the {EnvironmentVars.DOT_NAME} CV Manager Website</h1>
-      <div className="spacer">
-        <p className="pHelp">
+    <Container maxWidth={false} id="help" sx={{ textAlign: 'left', backgroundColor: theme.palette.background.default }}>
+      <Stack spacing={2}>
+        <h2>Welcome to the {EnvironmentVars.DOT_NAME} CV Manager Website</h2>
+        <p>
           This application shows the physical location and message counts for each RSU installed by the Colorado
           Department of Transportation at various road sites throughout Colorado.
         </p>
-      </div>
-      <div className="spacer">
-        <p className="pHelp">
+        <p>
           The map on this website will represent the location of each RSU with a red, green, or yellow dot (shown
           below). A green dot represents an RSU that is online. A yellow dot represents an RSU that is offline but was
           recently active. A red dot represents an RSU that is not currently online.
         </p>
-      </div>
-      <BorderedImage src={status} alt="RSU Statuses Shown on Map" />
-      <div className="spacer">
-        <p className="pHelp">
+        <BorderedImage src={status} alt="RSU Statuses Shown on Map" />
+        <p>
           Clicking on the RSU will give the following information: IP address, online status, time last online, milepost
           number, serial number, and number of message counts (shown below).
         </p>
-      </div>
-      <BorderedImage src={popup} alt="RSU Popup with Data" />
-      <div className="spacer">
-        <p className="pHelp">
+        <BorderedImage src={popup} alt="RSU Popup with Data" />
+        <p>
           The menu on the right side of the webpage will allow users to select the time range and message type to be
           displayed for the RSUs. The menu will toggle between being hidden and visible each time the red X is clicked.
           The time frame can be changed by adjusting the date and time values in the date-time pickers. The top
@@ -47,40 +41,30 @@ const Help = () => {
           the date-time pickers or message selection dropdown the webpage will update accordingly. These elements are
           shown in the image below:
         </p>
-      </div>
-      <BorderedImage src={menu} alt="RSU Menu" />
-      <div className="spacer">
-        <p className="pHelp">
+        <BorderedImage src={menu} alt="RSU Menu" />
+        <p>
           The table included in the menu will show the number of message counts for each RSU in the given time frame
           regardless of online status (shown below). The table can be sorted by RSU, road, or count by clicking on the
           desired column header. Each time a column header is clicked, it will toggle between sorting the data in an
           ascending/descending fashion.
         </p>
-      </div>
-      <BorderedImage src={table} alt="RSU Message Count Table" />
-      <div className="spacer">
-        <p className="pHelp">
+        <BorderedImage src={table} alt="RSU Message Count Table" />
+        <p>
           Selecting 'Heat Map' on the navigation bar will show a heat map representing RSU message counts for the time
           range and message type selected in the menu (shown below). Any update to time range or message type in the
           menu will carry over between the heat map and RSU map.
         </p>
-      </div>
-      <BorderedImage src={heatmap} alt="CV Manager Heat Map" />
-      <div className="spacer">
-        <p className="pHelp">
+        <BorderedImage src={heatmap} alt="CV Manager Heat Map" />
+        <p>
           Selecting 'Configure' on the navigation bar will allow users to perform certain actions to the RSU based on
           their role. An RSU must first be selected on the RSU Map before any options become available. Users will be
           able to perform one or more of the following: pull current message forwarding configuration, add/delete
           message forwarding configurations, and perform an RSU reboot.
         </p>
-      </div>
-      <BorderedImage src={configure} alt="CV Manager Configuration Page" />
-      <div id="supportMenuParent" style={{ backgroundColor: alpha(theme.palette.background.default, 0.5) }}>
-        <div id="supportMenuContainer">
-          <ContactSupportMenu />
-        </div>
-      </div>
-    </div>
+        <BorderedImage src={configure} alt="CV Manager Configuration Page" />
+      </Stack>
+      <ContactSupportMenu />
+    </Container>
   )
 }
 
diff --git a/webapp/src/components/__snapshots__/ContactSupportMenu.test.tsx.snap b/webapp/src/components/__snapshots__/ContactSupportMenu.test.tsx.snap
index 1cc6e8f88..53adcc3a6 100644
--- a/webapp/src/components/__snapshots__/ContactSupportMenu.test.tsx.snap
+++ b/webapp/src/components/__snapshots__/ContactSupportMenu.test.tsx.snap
@@ -2,27 +2,14 @@
 
 exports[`should take a snapshot 1`] = `
 <div>
-  <div>
+  <div
+    class="contactWrapper"
+  >
     <button
       class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-mocked-MuiButtonBase-root-MuiButton-root"
       tabindex="0"
       type="button"
     >
-      <span
-        class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-mocked-MuiButton-startIcon"
-      >
-        <svg
-          aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-mocked-MuiSvgIcon-root"
-          data-testid="ContactSupportIcon"
-          focusable="false"
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M11.5 2C6.81 2 3 5.81 3 10.5S6.81 19 11.5 19h.5v3c4.86-2.34 8-7 8-11.5C20 5.81 16.19 2 11.5 2m1 14.5h-2v-2h2zm0-3.5h-2c0-3.25 3-3 3-5 0-1.1-.9-2-2-2s-2 .9-2 2h-2c0-2.21 1.79-4 4-4s4 1.79 4 4c0 2.5-3 2.75-3 5"
-          />
-        </svg>
-      </span>
       Contact Support
     </button>
   </div>
diff --git a/webapp/src/components/__snapshots__/Header.test.tsx.snap b/webapp/src/components/__snapshots__/Header.test.tsx.snap
index ff9c88d0b..da6d25f05 100644
--- a/webapp/src/components/__snapshots__/Header.test.tsx.snap
+++ b/webapp/src/components/__snapshots__/Header.test.tsx.snap
@@ -44,27 +44,14 @@ exports[`<Header /> should take a snapshot 1`] = `
           </button>
         </div>
         <br />
-        <div>
+        <div
+          class="contactWrapper"
+        >
           <button
             class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-mocked-MuiButtonBase-root-MuiButton-root"
             tabindex="0"
             type="button"
           >
-            <span
-              class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-mocked-MuiButton-startIcon"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-mocked-MuiSvgIcon-root"
-                data-testid="ContactSupportIcon"
-                focusable="false"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M11.5 2C6.81 2 3 5.81 3 10.5S6.81 19 11.5 19h.5v3c4.86-2.34 8-7 8-11.5C20 5.81 16.19 2 11.5 2m1 14.5h-2v-2h2zm0-3.5h-2c0-3.25 3-3 3-5 0-1.1-.9-2-2-2s-2 .9-2 2h-2c0-2.21 1.79-4 4-4s4 1.79 4 4c0 2.5-3 2.75-3 5"
-                />
-              </svg>
-            </span>
             Contact Support
           </button>
         </div>
@@ -72,27 +59,14 @@ exports[`<Header /> should take a snapshot 1`] = `
     </div>
   </div>
   <br />
-  <div>
+  <div
+    class="contactWrapper"
+  >
     <button
       class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-mocked-MuiButtonBase-root-MuiButton-root"
       tabindex="0"
       type="button"
     >
-      <span
-        class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-mocked-MuiButton-startIcon"
-      >
-        <svg
-          aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-mocked-MuiSvgIcon-root"
-          data-testid="ContactSupportIcon"
-          focusable="false"
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M11.5 2C6.81 2 3 5.81 3 10.5S6.81 19 11.5 19h.5v3c4.86-2.34 8-7 8-11.5C20 5.81 16.19 2 11.5 2m1 14.5h-2v-2h2zm0-3.5h-2c0-3.25 3-3 3-5 0-1.1-.9-2-2-2s-2 .9-2 2h-2c0-2.21 1.79-4 4-4s4 1.79 4 4c0 2.5-3 2.75-3 5"
-          />
-        </svg>
-      </span>
       Contact Support
     </button>
   </div>
diff --git a/webapp/src/components/__snapshots__/Help.test.tsx.snap b/webapp/src/components/__snapshots__/Help.test.tsx.snap
index b09011f6f..0cc13942f 100644
--- a/webapp/src/components/__snapshots__/Help.test.tsx.snap
+++ b/webapp/src/components/__snapshots__/Help.test.tsx.snap
@@ -3,139 +3,78 @@
 exports[`should take a snapshot 1`] = `
 <div>
   <div
+    class="MuiContainer-root css-mocked-MuiContainer-root"
     id="help"
   >
-    <h1
-      class="helpHeader"
-    >
-      Welcome to the 
-       CV Manager Website
-    </h1>
     <div
-      class="spacer"
+      class="MuiStack-root css-mocked-MuiStack-root"
     >
-      <p
-        class="pHelp"
-      >
+      <h2>
+        Welcome to the 
+         CV Manager Website
+      </h2>
+      <p>
         This application shows the physical location and message counts for each RSU installed by the Colorado Department of Transportation at various road sites throughout Colorado.
       </p>
-    </div>
-    <div
-      class="spacer"
-    >
-      <p
-        class="pHelp"
-      >
+      <p>
         The map on this website will represent the location of each RSU with a red, green, or yellow dot (shown below). A green dot represents an RSU that is online. A yellow dot represents an RSU that is offline but was recently active. A red dot represents an RSU that is not currently online.
       </p>
-    </div>
-    <img
-      alt="RSU Statuses Shown on Map"
-      class="css-16bzm2g"
-      src="rsu_status.PNG"
-    />
-    <div
-      class="spacer"
-    >
-      <p
-        class="pHelp"
-      >
+      <img
+        alt="RSU Statuses Shown on Map"
+        class="css-1qjvnec"
+        src="rsu_status.PNG"
+      />
+      <p>
         Clicking on the RSU will give the following information: IP address, online status, time last online, milepost number, serial number, and number of message counts (shown below).
       </p>
-    </div>
-    <img
-      alt="RSU Popup with Data"
-      class="css-16bzm2g"
-      src="rsu_popup.PNG"
-    />
-    <div
-      class="spacer"
-    >
-      <p
-        class="pHelp"
-      >
+      <img
+        alt="RSU Popup with Data"
+        class="css-1qjvnec"
+        src="rsu_popup.PNG"
+      />
+      <p>
         The menu on the right side of the webpage will allow users to select the time range and message type to be displayed for the RSUs. The menu will toggle between being hidden and visible each time the red X is clicked. The time frame can be changed by adjusting the date and time values in the date-time pickers. The top date-time picker represents the start time while the bottom represents the end time. Below the date-time pickers is a dropdown menu where the RSU message type can be selected. Each time a value is updated in either the date-time pickers or message selection dropdown the webpage will update accordingly. These elements are shown in the image below:
       </p>
-    </div>
-    <img
-      alt="RSU Menu"
-      class="css-16bzm2g"
-      src="rsu_menu.PNG"
-    />
-    <div
-      class="spacer"
-    >
-      <p
-        class="pHelp"
-      >
+      <img
+        alt="RSU Menu"
+        class="css-1qjvnec"
+        src="rsu_menu.PNG"
+      />
+      <p>
         The table included in the menu will show the number of message counts for each RSU in the given time frame regardless of online status (shown below). The table can be sorted by RSU, road, or count by clicking on the desired column header. Each time a column header is clicked, it will toggle between sorting the data in an ascending/descending fashion.
       </p>
-    </div>
-    <img
-      alt="RSU Message Count Table"
-      class="css-16bzm2g"
-      src="rsu_count.PNG"
-    />
-    <div
-      class="spacer"
-    >
-      <p
-        class="pHelp"
-      >
+      <img
+        alt="RSU Message Count Table"
+        class="css-1qjvnec"
+        src="rsu_count.PNG"
+      />
+      <p>
         Selecting 'Heat Map' on the navigation bar will show a heat map representing RSU message counts for the time range and message type selected in the menu (shown below). Any update to time range or message type in the menu will carry over between the heat map and RSU map.
       </p>
-    </div>
-    <img
-      alt="CV Manager Heat Map"
-      class="css-16bzm2g"
-      src="rsu_heatmap.PNG"
-    />
-    <div
-      class="spacer"
-    >
-      <p
-        class="pHelp"
-      >
+      <img
+        alt="CV Manager Heat Map"
+        class="css-1qjvnec"
+        src="rsu_heatmap.PNG"
+      />
+      <p>
         Selecting 'Configure' on the navigation bar will allow users to perform certain actions to the RSU based on their role. An RSU must first be selected on the RSU Map before any options become available. Users will be able to perform one or more of the following: pull current message forwarding configuration, add/delete message forwarding configurations, and perform an RSU reboot.
       </p>
+      <img
+        alt="CV Manager Configuration Page"
+        class="css-1qjvnec"
+        src="rsu_configure.PNG"
+      />
     </div>
-    <img
-      alt="CV Manager Configuration Page"
-      class="css-16bzm2g"
-      src="rsu_configure.PNG"
-    />
     <div
-      id="supportMenuParent"
-      style="background-color: rgba(255, 255, 255, 0.5);"
+      class="contactWrapper"
     >
-      <div
-        id="supportMenuContainer"
+      <button
+        class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-mocked-MuiButtonBase-root-MuiButton-root"
+        tabindex="0"
+        type="button"
       >
-        <div>
-          <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-mocked-MuiButtonBase-root-MuiButton-root"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-mocked-MuiButton-startIcon"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-mocked-MuiSvgIcon-root"
-                data-testid="ContactSupportIcon"
-                focusable="false"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M11.5 2C6.81 2 3 5.81 3 10.5S6.81 19 11.5 19h.5v3c4.86-2.34 8-7 8-11.5C20 5.81 16.19 2 11.5 2m1 14.5h-2v-2h2zm0-3.5h-2c0-3.25 3-3 3-5 0-1.1-.9-2-2-2s-2 .9-2 2h-2c0-2.21 1.79-4 4-4s4 1.79 4 4c0 2.5-3 2.75-3 5"
-                />
-              </svg>
-            </span>
-            Contact Support
-          </button>
-        </div>
-      </div>
+        Contact Support
+      </button>
     </div>
   </div>
 </div>
diff --git a/webapp/src/components/css/ContactSupportMenu.css b/webapp/src/components/css/ContactSupportMenu.css
index 5f1f36c7e..ddbe5d633 100644
--- a/webapp/src/components/css/ContactSupportMenu.css
+++ b/webapp/src/components/css/ContactSupportMenu.css
@@ -32,3 +32,15 @@ textarea {
   resize: vertical;
   min-height: 100px;
 }
+
+.contactWrapper {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  display: flex;
+  padding: 16px 0px;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+}
diff --git a/webapp/src/components/css/Help.css b/webapp/src/components/css/Help.css
index 9feb5b2cb..8e37df619 100644
--- a/webapp/src/components/css/Help.css
+++ b/webapp/src/components/css/Help.css
@@ -5,39 +5,8 @@
   padding-bottom: 5em;
 }
 
-.helpHeader {
+h2 {
   padding-top: 3vh;
-  padding-bottom: 1vh;
-  text-align: center;
+  padding-bottom: 2vh;
   font-family: 'museo-slab', sans-serif;
 }
-
-.spacer {
-  margin-top: 3vh;
-}
-
-.pHelp {
-  margin-left: 2em;
-  margin-right: 2em;
-  size: 12px;
-  font-family: sans-serif;
-}
-
-#supportMenuParent {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  position: fixed;
-  bottom: 0;
-  z-index: 1000;
-}
-
-#supportMenuContainer {
-  display: inline-block;
-  margin-bottom: 10px;
-  text-align: center;
-  width: fit-content;
-  height: fit-content;
-  text-align: center;
-}
diff --git a/webapp/src/styles/components/BorderedImage.tsx b/webapp/src/styles/components/BorderedImage.tsx
index 9acbba56e..af3649de8 100644
--- a/webapp/src/styles/components/BorderedImage.tsx
+++ b/webapp/src/styles/components/BorderedImage.tsx
@@ -4,8 +4,4 @@ export const BorderedImage = styled('img')(({ theme }) => ({
   display: 'block',
   marginLeft: 'auto',
   marginRight: 'auto',
-  width: '40%',
-  marginTop: '4em',
-  marginBottom: '4em',
-  border: `0.5px solid ${theme.palette.text.primary}}`,
 }))


Reviews:
user: login: rgelmis
body: I'm not totally done reviewing this yet, but here are some fixes to get things started!
state: CHANGES_REQUESTED
author_association: COLLABORATOR
submitted_at: 2025-04-02T20:23:49Z
user: login: mwodahl
state: COMMENTED
author_association: NONE
submitted_at: 2025-04-04T19:12:22Z
user: login: mwodahl
state: COMMENTED
author_association: NONE
submitted_at: 2025-04-04T19:12:52Z
user: login: mwodahl
state: COMMENTED
author_association: NONE
submitted_at: 2025-04-04T19:13:07Z
user: login: mwodahl
state: COMMENTED
author_association: NONE
submitted_at: 2025-04-04T19:13:12Z
user: login: mwodahl
state: COMMENTED
author_association: NONE
submitted_at: 2025-04-04T19:13:28Z
user: login: mwodahl
state: COMMENTED
author_association: NONE
submitted_at: 2025-04-04T19:15:54Z
user: login: rgelmis
body: In addition to these suggestions, add this class to `ContactSupportMenu.css`:
```
.contactWrapper {
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  padding: 16px 0px;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.50);
}
```
state: CHANGES_REQUESTED
author_association: COLLABORATOR
submitted_at: 2025-04-11T20:01:51Z
user: login: mwodahl
state: COMMENTED
author_association: NONE
submitted_at: 2025-04-14T13:50:27Z
user: login: mwodahl
state: COMMENTED
author_association: NONE
submitted_at: 2025-04-14T13:50:43Z
user: login: mwodahl
state: COMMENTED
author_association: NONE
submitted_at: 2025-04-14T13:50:56Z
user: login: mwodahl
state: COMMENTED
author_association: NONE
submitted_at: 2025-04-14T13:51:05Z
user: login: mwodahl
state: COMMENTED
author_association: NONE
submitted_at: 2025-04-14T14:01:20Z
user: login: rgelmis
state: APPROVED
author_association: COLLABORATOR
submitted_at: 2025-04-14T21:36:30Z

Review comments:
diff_hunk: @@ -14,7 +14,7 @@ import { alpha, useTheme } from '@mui/material'
 const Help = () => {
   const theme = useTheme()
   return (
-    <div id="help">
+    <div id="help" style={{ backgroundColor: theme.palette.background.default, textAlign: 'left' }}>
path: webapp/src/components/Help.tsx
user: login: rgelmis
body: Since most of the other pages (other than the map-related pages) use this same background color, we can minimize redundancy by moving `backgroundColor: theme.palette.background.default` to `#masterdiv` on line 30 in `Dashboard.tsx`. This won't affect the RSU or Intersection Map pages, but will handle the bg for the others
created_at: 2025-04-02T19:11:59Z
author_association: COLLABORATOR
diff_hunk: @@ -6,8 +6,8 @@
 .helpHeader {
   padding-top: 3vh;
   padding-bottom: 1vh;
-  text-align: center;
   font-family: sans-serif;
+  margin-left: 2rem;
 }
path: webapp/src/components/css/Help.css
user: login: rgelmis
body: I don't love making local changes to global HTML elements like this, but it is what it is. And I don't think we have a page header anywhere else, so this will have to work for now. I recommend: 
1. Replacing `.helpHeader` with `h2`
2. Changing `padding-bottom` to `2vh`
3. Removing `margin-left: 2rem`

created_at: 2025-04-02T19:46:26Z
author_association: COLLABORATOR
diff_hunk: @@ -14,7 +14,7 @@ import { alpha, useTheme } from '@mui/material'
 const Help = () => {
path: webapp/src/components/Help.tsx
user: login: rgelmis
body: Import Container in line 12, and add:
```suggestion
import Stack from '@mui/material/Stack';

const Help = () => {
```
created_at: 2025-04-02T19:48:42Z
author_association: COLLABORATOR
diff_hunk: @@ -14,7 +14,7 @@ import { alpha, useTheme } from '@mui/material'
 const Help = () => {
   const theme = useTheme()
   return (
-    <div id="help">
+    <div id="help" style={{ backgroundColor: theme.palette.background.default, textAlign: 'left' }}>
       <h1 className="helpHeader">Welcome to the {EnvironmentVars.DOT_NAME} CV Manager Website</h1>
path: webapp/src/components/Help.tsx
user: login: rgelmis
body: ```suggestion
      <h2>Welcome to the {EnvironmentVars.DOT_NAME} CV Manager</h2>
```
created_at: 2025-04-02T19:49:34Z
author_association: COLLABORATOR
diff_hunk: @@ -14,7 +14,7 @@ import { alpha, useTheme } from '@mui/material'
 const Help = () => {
   const theme = useTheme()
   return (
-    <div id="help">
+    <div id="help" style={{ backgroundColor: theme.palette.background.default, textAlign: 'left' }}>
path: webapp/src/components/Help.tsx
user: login: rgelmis
body: Change this from a `<div>` to `<Container maxWidth="xl">`, don't forget to change the closing tag too!
created_at: 2025-04-02T19:50:56Z
author_association: COLLABORATOR
diff_hunk: @@ -14,7 +14,7 @@ import { alpha, useTheme } from '@mui/material'
 const Help = () => {
   const theme = useTheme()
   return (
-    <div id="help">
+    <div id="help" style={{ backgroundColor: theme.palette.background.default, textAlign: 'left' }}>
       <h1 className="helpHeader">Welcome to the {EnvironmentVars.DOT_NAME} CV Manager Website</h1>
       <div className="spacer">
path: webapp/src/components/Help.tsx
user: login: rgelmis
body: This is going to be really annoying, I am so sorry
1. Remove all instances of `<div className="spacer">`
2. Wrap all of this in a single `<Stack spacing={2}></Stack>`
3. Remove all `className="pHelp">`
4. Update all `<p>` elements to use Trebuchet. This should be done globally, not within `Help.css`. This might have been taken care of in the UI Theme PR already
5. Remove `width: '40%'` from `BorderedImage.tsx` - this component might need to be reworked entirely, but this update should be fine for now
created_at: 2025-04-02T20:23:16Z
author_association: COLLABORATOR
diff_hunk: @@ -14,7 +14,7 @@ import { alpha, useTheme } from '@mui/material'
 const Help = () => {
   const theme = useTheme()
   return (
-    <div id="help">
+    <div id="help" style={{ backgroundColor: theme.palette.background.default, textAlign: 'left' }}>
path: webapp/src/components/Help.tsx
user: login: mwodahl
body: Updated
created_at: 2025-04-04T19:12:22Z
author_association: NONE
diff_hunk: @@ -6,8 +6,8 @@
 .helpHeader {
   padding-top: 3vh;
   padding-bottom: 1vh;
-  text-align: center;
   font-family: sans-serif;
+  margin-left: 2rem;
 }
path: webapp/src/components/css/Help.css
user: login: mwodahl
body: Updated. I also removed all of the unused classes from Help.css
created_at: 2025-04-04T19:12:52Z
author_association: NONE
diff_hunk: @@ -14,7 +14,7 @@ import { alpha, useTheme } from '@mui/material'
 const Help = () => {
path: webapp/src/components/Help.tsx
user: login: mwodahl
body: Updated imports to include Container & Stack
created_at: 2025-04-04T19:13:07Z
author_association: NONE
diff_hunk: @@ -14,7 +14,7 @@ import { alpha, useTheme } from '@mui/material'
 const Help = () => {
   const theme = useTheme()
   return (
-    <div id="help">
+    <div id="help" style={{ backgroundColor: theme.palette.background.default, textAlign: 'left' }}>
       <h1 className="helpHeader">Welcome to the {EnvironmentVars.DOT_NAME} CV Manager Website</h1>
path: webapp/src/components/Help.tsx
user: login: mwodahl
body: Updated
created_at: 2025-04-04T19:13:12Z
author_association: NONE
diff_hunk: @@ -14,7 +14,7 @@ import { alpha, useTheme } from '@mui/material'
 const Help = () => {
   const theme = useTheme()
   return (
-    <div id="help">
+    <div id="help" style={{ backgroundColor: theme.palette.background.default, textAlign: 'left' }}>
path: webapp/src/components/Help.tsx
user: login: mwodahl
body: Updated to use Container
created_at: 2025-04-04T19:13:28Z
author_association: NONE
diff_hunk: @@ -14,7 +14,7 @@ import { alpha, useTheme } from '@mui/material'
 const Help = () => {
   const theme = useTheme()
   return (
-    <div id="help">
+    <div id="help" style={{ backgroundColor: theme.palette.background.default, textAlign: 'left' }}>
       <h1 className="helpHeader">Welcome to the {EnvironmentVars.DOT_NAME} CV Manager Website</h1>
       <div className="spacer">
path: webapp/src/components/Help.tsx
user: login: mwodahl
body: I believe I've addressed all of these. I merged the theming updates, and `<p>` elements do use Trebuchet by default. Also, I've removed the `width` attribute from `BorderedImage.tsx`; however, this causes the Help page to scroll both vertically and horizontally as some of the images are quite large. If this is alright for now, we'll want to address this when the Help page content is updated.
created_at: 2025-04-04T19:15:54Z
author_association: NONE
diff_hunk: @@ -42,16 +40,15 @@ const ContactSupportMenu = () => {
   if (hidden) {
     return (
       <div>
path: webapp/src/components/ContactSupportMenu.tsx
user: login: rgelmis
body: ```suggestion
      <div className="contactWrapper">
```
created_at: 2025-04-11T19:55:19Z
author_association: COLLABORATOR
diff_hunk: @@ -42,16 +40,15 @@ const ContactSupportMenu = () => {
   if (hidden) {
     return (
       <div>
-        <LightButton
+        <Button
           variant="contained"
-          startIcon={<ContactSupportIcon />}
           onClick={() => {
             setHidden(!hidden)
           }}
-          sx={{ padding: 2, margin: 1, top: 5 }}
+          sx={{ margin: 1, top: 5 }}
path: webapp/src/components/ContactSupportMenu.tsx
user: login: rgelmis
body: ```suggestion
```
created_at: 2025-04-11T19:55:35Z
author_association: COLLABORATOR
diff_hunk: @@ -4,7 +4,6 @@ export const BorderedImage = styled('img')(({ theme }) => ({
   display: 'block',
   marginLeft: 'auto',
   marginRight: 'auto',
-  width: '40%',
   marginTop: '4em',
   marginBottom: '4em',
   border: `0.5px solid ${theme.palette.text.primary}}`,
path: webapp/src/styles/components/BorderedImage.tsx
user: login: rgelmis
body: ```suggestion
```
created_at: 2025-04-11T19:56:22Z
author_association: COLLABORATOR
diff_hunk: @@ -9,36 +9,29 @@ import configure from '../icons/rsu_configure.PNG'
 import EnvironmentVars from '../EnvironmentVars'
 import ContactSupportMenu from './ContactSupportMenu'
 import { BorderedImage } from '../styles/components/BorderedImage'
-import { alpha, useTheme } from '@mui/material'
+import { Stack, Container } from '@mui/material'
 
 const Help = () => {
-  const theme = useTheme()
   return (
-    <div id="help">
-      <h1 className="helpHeader">Welcome to the {EnvironmentVars.DOT_NAME} CV Manager Website</h1>
-      <div className="spacer">
-        <p className="pHelp">
+    <Stack spacing={2}>
+      <Container maxWidth="xl" id="help" sx={{ textAlign: 'left' }}>
path: webapp/src/components/Help.tsx
user: login: rgelmis
body: ```suggestion
     <Container maxWidth={false}  id="help" sx={{ textAlign: 'left' }}>
     <Stack spacing={2}>
```
created_at: 2025-04-11T19:57:55Z
author_association: COLLABORATOR
diff_hunk: @@ -47,40 +40,30 @@ const Help = () => {
           the date-time pickers or message selection dropdown the webpage will update accordingly. These elements are
           shown in the image below:
         </p>
-      </div>
-      <BorderedImage src={menu} alt="RSU Menu" />
-      <div className="spacer">
-        <p className="pHelp">
+        <BorderedImage src={menu} alt="RSU Menu" />
+        <p>
           The table included in the menu will show the number of message counts for each RSU in the given time frame
           regardless of online status (shown below). The table can be sorted by RSU, road, or count by clicking on the
           desired column header. Each time a column header is clicked, it will toggle between sorting the data in an
           ascending/descending fashion.
         </p>
-      </div>
-      <BorderedImage src={table} alt="RSU Message Count Table" />
-      <div className="spacer">
-        <p className="pHelp">
+        <BorderedImage src={table} alt="RSU Message Count Table" />
+        <p>
           Selecting 'Heat Map' on the navigation bar will show a heat map representing RSU message counts for the time
           range and message type selected in the menu (shown below). Any update to time range or message type in the
           menu will carry over between the heat map and RSU map.
         </p>
-      </div>
-      <BorderedImage src={heatmap} alt="CV Manager Heat Map" />
-      <div className="spacer">
-        <p className="pHelp">
+        <BorderedImage src={heatmap} alt="CV Manager Heat Map" />
+        <p>
           Selecting 'Configure' on the navigation bar will allow users to perform certain actions to the RSU based on
           their role. An RSU must first be selected on the RSU Map before any options become available. Users will be
           able to perform one or more of the following: pull current message forwarding configuration, add/delete
           message forwarding configurations, and perform an RSU reboot.
         </p>
-      </div>
-      <BorderedImage src={configure} alt="CV Manager Configuration Page" />
-      <div id="supportMenuParent" style={{ backgroundColor: alpha(theme.palette.background.default, 0.5) }}>
-        <div id="supportMenuContainer">
-          <ContactSupportMenu />
-        </div>
-      </div>
-    </div>
+        <BorderedImage src={configure} alt="CV Manager Configuration Page" />
+        <ContactSupportMenu />
+      </Container>
+    </Stack>
path: webapp/src/components/Help.tsx
user: login: rgelmis
body: ```suggestion
      </Stack>
      <ContactSupportMenu />
    </Container>    
```
created_at: 2025-04-11T19:59:49Z
author_association: COLLABORATOR
diff_hunk: @@ -42,16 +40,15 @@ const ContactSupportMenu = () => {
   if (hidden) {
     return (
       <div>
path: webapp/src/components/ContactSupportMenu.tsx
user: login: mwodahl
body: Added this new class
created_at: 2025-04-14T13:50:27Z
author_association: NONE
diff_hunk: @@ -42,16 +40,15 @@ const ContactSupportMenu = () => {
   if (hidden) {
     return (
       <div>
-        <LightButton
+        <Button
           variant="contained"
-          startIcon={<ContactSupportIcon />}
           onClick={() => {
             setHidden(!hidden)
           }}
-          sx={{ padding: 2, margin: 1, top: 5 }}
+          sx={{ margin: 1, top: 5 }}
path: webapp/src/components/ContactSupportMenu.tsx
user: login: mwodahl
body: Removed sx value
created_at: 2025-04-14T13:50:43Z
author_association: NONE
diff_hunk: @@ -4,7 +4,6 @@ export const BorderedImage = styled('img')(({ theme }) => ({
   display: 'block',
   marginLeft: 'auto',
   marginRight: 'auto',
-  width: '40%',
   marginTop: '4em',
   marginBottom: '4em',
   border: `0.5px solid ${theme.palette.text.primary}}`,
path: webapp/src/styles/components/BorderedImage.tsx
user: login: mwodahl
body: Removed these properties
created_at: 2025-04-14T13:50:56Z
author_association: NONE
diff_hunk: @@ -9,36 +9,29 @@ import configure from '../icons/rsu_configure.PNG'
 import EnvironmentVars from '../EnvironmentVars'
 import ContactSupportMenu from './ContactSupportMenu'
 import { BorderedImage } from '../styles/components/BorderedImage'
-import { alpha, useTheme } from '@mui/material'
+import { Stack, Container } from '@mui/material'
 
 const Help = () => {
-  const theme = useTheme()
   return (
-    <div id="help">
-      <h1 className="helpHeader">Welcome to the {EnvironmentVars.DOT_NAME} CV Manager Website</h1>
-      <div className="spacer">
-        <p className="pHelp">
+    <Stack spacing={2}>
+      <Container maxWidth="xl" id="help" sx={{ textAlign: 'left' }}>
path: webapp/src/components/Help.tsx
user: login: mwodahl
body: Updated stack/container ordering
created_at: 2025-04-14T13:51:05Z
author_association: NONE
diff_hunk: @@ -47,40 +40,30 @@ const Help = () => {
           the date-time pickers or message selection dropdown the webpage will update accordingly. These elements are
           shown in the image below:
         </p>
-      </div>
-      <BorderedImage src={menu} alt="RSU Menu" />
-      <div className="spacer">
-        <p className="pHelp">
+        <BorderedImage src={menu} alt="RSU Menu" />
+        <p>
           The table included in the menu will show the number of message counts for each RSU in the given time frame
           regardless of online status (shown below). The table can be sorted by RSU, road, or count by clicking on the
           desired column header. Each time a column header is clicked, it will toggle between sorting the data in an
           ascending/descending fashion.
         </p>
-      </div>
-      <BorderedImage src={table} alt="RSU Message Count Table" />
-      <div className="spacer">
-        <p className="pHelp">
+        <BorderedImage src={table} alt="RSU Message Count Table" />
+        <p>
           Selecting 'Heat Map' on the navigation bar will show a heat map representing RSU message counts for the time
           range and message type selected in the menu (shown below). Any update to time range or message type in the
           menu will carry over between the heat map and RSU map.
         </p>
-      </div>
-      <BorderedImage src={heatmap} alt="CV Manager Heat Map" />
-      <div className="spacer">
-        <p className="pHelp">
+        <BorderedImage src={heatmap} alt="CV Manager Heat Map" />
+        <p>
           Selecting 'Configure' on the navigation bar will allow users to perform certain actions to the RSU based on
           their role. An RSU must first be selected on the RSU Map before any options become available. Users will be
           able to perform one or more of the following: pull current message forwarding configuration, add/delete
           message forwarding configurations, and perform an RSU reboot.
         </p>
-      </div>
-      <BorderedImage src={configure} alt="CV Manager Configuration Page" />
-      <div id="supportMenuParent" style={{ backgroundColor: alpha(theme.palette.background.default, 0.5) }}>
-        <div id="supportMenuContainer">
-          <ContactSupportMenu />
-        </div>
-      </div>
-    </div>
+        <BorderedImage src={configure} alt="CV Manager Configuration Page" />
+        <ContactSupportMenu />
+      </Container>
+    </Stack>
path: webapp/src/components/Help.tsx
user: login: mwodahl
body: Updated
created_at: 2025-04-14T14:01:19Z
author_association: NONE

PR comments:
user: login: rgelmis
created_at: 2025-04-03T15:56:40Z
body: @mwodahl can you create a work item for updating the images and content on this page to be completed when the UI update is done?
author_association: COLLABORATOR
user: login: mwodahl
created_at: 2025-04-04T19:13:39Z
body: > @mwodahl can you create a work item for updating the images and content on this page to be completed when the UI update is done?

Yep! This has been created
author_association: NONE
user: login: rgelmis
created_at: 2025-04-17T15:09:48Z
body: lgtm! 🫡
author_association: COLLABORATOR