From af048d2027a5c0c273312a85f59ff695e8aeffe5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Let=C3=ADcia=20Camara?= <lettcamara@gmail.com>
Date: Thu, 4 Oct 2018 12:36:17 -0300
Subject: [PATCH] Enhaced search bar of merchants update

---
 src/components/EnhancedSearch.js       | 26 +++++++++++++++-----------
 src/components/pages/MerchantsPage.css |  3 +++
 src/components/pages/MerchantsPage.js  |  2 ++
 3 files changed, 20 insertions(+), 11 deletions(-)
 create mode 100644 src/components/pages/MerchantsPage.css

diff --git a/src/components/EnhancedSearch.js b/src/components/EnhancedSearch.js
index d3d43dc..465b462 100644
--- a/src/components/EnhancedSearch.js
+++ b/src/components/EnhancedSearch.js
@@ -30,8 +30,11 @@ const styles = theme => ({
   },
   textField: {
     flexBasis: 280,
-    borderColor: "#139657"
   },
+  focused: {
+    color: '#139657',
+    backgroundColor: '#139657',
+  }
 });
 
 /**
@@ -50,18 +53,19 @@ class EnhancedSearch extends Component {
 				<div className="search-books-bar">
 					<div className="search-books-input-wrapper" style={{ textAlign: 'left', marginLeft: 20}}>
 						<TextField
-							style={{ textAlign: 'left', width: 350,borderColor: "#139657" }}
+							style={{ textAlign: 'left', width: 350 }}
 							id="outlined-adornment-weight"
 							className={classNames(classes.margin, classes.textField)}
-		          variant="outlined"
-		          label="Search"
+              classes={{ focused: classes.focused }}
+              variant="outlined"
+              label="Search"
               placeholder="Enter search term"
-		          value={query}
-		          onChange={(event) => onUpdateQuery(event.target.value)}
-		          InputProps={{
-		            startAdornment: <InputAdornment position="start"><Search /></InputAdornment>,
-		          }}
-		        />
+              value={query}
+              onChange={(event) => onUpdateQuery(event.target.value)}
+              InputProps={{
+                startAdornment: <InputAdornment position="start"><Search /></InputAdornment>,
+              }}
+              />
 						<br />
             {this.props.showSearchColumns && this.props.columns.map(column => (
               <FormControlLabel
@@ -80,7 +84,7 @@ class EnhancedSearch extends Component {
 				</div>
 			</div>
 		);
-	};
+	}
 }
 
 // Type checking the props of the component
diff --git a/src/components/pages/MerchantsPage.css b/src/components/pages/MerchantsPage.css
new file mode 100644
index 0000000..597bd5a
--- /dev/null
+++ b/src/components/pages/MerchantsPage.css
@@ -0,0 +1,3 @@
+.MuiFormLabel-root-82.MuiFormLabel-focused-83 {
+  color: #139657
+}
diff --git a/src/components/pages/MerchantsPage.js b/src/components/pages/MerchantsPage.js
index 54b6315..be4cbf2 100644
--- a/src/components/pages/MerchantsPage.js
+++ b/src/components/pages/MerchantsPage.js
@@ -19,6 +19,8 @@ import Countries from 'country-list';
 import LoadingGif from '../../assets/img/loading_icon.gif';
 import MerchantPin from '../../assets/img/map/merchant_pin.png';
 
+import "./MerchantsPage.css";
+
 // List of countries
 const countries = Countries();