Merge pull request Girl-Code-It#241 from ShrutiOmer/search

Search icon added
vaishali614 · May 8, 2021 · 21b122a · 21b122a
2 parents 50a4788 + 5221759
commit 21b122a
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/src/CSS/Navbar.module.css b/src/CSS/Navbar.module.css
@@ -79,11 +79,15 @@ a:not([href]):hover{
 .searchContainer{
   margin-right: 10px;
   align-self: center;
+  padding-left: 10px;
+  background-color: #f0f0f0;
+}
+.searchContainer input{
+  outline: none;
 }
-
 .searchBar{
   height: 2.25rem;
-  width:200px;
+  width:163px;
   background-color: #f0f0f0;
   border:none;
   border-radius: 5px;
@@ -285,6 +289,8 @@ a:not([href]):hover{
   .searchContainer{
     align-self: flex-start;
     margin-left: 20px;
+    padding-left: 10px;
+    background-color: #f0f0f0;
   }
   .link{
     align-self: flex-start;

diff --git a/src/Components/ViewOpportunity/Navbar.js b/src/Components/ViewOpportunity/Navbar.js
@@ -2,6 +2,9 @@ import React from 'react';
 import styles from '../../CSS/Navbar.module.css';
 import { Navbar, Nav, Button } from 'react-bootstrap';
 import { Link } from 'react-router-dom'
+import {
+  FiSearch
+} from 'react-icons/fi';
 // import { AiOutlineSearch } from 'react-icons/ai';
 
 function Navbar1() {
@@ -28,7 +31,8 @@ function Navbar1() {
       <Navbar.Collapse id="responsive-navbar-nav" >
         <Nav className="ml-auto">
           <div className={styles.searchContainer} >
-            <input type="text" className={styles.searchBar} placeholder="Search" />
+           <FiSearch />
+            <input type="text" className={styles.searchBar}  placeholder="Search" />
           </div>
           <Link className={styles.link} to={postOpportunityPath}>
             <Button className={styles.Button} >