From 10806326d1c7a57afa19e39f6de933b0a38e49bf Mon Sep 17 00:00:00 2001
From: brandoncyu <Brandoncyu@gmail.com>
Date: Mon, 9 Sep 2024 11:23:26 -0700
Subject: [PATCH 1/4] Make font types in search and filters modal consistent

---
 components/DateSelector/DateSelector.jsx         | 12 +++++++++---
 components/main/Desktop/CouncilSelector/index.js | 10 ++++------
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/components/DateSelector/DateSelector.jsx b/components/DateSelector/DateSelector.jsx
index 176aadece..40dea98a5 100644
--- a/components/DateSelector/DateSelector.jsx
+++ b/components/DateSelector/DateSelector.jsx
@@ -10,7 +10,7 @@ import {
 } from '@reducers/filters';
 import ArrowToolTip from '@components/common/ArrowToolTip';
 import options from './options';
-import useStyles from './useStyles';
+import makeStyles from '@mui/styles/makeStyles';
 import DateRanges from './DateRanges';
 
 const dateFormat = 'YYYY-MM-DD';
@@ -21,6 +21,12 @@ function DateSelector({
   updateEndDate,
 }) {
   const [expanded, setExpanded] = useState(false);
+  const useStyles = makeStyles(theme => ({
+    header: {
+      fontSize: '12.47px',
+      fontWeight: theme.typography.fontWeightMedium,
+    },
+  }));
   const classes = useStyles();
 
   const handleOptionSelect = optionDates => {
@@ -43,7 +49,7 @@ function DateSelector({
 
   return (
     <>
-      <span className={label}>
+      <div className={classes.header}>
         Date Range&nbsp;
         <ArrowToolTip iconStyle={iconStyle}>
           <div>
@@ -62,7 +68,7 @@ function DateSelector({
             </p>
           </div>
         </ArrowToolTip>
-      </span>
+      </div>
       <SelectorBox onToggle={() => setExpanded(!expanded)} expanded={expanded}>
         <SelectorBox.Display>
           <div className={classes.selector}>
diff --git a/components/main/Desktop/CouncilSelector/index.js b/components/main/Desktop/CouncilSelector/index.js
index cd0a1fbe3..3e6200429 100644
--- a/components/main/Desktop/CouncilSelector/index.js
+++ b/components/main/Desktop/CouncilSelector/index.js
@@ -15,11 +15,9 @@ import SelectedCouncils from './SelectedCouncils';
 import CouncilsList from './CouncilsList';
 
 const useStyles = makeStyles(theme => ({
-  label: {
-    display: 'inline-block',
-    font: theme.typography.b2,
-    marginBottom: '10px',
-    color: theme.palette.secondary.light,
+  header: {
+    fontSize: '12.47px',
+    fontWeight: theme.typography.fontWeightMedium,
   },
 }));
 
@@ -89,7 +87,7 @@ function CouncilSelector({
 
   return (
     <>
-      <div className={classes.label}>Boundaries</div>
+      <div className={classes.header}>Boundaries</div>
       <BoundariesSection>
         <BoundariesSection.Display>
           <SelectedCouncils items={selected} onDelete={debouncedHandleDelete} />

From 8842fc87d8228ceffb2826a831acef8254071caa Mon Sep 17 00:00:00 2001
From: brandoncyu <Brandoncyu@gmail.com>
Date: Mon, 9 Sep 2024 11:50:04 -0700
Subject: [PATCH 2/4] added margin-bottom

---
 components/DateSelector/DateSelector.jsx         | 1 +
 components/main/Desktop/CouncilSelector/index.js | 1 +
 2 files changed, 2 insertions(+)

diff --git a/components/DateSelector/DateSelector.jsx b/components/DateSelector/DateSelector.jsx
index 40dea98a5..f7b3f34dc 100644
--- a/components/DateSelector/DateSelector.jsx
+++ b/components/DateSelector/DateSelector.jsx
@@ -25,6 +25,7 @@ function DateSelector({
     header: {
       fontSize: '12.47px',
       fontWeight: theme.typography.fontWeightMedium,
+      marginBottom: '8px',
     },
   }));
   const classes = useStyles();
diff --git a/components/main/Desktop/CouncilSelector/index.js b/components/main/Desktop/CouncilSelector/index.js
index 3e6200429..851df8282 100644
--- a/components/main/Desktop/CouncilSelector/index.js
+++ b/components/main/Desktop/CouncilSelector/index.js
@@ -18,6 +18,7 @@ const useStyles = makeStyles(theme => ({
   header: {
     fontSize: '12.47px',
     fontWeight: theme.typography.fontWeightMedium,
+    marginBottom: '8px',
   },
 }));
 

From e489db7afeeda46534bf27c266fb070fb0de2999 Mon Sep 17 00:00:00 2001
From: brandoncyu <Brandoncyu@gmail.com>
Date: Mon, 9 Sep 2024 12:29:09 -0700
Subject: [PATCH 3/4] added additional updates

---
 components/DateSelector/DateSelector.jsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/components/DateSelector/DateSelector.jsx b/components/DateSelector/DateSelector.jsx
index f7b3f34dc..35eab3e9e 100644
--- a/components/DateSelector/DateSelector.jsx
+++ b/components/DateSelector/DateSelector.jsx
@@ -22,6 +22,9 @@ function DateSelector({
 }) {
   const [expanded, setExpanded] = useState(false);
   const useStyles = makeStyles(theme => ({
+  iconStyle: {
+    verticalAlign: 'middle',
+  },
     header: {
       fontSize: '12.47px',
       fontWeight: theme.typography.fontWeightMedium,
@@ -43,7 +46,7 @@ function DateSelector({
   }, []);
 
   const {
-    option, selected, label, iconStyle, tooltipParagraph,
+    option, selected, tooltipParagraph,
   } = classes;
 
   const linkedinPageLink = <a href="https://www.linkedin.com/company/hack-for-la/">LinkedIn Page</a>;
@@ -52,7 +55,7 @@ function DateSelector({
     <>
       <div className={classes.header}>
         Date Range&nbsp;
-        <ArrowToolTip iconStyle={iconStyle}>
+        <ArrowToolTip iconStyle={classes.iconStyle}>
           <div>
             <p className={tooltipParagraph}>
               <strong>

From 6d9468b98baac42dc124f1e93809f899b41823bc Mon Sep 17 00:00:00 2001
From: brandoncyu <Brandoncyu@gmail.com>
Date: Mon, 9 Sep 2024 13:22:38 -0700
Subject: [PATCH 4/4] adding typography

---
 components/DateSelector/DateSelector.jsx         | 5 +++--
 components/main/Desktop/CouncilSelector/index.js | 3 ++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/components/DateSelector/DateSelector.jsx b/components/DateSelector/DateSelector.jsx
index 35eab3e9e..b46bcc12c 100644
--- a/components/DateSelector/DateSelector.jsx
+++ b/components/DateSelector/DateSelector.jsx
@@ -8,6 +8,7 @@ import {
   updateStartDate as reduxUpdateStartDate,
   updateEndDate as reduxUpdateEndDate,
 } from '@reducers/filters';
+import Typography from '@mui/material/Typography';
 import ArrowToolTip from '@components/common/ArrowToolTip';
 import options from './options';
 import makeStyles from '@mui/styles/makeStyles';
@@ -53,7 +54,7 @@ function DateSelector({
 
   return (
     <>
-      <div className={classes.header}>
+      <Typography className={classes.header}>
         Date Range&nbsp;
         <ArrowToolTip iconStyle={classes.iconStyle}>
           <div>
@@ -72,7 +73,7 @@ function DateSelector({
             </p>
           </div>
         </ArrowToolTip>
-      </div>
+      </Typography>
       <SelectorBox onToggle={() => setExpanded(!expanded)} expanded={expanded}>
         <SelectorBox.Display>
           <div className={classes.selector}>
diff --git a/components/main/Desktop/CouncilSelector/index.js b/components/main/Desktop/CouncilSelector/index.js
index 851df8282..50baafaa6 100644
--- a/components/main/Desktop/CouncilSelector/index.js
+++ b/components/main/Desktop/CouncilSelector/index.js
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import makeStyles from '@mui/styles/makeStyles';
+import Typography from '@mui/material/Typography';
 import {
   updateNcId,
   updateSelectedCouncils,
@@ -88,7 +89,7 @@ function CouncilSelector({
 
   return (
     <>
-      <div className={classes.header}>Boundaries</div>
+      <Typography className={classes.header}>Boundaries</Typography>
       <BoundariesSection>
         <BoundariesSection.Display>
           <SelectedCouncils items={selected} onDelete={debouncedHandleDelete} />