Economy #4 - Leaderboard

dashboard/assets/css/leaderboard.css

@@ -0,0 +1,21 @@
+h1 img {
+  height: 64px;
+}
+
+li.list-group-item {
+  background-color: var(--background-secondary);
+  color: var(--heading);
+}
+
+li:nth-of-type(1) {
+  background: linear-gradient(to bottom, #C5B358 0%, #B6A449 100%);
+  color: white;
+}
+li:nth-of-type(2) {
+  background: linear-gradient(to bottom, #C0C0C0 0%, #B1B1B1 100%);
+  color: white;
+}
+li:nth-of-type(3) {
+  background: linear-gradient(to bottom, #CD7F32 0%, #BE7023 100%);
+  color: white;
+}

dashboard/views/dashboard/leaderboard.pug

@@ -0,0 +1,25 @@
+doctype
+html(lang='en')
+  head
+    include ../includes/header.pug
+
+    link(rel='stylesheet', href='/css/leaderboard.css')
+  body
+    include ../includes/navbar.pug
+    header.text-center
+      h1
+        img.round.mr-3(src=guild.iconURL())
+        span #{guild.name} Leaderboard
+      p.lead View the top 100 richest users in #{guild.name}.
+
+    ul.list-group.container.mt-5
+      each savedUser, index in savedUsers
+        - var user = guild.members.cache.get(savedUser.id)?.user;
+        if user
+          li.list-group-item
+            span
+              strong.round.mr-3 #{index + 1}
+              img.round.user-avatar.mr-2(src=user.displayAvatarURL({ dynamic: true }))
+              span.lead #{user.username}
+              span.text-muted ##{user.discriminator}
+            span.float-right.pt-2 #{savedUser.coins} #[i.fas.fa-coins.text-warning]