Add address to search placeholder and add "at or above" to category copy for low income (#1665)

* Add address to search placeholder text

* Adds "at or above" to category copy

* Updates map search placeholder text

- Update es and en.json files
- adds mobile search placeholder text
- udpates desktop search placeholder text

* Update logic to determine mobile for search text

* Update search error message

- update to Spanish text as well

* Adjust spacing between search and territory btns

* Modify mobile detection logic

- remove cypress tests for faster deploys

* Add placeholder text to state variable

- wrap state variable in useEffect()

client/src/components/Categories/__snapshots__/Categories.test.tsx.snap

@@ -66,7 +66,7 @@ exports[`rendering of the Categories checks if component renders 1`] = `
         <strong>
           AND
         </strong>
-         is above the 65th percentile for 
+         is at or above the 65th percentile for 
         <a
           href="#low-income"
         >
@@ -119,7 +119,7 @@ exports[`rendering of the Categories checks if component renders 1`] = `
         <strong>
           AND
         </strong>
-         is above the 65th percentile for 
+         is at or above the 65th percentile for 
         <a
           href="#low-income"
         >
@@ -176,7 +176,7 @@ exports[`rendering of the Categories checks if component renders 1`] = `
         <strong>
           AND
         </strong>
-         is above the 65th percentile for 
+         is at or above the 65th percentile for 
         <a
           href="#low-income"
         >
@@ -235,7 +235,7 @@ exports[`rendering of the Categories checks if component renders 1`] = `
         <strong>
           AND
         </strong>
-         is above the 65th percentile for 
+         is at or above the 65th percentile for 
         <a
           href="#low-income"
         >
@@ -294,7 +294,7 @@ exports[`rendering of the Categories checks if component renders 1`] = `
         <strong>
           AND
         </strong>
-         is above the 65th percentile for 
+         is at or above the 65th percentile for 
         <a
           href="#low-income"
         >
@@ -341,7 +341,7 @@ exports[`rendering of the Categories checks if component renders 1`] = `
         <strong>
           AND
         </strong>
-         is above the 65th percentile for 
+         is at or above the 65th percentile for 
         <a
           href="#low-income"
         >
@@ -406,7 +406,7 @@ exports[`rendering of the Categories checks if component renders 1`] = `
         <strong>
           AND
         </strong>
-         is above the 65th percentile for 
+         is at or above the 65th percentile for 
         <a
           href="#low-income"
         >

client/src/components/CategoryCard/__snapshots__/CategoryCard.test.tsx.snap

@@ -44,7 +44,7 @@ exports[`rendering of the CategoryCard checks if component renders 1`] = `
       <strong>
         AND
       </strong>
-       is above the 65th percentile for 
+       is at or above the 65th percentile for 
       <a
         href="#low-income"
       >

client/src/components/MapSearch/MapSearch.tsx

@@ -1,7 +1,9 @@
-import React, {useState} from 'react';
+/* eslint-disable max-len */
+import React, {useEffect, useState} from 'react';
 import {LngLatBoundsLike} from 'maplibre-gl';
 import {useIntl} from 'gatsby-plugin-intl';
 import {Search} from '@trussworks/react-uswds';
+import {useWindowSize} from 'react-use';
 
 import MapSearchMessage from '../MapSearchMessage';
 
@@ -17,6 +19,22 @@ const MapSearch = ({goToPlace}:IMapSearch) => {
   const [isSearchResultsNull, setIsSearchResultsNull] = useState(false);
   const intl = useIntl();
 
+  /**
+   * At compile-time, the width/height returned by useWindowSize will be X. When the client requests the
+   * app on run-time from CDN, and the app hydrates, reconcilation no longer occurs and the client is forced
+   * to use X.
+   *
+   * To avoid this, we set the placeholder text as a state variable. We also create a useEffect that updates
+   * that state whenenver the width changes.
+   *
+   */
+  const {width, height} = useWindowSize();
+  const [placeholderText, setPlaceholderText]= useState(EXPLORE_COPY.MAP.SEARCH_PLACEHOLDER);
+
+  useEffect( () => {
+   width > height ? setPlaceholderText(EXPLORE_COPY.MAP.SEARCH_PLACEHOLDER): setPlaceholderText(EXPLORE_COPY.MAP.SEARCH_PLACEHOLDER_MOBILE);
+  }, [width]);
+
   /*
     onSearchHandler will
      1. extract the search term from the input field
@@ -61,7 +79,7 @@ const MapSearch = ({goToPlace}:IMapSearch) => {
     <div className={styles.mapSearchContainer}>
       <MapSearchMessage isSearchResultsNull={isSearchResultsNull} />
       <Search
-        placeholder={intl.formatMessage(EXPLORE_COPY.MAP.SEARCH_PLACEHOLDER)}
+        placeholder={intl.formatMessage(placeholderText)}
         size="small"
         onSubmit={(e) => onSearchHandler(e)}
       />

client/src/components/MapSearch/__snapshots__/MapSearch.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`rendering of the MapSearch checks if component renders 1`] = `
 <DocumentFragment>
   <div>
     <div>
-      No location found. Please try again.
+      Location not found or unknown. Please try a different search.
     </div>
     <form
       class="usa-search usa-search--small"
@@ -23,7 +23,7 @@ exports[`rendering of the MapSearch checks if component renders 1`] = `
         data-testid="textInput"
         id="search-field"
         name="search"
-        placeholder="Enter a city, state or ZIP"
+        placeholder="Search for an address, city, state or ZIP"
         type="search"
       />
       <button

client/src/components/MapSearchMessage/__snapshots__/MapSearchMessage.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`rendering of the MapSearchMessage when search results are empty checks if component renders 1`] = `
 <DocumentFragment>
   <div>
-    No location found. Please try again.
+    Location not found or unknown. Please try a different search.
   </div>
 </DocumentFragment>
 `;

client/src/components/territoryFocusControl.module.scss

@@ -7,14 +7,15 @@
 }
 
 .territoryFocusContainer {
-  // styles for mobile-lg (480px) and greater widths
+  @include baseTerritoryFocus;
+
+  // styles for mobile-lg (480px) and greater widths:
   @include at-media('mobile-lg') {
-    @include baseTerritoryFocus;
     top: units(card-lg);
   };
 
-  @include baseTerritoryFocus;
-  top: units(9);
+  // styles for mobile-lg (480px) and smaller widths:
+  top: 100px;
 
 }