layout tweaks to match original

Author: gassc

src/features/filters/FilterModal.jsx

@@ -57,9 +57,9 @@ const FilterModal = ({ show, onHide, filters, onChange }) => {
       <Modal.Header closeButton>
         <Modal.Title>Other than fish, these are the things I&apos;m looking for in a Fish Fry:</Modal.Title>
       </Modal.Header>
-      <Modal.Body>
+      <Modal.Body className="p-4">
         <Row>
-          <Col sm={{ span: 8, offset: 2 }}>
+          <Col >
             {FILTER_FIELDS.map((filter) => (
               <Form.Group className="mb-3" key={filter.key}>
                 <h4>
@@ -78,9 +78,9 @@ const FilterModal = ({ show, onHide, filters, onChange }) => {
             ))}
           </Col>
         </Row>
-        <hr />
+        
         <Row>
-          <Col sm={{ span: 8, offset: 2 }} className="bg-info-subtle rounded py-2">
+          <Col className="bg-primary rounded py-2 my-2">
             <Form.Check
               className="filter"
               id="publish"
@@ -92,14 +92,12 @@ const FilterModal = ({ show, onHide, filters, onChange }) => {
           </Col>
         </Row>
         <Row>
-          <Col sm={{ span: 8, offset: 2 }}>
-            <h4>
-              <small>
+          <Col >
+            <p>
                 Note that while we try our best to verify all details about Fish Fries, some details may be
                 incomplete. Please check with the Fish Fry venue ahead of time and rely on the above filters at your
                 own discretion.
-              </small>
-            </h4>
+            </p>
           </Col>
         </Row>
       </Modal.Body>

src/features/layout/Sidebar.jsx

@@ -18,11 +18,11 @@ const Sidebar = ({
       <div className="sidebar-wrapper">
         <Card id="features" className="h-100 border-0 rounded-0">
           <Card.Header>
-            <h3 className="h5 m-0 d-flex align-items-center justify-content-between">
+            <h3 className="h5 mt-3 d-flex align-items-center justify-content-between">
               <span>Fish Fry Filter</span>
               <Button
                 type="button"
-                variant="outline-secondary"
+                variant="primary"
                 size="sm"
                 id="sidebar-hide-btn"
                 onClick={onHide}
@@ -31,19 +31,20 @@ const Sidebar = ({
               </Button>
             </h3>
           </Card.Header>
-          <Card.Body>
+          <Card.Body className="px-0">
+            <div className="mx-2">
             <Button
               type="button"
               size="sm"
-              variant={hasActiveFilters ? "primary" : "outline-secondary"}
+              variant={hasActiveFilters ? "primary" : "outline-primary"}
               className="w-100"
               id="filterSidebar-btn"
               onClick={onOpenFilter}
             >
               <FontAwesomeIcon icon={faFilter} /> {hasActiveFilters ? "Filtered" : "Filter"}
             </Button>
-          </Card.Body>
-          <div className="sidebar-table">
+            </div>
+          <div className="sidebar-table mt-3">
             <Table hover size="sm" id="feature-list">
               <thead className="visually-hidden">
                 <tr>
@@ -73,7 +74,9 @@ const Sidebar = ({
                 ))}
               </tbody>
             </Table>
-          </div>
+          </div>            
+          </Card.Body>
+
         </Card>
       </div>
     </div>

src/features/layout/TopNav.jsx

@@ -43,17 +43,15 @@ const TopNav = ({
         <Navbar.Brand className="text-white fw-bold fs-6 d-md-none">Fish Fry Map</Navbar.Brand>
 
         <Navbar.Collapse>
-          <Form className="ms-auto fishfry-search-form" role="search" onSubmit={(event) => event.preventDefault()}>
-            <SearchBox {...searchProps} />
-          </Form>
-          <Nav className="ms-md-3">
+
+          <Nav className="ms-auto">
             <Nav.Item className="d-none d-md-block">
-              <Nav.Link as="button" type="button" id="list-btn" onClick={onToggleSidebar} className="text-white">
+              <Nav.Link as="button" type="button" id="list-btn" onClick={onToggleSidebar} >
                 <FontAwesomeIcon icon={faFilter} className="white" />&nbsp;&nbsp;Filter
               </Nav.Link>
             </Nav.Item>
             <Nav.Item>
-              <Nav.Link as="button" type="button" id="about-btn" onClick={onOpenAbout} className="text-white">
+              <Nav.Link as="button" type="button" id="about-btn" onClick={onOpenAbout}>
                 <FontAwesomeIcon icon={faCircleQuestion} className="white" />&nbsp;&nbsp;About
               </Nav.Link>
             </Nav.Item>
@@ -63,7 +61,7 @@ const TopNav = ({
                 target="_blank"
                 rel="noreferrer"
                 id="data-btn"
-                className="text-white"
+
               >
                 <FontAwesomeIcon icon={faDatabase} />&nbsp;&nbsp;Data
               </Nav.Link>
@@ -80,6 +78,9 @@ const TopNav = ({
               </Nav.Link>
             </Nav.Item>
           </Nav>
+          <Form className="fishfry-search-form" role="search" onSubmit={(event) => event.preventDefault()}>
+            <SearchBox {...searchProps} />
+          </Form>
         </Navbar.Collapse>
       </Container>
     </Navbar>