finish pretty find friends

frontend/src/components/FriendSearch/FriendSearch.css

@@ -1,14 +1,33 @@
+@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap");
+
 .main {
     display: flex;
-    flex-direction: column; 
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
+
+.outer-box {
+    display: flex;
+    flex-direction: column;
     align-items: center;
+    flex-direction: center;
+    height: 100vh;
+    /* margin-top: 10vh; */
+    font-family: 'DM Sans';
+    background-color: rgba(186, 209, 250, .2);
 }
 
-#add-friends-btn {
-    margin-top: 10px;
-    width: 300px;
+.title {
+    font-weight: bold;
+    font-size: 25px;
+    margin-bottom: 20px;
+}
+
+.search {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }
 
-#outlined-basic {
-
-}

frontend/src/components/FriendSearch/FriendSearch.js

@@ -8,7 +8,7 @@ import ListItem from '@mui/material/ListItem';
 import ListItemButton from '@mui/material/ListItemButton';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
-import "./FriendSearch.css"
+import "./FriendSearch.css";
 
 function FriendSearch() {
   const searchUrl = "http://localhost:4000/users/addFriend/"
@@ -61,26 +61,29 @@ function FriendSearch() {
   }, [])
 
   return (
-        <div className="main">
-          <p>find friends</p>
+    <div className="outer-box">
+      <div className="main">
+        <div className="title">find friends</div>
           <div className="search">
             <TextField
+              style={{ width: "30vw", textAlignLast: 'center' }}
               id="outlined-basic"
               variant="outlined"
               fullWidth
-              label="Search"
+              label="search"
+              size="small"
               onChange={inputHandler}
             />
             {response && <><small style={{ color: 'red' }}>{response}</small><br /></>}<br />
             <Button
-              style={{ marginTop: "10px", backgroundColor: "rgba(186,209,250)", fontFamily: "DM SANS", textTransform: "lowercase", color: "black", boxShadow: "none", marginRight: "10px" }}
+              style={{ backgroundColor: "rgba(186,209,250)", fontFamily: "DM SANS", textTransform: "lowercase", color: "black", boxShadow: "none", marginRight: "10px", marginBottom: "5px"}}
               onClick={handleSubmit}
               variant="contained"
             >
-              Add Friend
+              add friend
             </Button>
           </div>
-          <p class="title">current friends</p>
+          <p class="title"> current friends</p>
           {/* <List>
             <>
               {
@@ -89,8 +92,10 @@ function FriendSearch() {
               }
             </>
           </List> */}
-        </div>
-    );
+    </div>
+
+    </div>
+  );
 }
 
 export default FriendSearch;