Enhaced search bar of merchants update

src/components/EnhancedSearch.js

@@ -30,8 +30,11 @@ const styles = theme => ({
   },
   textField: {
     flexBasis: 280,
-    borderColor: "#139657"
   },
+  focused: {
+    color: '#139657',
+    backgroundColor: '#139657',
+  }
 });
 
 /**
@@ -50,9 +53,10 @@ 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)}
+              classes={{ focused: classes.focused }}
               variant="outlined"
               label="Search"
               placeholder="Enter search term"
@@ -80,7 +84,7 @@ class EnhancedSearch extends Component {
 				</div>
 			</div>
 		);
-	};
+	}
 }
 
 // Type checking the props of the component

src/components/pages/MerchantsPage.css

@@ -0,0 +1,3 @@
+.MuiFormLabel-root-82.MuiFormLabel-focused-83 {
+  color: #139657
+}

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();