From 8fd1aede2a02edb123c85456e6b30a25e7857b83 Mon Sep 17 00:00:00 2001
From: Sheldan <5037282+Sheldan@users.noreply.github.com>
Date: Tue, 26 Mar 2024 23:48:22 +0100
Subject: [PATCH] [AB-xxx] changing style of leaderboard table preparing for
 release

---
 .env                                             |  2 +-
 .../src/components/ExperienceConfigDisplay.tsx   | 16 +++++++---------
 .../src/components/Leaderboard.tsx               |  2 +-
 .../src/components/LeaderboardEntry.tsx          | 10 ++++++----
 4 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/.env b/.env
index c1543ef19..3fbf13d8a 100644
--- a/.env
+++ b/.env
@@ -1,2 +1,2 @@
 REGISTRY_PREFIX=harbor.sheldan.dev/abstracto/
-VERSION=1.5.31
\ No newline at end of file
+VERSION=1.5.32
\ No newline at end of file
diff --git a/ui/experience-tracking/src/components/ExperienceConfigDisplay.tsx b/ui/experience-tracking/src/components/ExperienceConfigDisplay.tsx
index e51579ed1..6439cd7ec 100644
--- a/ui/experience-tracking/src/components/ExperienceConfigDisplay.tsx
+++ b/ui/experience-tracking/src/components/ExperienceConfigDisplay.tsx
@@ -30,20 +30,21 @@ export const ExperienceConfigDisplay = ({serverId}: { serverId: bigint }) => {
 
     return (
         <>
-            {!hasError ?
+            {!hasError && roles.length !== 0 ?
                 <div className="bg-gray-800 p-4 mx-auto w-4/5 rounded-lg">
                     <button className="w-full flex justify-between items-center p-2 px-4" onClick={toggleOpen}>
                         <h2 className="text-xl font-extrabold leading-none tracking-tight text-gray-100">Role config</h2>
                             <div>
-                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className={`w-6 h-6 stroke-white stroke-2 duration-300 ${isOpen ? "rotate-180" : ""}`}>
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className={`w-6 h-6 stroke-white stroke-2 duration-500 ${isOpen ? "rotate-180" : ""}`}>
                                     <path strokeLinecap="round" strike-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"></path>
                                 </svg>
                             </div>
                     </button>
-                    <div className={`grid grid-cols-1 ${isOpen ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'} overflow-hidden duration-300`}>
-                        <div className="w-full gap-3 min-h-0 overflow-hidden flex flex-col items-start">
+                    <div className={`grid grid-cols-1 ${isOpen ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'} overflow-hidden duration-500`}>
+                        <div className="w-full min-h-0 overflow-hidden">
+                            <div className="p-4 flex flex-col gap-3 items-start">
                             {roles.map(role =>
-                                <div key={role.role.id} className="border-gray-700 flex gap-2 p-2 px-4 items-center flex-row-reverse">
+                                <div key={role.role.id} className="border-gray-700 flex gap-4 items-center flex-row-reverse">
                                     <p>
                                         <RoleDisplay role={role.role}/>
                                     </p>
@@ -51,11 +52,8 @@ export const ExperienceConfigDisplay = ({serverId}: { serverId: bigint }) => {
                                         {role.level}
                                     </p>
                                 </div>)}
+                            </div>
                         </div>
-                        {roles.length === 0 ?
-                            <div className="w-full flex items-center justify-center">
-                                <span className="text-gray-400">No roles</span>
-                            </div> : ''}
                     </div>
                 </div>
             : ''}
diff --git a/ui/experience-tracking/src/components/Leaderboard.tsx b/ui/experience-tracking/src/components/Leaderboard.tsx
index ebd000b14..45b27c792 100644
--- a/ui/experience-tracking/src/components/Leaderboard.tsx
+++ b/ui/experience-tracking/src/components/Leaderboard.tsx
@@ -72,7 +72,7 @@ export function Leaderboard({serverId}: { serverId: bigint }) {
 
                     </div>
                     <div className="flex flex-col">
-                        <div>
+                        <div className="mt-4">
                             <ExperienceConfigDisplay serverId={serverId}/>
                         </div>
                         <div className="text-sm text-left w-full mt-4">
diff --git a/ui/experience-tracking/src/components/LeaderboardEntry.tsx b/ui/experience-tracking/src/components/LeaderboardEntry.tsx
index 5122f124a..8dd278c96 100644
--- a/ui/experience-tracking/src/components/LeaderboardEntry.tsx
+++ b/ui/experience-tracking/src/components/LeaderboardEntry.tsx
@@ -9,16 +9,18 @@ export const LeaderboardEntry = ({member, index}: { member: ExperienceMember, in
         <img alt={member.member!.name} src={member.member!.avatarUrl}
                     className="object-contain h-16 w-16 rounded-full"/>
         <span className="align-middle" style={{color: nameColor}}>{member.member!.name}</span>
-    </> : <>{member.id}</>;
+    </> :
+        <span className="inline-flex items-center h-16">
+            {member.id.toString()}
+        </span>;
     return (
         <>
-            <tr className={`${index % 2 === 0 ? "bg-gray-800" : "bg-gray-600"}`}>
+            <tr className={`${index % 2 === 0 ? "bg-gray-600" : "bg-gray-800"} h-full`} style={{ minHeight: 64}}>
                 <td
                     className="text-center">
                     {member.rank}
                 </td>
-                <td
-                    className="px-2 py-4 font-medium whitespace-nowrap text-white flex items-center gap-3">
+                <td className="px-2 py-4 font-medium whitespace-nowrap text-white flex items-center gap-3">
                     {memberDisplay}
                 </td>
                 <td className="px-6 py-4 text-center">