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

• 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

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

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

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

  • loc: componenets/DataSelector/DataSelector.jsx
  • 1. Add useStyle & class style from collapsible section - ADD: useStyle const for "Date Range"
  • 2. Delete import useStyle from ...
  • 3. Add import makeStyles from '@mui/styles/makeStyles';
  • 4. Update span to div for the title value Date Range 
  • 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 - #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: #1821