much better ProfileUser CSS, not perfect by any stretch, but i don't absolutly hate it anymore, slightly better Tab responsiveness, oh and i added a pop of color

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

@@ -191,6 +191,7 @@
     grid-template-columns: 1fr 1fr;
     grid-gap: 20px;
     /* text-align: center; */
+		margin-bottom: 10px;
   }
 
   img {

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

@@ -321,16 +321,15 @@
 
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<div class="background-pages">
+<!-- <div class="background-pages"> -->
 <div class="top-grid">
 
   <!-- let tabItems: string[] = ['All Users', 'My Friends', 'Friend Requests']
   let activeTabItem: string = 'All Users'; -->
 
-  <div class="sidebar-list">
+  <div class="sidebar-list background-pages">
-    <Tabs items={tabItems} activeItem={activeTabItem} size="medium" on:tabChange={switchTab}/>
+    <Tabs items={tabItems} activeItem={activeTabItem} size="default" on:tabChange={switchTab}/>
     {#if activeTabItem === 'All Users' && allUsers}
-      <!-- <h3>{activeTabItem}</h3> -->
       {#if Object.keys(allUsers).length === 0}
         <div class="tip">You are alone on this platform...</div>
       {/if}
@@ -355,7 +354,6 @@
         <br>
       {/each}
     {:else if activeTabItem === 'My Friends' && myFriendships}
-      <!-- <h3>{activeTabItem}</h3> -->
       {#if Object.keys(myFriendships).length === 0}
         <div class="tip">You don't have any Friends... Yet!</div>
       {/if}
@@ -380,7 +378,6 @@
         <br>
       {/each}
     {:else if activeTabItem === 'Friend Requests' && requestsRecieved}
-      <!-- <h3>{activeTabItem}</h3> -->
       {#if Object.keys(requestsRecieved).length === 0}
         <div class="tip">You don't have any Friend Requests</div>
       {/if}
@@ -397,7 +394,6 @@
         <br>
       {/each}
     {:else if activeTabItem === 'Blocked Users' && blockedUsers}
-      <!-- <h3>{activeTabItem}</h3> -->
       {#if Object.keys(blockedUsers).length === 0}
         <div class="tip">You have not Blocked any Users</div>
       {/if}
@@ -417,12 +413,9 @@
   </div>
 
 
-  <!-- This next bit needs to all be in a window thing above the whatever -->
-
 	{#if showModal && usernameBeingViewed}
 	<div class="backdrop"></div>
-  <div class="main-display box" use:clickOutside on:outclick={() => unViewAUser()}>
+  <div class="box background-pages" use:clickOutside on:outclick={() => unViewAUser()}>
-    <!-- {#if usernameBeingViewed} -->
       <DisplayAUser aUsername={usernameBeingViewed} bind:loaded={loadedUser}/>
 
       {#if loadedUser === true}
@@ -459,18 +452,10 @@
         {/if}
       </div>
       {/if}
-    <!-- {:else}
-      <div class="placeholder">
-        <h1>Click on a user!</h1>
-        <h4>You'll see them displayed here</h4>
-      </div> -->
-    <!-- {/if} -->
-
 		<button on:click={() => unViewAUser()}>Close</button>
   </div>
 	{/if}
 </div>
-</div>
 
 
 <style>
@@ -482,24 +467,11 @@
     /* grid-template-columns: repeat(8, 1fr); */
     /* max-height: calc(100vh - 30vh); */
     height: 85vh;
+		/* display: block; */
+		position: relative;
     /* margin: 0; */
   }
 
-  /* div.sidebar-list{
-    grid-column: 1 / span 2;
-    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-list{
     /* grid-column: 1 / span 2; */
     /* grid-column: 3 / span 4; */
@@ -517,7 +489,6 @@
 		text-align: center;
   }
 
-
   div.sidebar-item{
     /* yea i mean that seems fine... */
     display: inline-block;
@@ -537,13 +508,40 @@
     cursor: pointer;
   }
 
-  div.main-display{
+	/* Modal Stuff */
-    grid-column: 3 / span 10;
+
+	.backdrop {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    background: rgba(0,0,0,0.50)
   }
 
-  div.placeholder{
+	.box {
-    color: white;
+		--width: 70vw;
+		--height: 60vh;
+		/* --height: auto; */
+		position: absolute;
+		width: var(--width);
+		/* width: auto; */
+		/* height: var(--height); */
+		height: auto;
+		left: calc(50% - var(--width) / 2);
+		/* left: 0px; */
+		top: calc(50% - var(--height) / 2);
+		/* top: 0px; */
+		/* top: calc(50% - ); */
+		/* display: flex; */
+		align-items: center;
+		padding: 8px;
+		border: 2px solid white;
+		border-radius: 7px;
+		/* background-color: #ff3e00; */
+		/* color: #fff; */
 		text-align: center;
+		font-weight: bold;
 	}
 
   div.buttons-area{
@@ -567,34 +565,8 @@
 		transform: translateY(-50%); */
 	}
 
-
+	div.tile {
-	/* Modal Stuff */
+		margin: 5px;
-
-	.box {
-		--width: 70vw;
-		--height: 60vh;
-		position: absolute;
-		width: var(--width);
-		height: var(--height);
-		left: calc(50% - var(--width) / 2);
-		top: calc(50% - var(--height) / 2);
-		display: flex;
-		align-items: center;
-		padding: 8px;
-		border-radius: 7px;
-		/* background-color: #ff3e00; */
-		/* color: #fff; */
-		text-align: center;
-		font-weight: bold;
-	}
-
-	.backdrop {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    left: 0;
-    background: rgba(0,0,0,0.50)
 	}
 
 	

srcs/requirements/svelte/api_front/src/pieces/GenerateUserDisplay.svelte

@@ -91,7 +91,7 @@
     </div>
     <section class="main-stats">
       <h4>Match Statistics</h4>
-      <p>Victories: {user.stats.winGame}</p>
+      <p>Wins: {user.stats.winGame}</p>
       <p>Losses: {user.stats.loseGame}</p>
       <p>Draws: {user.stats.drawGame}</p>
       <p class="highlight">Total: {user.stats.totalGame}</p>
@@ -119,6 +119,7 @@
 /* Normal CSS stuff */
   .avatar{
     max-width: 150px;
+    /* width: 1em; */
     /* padding: 5px; */
   }
 

srcs/requirements/svelte/api_front/src/pieces/Header.svelte

@@ -100,4 +100,10 @@
     max-width: 10%;
     float: left;
   }
+
+  button:hover{
+    cursor: pointer;
+    background-color: rgb(0, 166, 255) !important;
+  }
+
 </style>

srcs/requirements/svelte/api_front/src/pieces/Tabs.svelte

@@ -3,7 +3,7 @@
   export let items;
   export let activeItem;
   export let size = 'medium';
-  // big, medium, small
+  // big, medium, small, default (responsive)
 
   const dispatch = createEventDispatcher();
 
@@ -11,11 +11,9 @@
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="tabs" class:size={size}>
-  <!-- creates a list, can be done other ways -->
   <ul>
     {#each items as item}
       <li class={size} on:click={() => dispatch('tabChange', item)}>
-        <!-- the class active is attributed if the condition is met -->
         <div class:active={activeItem === item}>{item}</div>
       </li>
     {/each}
@@ -23,9 +21,7 @@
 </div>
 
 <style>
-  /* .tabs{
+
-    margin-bottom: 40px;
-  } */
   .tab.big{
     margin-bottom: 50px;
     /* guessing at size */
@@ -66,10 +62,36 @@
     /* need it small */
   }
 
-
   .active{
     color: #d91b42;
     border-bottom: 2px solid #d91b42;
     padding-bottom: 8px;
   }
+
+  li div:hover {
+    color: rgb(0, 166, 255) !important;
+  }
+
+  /* default is medium */
+  .tab.default {
+    margin-bottom: 40px;
+  }
+  li.default{
+    margin: 0 16px;
+    font-size: 18px;
+    /* the OG size */
+  }
+
+  @media screen and (max-width: 700px) {
+    /* they turn .small */
+    .tab.default {
+      margin-bottom: 10px;
+    }
+    li.default {
+      margin: 8px;
+      font-size: 10px;
+    }
+  }
+
+
 </style>