From 5fdda086270f4e4dc78df51c904d9b95e46e04d5 Mon Sep 17 00:00:00 2001
From: James Kolpack <james.kolpack@gmail.com>
Date: Wed, 14 Jan 2026 10:22:44 -0500
Subject: [PATCH] Refactor chip variants in event and team components for
 consistency

This commit updates various components within the Events and MeetingSchedule features to utilize standardized chip variants defined in the AppIcons class. The changes include replacing hardcoded chip variants with calls to the new methods for event, team, and student chips, enhancing consistency across the UI. Additionally, the UnscheduledStudentsList component has been updated to include necessary using directives, improving code clarity. These modifications contribute to a more uniform and maintainable user interface.
---
 .../Events/Components/EventAttributes.razor   |   2 +-
 .../MeetingSchedule/ScheduledTeamsList.razor  |   7 +-
 .../UnscheduledStudentsList.razor             |   6 +-
 .../Features/Students/Registration.razor      |   1 +
 .../Features/Teams/Assignment.razor           | 150 +++++++++---------
 .../Teams/Components/TeamStudents.razor       |   2 +-
 WebApp/Models/AppIcons.cs                     |  15 ++
 7 files changed, 102 insertions(+), 81 deletions(-)

diff --git a/WebApp/Components/Features/Events/Components/EventAttributes.razor b/WebApp/Components/Features/Events/Components/EventAttributes.razor
index 0ba1f1c..c2ff455 100644
--- a/WebApp/Components/Features/Events/Components/EventAttributes.razor
+++ b/WebApp/Components/Features/Events/Components/EventAttributes.razor
@@ -4,7 +4,7 @@
 {
     <span class="numberCircle">@EventDefinition.LevelOfEffort</span>
 } *@
-<MudChip T="string" Color="Color.Default" Variant="Variant.Filled" Style="background-color: white; font-family: monospace; white-space: pre;">
+<MudChip T="string" Color="Color.Default" Variant="@AppIcons.EventChipVariant()" Style="background-color: white; font-family: monospace; white-space: pre;">
     @{
         var loeIcon = AppIcons.LevelOfEffortIcon(EventDefinition.LevelOfEffort);
         var loeColor = AppIcons.IconColors.GetValueOrDefault(loeIcon, "inherit");
diff --git a/WebApp/Components/Features/MeetingSchedule/ScheduledTeamsList.razor b/WebApp/Components/Features/MeetingSchedule/ScheduledTeamsList.razor
index 49d3d22..38a25d5 100644
--- a/WebApp/Components/Features/MeetingSchedule/ScheduledTeamsList.razor
+++ b/WebApp/Components/Features/MeetingSchedule/ScheduledTeamsList.razor
@@ -29,7 +29,8 @@
                     <div @onclick="@(() => OnToggleTeam.InvokeAsync(team))" style="cursor: pointer; display: inline-block;">
                         <MudChip T="string" 
                                  Size="Size.Small" 
-                                 Color="Color.Default">
+                                 Color="Color.Default"
+                                 Variant="@AppIcons.TeamChipVariant()">
                             @team
                         </MudChip>
                     </div>
@@ -59,7 +60,7 @@
                     {
                         <InteractiveChip Size="Size.Small" 
                                           Color="@chipColor" 
-                                          Variant="Variant.Outlined"
+                                          Variant="@AppIcons.StudentChipVariant()"
                                           Style="@(isExcluded ? "opacity: 0.5;" : "")">
                             <ChildContent>
                                 <span>@formattedName</span>
@@ -79,7 +80,7 @@
                         <MudChip T="string" 
                                  Size="Size.Small" 
                                  Color="@chipColor" 
-                                 Variant="Variant.Outlined"
+                                 Variant="@AppIcons.StudentChipVariant()"
                                  Style="@(isExcluded ? "opacity: 0.5;" : "")">
                             <span>@formattedName</span>
                         </MudChip>
diff --git a/WebApp/Components/Features/MeetingSchedule/UnscheduledStudentsList.razor b/WebApp/Components/Features/MeetingSchedule/UnscheduledStudentsList.razor
index 04b6f19..fbd7e68 100644
--- a/WebApp/Components/Features/MeetingSchedule/UnscheduledStudentsList.razor
+++ b/WebApp/Components/Features/MeetingSchedule/UnscheduledStudentsList.razor
@@ -1,5 +1,6 @@
 @using Core.Calculation
 @using Core.Utility
+@using WebApp.Models
 
 @if (UnscheduledStudents.Any())
 {
@@ -18,7 +19,7 @@
                 }
                 <MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
                     <MudStack Row="true" Spacing="1" AlignItems="AlignItems.Center">
-                        <MudChip T="string" Size="Size.Small" Variant="Variant.Outlined" Class="font-style-italic">
+                        <MudChip T="string" Size="Size.Small" Variant="@AppIcons.StudentChipVariant()" Class="font-style-italic">
                             @formattedName
                         </MudChip>
                     </MudStack>
@@ -40,7 +41,8 @@
                                 <div @onclick="@(() => OnToggleTeam.InvokeAsync(unassignedTeam))" style="cursor: pointer; display: inline-block;">
                                     <MudChip T="string"
                                              Size="Size.Small"
-                                             Color="@chipColor">
+                                             Color="@chipColor"
+                                             Variant="@AppIcons.TeamChipVariant()">
                                         @if (isScheduled)
                                         {
                                             <MudIcon Icon="@Icons.Material.Filled.Check" Size="Size.Small" Style="margin-right: 4px;" />
diff --git a/WebApp/Components/Features/Students/Registration.razor b/WebApp/Components/Features/Students/Registration.razor
index af22628..eeb466b 100644
--- a/WebApp/Components/Features/Students/Registration.razor
+++ b/WebApp/Components/Features/Students/Registration.razor
@@ -94,6 +94,7 @@
                         <MudTooltip Text="@teamMembers">
                             <MudChip Size="Size.Small"
                                      Color="Color.Default"
+                                     Variant="@AppIcons.TeamChipVariant()"
                                      Href="@($"/teams/edit?id={team.Id}&returnUrl=/students/teams")"
                                      Style="cursor: pointer;">
                                 @team
diff --git a/WebApp/Components/Features/Teams/Assignment.razor b/WebApp/Components/Features/Teams/Assignment.razor
index add1779..ed64720 100644
--- a/WebApp/Components/Features/Teams/Assignment.razor
+++ b/WebApp/Components/Features/Teams/Assignment.razor
@@ -153,85 +153,87 @@
                                 .Concat(context.Events)
                                 .Distinct();
                     }
-                    @foreach (var e in
-                              allStudentEvents
-                                  .OrderBy(e =>
-                                      context.Student.EventRankings
-                                          .Find(ser => ser.EventDefinition == e)?.Rank ?? 10))
-                    {
-                        var eventRank = context.Student.EventRankings.Find(er => er.EventDefinition == e)?.Rank;
-                        var isAssigned = context.Events.Contains(e);
-
-                        var color = AppIcons.RankedEventColor(eventRank ?? 0);
-                        var style = "border-style: solid;";
-
-                        if (isAssigned)
+                    <MudStack Row="true" Spacing="1" Wrap="Wrap.Wrap" AlignItems="AlignItems.Center">
+                        @foreach (var e in
+                                  allStudentEvents
+                                      .OrderBy(e =>
+                                          context.Student.EventRankings
+                                              .Find(ser => ser.EventDefinition == e)?.Rank ?? 10))
                         {
-                            style += "border-color:black; border-width:thin;";
-                            if (eventRank.HasValue)
+                            var eventRank = context.Student.EventRankings.Find(er => er.EventDefinition == e)?.Rank;
+                            var isAssigned = context.Events.Contains(e);
+
+                            var color = AppIcons.RankedEventColor(eventRank ?? 0);
+                            var style = "border-style: solid;";
+
+                            if (isAssigned)
                             {
-                                style += $"background:{color};";
-                                if (eventRank == 1)
-                                    style += $"color:black";
+                                style += "border-color:black; border-width:thin;";
+                                if (eventRank.HasValue)
+                                {
+                                    style += $"background:{color};";
+                                    if (eventRank == 1)
+                                        style += $"color:black";
+                                }
+                                else
+                                    style += $"background:{Colors.Gray.Lighten3};";
                             }
                             else
-                                style += $"background:{Colors.Gray.Lighten3};";
+                            {
+                                if (eventRank.HasValue)
+                                    style += $"border-color:{color}; border-width:medium; color:{Colors.Gray.Lighten1};";
+                            }
+
+                            var isIncluded = _assignmentRequirements
+                                .Find(ar =>
+                                    ar.EventDefinition == e
+                                    && ar.Student == context.Student
+                                    && ar.Requirement == Requirement.Include) == null;
+                            var isExcluded = _assignmentRequirements
+                                .Find(ar =>
+                                    ar.EventDefinition == e
+                                    && ar.Student == context.Student
+                                    && ar.Requirement == Requirement.Exclude) == null;
+
+                            <InteractiveChip WrapperClass="my-1" Style="@style" Variant="@AppIcons.EventChipVariant()">
+                                <ChildContent>
+                                    @e.ShortName&nbsp;
+                                    @AppIcons.EventAttributes(e)
+                                </ChildContent>
+                                <ControlContent>
+                                    @if (isIncluded)
+                                    {
+                                        <MudTooltip Text="@($"Add requirement for {context.Student.FirstName} in {e.ShortName}")">
+                                            <MudIconButton Icon="@Icons.Material.Outlined.ThumbUpAlt" Class="ml-3" Size="Size.Small" Color="Color.Default"
+                                                           OnClick="() => RequireEvent(e, context.Student, Requirement.Include)"></MudIconButton>
+                                        </MudTooltip>
+                                    }
+                                    else
+                                    {
+                                        <MudTooltip Text="@($"Remove requirement for {context.Student.FirstName} in {e.ShortName}")">
+                                            <MudIconButton Icon="@Icons.Material.Filled.ThumbUpAlt" Class="ml-3" Size="Size.Small" Color="Color.Dark"
+                                                           OnClick="() => RemoveRequireEvent(e, context.Student, Requirement.Include)"></MudIconButton>
+                                        </MudTooltip>
+                                    }
+
+                                    @if (isExcluded)
+                                    {
+                                        <MudTooltip Text="@($"Add restriction against {context.Student.FirstName} in {e.ShortName}")">
+                                            <MudIconButton Icon="@Icons.Material.Outlined.ThumbDownAlt" Size="Size.Small" Color="Color.Default"
+                                                           OnClick="() => RequireEvent(e, context.Student, Requirement.Exclude)"></MudIconButton>
+                                        </MudTooltip>
+                                    }
+                                    else
+                                    {
+                                        <MudTooltip Text="@($"Remove restriction against {context.Student.FirstName} in {e.ShortName}")">
+                                            <MudIconButton Icon="@Icons.Material.Filled.ThumbDownAlt" Size="Size.Small" Color="Color.Dark"
+                                                           OnClick="() => RemoveRequireEvent(e, context.Student, Requirement.Exclude)"></MudIconButton>
+                                        </MudTooltip>
+                                    }
+                                </ControlContent>
+                            </InteractiveChip>
                         }
-                        else
-                        {
-                            if (eventRank.HasValue)
-                                style += $"border-color:{color}; border-width:medium; color:{Colors.Gray.Lighten1};";
-                        }
-
-                        var isIncluded = _assignmentRequirements
-                            .Find(ar =>
-                                ar.EventDefinition == e
-                                && ar.Student == context.Student
-                                && ar.Requirement == Requirement.Include) == null;
-                        var isExcluded = _assignmentRequirements
-                            .Find(ar =>
-                                ar.EventDefinition == e
-                                && ar.Student == context.Student
-                                && ar.Requirement == Requirement.Exclude) == null;
-
-                        <InteractiveChip WrapperClass="mx-3 my-1" Style="@style" Variant="Variant.Text">
-                            <ChildContent>
-                                @e.ShortName&nbsp;
-                                @AppIcons.EventAttributes(e)
-                            </ChildContent>
-                            <ControlContent>
-                                @if (isIncluded)
-                                {
-                                    <MudTooltip Text="@($"Add requirement for {context.Student.FirstName} in {e.ShortName}")">
-                                        <MudIconButton Icon="@Icons.Material.Outlined.ThumbUpAlt" Class="ml-3" Size="Size.Small" Color="Color.Default"
-                                                       OnClick="() => RequireEvent(e, context.Student, Requirement.Include)"></MudIconButton>
-                                    </MudTooltip>
-                                }
-                                else
-                                {
-                                    <MudTooltip Text="@($"Remove requirement for {context.Student.FirstName} in {e.ShortName}")">
-                                        <MudIconButton Icon="@Icons.Material.Filled.ThumbUpAlt" Class="ml-3" Size="Size.Small" Color="Color.Dark"
-                                                       OnClick="() => RemoveRequireEvent(e, context.Student, Requirement.Include)"></MudIconButton>
-                                    </MudTooltip>
-                                }
-
-                                @if (isExcluded)
-                                {
-                                    <MudTooltip Text="@($"Add restriction against {context.Student.FirstName} in {e.ShortName}")">
-                                        <MudIconButton Icon="@Icons.Material.Outlined.ThumbDownAlt" Size="Size.Small" Color="Color.Default"
-                                                       OnClick="() => RequireEvent(e, context.Student, Requirement.Exclude)"></MudIconButton>
-                                    </MudTooltip>
-                                }
-                                else
-                                {
-                                    <MudTooltip Text="@($"Remove restriction against {context.Student.FirstName} in {e.ShortName}")">
-                                        <MudIconButton Icon="@Icons.Material.Filled.ThumbDownAlt" Size="Size.Small" Color="Color.Dark"
-                                                       OnClick="() => RemoveRequireEvent(e, context.Student, Requirement.Exclude)"></MudIconButton>
-                                    </MudTooltip>
-                                }
-                            </ControlContent>
-                        </InteractiveChip>
-                    }
+                    </MudStack>
                     <MudDivider Style="border-width:3px" />
                 </td></MudTr>
             </ChildRowContent>
diff --git a/WebApp/Components/Features/Teams/Components/TeamStudents.razor b/WebApp/Components/Features/Teams/Components/TeamStudents.razor
index 51c9f0f..70936d7 100644
--- a/WebApp/Components/Features/Teams/Components/TeamStudents.razor
+++ b/WebApp/Components/Features/Teams/Components/TeamStudents.razor
@@ -17,7 +17,7 @@
         <MudTooltip Text="@rankLabel">
             <MudChip T="string"
                      Size="Size.Medium"
-                     Variant="Variant.Outlined"
+                     Variant="@AppIcons.StudentChipVariant()"
                      Class="mx-1 my-1">
                 @if (eventRank.HasValue)
                 {
diff --git a/WebApp/Models/AppIcons.cs b/WebApp/Models/AppIcons.cs
index 1a1afe6..b889659 100644
--- a/WebApp/Models/AppIcons.cs
+++ b/WebApp/Models/AppIcons.cs
@@ -154,5 +154,20 @@ namespace WebApp.Models
             };
             return $"{number}<sup>{suffix}</sup>";
         }
+
+        /// <summary>
+        /// Returns the standard chip variant for student chips (Outlined).
+        /// </summary>
+        public static Variant StudentChipVariant() => Variant.Outlined;
+
+        /// <summary>
+        /// Returns the standard chip variant for event chips (Filled).
+        /// </summary>
+        public static Variant EventChipVariant() => Variant.Filled;
+
+        /// <summary>
+        /// Returns the standard chip variant for team chips (Filled).
+        /// </summary>
+        public static Variant TeamChipVariant() => Variant.Filled;
     }
 }