Friend List Styling

src/components/friend_list.rs

@@ -8,13 +8,15 @@ pub fn FriendRow(user: FriendData) -> impl IntoView {
 	  
     view! {
 		<div class="friend-row">
-            <div class="friend-item">
+            <div class="friend-info">
-                <Suspense fallback=|| view! { <Icon class="friend-image" icon=icondata::CgProfile/> }>
+                <div class="friend-item">
-                    <img class="friend-image" src={format!("/assets/images/profile/{}.webp", user.user_id)} alt="Profile Photo" />
+                    <Suspense fallback=|| view! { <Icon class="friend-image" icon=icondata::CgProfile/> }>
-                </Suspense>
+                        <img class="friend-image" src={format!("/assets/images/profile/{}.webp", user.user_id)} alt="Profile Photo" />
+                    </Suspense>
+                </div>
+                <a class="friend-item" href={format!("../../user/{}",user.user_id)}>{user.username}</a>
             </div>
-			<a class="friend-item" href={format!("user/{}",user.user_id)}>{user.username}</a>
+            <p class="friend-created-date">{user.created_at.format("%m/%d/%Y").to_string()}</p>
-            <p class="friend-item friend-created-date">{user.created_at.format("%m/%d/%Y").to_string()}</p>
 		</div>
 	}.into_view()
 }

src/pages/friends.rs

@@ -86,7 +86,6 @@ pub fn FriendRequests() -> impl IntoView {
     let friend_list_outgoing = create_resource(
         id,
         |value| async move {
-            send_friend_request(1).await;
             match value {
                 Ok(v) => {friend_requests_outgoing(v).await},
                 Err(e) => {Err(ServerFnError::Request(format!("Error getting song data: {}", e).into()))},

style/friend.scss

@@ -0,0 +1,60 @@
+@import 'theme.scss';
+
+.friend-page-container {
+    width: 100%;
+}
+
+.friend-container {
+	width: 100%;
+	border-collapse: collapse;
+
+    .friend-row {
+        border: solid;
+		border-width: 1px 0;
+		border-color: #303030;
+		position: relative;
+
+        min-width: 100%;
+        height: 50px;
+
+        display: flex;
+        flex-flow: row nowrap;
+        justify-content: space-between;
+        align-items: center;
+
+        .friend-info {
+            display: flex;
+            flex-flow: row nowrap;
+        }
+
+        .friend-item {
+            max-width: max-content;
+            margin: 0 20px;
+
+            .friend-image {
+                width: 35px;
+                height: 35px;
+                border-radius: 50%;
+            }
+
+        }
+
+        .friend-created-date {
+            margin-right: 50px;
+        }
+        a {
+            color: $text-controls-color;
+        }
+        a:visited {
+            color: $text-controls-color;
+        }
+        a:hover {
+            color: $controls-hover-color;
+        }
+        
+        a:active {
+            color: $controls-click-color;
+        }
+    }
+
+}

style/main.scss

@@ -16,6 +16,7 @@
 @import 'profile.scss';
 @import 'loading.scss';
 @import 'album_page.scss';
+@import 'friend.scss';
 
 body {
   font-family: sans-serif;