feat: edit styles

src/main/web/src/scenes/Friends/UserFriend.css

@@ -3,7 +3,7 @@
     align-items: center;
     text-align: center;
     border-radius: 25px;
-    background-color: var(--component-grey);
+    background-color: var(--grey);
     justify-content: center;
     width: 120px;
     padding: 10px;

src/main/web/src/scenes/Friends/index.css

@@ -1,33 +1,69 @@
-.search-results {
-    width: 780px;
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-gap: 10px;
-    position: relative;
+.friends-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 20px;
 }
 
-@media (max-width: 412px) {
-    .search-results {
-        margin-left: 20px;
-        margin-top: -5px;
-    }
+.friend-list-container {
+  width: 780px;
+  background-color: var(--component-grey);
+  padding: 20px;
+  border-radius: 10px;
+}
+
+.friends-title {
+  font-size: 24px;
+  margin-bottom: 20px;
+  color: #fff;
+  text-align: left;
 }
+
 .friend-list {
-    width: 780px;
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
-    gap: 10px;
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
+  gap: 10px;
 }
+
+.friend-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 10px;
+}
+
+.friend-avatar {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  margin-bottom: 10px;
+}
+
+.friend-name {
+  font-size: 14px;
+  text-align: center;
+}
+
 @media (max-width: 412px) {
-    .user-search-results {
-        margin-left: 20px;
-        margin-top: -5px;
-    }
+  .friend-list-container {
+    width: auto;
+    margin: 10px;
+  }
+
+  .friend-item {
+    margin: 5px;
+  }
+
+  .search-results {
+    margin-left: 20px;
+    margin-top: -5px;
+  }
 }
 
 .animation {
-    width: 780px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  width: 780px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }

src/main/web/src/scenes/Friends/index.tsx

@@ -42,8 +42,12 @@ export const Friends = () => {
         });
         if (response.ok) {
           const data = await response.json();
-          setFriendsResults(data);
-          setNotFound(false);
+          if (data.length !== 0) {
+            setFriendsResults(data);
+            setNotFound(false);
+          } else {
+            setNotFound(true);
+          }
         } else {
           setNotFound(true);
         }
@@ -80,9 +84,7 @@ export const Friends = () => {
       <div className="page">
         {adBlockDetected && <AdBlockOverlay />}
         <Header />
-        <div className="empty-page">
-          <h1 className="empty-page-info">You're not yet following anyone</h1>
-        </div>
+        <h1 className="empty-page-info">You're not following anyone yet</h1>
         <Footer />
         {isSmartphoneSize && <MobileFooter />}
       </div>
@@ -93,11 +95,13 @@ export const Friends = () => {
     <div className="page">
       {adBlockDetected && <AdBlockOverlay />}
       <Header />
-        <div className="friends-container">
+      <div className="friends-container">
+        <div className="friend-list-container">
           <h1 className="friends-title">Following</h1>
           <div className="friend-list">
             {friendsResults.map((user: UserFriendModel) => (
               <UserFriend
+                key={user.friendlistId}
                 friendlistId={user.friendlistId}
                 userId={user.userId}
                 username={user.username}
@@ -106,6 +110,7 @@ export const Friends = () => {
             }
           </div>
         </div>
+      </div>
       <Footer />
       {isSmartphoneSize && <MobileFooter />}
     </div>