Make font types in search and filters modal consistent

[ryanfchase]

Overview

We need to make fonts on the search and filters modal consistent so users don't get confused about how the modal works

Action Items

• [x] Grab the color, font size, and font weight for "Request Types" in the Search and Filters Modal

  • loc: /components/main/Desktop/TypeSelector/index.js , line: 22, 83

• [x] Apply that color, font size, and font weight to "Boundaries"

  • loc: /components/main/Desktop/CouncilSelector/index.js
  • [x] 1. Add class style from collapsible section - ADD: Header class style for "Boudaries"
  • [x] 2. Update class classes.label to classes.header for "Boundaries" title
  • [x] 3. Cleanup, Delete class style from collapsible section - DELETE: Label class style for "Boundaries"

• [x] Apply that color, font size, and font weight to "Date Range"

  • loc: componenets/DataSelector/DataSelector.jsx
  • [x] 1. Add useStyle & class style from collapsible section - ADD: useStyle const for "Date Range"
  • [x] 2. Delete import useStyle from ...
  • [x] 3. Add import makeStyles from '@mui/styles/makeStyles';
  • [x] 4. Update span to div for the title value Date Range 
  • [x] 5. Update className={label} to className={classes.header}

Collapsible Sections

ADD: Header class style for "Boudaries"

``` header: { fontSize: '12.47px', fontWeight: theme.typography.fontWeightMedium, marginBottom: '8px', }, ```

DELETE: Label class style for "Boundaries"

``` label: { display: 'inline-block', font: theme.typography.b2, marginBottom: '10px', color: theme.palette.secondary.light, }, ```

ADD: useStyle const for "Date Range"

``` const useStyles = makeStyles(theme => ({ header: { fontSize: '12.47px', fontWeight: theme.typography.fontWeightMedium, marginBottom: '8px', }, })); ```

Resources/Instructions

• Figma design file link

Screenshot before proposed changes


Screenshot after proposed changes


[ryanfchase]

Ready for dev lead. I think it's a "Good First Issue". Happy to add more in-depth instruction if required.

[traycn]

Reviewing as dev lead: ETA - 9/8 Time - 12pm PT

[traycn]

Updated Action Items with file loc, line, and implementation for "Boundaries" and "Date Range" titles in the search/filter map modal.

Comment on my findings:

Style implementation for each title is inconsistent across the 3 Titles in the modal. To introduce consistency, I've proposed a solution to use the useStyle for each file to be consistent with how the style title "Request Types" is implemented.

IMPORTANT NOTE:

Use style has been deprecated since 2021 and is now Legacy. It is not recommended for use. Link to useStyle docs here.

Issue created to address deprecated @mui/style - https://github.com/hackforla/311-data/issues/1820

[traycn]

Updated the description a second-time. Issue previously did not update with the detailed action items points.

[ryanfchase]

This ticket has been prioritized and is ready to be picked up 👍

[Brandoncyu]

Updates have been made:

[Brandoncyu]

PR has been made: https://github.com/hackforla/311-data/pull/1821