DEV - Update styling of the Service Request details modal

[traycn]

Overview

We need to update the Service Request detail modal to more clearly indicate the Neighborhood Council pertaining to the Service Request

Action Items

• Update the Styling of the Service Request details to reflect the mockups of the modal
  • Updated SR title: type icon (e.g. colored circle) is now left of the SR detail title, content is aligned center
  • Updated rounded corners: 30px
  • Updated color for title section bar: #000000
  • Updated title styles: Roboto, bold, 40px
  • Updated section header styles: Roboto, regular, 24px
  • Updated section details styles: Roboto, thin, 16px, #FFFFFF (looks grey but its not), 18px padding-left
  • Updated "Service Request" field name: Roboto, SemiBold, 16px, underline
  • Updated "Service Request" field value: "^, text is padded with a pound sign and non-breaking space: # 1-458940111
  • Updated "Reported On" field name and value: Roboto, Light, 14px, #FFB104
  • Updated "Closed" field name and value: "^ NOTE: this field only exists on SRs that report a Closed date -- otherwise do not render this field
  • Updated "Source" field name and value: Roboto, Thin, 10px, #FFFFFF (also looks grey but its not)
  • Updated "Agency" field name and value: "^
  • SR Detail component has the following layout sections
    • Location, Neighborhood council: this is similar to previous version, except now it explicitly has a field name and value, value is indented
    • Service Request: this layout is identical to the previous version (e.g. table, field name is aligned left, value is aligned right)
    • Reported, Closed: these have an identical layout to Location, Neighborhood. Re-use this layout if possible
    • Source, Agency: these have an identical layout to the table used in the previous version, except Source is the left column and Agency is the right column. Attempt to re-use code if possible. This section is 64px from the bottom. (see resources)

Resources/Instructions

• Design issue: UXD - Display NC names on hover via pop-up modal  #1807 (comment)
• Link to Figma section, Neighborhood council pop up #1669 (USE SPEC ON THE RIGHT)

Screenshot before proposed changes

Screenshot of Figma Design

This is achieved in Figma by doing the following:

1. double clicking on an element
2. holding option key (Mac) or alt key (Win)
3. mouse over another element, which will bring up the red guide-lines that shows the distance relative to the element selected in Step 1.

Screenshot from localhost

TODO

[NEW] added per request from comment

Pixel length of Source/Agency to bottom of component

[ryanfchase]

@traycn I am modifying this ticket slightly:

• Overview
  • We need to do update the Service Request detail modal to refresh the user experience when viewing the Service Request details. more clearly indicate the Neighborhood Council pertaining to the Service Request
  • Reference to the Design issue: #1807 (Comment) ⬇️ move this down, to Resources
• Resources / Instructions
  • Here is where we can find the specifications for that design update Link to Figma section, Neighborhood council pop up #1669

edit: mixup fixed

[ryanfchase]

@Joy-Truex @allisonjeon I've put together the list of Action Items the dev will need to make to implement the design. I'm needing help confirming the exact specs for a couple of points:

Q1

• Updated section details styles: Roboto, thin, 16px, #FFFFFF (looks grey but its not), 19px padding-left

I found 19px by looking inspecting the X position for Location, and comparing it to the X position for 7038 N Vesper Ave. 91405. They are 19 pixels in X position. Is there a better way to find the correct padding that was used? Or is this precise enough?

Q2

• Updated "Closed" field name and value: "^ NOTE: this field only exists on SRs that report a Closed date -- otherwise do not render a date if it does not exist

I note that "Closed` will not appear on every SR, only SRs that have been closed. Is my suggestion good? Or is there a better way to handle SRs that don't have a Closed Date?

Q3

• Source, Agency: these have an identical layout to the table used in the previous version, except Source is the left column and Agency is the right column. Attempt to re-use code if possible. This section is ~82px from the bottom.

Similar question as Q1. I am deducing 82px by inspecting Y position and doing math. Let me know if there is a more precise way to do this.

Thanks!

[ryanfchase]

@traycn if the Action Items look OK to you, and once we get a follow up from UIUX leads, I think we are good to move this ticket into PrioBacklog

[Joy-Truex]

Hey @ryanfchase!

Q1

• Updated section details styles: Roboto, thin, 16px, #FFFFFF (looks grey but its not), 19px padding-left

I found 19px by looking inspecting the X position for Location, and comparing it to the X position for 7038 N Vesper Ave. 91405. They are 19 pixels in X position. Is there a better way to find the correct padding that was used? Or is this precise enough?

An easy way to find this is to highlight object and hover over the second object while holding down the option key (mac).
This will yield the following result:

Distance Between Layers Screenshot

Q2

• Updated "Closed" field name and value: "^ NOTE: this field only exists on SRs that report a Closed date -- otherwise do not render a date if it does not exist

I note that "Closed` will not appear on every SR, only SRs that have been closed. Is my suggestion good? Or is there a better way to handle SRs that don't have a Closed Date?

Yes thats perfectly fine.

Q3

• Source, Agency: these have an identical layout to the table used in the previous version, except Source is the left column and Agency is the right column. Attempt to re-use code if possible. This section is ~82px from the bottom.

Similar question as Q1. I am deducing 82px by inspecting Y position and doing math. Let me know if there is a more precise way to do this.

Same here!!

Distance Between Layers Screenshot

Thanks!

I'm gonna go ahead and remove the "ready for design lead" label, please tag me again if any other questions come up :)

[ryanfchase]

Per conversation with dev and design lead, the design of the SR detail's loading modal should remain unchanged. Only use a border radius of 30px for the SR details modal, as demonstrated in the mockup.

Screenshot of SR detail's loading modal

• Observe that the SR detail's loading modal has a border radius of 5px.

Turning this back over to @DorianDeptuch and moving to In Progress. If there are further questions, leave them in a comment. Don't forget to include the ready for dev lead and Question label, and move it to the Questions column for visibility. Thanks!

[DorianDeptuch]

Blockers:

[Resolved] I can't seem to apply dynamic styling to the correct div when attempting to add border-radius to the modal component.

<div> // This is the mapContainer
    <OtherComponent />
    <OtherComponent />
    <OtherComponent />
    <OtherComponent />
    <OtherComponent />
    <div> // This outer div is created somewhere in the code and is the desired target to add dynamic border-radius styling to
         <div 
              style={{ borderRadius: isRequestDetailLoading ? '5px' : '30px', border: '5px solid red' }}
              ref={(el) => (this.requestDetail = el)}
         >
              <RequestDetail 
                  requestId={selectedRequestId} 
                  loadingCallback={this.setRequestDetailLoading}
              />
        </div>
    </div>
</div>

A screenshot of the rendered modal

'& .mapboxgl-popup-content': {
      width: 'auto',
      backgroundColor: theme.palette.primary.main,
      borderRadius: 5, // This controls the border-radius for the aforementioned outer div
      padding: 10,

One idea is to add dynamic styling within the .mapboxgl-popup-content class, though I'm not sure if that's possible from what I've read about themes. My hunch is the addPopup method in Map.jsx might have some control over this div but haven't been able to get the classes to work as is described in the mapboxgl.Popup() documentation.

[ryanfchase]

One idea is to add dynamic styling within the .mapboxgl-popup-content class, though I'm not sure if that's possible from what I've read about themes. My hunch is the addPopup method in Map.jsx might have some control over this div but haven't been able to get the classes to work as is described in the mapboxgl.Popup() documentation.

@DorianDeptuch You were on the right trail! I was able to utilize popup's addClassName method to add a class to the popup. However, I found that the class is inserted into the modal's container (see references). I then targeted .mapboxgl-popup-content using the mui styles syntax for nested classes (as seen throughout our codebase).

LMK if you need me to provide more instructions on how to incorporate my fix into your branch. I didn't use your branch because I wanted to ensure there were no bugs introduced by any of your code that I was unfamiliar with. cc @traycn !

Resources

Demo Branch

• https://github.com/hackforla/311-data/tree/bugfixing-styling-help-1870
• note: while attempting to try out solutions, I was experimenting with a separate component for the Loading spinner. This ended up not being a hard requirement, as calling this.popup.setDOMContent() simply updates the content, not the actual modal. In the end, adding classname was sufficient and there aren't any restrictions on where/when it can be done.

"testing" class gets added to the modal's container

Code (see note about "separate" modal)

<div ref={(el) => (this.requestDetailSpinner = el)}> 
  <RequestDetailLoader requestId={selectedRequestId} loadingCallback={() => {
    if (this.popup) {
      this.popup.setDOMContent(this.requestDetail);
      this.popup.addClassName(classes.testing);
    }
}}/>

Highlighting the modal container in dev tools, see divs with classes Map-testing-27 mapbox-gl-popup.

`.mapboxgl-popup-content` targets the actual modal

Code for nested class

const styles = (theme) => ({
  root: {
    // ...
    testing: {
      // borderRadius: 30, // not useful!
      '& .mapboxgl-popup-content': {
        width: 'auto',              
        backgroundColor: theme.palette.primary.main,
        borderRadius: 30,
        padding: 10,
      },
    },
    // ...
  }
});

Border Radius of 30px being applied

Video Demo

Sorry, timescodes ~9sec thru ~12sec is me struggling to trigger a breakpoint, sigh

border-radius.mp4

[DorianDeptuch]

Thanks for the help @traycn & @ryanfchase

PR created #1906

[ryanfchase]

Provided feedback and addressed how your changes interact with a pretty moderate bug:

• Update styling of service request details modal 1870 #1906 (review)

@DorianDeptuch please have a look at the feedback, decide if you're ok to address it -- if so leave an ETA for completion.

I also want to bring this up at product planning because I think we can also address the problem through design. I want to float the idea of "only bringing up SR details on-click", which would drastically reduce the number of accidental db requests.

[DorianDeptuch]

Availability: 2/1 - 2/2: Evenings, 2/11 and Onward: Evenings.
ETA: 2/18 End of Day

[ryanfchase]

Hi @DorianDeptuch,

Please leave a comment with the following items:

• updated ETA
• progress from the last week (if applicable)
• availability for communications during the week

[DorianDeptuch]

Progress: N/A
Blockers: N/A
Availability: Evenings after 5pm PST
ETA: 2/20 End of Day
Pictures: N/A

[ExperimentsInHonesty]

@DorianDeptuch

Hi Dorian, this is the template I want teams to use for their weekly updates. You can always add more info to the items below 1-4, which are the required minimum.

Instructions

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures (if necessary): "Add any pictures that will help illustrate what you are working on."

1. Progress:
2. Blockers:
3. Availability:
4. ETA:
5. Pictures (if necessary):

[DorianDeptuch]

Thanks @ExperimentsInHonesty, updated my comment with the template.

[DorianDeptuch]

I have a question regarding the action items of my PR #1906 . It appears that there have been recent changes to Map.jsx here: #1903
Will this create a merge conflict and if so, how would I go about this problem?

[ryanfchase]

Adding this to tonight's agenda, let's go over this merge conflict as a team.

• tonight's agenda: 311 Data Weekly Meeting Agenda 2025 #1907 (comment)

[ryanfchase]

This was discussed at the Wednesday general meeting. Moving to In Review.