filter modal improvements

Author: gassc

src/features/filters/FilterModal.css

@@ -0,0 +1,41 @@
+#filterModal .filter-field-list,
+#filterModal .publish-filter-list {
+  border-radius: 0.5rem;
+  overflow: hidden;
+}
+
+#filterModal .filter-field-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  cursor: pointer;
+  user-select: none;
+  background-color: rgba(255, 255, 255, 0.02);
+  border-color: var(--bs-border-color-translucent);
+  transition: background-color 0.15s ease, border-color 0.15s ease;
+}
+
+#filterModal .filter-field-item:hover {
+  background-color: rgba(var(--fishfry-primary-rgb), 0.12);
+  border-color: rgba(var(--fishfry-primary-rgb), 0.35);
+}
+
+#filterModal .filter-field-item:focus-within {
+  box-shadow: inset 0 0 0 2px var(--fishfry-primary-focus);
+}
+
+#filterModal .filter-field-item.is-checked {
+  background-color: rgba(var(--fishfry-primary-rgb), 0.2);
+  border-color: rgba(var(--fishfry-primary-rgb), 0.45);
+}
+
+#filterModal .filter-field-checkbox {
+  margin-top: 0;
+  flex-shrink: 0;
+}
+
+#filterModal .filter-field-item-label {
+  flex: 1;
+  line-height: 1.35;
+  font-size: 1.1rem;
+}

src/features/filters/FilterModal.jsx

@@ -1,7 +1,8 @@
 import React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Button, Col, Form, Modal, Row } from "react-bootstrap";
+import { Button, Col, Form, ListGroup, Modal, Row } from "react-bootstrap";
 import { faBagShopping, faBeerMugEmpty, faClock, faUtensils, faWheelchair } from "@/icons/fontAwesome";
+import "./FilterModal.css";
 
 const FILTER_FIELDS = [
   { key: "drive_thru", label: "Drive-Thru Available" },
@@ -60,35 +61,52 @@ const FilterModal = ({ show, onHide, filters, onChange }) => {
       <Modal.Body className="p-4">
         <Row>
           <Col >
-            {FILTER_FIELDS.map((filter) => (
-              <Form.Group className="mb-3" key={filter.key}>
-                <h4>
-                  <Form.Check
-                    className="filter"
-                    inline
-                    id={filter.key}
-                    type="checkbox"
-                    checked={Boolean(filters[filter.key])}
-                    onChange={(event) => onChange(filter.key, event.target.checked)}
-                    label={filter.label}
-                  />
-                </h4>
-                <hr />
-              </Form.Group>
-            ))}
+            <ListGroup className="filter-field-list mb-3">
+              {FILTER_FIELDS.map((filter) => {
+                const isChecked = Boolean(filters[filter.key]);
+
+                return (
+                  <ListGroup.Item
+                    as="label"
+                    action
+                    className={`filter-field-item ${isChecked ? "is-checked" : ""}`}
+                    htmlFor={filter.key}
+                    key={filter.key}
+                  >
+                    <Form.Check.Input
+                      className="filter-field-checkbox"
+                      id={filter.key}
+                      type="checkbox"
+                      checked={isChecked}
+                      onChange={(event) => onChange(filter.key, event.target.checked)}
+                    />
+                    <span className="filter-field-item-label">{filter.label}</span>
+                  </ListGroup.Item>
+                );
+              })}
+            </ListGroup>
           </Col>
         </Row>
 
         <Row>
-          <Col className="bg-primary rounded py-2 my-2">
-            <Form.Check
-              className="filter"
-              id="publish"
-              type="checkbox"
-              checked={Boolean(filters.publish)}
-              onChange={(event) => onChange("publish", event.target.checked)}
-              label={`Show only those verified for ${thisYear}.`}
-            />
+          <Col>
+            <ListGroup className="publish-filter-list my-2">
+              <ListGroup.Item
+                as="label"
+                action
+                className={`filter-field-item ${Boolean(filters.publish) ? "is-checked" : ""}`}
+                htmlFor="publish"
+              >
+                <Form.Check.Input
+                  className="filter-field-checkbox"
+                  id="publish"
+                  type="checkbox"
+                  checked={Boolean(filters.publish)}
+                  onChange={(event) => onChange("publish", event.target.checked)}
+                />
+                <span className="filter-field-item-label">Show only those verified for {thisYear}.</span>
+              </ListGroup.Item>
+            </ListGroup>
           </Col>
         </Row>
         <Row>

src/features/map/LeafletController.js

@@ -152,7 +152,10 @@ export class LeafletController {
     this.map.addControl(
       L.control.basemaps({
         position: "topright",
-        basemaps: [this.baseLayers.dark, this.baseLayers.light],
+        basemaps: [
+          this.baseLayers.dark, 
+          this.baseLayers.light,
+        ],
         tileX: 4550,
         tileY: 6176,
         tileZ: 14

src/features/modals/FeatureModal.jsx

@@ -174,7 +174,7 @@ const FeatureModal = ({ show, onHide, feature, goodFridayDate, currentYear }) =>
           </Col>
         </Row>
 
-        <Row xs={1} sm={2} md={3} lg={5} xl={12} className="g-2 mb-3">
+        <Row xs={2} sm={2} md={3} lg={5} xl={12} className="g-2 mb-3">
           {booleanPanels.map((panel) => (
             <Col key={panel.label}>
               <BooleanPanel label={panel.label} value={panel.value} />