Add admin/mod badges on UserCardPartial (#697)

* Add admin/mod badges to UserCardPartial

* Correct vertical alignment of badges

* Move most of styling to stylesheet, lazy but it works

* Implement more modular role coloring for UserLinkPartial and UserCardPartial

---------

Co-authored-by: Slendy <josh@slendy.pw>

ProjectLighthouse.Servers.Website/Pages/Partials/Links/UserLinkPartial.cshtml

@@ -1,4 +1,5 @@
 @using LBPUnion.ProjectLighthouse.Localization
+@using LBPUnion.ProjectLighthouse.Types.Users
 @model LBPUnion.ProjectLighthouse.Types.Entities.Profile.User
 
 @{
@@ -11,15 +12,9 @@
 <a href="/user/@Model.UserId" title="@userStatus" class="user-link">
     <img src="/gameAssets/@Model.WebsiteAvatarHash" alt=""/>
 
-    @if (Model.IsAdmin)
+    @if (Model.IsModerator)
     {
-        <span style="color: red; font-weight: 600;">
+        <span style="color: @Model.PermissionLevel.ToHtmlColor(); font-weight: 600;">
-            @Model.Username
-        </span>
-    }
-    else if (Model.IsModerator)
-    {
-        <span style="color: rgb(200, 130, 0); font-weight: 600;">
             @Model.Username
         </span>
     }

ProjectLighthouse.Servers.Website/Pages/Partials/UserCardPartial.cshtml

@@ -1,4 +1,5 @@
 @using LBPUnion.ProjectLighthouse.Localization
+@using LBPUnion.ProjectLighthouse.Types.Users
 @model LBPUnion.ProjectLighthouse.Types.Entities.Profile.User
 
 @{
@@ -19,12 +20,24 @@
         {
             <h2 style="margin-bottom: 2px;">
                 <a href="~/user/@Model.UserId">@Model.Username</a>
+                    @if (Model.IsModerator)
+                    {
+                        <span class="permissionBadge" style="background-color: @Model.PermissionLevel.ToHtmlColor();">
+                            @Model.PermissionLevel.ToString()
+                        </span>
+                    }
             </h2>
         }
         else
         {
             <h1 style="margin-bottom: 2px;">
                 @Model.Username
+                @if (Model.IsModerator)
+                {
+                    <span class="permissionBadge" style="background-color: @Model.PermissionLevel.ToHtmlColor();">
+                        @Model.PermissionLevel.ToString()
+                    </span>
+                }
             </h1>
         }
         <span>

ProjectLighthouse/StaticFiles/css/styles.css

@@ -240,4 +240,23 @@ div.cardStatsUnderTitle > span {
     --scale: scale(1.2, 1.2);
 }
 
-/*#endregion Slot labels */
+/*#endregion Slot labels */
+
+/*#region User permission badge */
+
+.permissionBadge {
+    width: auto;
+    height: auto;
+    color: white;
+    background-color: inherit;
+    border: 0px solid black;
+    border-radius: 50px;
+    font-weight: 200;
+    font-size: 10pt;
+    padding: 1px;
+    padding-left: 6px;
+    padding-right: 6px;
+    vertical-align: top;
+}
+
+/*#endregion User permission badge */

ProjectLighthouse/Types/Users/PermissionLevel.cs

@@ -8,4 +8,17 @@ public enum PermissionLevel
     Default = 0,
     Moderator = 1,
     Administrator = 2,
+}
+
+public static class PermissionLevelExtensions
+{
+    public static string ToHtmlColor(this PermissionLevel permissionLevel)
+    {
+        return permissionLevel switch
+        {
+            PermissionLevel.Administrator => "red",
+            PermissionLevel.Moderator => "rgb(200, 130, 0)",
+            _ => "",
+        };
+    }
 }