feat: accent your user

hackclub · Sep 19, 2024 · 8da6cfc · 8da6cfc
1 parent 2b78a56
commit 8da6cfc
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 15 deletions.
diff --git a/models/view/leaderboard.go b/models/view/leaderboard.go
@@ -30,18 +30,9 @@ func (s *LeaderboardViewModel) WithError(m string) *LeaderboardViewModel {
 
 func (s *LeaderboardViewModel) ColorModifier(item *models.LeaderboardItemRanked, principal *models.User) string {
 	if principal != nil && item.UserID == principal.ID {
-		return "self"
+		return "border-accent-primary dark:border-accent-dark-primary border-3"
 	}
-	if item.Rank == 1 {
-		return "gold"
-	}
-	if item.Rank == 2 {
-		return "silver"
-	}
-	if item.Rank == 3 {
-		return "bronze"
-	}
-	return "default"
+	return ""
 }
 
 func (s *LeaderboardViewModel) LangIcon(lang string) string {

diff --git a/static/assets/css/app.css b/static/assets/css/app.css
@@ -138,6 +138,10 @@ body {
     color: #daa520;
 }
 
+.border-3 {
+    border-width: 3px;
+}
+
 ::-webkit-calendar-picker-indicator {
     filter: invert(1);
     cursor: pointer;

diff --git a/static/assets/css/app.dist.v0.1.6.css b/static/assets/css/app.dist.v0.1.6.css
diff --git a/static/assets/css/app.dist.v0.1.6.css.br b/static/assets/css/app.dist.v0.1.6.css.br
diff --git a/views/leaderboard.tpl.html b/views/leaderboard.tpl.html
@@ -60,13 +60,13 @@ <h1 class="text-4xl font-semibold antialiased mb-1 leading-snug">Leaderboard</h1
             {{ if len .Items }}
             <ol>
                 {{ range $i, $item := .Items }}
-                <li class="px-4 py-2 my-2 rounded-md border-2 border-primary flex justify-between">
+                <li class="px-4 py-2 my-2 rounded-md border-2 border-primary {{ $.ColorModifier $item $.User }} flex justify-between">
                     <div class="w-12"><strong># {{ $item.Rank }}</strong></div>
                     <div class="flex flex-grow w-16 mx-1 justify-start items-center space-x-4 align-middle">
                         {{ if avatarUrlTemplate }}
                         <img src="{{ $item.User.AvatarURL avatarUrlTemplate }}" width="24px" class="rounded-full border-2 border-accent-primary dark:border-accent-dark-primary" alt="User Profile Avatar"/>
                         {{ else }}
-                        <span class="iconify inline cursor-pointer rounded-full border-2 border-accent-primary dark:border-accent-dark-primary" style="width: 24px; height: 24px" data-icon="ic:round-person"></span>
+                        <span class="iconify inline cursor-pointer rounded-full border-accent-primary dark:border-accent-dark-primary" style="width: 24px; height: 24px" data-icon="ic:round-person"></span>
                         {{ end }}
                         <div>
                             <strong class="text-ellipsis truncate">@{{ $item.UserID }}</strong>
@@ -87,7 +87,7 @@ <h1 class="text-4xl font-semibold antialiased mb-1 leading-snug">Leaderboard</h1
                 </li>
                 {{ end }}
             </ol>
-            <p class="text-sm pt-8">Last Updated: {{ .LastUpdate | datetime }}</p>
+            <p class="text-sm text-text-tertiary dark:text-text-dark-tertiary pt-8">Last Updated: {{ .LastUpdate | datetime }}</p>
             {{ else }}
             <p>
                 <span class="iconify inline text-base" data-icon="twemoji:frowning-face"></span>&nbsp;