Clean, style and move search icon

src/pages/posts/PostsPage.js

@@ -14,7 +14,7 @@ import { axiosReq } from "../../api/axiosDefaults";
 
 import NoResults from "../../assets/no-results.png";
 import InfiniteScroll from "react-infinite-scroll-component";
-import {fetchMoreData}  from "../../utils/utils"
+import { fetchMoreData } from "../../utils/utils";
 
 function PostsPage({ message, filter = "" }) {
   const [posts, setPosts] = useState({ results: [] });
@@ -36,24 +36,24 @@ function PostsPage({ message, filter = "" }) {
     setHasLoaded(false);
     const timer = setTimeout(() => {
       fetchPosts();
-    }, 1000)
+    }, 1000);
     return () => {
-      clearTimeout(timer)
-    }
+      clearTimeout(timer);
+    };
   }, [filter, query, pathname]);
 
   return (
     <Row className="h-100">
       <Col className="py-2 p-0 p-lg-2" lg={8}>
         <p>Popular profiles mobile</p>
-        <i className={`fas fa-search ${styles.SearchIcon}`} />
         <Form
-          className={styles.SearchBar}
+          className={`d-flex ${styles.SearchBar}`}
           onSubmit={(event) => event.preventDefault()}
         >
+          <i className={`fas fa-search ${styles.SearchIcon}`} />
           <Form.Control
-          value={query}
-          onChange={(event) => setQuery(event.target.value)}
+            value={query}
+            onChange={(event) => setQuery(event.target.value)}
             type="text"
             className="mr-sm-2"
             placeholder="Search posts"
@@ -62,18 +62,15 @@ function PostsPage({ message, filter = "" }) {
         {hasLoaded ? (
           <>
             {posts.results.length ? (
-              <InfiniteScroll 
-              children={
-                posts.results.map((post) => (
+              <InfiniteScroll
+                children={posts.results.map((post) => (
                   <Post key={post.id} {...post} setPosts={setPosts} />
-                ))
-              }
-              dataLength={posts.results.length}
-              loader={<Asset spinner />}
-              hasMore={!!posts.next}
-              next={() => fetchMoreData(posts, setPosts)}
+                ))}
+                dataLength={posts.results.length}
+                loader={<Asset spinner />}
+                hasMore={!!posts.next}
+                next={() => fetchMoreData(posts, setPosts)}
               />
-
             ) : (
               <Container className="appStyles.Content">
                 <Asset src={NoResults} message={message} />

src/styles/PostsPage.module.css

@@ -1,5 +1,4 @@
 .SearchBar input {
-  border-radius: 20px;
   color: #242a3d;
   padding-left: 40px;
   margin-bottom: 16px;