Address PR feedback.

mbta · Nov 15, 2024 · 6655754 · 6655754
1 parent 2d1a9ee
commit 6655754
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 6 deletions.
diff --git a/assets/css/dashboard/filter-group.scss b/assets/css/dashboard/filter-group.scss
@@ -1,6 +1,5 @@
 .filter-group {
   width: 200px;
-  margin-bottom: 48px;
 
   .header {
     font-size: 16px;

diff --git a/assets/js/components/Dashboard/FilterGroup.tsx b/assets/js/components/Dashboard/FilterGroup.tsx
@@ -12,16 +12,18 @@ interface Props {
   filters: Filter[];
   selectedFilter: string;
   onFilterSelect: (value: string) => void;
+  className?: string;
 }
 
 const FilterGroup = ({
   header,
   filters,
   selectedFilter,
   onFilterSelect,
+  className,
 }: Props) => {
   return (
-    <div className="filter-group">
+    <div className={classNames("filter-group", className)}>
       <div className="header">{header}</div>
       <ButtonGroup className="button-group" vertical>
         {filters.map((filter) => {

diff --git a/assets/js/components/Dashboard/PaMessageForm/AssociateAlert.tsx b/assets/js/components/Dashboard/PaMessageForm/AssociateAlert.tsx
@@ -60,6 +60,7 @@ const AssociateAlert = ({ onApply, onCancel }: AssociateAlertPageProps) => {
         <Row className="associate-alert-page-body">
           <Col className="associate-alert-filter-selection">
             <FilterGroup
+              className="mb-5"
               header="Message state"
               selectedFilter={selectedMessageState}
               onFilterSelect={setSelectedMessageState}

diff --git a/assets/js/components/Dashboard/PaMessagesPage.tsx b/assets/js/components/Dashboard/PaMessagesPage.tsx
@@ -148,11 +148,11 @@ const PaMessagesPage: ComponentType = () => {
               </Link>
             </section>
             <FilterGroup
+              className="mb-5"
               header="Filter by message state"
-              onFilterSelect={(selected) => {
-                const stateFilter = selected.toLowerCase() as StateFilter;
-                setStateFilter(stateFilter);
-              }}
+              onFilterSelect={(selected) =>
+                setStateFilter(selected as StateFilter)
+              }
               selectedFilter={stateFilter.toLowerCase()}
               filters={[
                 { label: "Now", value: "current" },