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,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

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