Enhance Event Rank Color System

WebApp/Components/Features/Teams/Components/TeamStudents.razor

@@ -6,19 +6,29 @@
                       .Find(er => er.EventDefinition == Team.Event)?.Rank ?? 10)
               .ThenBy(s => s.Grade + s.TsaYear))
 {
-    var eventRank = 
+    var eventRank =
         student.EventRankings
             .Find(e => e.EventDefinition == Team.Event)?.Rank;
     var color = AppIcons.RankedEventColor(eventRank ?? 0);
     var captain = Team.Captain != null && Team.Captain.Equals(student);
+    var rankLabel = eventRank.HasValue ? $"Rank {eventRank}" : "Unranked";
 
-    <MudPaper Class="d-inline-flex pa-2 mx-3 my-1" Style="@($"background:{color};")">
-        @student.FirstName
-        @if (captain && Team.Event.EventFormat != EventFormat.Individual)
-        {
-            <MudIcon Icon="@AppIcons.Captain" Size="Size.Small" Style="margin-left: 4px;" />
-        }
-    </MudPaper>
+    <MudTooltip Text="@rankLabel">
+        <MudChip T="string"
+                 Size="Size.Medium"
+                 Variant="Variant.Outlined"
+                 Class="mx-1 my-1">
+            @if (eventRank.HasValue)
+            {
+                <span style="@($"display: inline-block; width: 12px; height: 12px; border-radius: 50%; background-color: {color}; margin-right: 6px;")")></span>
+            }
+            @student.FirstName
+            @if (captain && Team.Event.EventFormat != EventFormat.Individual)
+            {
+                <MudIcon Icon="@AppIcons.Captain" Size="Size.Small" Style="margin-left: 4px;" />
+            }
+        </MudChip>
+    </MudTooltip>
 }
 
 @code {