done expanding search

frontend/src/app/components/topHeader/TopHeader.jsx

@@ -20,6 +20,7 @@ import PrimaryButton from "../buttons/primarybutton/PrimaryButton";
 import EditIcon from "../icons/edit";
 import UpdateIcon from "../icons/update";
 import SecondaryButton from "../buttons/secondaryButton/SecondaryButton";
+import SearchBar from "../searchbar/SearchBar";
 
 const TopHeader = (props) => {
   const [triggerDropDownMenu, setTriggerDropDownMenu] = useState(false);
@@ -51,7 +52,7 @@ const TopHeader = (props) => {
         <div className={styles.actionBar}>
           {props?.requiredButtons.includes("search") && (
             <div className={styles.searchBarContainer}>
-              <SearchIcon />
+              <SearchBar />
             </div>
           )}
           {props?.requiredButtons.includes("env") && (

frontend/src/app/components/topHeader/styles.module.css

@@ -6,6 +6,7 @@
   align-self: stretch;
   background: #21232f;
   transition: all 0.15s;
+  position: relative;
 }
 .title {
   display: flex;