done searchbar but not final

frontend/src/app/components/mobileSearchBar/MobileSearchBar.jsx

@@ -5,13 +5,13 @@ import SearchIcon from "../icons/search";
 const MobileSearchBar = (props) => {
   const [open, setOpen] = useState(false);
   return (
-    <form className={styles.searchBarContainer}>
+    <form className={`${styles.searchBarContainer} ${open ? styles.open : ""}`}>
+      <input type="text" placeholder="Search" className={styles.searchBar} />
       <div
-        className={`${styles.searchBarWrapper} ${open ? styles.open : ""}`}
+        className={styles.searchBtn}
         onClick={() => setOpen((open) => !open)}
       >
-        <input type="text" placeholder="Search" className={styles.searchBar} />
-        <SearchIcon className={styles.searchIcon} />
+        <SearchIcon />
       </div>
     </form>
   );

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

@@ -3,14 +3,16 @@
   align-items: center;
   gap: 10px;
   align-self: stretch;
-}
-
-.searchBarWrapper {
   position: relative;
   width: 100%;
   border: 1px solid #31324a00;
   transition: width 0.35s ease;
 }
+.searchBar:focus-within {
+  background: #292a36;
+  border-radius: 6px;
+}
+
 .open {
   display: flex;
   align-items: center;
@@ -26,19 +28,21 @@
   background-color: transparent;
   border: none;
   opacity: 0;
-  /* pointer-events: none; */
   transition: opacity 0.35s ease;
   outline: none;
-  color: white;
+  color: #85869b;
+  text-align: start;
   font-family: Inter;
-  font-size: 1.18rem;
+  font-size: 18px;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
+  letter-spacing: -0.09px;
   caret-color: #575bc7;
 }
 .searchBar::placeholder {
   color: #85869b;
+  text-align: start;
   font-family: Inter;
   font-size: 18px;
   font-style: normal;
@@ -46,17 +50,19 @@
   line-height: normal;
   letter-spacing: -0.09px;
 }
+
 .open > .searchBar {
-  opacity: 1; /*show input when open*/
+  opacity: 1;
+  transition-delay: 0.1s;
 }
-.searchIcon {
+.searchBtn {
   position: absolute;
   top: 50%;
   left: 10px;
-  transform: translateY(-50%);
-  pointer-events: none; /* so clicking the icon focuses input */
+  transform: translateY(-40%);
+  cursor: pointer;
   color: #858699;
 }
-.searchIcon:hover {
+.searchBtn:hover {
   color: #959aff;
 }