added autocomplete and font family

package.json

@@ -19,6 +19,7 @@
     "lodash.isempty": "^4.4.0",
     "owasp-password-strength-test": "^1.3.0",
     "react": "^17.0.2",
+    "react-autocomplete": "^1.8.1",
     "react-dom": "^17.0.2",
     "react-helmet-async": "^1.0.9",
     "react-i18next": "^11.10.0",

src/assets/styles/_variables.scss

@@ -1,7 +1,7 @@
 $base-font-size: 16px;
 $base-font-size-md: 14px;
 
-$font-family: 'Avenir Next';
+$font-family: "Source Sans Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
 
 // Colors
 $color-primary: #024f86;

src/components/CreateScrapeRequest/CreateScrapeRequest.js

@@ -4,8 +4,14 @@ import Select from 'react-select'
 import { prices, beds, types, lifeStyles } from '../../constants/filters';
 import './CreateScrapeRequest.scss'
 import PropTypes from 'prop-types';
+import { states } from '../../constants/states'
+import Autocomplete from 'react-autocomplete';
 
-
+export function matchStateToTerm(state, value) {
+    return (
+        state.label.toLowerCase().indexOf(value.toLowerCase()) !== -1
+    )
+}
 const CreateScrapeRequest = ({ handleRequest }) => {
 
     const { t } = useTranslation();
@@ -34,11 +40,24 @@ const CreateScrapeRequest = ({ handleRequest }) => {
             <form >
                 <div className="card-body">
                     <div className="row">
-                        <div className="col-md-3">
+                        {/* <div className="col-md-3">
                             <div className="form-group">
                                 <input type="text" className="form-control input-field cursor-pointer" value={requestObject.location} placeholder={t('createScrapeRequest.LocationPlaceholder')} onChange={e => setRequestObject(s => ({ ...s, location: e.target.value }))} />
                             </div>
-                        </div>
+                        </div> */}
+                        <Autocomplete
+                            getItemValue={(item) => item.label}
+                            items={states.map(s => ({ label: s }))}
+                            renderItem={(item, isHighlighted) =>
+                                <div style={{ background: isHighlighted ? 'lightgray' : 'white' }}>
+                                    {item.label}
+                                </div>
+                            }
+                            shouldItemRender={matchStateToTerm}
+                            value={requestObject.location}
+                            onChange={(e, val) => setRequestObject(s => ({ ...s, location: val }))}
+                            onSelect={(val) => setRequestObject(s => ({ ...s, location: val }))}
+                        />
                         <div className="col-md-2">
                             <div className="form-group">
                                 <Select options={prices} value={{ name: requestObject.price, label: requestObject.price }} onChange={handleChangePriceType} />