From 749c5329c5ccc9f2f972bf1bc47be7d667c1c8ef Mon Sep 17 00:00:00 2001
From: Aizizi Yigaimu <seniordevone@Aizizis-MacBook-Pro.local>
Date: Mon, 23 Mar 2020 14:59:14 -0400
Subject: [PATCH 1/2] Overlap address dropdown, make it clickable

---
 src/containers/SearchBar/index.js   | 19 ++++++++++++++++--
 src/containers/SearchBar/styles.css | 31 ++++++++++++++++++++---------
 2 files changed, 39 insertions(+), 11 deletions(-)

diff --git a/src/containers/SearchBar/index.js b/src/containers/SearchBar/index.js
index e2748b31..0401db03 100644
--- a/src/containers/SearchBar/index.js
+++ b/src/containers/SearchBar/index.js
@@ -58,6 +58,21 @@ class SearchBar extends Component {
     this.props.searchBuildings(stateSource);
   }
 
+  handleOnSelected = (viewport, item) => {
+    this.setState({
+      viewport,
+      address: item.place_name,
+      addressFound: true,
+    });
+  }
+
+  handleOnChange = (event) => {
+    this.setState({
+      address: event.target.value,
+      addressFound: false,
+    });
+  }
+
   render() {
     let addressData = '';
     const { viewport } = this.state;
@@ -67,6 +82,7 @@ class SearchBar extends Component {
           {...mapAccess}
           onSelected={this.handleOnSelected}
           hideOnSelect
+          onChange={this.handleOnChange}
           viewport={viewport}
           queryParams={queryParams}
           placeholder="Enter building address ..."
@@ -78,8 +94,7 @@ class SearchBar extends Component {
           type="text"
           value={this.state.address}
           onValue={this.state.disabledAddressSearchBtn === false}
-          onChange=""
-          onClick={this.disableText}
+          onChange={this.handleOnChange}
           className="addressDisplay"
           placeholder="Enter building address ..."
         />
diff --git a/src/containers/SearchBar/styles.css b/src/containers/SearchBar/styles.css
index 9cda773e..5b248cf6 100644
--- a/src/containers/SearchBar/styles.css
+++ b/src/containers/SearchBar/styles.css
@@ -34,43 +34,56 @@ li.navbar-input>form {
 }
 
 .addressSearchInput {
-    width: 650px !important;
+    width: 700px !important;
+    position: relative;
 }
 
 .addressDisplay {
     height: 35px;
-    font-size: 14px;
+    font-size: 16px;
     font-weight: bold;
-    width: 90% !important;
+    width: 100% !important;
     padding: 10px;
+    margin-top: 5px;
+    margin-bottom: 5px;
 }
 
 .react-geocoder {
     position: relative;
-    /* width: 70% !important; */
 }
 
 .react-geocoder input {
+    height: 35px;
     width: 100% !important;
     padding: 5px;
     margin-top: 5px;
     margin-bottom: 5px;
+    font-weight: bold;
+    font-size: 16px;
+}
+
+.react-geocoder-results {
+    position: absolute;
+    background: #333333;
+    width: 100% !important;
 }
 
 .react-geocoder-item {
     width: 100% !important;
     margin-left: 0px;
     height: auto !important;
-    padding-bottom: 0 !important;
     border-bottom: 0.5px solid rgba(160, 160, 160, .5) !important;
     height: 30px !important;
     font-weight: 700;
-    padding-top: 1%;
-    padding-bottom: 3%;
-    font-size: 14px !important;
+    padding: 1% 2% 5% 2% !important;
+    font-size: 16px !important;
     margin-left: 0px;
     cursor: pointer;
-    color: #FFFFFF;
+    color: #DDDDDD;
     overflow: visible;
     position: relative;
 }
+
+.react-geocoder-item:hover {
+    color: #FFFFFF;
+}
-- 
GitLab


From f1e978031c073569eda80bd6def9fd62a6bbeff1 Mon Sep 17 00:00:00 2001
From: Aizizi Yigaimu <seniordevone@Aizizis-MacBook-Pro.local>
Date: Mon, 23 Mar 2020 17:00:02 -0400
Subject: [PATCH 2/2] Make mobile friendly

---
 src/components/UtilityLine/UtilityLine.js |  6 ++--
 src/containers/SearchBar/styles.css       | 37 +++++++++++++++++++++++
 2 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/src/components/UtilityLine/UtilityLine.js b/src/components/UtilityLine/UtilityLine.js
index a55d264c..72988b81 100644
--- a/src/components/UtilityLine/UtilityLine.js
+++ b/src/components/UtilityLine/UtilityLine.js
@@ -292,8 +292,10 @@ class UtilityLine extends Component {
       !(this.state.form.account_number) && !this.state.form.utility.startsWith('other')
     );
     if (this.state.form.utility === 'national_grid_gas') {
-      isDisabled = !(this.state.form.account_number && this.state.form.access_code) &&
-        !(this.state.form.account_number && this.state.form.username && this.state.form.password);
+      isDisabled = !(
+        this.state.form.account_number && this.state.form.access_code
+      ) && !(this.state.form.account_number && this.state.form.username
+        && this.state.form.password);
     }
     if (this.state.form.utility.startsWith('con_edison_detail')) {
       isDisabled = !(
diff --git a/src/containers/SearchBar/styles.css b/src/containers/SearchBar/styles.css
index 5b248cf6..386d9781 100644
--- a/src/containers/SearchBar/styles.css
+++ b/src/containers/SearchBar/styles.css
@@ -86,4 +86,41 @@ li.navbar-input>form {
 
 .react-geocoder-item:hover {
     color: #FFFFFF;
+    border-bottom: 0.5px solid #555555 !important;
 }
+
+@media screen and (max-width: 992px) {
+    .addressSearchInput {
+        width: 600px !important;
+    }
+    .react-geocoder-item {
+        font-size: 13px !important;
+        font-weight: normal;
+    }
+    .react-geocoder input {
+        font-size: 13px !important;
+        font-weight: normal;
+    }
+    .addressDisplay {
+        height: 35px;
+        font-size: 13px;
+    }
+  }
+
+@media screen and (max-width: 600px) {
+    .addressSearchInput {
+        width: 420px !important;
+    }
+    .react-geocoder-item {
+        font-size: 11px !important;
+        font-weight: normal;
+    }
+    .react-geocoder input {
+        font-size: 11px !important;
+        font-weight: normal;
+    }
+    .addressDisplay {
+        height: 35px;
+        font-size: 11px;
+    }
+  }
-- 
GitLab