move user data on tab bar to the right

ellielle · Jun 13, 2024 · 3391046 · 3391046
1 parent 3804e0e
commit 3391046
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 18 deletions.
diff --git a/frontend/src/components/UI/Tabs.svelte b/frontend/src/components/UI/Tabs.svelte
@@ -60,26 +60,32 @@
       {/if}
     </svelte:fragment>
 
-    <!-- TODO: shove xp bar, avatar and logout button to the right -->
-
     <!-- user profile and level -->
-    <div style="display: flex;">
+    <div class="flex ml-auto">
       {#if $User.isLoggedIn}
-        <XPMeter
-          bind:level={$User.userData.Level}
-          bind:currentXP={$User.userData.XPForLevel}
-          levelXP={$User.userData.XPTotalForLevel}
-        />
-        <Avatar
-          bind:image={$User.userData.ProfileImageURL}
-          bind:handle={$User.userData.Handle}
-        />
+        <div class="mr-3">
+          <XPMeter
+            bind:level={$User.userData.Level}
+            bind:currentXP={$User.userData.XPForLevel}
+            levelXP={$User.userData.XPTotalForLevel}
+          />
+        </div>
+        <div class="mr-3">
+          <Avatar
+            bind:image={$User.userData.ProfileImageURL}
+            bind:handle={$User.userData.Handle}
+          />
+        </div>
       {/if}
-    </div>
 
-    <!-- sign out button -->
-    <button on:click={handleSignout}>Sign out</button>
+      <!-- sign out button -->
+      <div class="mr-3 items-center">
+        <button on:click={handleSignout}>Sign out</button>
+      </div>
 
-    <button on:click={handleClose} class="absolute top-5% right-5">✗</button>
+      <div>
+        <button on:click={handleClose}>✗</button>
+      </div>
+    </div>
   </TabGroup>
 </main>
diff --git a/frontend/src/components/content/BossBattle.svelte b/frontend/src/components/content/BossBattle.svelte
@@ -20,8 +20,6 @@
   });
 </script>
 
-<!-- BUG: the issue is most likely that you're using await / then in svelte which have their own scope, that isn't being watched or used in a reactive way. So boss data doesn't get updated. use `onMount` like in other components -->
-
 <main class="flex flex-col mx-auto">
   {#if Object.keys(boss).length === 0}
     <p>Loading...</p>