woring on better CSS for ProfileUsers, the new layout is ok and the avatars show up, but need to get the modal working

srcs/requirements/svelte/api_front/src/pages/profile/ProfileUsers.svelte

@@ -14,6 +14,7 @@
 	let blockedUsers = [];
 	let usernameBeingViewed;
 	let friendshipStatusFull; // date, reveiverUsername, status
+	// let errors = {avatar: ''};
 
 	/**** Layout variables ****/
 	let tabItems: string[] = [
@@ -317,7 +318,7 @@
   let activeTabItem: string = 'All Users'; -->
 
   <div class="sidebar-list">
-    <Tabs items={tabItems} activeItem={activeTabItem} size="small" on:tabChange={switchTab}/>
+    <Tabs items={tabItems} activeItem={activeTabItem} size="medium" on:tabChange={switchTab}/>
     {#if activeTabItem === 'All Users' && allUsers}
       <h3>{activeTabItem}</h3>
       {#if Object.keys(allUsers).length === 0}
@@ -327,11 +328,20 @@
       <!-- {#each allUsers as aUser (aUser.username)} -->
       <!-- {#each allUsers as aUser (aUser.id)} -->
       {#each allUsers as aUser}
-        <div class="sidebar-item" on:click={() => viewAUser(aUser.username)}>{aUser.username}</div>
+				<div class="user" on:click={() => viewAUser(aUser.username)}>
-        <!-- i could make an indicator component? like green for connected or something?
+					<!-- <div class="sidebar-item"></div> -->
-        i could use words but color them?
+					<!-- <img class="avatar" src="{avatar}" alt="user avatar"> -->
-        i could make it so if they're in a game  -->
+					{#await fetchAvatar(aUser.username) then avatar}
-        <div class="status sidebar-item">{aUser.status}</div>
+						<img class="avatar sidebar-item" src="{avatar}" alt="user avatar">
+					{:catch error}
+						<p>Avatar was unable to load</p>
+					{/await}
+					<div class="sidebar-item">{aUser.username}</div>
+					<!-- i could make an indicator component? like green for connected or something?
+					i could use words but color them?
+					i could make it so if they're in a game  -->
+					<div class="status sidebar-item">{aUser.status}</div>
+				</div>
         <br>
       {/each}
     {:else if activeTabItem === 'My Friends' && myFriendships}
@@ -340,11 +350,23 @@
         <div class="tip">You don't have any Friends... Yet!</div>
       {/if}
       {#each myFriendships as aFriendship}
-        {#if aFriendship.senderUsername !== user.username}
+				<div class="user" on:click={() => viewAUser(aFriendship.receiverUsername)}>
-          <div class="sidebar-item" on:click={() => viewAUser(aFriendship.senderUsername)}>{aFriendship.senderUsername}</div>
+					{#if aFriendship.senderUsername !== user.username}
-        {:else if aFriendship.receiverUsername !== user.username}
+						{#await fetchAvatar(aFriendship.senderUsername) then avatar}
-          <div class="sidebar-item" on:click={() => viewAUser(aFriendship.receiverUsername)}>{aFriendship.receiverUsername}</div>
+							<img class="avatar sidebar-item" src="{avatar}" alt="user avatar">
-        {/if}
+						{:catch error}
+							<p>Avatar was unable to load</p>
+						{/await}
+						<div class="sidebar-item" on:click={() => viewAUser(aFriendship.senderUsername)}>{aFriendship.senderUsername}</div>
+					{:else if aFriendship.receiverUsername !== user.username}
+						{#await fetchAvatar(aFriendship.receiverUsername) then avatar}
+							<img class="avatar sidebar-item" src="{avatar}" alt="user avatar">
+						{:catch error}
+							<p>Avatar was unable to load</p>
+						{/await}
+						<div class="sidebar-item">{aFriendship.receiverUsername}</div>
+					{/if}
+				</div>
         <br>
       {/each}
     {:else if activeTabItem === 'Friend Requests' && requestsRecieved}
@@ -353,8 +375,15 @@
         <div class="tip">You don't have any Friend Requests</div>
       {/if}
       {#each requestsRecieved as aUser}
-        <div class="sidebar-item" on:click={() => viewAUser(aUser.senderUsername)}>{aUser.senderUsername}</div>
+				<div class="user" on:click={() => viewAUser(aUser.senderUsername)}>
-        <div class="status sidebar-item">{aUser.status}</div>
+					{#await fetchAvatar(aUser.senderUsername) then avatar}
+						<img class="avatar sidebar-item" src="{avatar}" alt="user avatar">
+					{:catch error}
+						<p>Avatar was unable to load</p>
+					{/await}
+					<div class="sidebar-item">{aUser.senderUsername}</div>
+					<div class="status sidebar-item">{aUser.status}</div>
+				</div>
         <br>
       {/each}
     {:else if activeTabItem === 'Blocked Users' && blockedUsers}
@@ -364,8 +393,15 @@
         <div class="tip">You have not Blocked any Users</div>
       {/if}
       {#each blockedUsers as aUser}
-        <div class="sidebar-item" on:click={() => viewAUser(aUser.receiverUsername)}>{aUser.receiverUsername}</div>
+				<div class="user" on:click={() => viewAUser(aUser.receiverUsername)}>
-        <div class="status sidebar-item">{aUser.status}</div>
+					{#await fetchAvatar(aUser.receiverUsername) then avatar}
+						<img class="avatar sidebar-item" src="{avatar}" alt="user avatar">
+					{:catch error}
+						<p>Avatar was unable to load</p>
+					{/await}
+					<div class="sidebar-item">{aUser.receiverUsername}</div>
+					<div class="status sidebar-item">{aUser.status}</div>
+					</div>
         <br>
       {/each}
     {/if}
@@ -412,11 +448,11 @@
         {/if}
       </div>
       {/if}
-    {:else}
+    <!-- {:else}
       <div class="placeholder">
         <h1>Click on a user!</h1>
         <h4>You'll see them displayed here</h4>
-      </div>
+      </div> -->
     {/if}
 
   </div>
@@ -436,7 +472,7 @@
     /* margin: 0; */
   }
 
-  div.sidebar-list{
+  /* div.sidebar-list{
     grid-column: 1 / span 2;
     background: #FB8B24;
     padding: 1vw;
@@ -449,11 +485,29 @@
     border-right: 4px solid #071013;
     border-bottom: 4px solid #071013;
     overflow-wrap: break-word;
+  } */
+
+	div.sidebar-list{
+    /* grid-column: 1 / span 2; */
+    grid-column: 3 / span 4;
+    background: #FB8B24;
+    padding: 1vw;
+    font-size: smaller;
+    max-width: 100%;
+    max-height: 100%;
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    border-right: 4px solid #071013;
+    border-bottom: 4px solid #071013;
+    overflow-wrap: break-word;
   }
 
+
   div.sidebar-item{
     /* yea i mean that seems fine... */
     display: inline-block;
+		text-align: center;
     /* somehting about the buttons too, smaller ? */
   }
   div.status{
@@ -487,5 +541,9 @@
     font-weight: bold;
   }
 
+	img.avatar {
+		width: 60px;
+	}
+
 
 </style>