Enhance Event Rank Color System

WebApp/Components/Features/Students/EventRanking.razor

@@ -49,9 +49,12 @@ else
                 <MudTd Class="@($"event-rank-{ii})")">
                     @if (st != null)
                     {
-                        <span>@st.EventDefinition.ShortName&nbsp;
+                        <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="1">
-                        <EventAttributes EventDefinition="@st.EventDefinition"></EventAttributes>
+                            <span style="@($"display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: {AppIcons.RankedEventColor(ii)}; flex-shrink: 0;")")></span>
-                        </span>
+                            <span>@st.EventDefinition.ShortName&nbsp;
+                            <EventAttributes EventDefinition="@st.EventDefinition"></EventAttributes>
+                            </span>
+                        </MudStack>
                     }
                 </MudTd>
             }
@@ -86,7 +89,10 @@ else
                 <MudTd Class="@eventClass">
                     @if (student != null)
                     {
-                        @student.Item1.FirstName
+                        <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="1">
+                            <span style="@($"display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: {AppIcons.RankedEventColor(student.Item2)}; flex-shrink: 0;")")></span>
+                            @student.Item1.FirstName
+                        </MudStack>
                     }
                 </MudTd>
             }

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};")">
+    <MudTooltip Text="@rankLabel">
-        @student.FirstName
+        <MudChip T="string"
-        @if (captain && Team.Event.EventFormat != EventFormat.Individual)
+                 Size="Size.Medium"
-        {
+                 Variant="Variant.Outlined"
-            <MudIcon Icon="@AppIcons.Captain" Size="Size.Small" Style="margin-left: 4px;" />
+                 Class="mx-1 my-1">
-        }
+            @if (eventRank.HasValue)
-    </MudPaper>
+            {
+                <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 {

docs/plans/style-improvements.md

@@ -224,7 +224,7 @@ Wrap main page content in consistent containers:
 
 ---
 
-### 8. Enhance Event Rank Color System
+### 8. Enhance Event Rank Color System ✅ COMPLETED
 **Current State**: Good color-coding system (ranks 1-6) defined in app.css
 
 **Potential Enhancement**:
@@ -336,7 +336,7 @@ Consider using MudChip components with rank colors for better visual distinction
 
 ### Phase 3: Enhancements (Nice to Have)
 7. Audit and ensure button hierarchy consistency
-8. Enhance event rank visualization
+8. ✅ Enhance event rank visualization
 9. Improve form layout grouping
 10. Add micro-interactions and transitions