From 5ad7a2ffc9cc78b5cb0ca2a089b076a976bd548b Mon Sep 17 00:00:00 2001
From: Brian Schroer <schroer.brian@gmail.com>
Date: Tue, 23 Apr 2024 18:19:31 -0700
Subject: [PATCH 1/3] 1324 Desktop and mobile styling of collapsed state of
 advanced search component

---
 app/assets/img/ic-filter-gray.svg             |  3 +
 .../NavigatorDashboard.module.scss            | 73 ++++++++++++++++++-
 .../NavigatorDashboard/NavigatorDashboard.tsx | 42 ++++++++---
 3 files changed, 107 insertions(+), 11 deletions(-)
 create mode 100644 app/assets/img/ic-filter-gray.svg

diff --git a/app/assets/img/ic-filter-gray.svg b/app/assets/img/ic-filter-gray.svg
new file mode 100644
index 000000000..a081e962c
--- /dev/null
+++ b/app/assets/img/ic-filter-gray.svg
@@ -0,0 +1,3 @@
+<svg width="23" height="13" viewBox="0 0 23 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.625 2.375H1.375C1.07663 2.375 0.790483 2.25647 0.579505 2.0455C0.368526 1.83452 0.25 1.54837 0.25 1.25C0.25 0.951631 0.368526 0.665483 0.579505 0.454505C0.790483 0.243526 1.07663 0.125 1.375 0.125H21.625C21.9234 0.125 22.2095 0.243526 22.4205 0.454505C22.6315 0.665483 22.75 0.951631 22.75 1.25C22.75 1.54837 22.6315 1.83452 22.4205 2.0455C22.2095 2.25647 21.9234 2.375 21.625 2.375ZM17.875 7.625H5.125C4.82663 7.625 4.54048 7.50647 4.3295 7.29549C4.11853 7.08452 4 6.79837 4 6.5C4 6.20163 4.11853 5.91548 4.3295 5.7045C4.54048 5.49353 4.82663 5.375 5.125 5.375H17.875C18.1734 5.375 18.4595 5.49353 18.6705 5.7045C18.8815 5.91548 19 6.20163 19 6.5C19 6.79837 18.8815 7.08452 18.6705 7.29549C18.4595 7.50647 18.1734 7.625 17.875 7.625ZM13.375 12.875H9.625C9.32663 12.875 9.04048 12.7565 8.8295 12.5455C8.61853 12.3345 8.5 12.0484 8.5 11.75C8.5 11.4516 8.61853 11.1655 8.8295 10.9545C9.04048 10.7435 9.32663 10.625 9.625 10.625H13.375C13.6734 10.625 13.9595 10.7435 14.1705 10.9545C14.3815 11.1655 14.5 11.4516 14.5 11.75C14.5 12.0484 14.3815 12.3345 14.1705 12.5455C13.9595 12.7565 13.6734 12.875 13.375 12.875Z" fill="#636363"/>
+</svg>
diff --git a/app/pages/NavigatorDashboard/NavigatorDashboard.module.scss b/app/pages/NavigatorDashboard/NavigatorDashboard.module.scss
index 15b3dc5df..e17268e98 100644
--- a/app/pages/NavigatorDashboard/NavigatorDashboard.module.scss
+++ b/app/pages/NavigatorDashboard/NavigatorDashboard.module.scss
@@ -1,11 +1,82 @@
 @import "~styles/utils/_helpers.scss";
 
+// Advanced Search Box Styles
+
 .advancedSearchContainer {
   width: 85%;
   max-width: 1250px;
   margin: 90px auto;
+  padding: 42px 60px;
+
+  border: 1px solid #000;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  border-radius: 8px;
+  @media screen and (max-width: $min-tablet-p) {
+    padding: 30px;
+  }
 }
 
-.greeting {
+.header {
   font-size: 26px;
+  font-weight: 700;
+}
+
+.blurb {
+  margin: 10px 0 20px;
 }
+
+.searchBoxContainer {
+  background: #F5F5F5;
+  border-radius: 8px;
+  display: grid;
+  grid-template-areas: "input button filter";
+  grid-template-columns: 66fr 18fr 50px;
+  gap: 35px;
+  padding: 14px 26px;
+  @media screen and (max-width: $break-tablet-p) {
+    grid-template-areas:
+    "input filter"
+    "button button";
+    grid-template-columns: repeat(1, 1fr);
+    row-gap: 7px;
+    column-gap: 4px;
+  }
+}
+
+.searchInput {
+  grid-area: input;
+  border-radius: 8px;
+  background: url("../../assets/img/ic-search-blue.svg") center left 15px no-repeat;
+  padding-left: 45px;
+  height: 43px;
+  background-color: #fff;
+  border: none;
+  &:focus, &:hover {
+    box-shadow: none;
+    border: 1px solid $color-brand;
+  }
+}
+
+.searchButton {
+  height: 43px;
+  max-width: 200px;
+  grid-area: button;
+  @media screen and (max-width: $break-tablet-p) {
+    max-width: none;
+  }
+}
+
+.searchFilterButton {
+  grid-area: filter;
+  border-radius: 8px;
+  height: 43px;
+  width: 43px;
+  padding: 0;
+  background-color: #fff;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  &:active {
+    box-shadow: none;
+  }
+}
+
+// End Advanced Search Box Styles
diff --git a/app/pages/NavigatorDashboard/NavigatorDashboard.tsx b/app/pages/NavigatorDashboard/NavigatorDashboard.tsx
index 226730d17..4263f634d 100644
--- a/app/pages/NavigatorDashboard/NavigatorDashboard.tsx
+++ b/app/pages/NavigatorDashboard/NavigatorDashboard.tsx
@@ -1,19 +1,41 @@
 import React from "react";
+import { icon } from "assets";
+import { Button } from "components/ui/inline/Button/Button";
 import styles from "./NavigatorDashboard.module.scss";
 
+
+const AdvancedSearch = () => {
+  return (
+    <div className={styles.advancedSearchContainer}>
+      <h1 className={styles.header}>Hi, Navigator :)</h1>
+      <p className={styles.blurb}>
+        Please use the search bar to find resources for the individuals
+        you&apos;re assisting. You can enter keywords such as
+        &ldquo;shelter,&ldquo; &ldquo;food assistance,&ldquo; or
+        &ldquo;employment support,&ldquo; to discover relevant programs and
+        services.
+      </p>
+      <div className={styles.searchBoxContainer}>
+        <div className={styles.searchInputContainer}>
+          <input
+            type="text"
+            placeholder="Emergency Shelter"
+            className={styles.searchInput}
+          />
+        </div>
+        <Button addClass={styles.searchButton}>Search</Button>
+        <button type="button" className={styles.searchFilterButton}>
+          <img src={icon("filter-gray")} alt="Add filters to search" />
+        </button>
+      </div>
+    </div>
+  );
+};
+
 export const NavigatorDashboard = () => {
   return (
     <div>
-      <div className={styles.advancedSearchContainer}>
-        <h1 className={styles.greeting}>Hi, Case Managers :)</h1>
-        <p className={styles.blurb}>
-          Please use the search bar to find specific resources for the homeless
-          individuals you are assisting. You can enter keywords, such as
-          &ldquo;shelter,&ldquo; &ldquo;food assistance,&ldquo; or
-          &ldquo;employment support,&ldquo; to discover relevant programs and
-          services.
-        </p>
-      </div>
+      <AdvancedSearch />
     </div>
   );
 };

From c69c96f69f8cca7f18e5658930fe44cf56f408cd Mon Sep 17 00:00:00 2001
From: Brian Schroer <schroer.brian@gmail.com>
Date: Wed, 24 Apr 2024 17:32:50 -0700
Subject: [PATCH 2/3] 1324 Implement mobile styles and search functionality

---
 .../NavigatorDashboard.module.scss            | 22 ++++++++++------
 .../NavigatorDashboard/NavigatorDashboard.tsx | 25 ++++++++++++++++---
 2 files changed, 35 insertions(+), 12 deletions(-)

diff --git a/app/pages/NavigatorDashboard/NavigatorDashboard.module.scss b/app/pages/NavigatorDashboard/NavigatorDashboard.module.scss
index e17268e98..d6d540653 100644
--- a/app/pages/NavigatorDashboard/NavigatorDashboard.module.scss
+++ b/app/pages/NavigatorDashboard/NavigatorDashboard.module.scss
@@ -12,7 +12,12 @@
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
   border-radius: 8px;
   @media screen and (max-width: $min-tablet-p) {
-    padding: 30px;
+    width: 100%;
+    padding: 15px;
+    box-shadow: none;
+    border-left: none;
+    border-right: none;
+    border-radius: 0;
   }
 }
 
@@ -25,7 +30,7 @@
   margin: 10px 0 20px;
 }
 
-.searchBoxContainer {
+.searchBoxForm {
   background: #F5F5F5;
   border-radius: 8px;
   display: grid;
@@ -40,6 +45,7 @@
     grid-template-columns: repeat(1, 1fr);
     row-gap: 7px;
     column-gap: 4px;
+    padding: 14px 15px;
   }
 }
 
@@ -48,17 +54,17 @@
   border-radius: 8px;
   background: url("../../assets/img/ic-search-blue.svg") center left 15px no-repeat;
   padding-left: 45px;
-  height: 43px;
+  height: 50px;
   background-color: #fff;
-  border: none;
+  border: solid 1px transparent;
   &:focus, &:hover {
     box-shadow: none;
-    border: 1px solid $color-brand;
+    border-color: $color-brand;
   }
 }
 
 .searchButton {
-  height: 43px;
+  height: 50px;
   max-width: 200px;
   grid-area: button;
   @media screen and (max-width: $break-tablet-p) {
@@ -69,8 +75,8 @@
 .searchFilterButton {
   grid-area: filter;
   border-radius: 8px;
-  height: 43px;
-  width: 43px;
+  height: 50px;
+  width: 50px;
   padding: 0;
   background-color: #fff;
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
diff --git a/app/pages/NavigatorDashboard/NavigatorDashboard.tsx b/app/pages/NavigatorDashboard/NavigatorDashboard.tsx
index 4263f634d..1a7e70979 100644
--- a/app/pages/NavigatorDashboard/NavigatorDashboard.tsx
+++ b/app/pages/NavigatorDashboard/NavigatorDashboard.tsx
@@ -1,10 +1,22 @@
 import React from "react";
+import qs from "qs";
+import { useHistory } from "react-router-dom";
+
 import { icon } from "assets";
 import { Button } from "components/ui/inline/Button/Button";
-import styles from "./NavigatorDashboard.module.scss";
 
+import styles from "./NavigatorDashboard.module.scss";
 
 const AdvancedSearch = () => {
+  const history = useHistory();
+  let searchValue = '';
+  const submitSearch = () => {
+    if (searchValue) {
+      const query = qs.stringify({ query: searchValue });
+      history.push(`/search?${query}`);
+    }
+  };
+
   return (
     <div className={styles.advancedSearchContainer}>
       <h1 className={styles.header}>Hi, Navigator :)</h1>
@@ -15,19 +27,24 @@ const AdvancedSearch = () => {
         &ldquo;employment support,&ldquo; to discover relevant programs and
         services.
       </p>
-      <div className={styles.searchBoxContainer}>
+      <form className={styles.searchBoxForm} onSubmit={(evt) => {
+          evt.preventDefault();
+          submitSearch();
+        }
+      }>
         <div className={styles.searchInputContainer}>
           <input
             type="text"
             placeholder="Emergency Shelter"
             className={styles.searchInput}
+            onChange={(evt) => {searchValue = evt.target.value}}
           />
         </div>
-        <Button addClass={styles.searchButton}>Search</Button>
+        <Button buttonType="submit" addClass={styles.searchButton}>Search</Button>
         <button type="button" className={styles.searchFilterButton}>
           <img src={icon("filter-gray")} alt="Add filters to search" />
         </button>
-      </div>
+      </form>
     </div>
   );
 };

From 3a729f0539cfbdd028ee211a9a29af3b98cb8d8c Mon Sep 17 00:00:00 2001
From: Brian Schroer <schroer.brian@gmail.com>
Date: Wed, 24 Apr 2024 17:50:35 -0700
Subject: [PATCH 3/3] Prettier

---
 .../NavigatorDashboard.module.scss             | 13 +++++++------
 .../NavigatorDashboard/NavigatorDashboard.tsx  | 18 ++++++++++++------
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/app/pages/NavigatorDashboard/NavigatorDashboard.module.scss b/app/pages/NavigatorDashboard/NavigatorDashboard.module.scss
index d6d540653..68831f63e 100644
--- a/app/pages/NavigatorDashboard/NavigatorDashboard.module.scss
+++ b/app/pages/NavigatorDashboard/NavigatorDashboard.module.scss
@@ -7,7 +7,6 @@
   max-width: 1250px;
   margin: 90px auto;
   padding: 42px 60px;
-
   border: 1px solid #000;
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
   border-radius: 8px;
@@ -31,7 +30,7 @@
 }
 
 .searchBoxForm {
-  background: #F5F5F5;
+  background: #f5f5f5;
   border-radius: 8px;
   display: grid;
   grid-template-areas: "input button filter";
@@ -40,8 +39,8 @@
   padding: 14px 26px;
   @media screen and (max-width: $break-tablet-p) {
     grid-template-areas:
-    "input filter"
-    "button button";
+      "input filter"
+      "button button";
     grid-template-columns: repeat(1, 1fr);
     row-gap: 7px;
     column-gap: 4px;
@@ -52,12 +51,14 @@
 .searchInput {
   grid-area: input;
   border-radius: 8px;
-  background: url("../../assets/img/ic-search-blue.svg") center left 15px no-repeat;
+  background: url("../../assets/img/ic-search-blue.svg") center left 15px
+    no-repeat;
   padding-left: 45px;
   height: 50px;
   background-color: #fff;
   border: solid 1px transparent;
-  &:focus, &:hover {
+  &:focus,
+  &:hover {
     box-shadow: none;
     border-color: $color-brand;
   }
diff --git a/app/pages/NavigatorDashboard/NavigatorDashboard.tsx b/app/pages/NavigatorDashboard/NavigatorDashboard.tsx
index 1a7e70979..2312125cf 100644
--- a/app/pages/NavigatorDashboard/NavigatorDashboard.tsx
+++ b/app/pages/NavigatorDashboard/NavigatorDashboard.tsx
@@ -9,7 +9,7 @@ import styles from "./NavigatorDashboard.module.scss";
 
 const AdvancedSearch = () => {
   const history = useHistory();
-  let searchValue = '';
+  let searchValue = "";
   const submitSearch = () => {
     if (searchValue) {
       const query = qs.stringify({ query: searchValue });
@@ -27,20 +27,26 @@ const AdvancedSearch = () => {
         &ldquo;employment support,&ldquo; to discover relevant programs and
         services.
       </p>
-      <form className={styles.searchBoxForm} onSubmit={(evt) => {
+      <form
+        className={styles.searchBoxForm}
+        onSubmit={(evt) => {
           evt.preventDefault();
           submitSearch();
-        }
-      }>
+        }}
+      >
         <div className={styles.searchInputContainer}>
           <input
             type="text"
             placeholder="Emergency Shelter"
             className={styles.searchInput}
-            onChange={(evt) => {searchValue = evt.target.value}}
+            onChange={(evt) => {
+              searchValue = evt.target.value;
+            }}
           />
         </div>
-        <Button buttonType="submit" addClass={styles.searchButton}>Search</Button>
+        <Button buttonType="submit" addClass={styles.searchButton}>
+          Search
+        </Button>
         <button type="button" className={styles.searchFilterButton}>
           <img src={icon("filter-gray")} alt="Add filters to search" />
         </button>