Use PageHeader throughout the system

WebApp/Components/Features/Events/Create.razor

@@ -1,16 +1,21 @@
 @page "/events/create"
 @attribute [Authorize]
+@using WebApp.Components.Shared.Components
 @inject AppDbContext context
 @inject NavigationManager NavigationManager
 
-<PageTitle>Create Event - TSA Chapter Organizer</PageTitle>
+<PageHeader
+    Title="Create"
+    Subtitle="Event"
+    ShowBackButton="true"
+    BackButtonUrl="/events">
+    <ActionButtons>
+        <MudButton ButtonType="ButtonType.Submit" Variant="Variant.Filled" Color="Color.Primary" Form="create-event-form">Create</MudButton>
+        <MudButton Href="/events" Variant="Variant.Text">Cancel</MudButton>
+    </ActionButtons>
+</PageHeader>
 
-<MudText Typo="Typo.h3">Create</MudText>
+<EditForm id="create-event-form" Model="EventDefinition" OnValidSubmit="OnValidSubmit" Enhance>
-<MudText Typo="Typo.h4">Event</MudText>
-<MudDivider />
-
-
-<EditForm Model="EventDefinition" OnValidSubmit="OnValidSubmit" Enhance>
     <AntiforgeryToken />
     <DataAnnotationsValidator />
     <MudGrid>
@@ -44,8 +49,6 @@
             </MudPaper>
         </MudItem>
     </MudGrid>
-    <MudButton StartIcon="@Icons.Material.Filled.ArrowBack" Href="events">Back</MudButton>
-    <MudButton ButtonType="ButtonType.Submit" StartIcon="@Icons.Material.Filled.Save">Save</MudButton>
 </EditForm>
 
 

WebApp/Components/Features/Events/Details.razor

@@ -1,22 +1,28 @@
 @page "/events/details"
 @attribute [Authorize]
 @using Microsoft.EntityFrameworkCore
+@using WebApp.Components.Shared.Components
 @inject AppDbContext context
 @inject NavigationManager NavigationManager
 
-<PageTitle>Event Details - TSA Chapter Organizer</PageTitle>
-
-<MudText Typo="Typo.h3">Details</MudText>
-<MudText Typo="Typo.h4">Event Definition</MudText>
-<MudDivider />
-
 @if (eventdefinition is null)
 {
     <MudText><em>Loading...</em></MudText>
+    return;
 }
-else
+
-{
+<PageHeader
-    <MudPaper Class="pa-4 mt-4">
+    Title="Details"
+    Subtitle="Event Definition"
+    ShowBackButton="true"
+    BackButtonUrl="/events">
+    <ActionButtons>
+        <MudButton StartIcon="@Icons.Material.Filled.Edit" Href="@($"/events/edit?id={eventdefinition.Id}")" Variant="Variant.Outlined">Edit</MudButton>
+        <MudButton Href="/events" Variant="Variant.Text">Back to List</MudButton>
+    </ActionButtons>
+</PageHeader>
+
+<MudPaper Class="pa-4 mt-4">
         <MudGrid>
             <MudItem xs="12" sm="6" md="4">
                 <MudText Typo="Typo.subtitle2">Name</MudText>
@@ -79,13 +85,7 @@ else
                 <MudText>@eventdefinition.Description</MudText>
             </MudItem>
         </MudGrid>
-    </MudPaper>
+</MudPaper>
-
-    <div class="mt-4">
-        <MudButton StartIcon="@Icons.Material.Filled.Edit" Href="@($"/events/edit?id={eventdefinition.Id}")" Variant="Variant.Filled" Color="Color.Primary">Edit</MudButton>
-        <MudButton StartIcon="@Icons.Material.Filled.ArrowBack" Href="/events" Variant="Variant.Text">Back to List</MudButton>
-    </div>
-}
 
 @code {
     private EventDefinition? eventdefinition;

WebApp/Components/Features/Events/Edit.razor

@@ -1,17 +1,28 @@
 @page "/events/edit"
 @attribute [Authorize]
 @using Microsoft.EntityFrameworkCore
+@using WebApp.Components.Shared.Components
 @inject AppDbContext context
 @inject NavigationManager NavigationManager
 
-<PageTitle>Edit Event - TSA Chapter Organizer</PageTitle>
+@if (EventDefinition is null)
+{
+    <p><em>Loading...</em></p>
+    return;
+}
 
-<MudText Typo="Typo.h3">Edit</MudText>
+<PageHeader
-<MudText Typo="Typo.h4">Event</MudText>
+    Title="Edit"
-<MudDivider />
+    Subtitle="Event"
+    ShowBackButton="true"
+    BackButtonUrl="/events">
+    <ActionButtons>
+        <MudButton ButtonType="ButtonType.Submit" Variant="Variant.Filled" Color="Color.Primary" Form="edit-event-form">Save</MudButton>
+        <MudButton Href="/events" Variant="Variant.Text">Cancel</MudButton>
+    </ActionButtons>
+</PageHeader>
 
-
+<EditForm id="edit-event-form" Model="EventDefinition" OnValidSubmit="OnValidSubmit" Enhance>
-<EditForm Model="EventDefinition" OnValidSubmit="OnValidSubmit" Enhance>
     <AntiforgeryToken />
     <DataAnnotationsValidator />
     <MudGrid>
@@ -45,11 +56,8 @@
             </MudPaper>
         </MudItem>
     </MudGrid>
-    <MudButton StartIcon="@Icons.Material.Filled.ArrowBack" Href="events">Back</MudButton>
-    <MudButton ButtonType="ButtonType.Submit" StartIcon="@Icons.Material.Filled.Save">Save</MudButton>
 </EditForm>
 
-
 @code {
     [SupplyParameterFromQuery]
     private int Id { get; set; }

WebApp/Components/Features/Events/Printout.razor

@@ -1,13 +1,13 @@
 @using Microsoft.EntityFrameworkCore
+@using WebApp.Components.Shared.Components
 @attribute [Authorize]
 @page "/events/printout"
 @inject IConfiguration Configuration
 @inject  AppDbContext Context
 
-<PageTitle>TSA Events @Configuration["ChapterSettings:CompetitionYear"]</PageTitle>
+<PageHeader
-
+    Title="@($"TSA Events {Configuration["ChapterSettings:CompetitionYear"]}")"
-<MudText Typo="Typo.h3">TSA Events @Configuration["ChapterSettings:CompetitionYear"]</MudText>
+    Description="Yearly theme: Unity Through Community" />
-<MudText Typo="Typo.h5" Class="mb-4">Yearly theme: Unity Through Community</MudText>
 
 @if (_events == null)
 {

WebApp/Components/Features/MeetingSchedule/Index.razor

@@ -3,14 +3,13 @@
 @using System.Text
 @using Core.Calculation
 @using Microsoft.EntityFrameworkCore
+@using WebApp.Components.Shared.Components
 @inject IConfiguration Configuration
 @inject AppDbContext Context
 @inject ClipboardService ClipboardService
 @inject LocalStorageService LocalStorage
 
-<PageTitle>@Configuration["ChapterSettings:Shortname"] TSA Schedule @Configuration["ChapterSettings:CompetitionYear"]</PageTitle>
+<PageHeader Title="@($"{Configuration["ChapterSettings:Shortname"]} TSA Schedule {Configuration["ChapterSettings:CompetitionYear"]}")" />
-
-<MudText Typo="Typo.h3">@Configuration["ChapterSettings:Shortname"] TSA Schedule @Configuration["ChapterSettings:CompetitionYear"]</MudText>
 
 <MudPaper Class="pa-4 mt-5">
     <MudGrid>

WebApp/Components/Features/Students/Create.razor

@@ -1,16 +1,21 @@
 @page "/students/create"
 @attribute [Authorize]
+@using WebApp.Components.Shared.Components
 @inject AppDbContext Context
 @inject NavigationManager NavigationManager
 
-<PageTitle>Create Student - TSA Chapter Organizer</PageTitle>
+<PageHeader
+    Title="Create"
+    Subtitle="Student"
+    ShowBackButton="true"
+    BackButtonUrl="/students">
+    <ActionButtons>
+        <MudButton ButtonType="ButtonType.Submit" Variant="Variant.Filled" Color="Color.Primary" Form="create-student-form">Create</MudButton>
+        <MudButton Href="/students" Variant="Variant.Text">Cancel</MudButton>
+    </ActionButtons>
+</PageHeader>
 
-<MudText Typo="Typo.h3">Create</MudText>
+<EditForm id="create-student-form" Model="Student" OnValidSubmit="OnValidSubmit" Enhance>
-<MudText Typo="Typo.h4">Student</MudText>
-<MudDivider />
-
-
-<EditForm Model="Student" OnValidSubmit="OnValidSubmit" Enhance>
     <AntiforgeryToken />
     <DataAnnotationsValidator />
     <MudGrid>
@@ -25,8 +30,6 @@
             </MudPaper>
         </MudItem>
     </MudGrid>
-    <MudButton StartIcon="@Icons.Material.Filled.ArrowBack" Href="students">Back</MudButton>
-    <MudButton ButtonType="ButtonType.Submit" StartIcon="@Icons.Material.Filled.Save">Save</MudButton>
 </EditForm>
 
 @code {

WebApp/Components/Features/Students/Details.razor

@@ -1,24 +1,27 @@
 @page "/students/details"
 @attribute [Authorize]
 @using Microsoft.EntityFrameworkCore
-@using Core.Entities
+@using WebApp.Components.Shared.Components
-@using Data
 @inject AppDbContext context
 @inject NavigationManager NavigationManager
 
-<PageTitle>Student Details - TSA Chapter Organizer</PageTitle>
-
-<MudText Typo="Typo.h3">Details</MudText>
-<MudText Typo="Typo.h4">Student</MudText>
-<MudDivider />
-
 @if (student is null)
 {
     <MudText><em>Loading...</em></MudText>
+    return;
 }
-else
+
-{
+<PageHeader
-    <MudPaper Class="pa-4 mt-4">
+    Title="Student Details"
+    ShowBackButton="true"
+    BackButtonUrl="@(ReturnUrl ?? "/students")">
+    <ActionButtons>
+        <MudButton StartIcon="@Icons.Material.Filled.Edit" Href="@($"/students/edit?id={student.Id}&returnUrl={ReturnUrl ?? "/students"}")" Variant="Variant.Outlined">Edit</MudButton>
+        <MudButton Href="@(ReturnUrl ?? "/students")" Variant="Variant.Text">Back to List</MudButton>
+    </ActionButtons>
+</PageHeader>
+
+<MudPaper Class="pa-4 mt-4">
         <MudGrid>
             <MudItem xs="12" sm="6" md="4">
                 <MudText Typo="Typo.subtitle2">First Name</MudText>
@@ -61,13 +64,7 @@ else
                 <MudText>@student.OfficerRole</MudText>
             </MudItem>
         </MudGrid>
-    </MudPaper>
+</MudPaper>
-
-    <div class="mt-4">
-        <MudButton StartIcon="@Icons.Material.Filled.Edit" Href="@($"/students/edit?id={student.Id}&returnUrl={ReturnUrl ?? "/students"}")" Variant="Variant.Filled" Color="Color.Primary">Edit</MudButton>
-        <MudButton StartIcon="@Icons.Material.Filled.ArrowBack" Href="@(ReturnUrl ?? "/students")" Variant="Variant.Text">Back to List</MudButton>
-    </div>
-}
 
 @code {
     private Student? student;

WebApp/Components/Features/Students/Edit.razor

@@ -1,25 +1,30 @@
 @page "/students/edit"
 @attribute [Authorize]
 @using Microsoft.EntityFrameworkCore
+@using WebApp.Components.Shared.Components
 @inject AppDbContext Context
 @inject NavigationManager NavigationManager
 
-<PageTitle>Edit Student - TSA Chapter Organizer</PageTitle>
-
-<MudText Typo="Typo.h3">Edit</MudText>
-<MudText Typo="Typo.h4">Student@(@Student == null ? "" : $" ({Student.Name})")</MudText>
-
-
-
 @if (Student is null)
 {
     <p><em>Loading...</em></p>
+    return;
 }
-else
+
-{
+<PageHeader
-    /* https://www.mudblazor.com/components/form */
+    Title="Edit Student"
-    /* https://medium.com/@husainalbar/applying-mudblazor-for-crud-operations-in-our-blazor-project-a343037a52ef */
+    Subtitle="@($"{Student.FirstNameLastName}")"
-    <EditForm method="post" Model="Student" OnValidSubmit="UpdateStudent" FormName="edit" Enhance>
+    ShowBackButton="true"
+    BackButtonUrl="@(ReturnUrl ?? "/students")">
+    <ActionButtons>
+        <MudButton OnClick="UpdateStudent" Variant="Variant.Filled" Color="Color.Primary">Save</MudButton>
+        <MudButton Href="@(ReturnUrl ?? "/students")" Variant="Variant.Text">Cancel</MudButton>
+    </ActionButtons>
+</PageHeader>
+
+@* https://www.mudblazor.com/components/form *@
+@* https://medium.com/@husainalbar/applying-mudblazor-for-crud-operations-in-our-blazor-project-a343037a52ef *@
+<EditForm method="post" Model="Student" OnValidSubmit="UpdateStudent" FormName="edit" Enhance>
         <AntiforgeryToken />
         <DataAnnotationsValidator/>
         <MudGrid>
@@ -45,10 +50,7 @@ else
                 </MudPaper>
             </MudItem>
         </MudGrid>
-        <MudButton StartIcon="@Icons.Material.Filled.ArrowBack" Href="@(ReturnUrl ?? "/students")">Back</MudButton>
+</EditForm>
-        <MudButton StartIcon="@Icons.Material.Filled.Save"  OnClick="UpdateStudent">Save</MudButton>
-    </EditForm>
-}
 
 @code {
     [SupplyParameterFromQuery]
@@ -74,7 +76,7 @@ else
     // For more information, see https://learn.microsoft.com/aspnet/core/blazor/forms/#mitigate-overposting-attacks.
     private async Task UpdateStudent()
     { 
-        if (Student.OfficerRole == 0)
+        if (Student?.OfficerRole == 0)
             Student.OfficerRole = null;
 
         Context.Attach(Student!).State = EntityState.Modified;

WebApp/Components/Features/Students/EventRanking.razor

@@ -2,14 +2,15 @@
 @attribute [Authorize]
 @using Microsoft.EntityFrameworkCore
 @using WebApp.Models
+@using WebApp.Components.Shared.Components
 @using Core.Validation
 @inject AppDbContext Context
 @inject ValidationService ValidationService
 @rendermode InteractiveServer
 
-<PageTitle>Student Event Ranks - TSA Chapter Organizer</PageTitle>
+<PageHeader
-
+    Title="Student Event Ranks"
-<MudText Typo="Typo.h3"><MudIcon Icon="@AppIcons.EventRank"></MudIcon> Student Event Ranks</MudText>
+    Icon="@AppIcons.EventRank" />
 
 @if (_students == null)
 {

WebApp/Components/Features/Students/Registration.razor

@@ -2,23 +2,22 @@
 @attribute [Authorize]
 @using Microsoft.EntityFrameworkCore
 @using WebApp.Models
+@using WebApp.Components.Shared.Components
 @using Core.Validation
 @inject AppDbContext Context
 @inject WebApp.LocalStorageService LocalStorage
 @inject ValidationService ValidationService
 
-<PageTitle>Registration - TSA Chapter Organizer</PageTitle>
+<PageHeader Title="Registration">
-
+    <ActionButtons>
-<MudText Typo="Typo.h3">Registration</MudText>
+        <MudButton StartIcon="@Icons.Material.Filled.FilterAlt"
-
+                   Variant="@(_showRegionalOnly ? Variant.Filled : Variant.Outlined)"
-<MudButtonGroup>
+                   Color="Color.Primary"
-    <MudButton StartIcon="@Icons.Material.Filled.FilterAlt"
+                   OnClick="ToggleRegionalFilter">
-               Variant="@(_showRegionalOnly ? Variant.Filled : Variant.Outlined)"
+            @(_showRegionalOnly ? "Showing Regional Only" : "Show Regional Only")
-               Color="Color.Primary"
+        </MudButton>
-               OnClick="ToggleRegionalFilter">
+    </ActionButtons>
-        @(_showRegionalOnly ? "Showing Regional Only" : "Show Regional Only")
+</PageHeader>
-    </MudButton>
-</MudButtonGroup>
 
 <MudText Typo="Typo.body2" Style="margin-top: 8px; margin-bottom: 4px;">
     <MudIcon Icon="@AppIcons.Captain" Size="Size.Small" /> = Team Captain

WebApp/Components/Features/Teams/Assignment.razor

@@ -4,20 +4,22 @@
 @using Core.Validation
 @using Microsoft.EntityFrameworkCore
 @using WebApp.Models
+@using WebApp.Components.Shared.Components
 @using EventAssignment = Core.Calculation.EventAssignment
 @inject AppDbContext Context
 @inject IDialogService DialogService
 @inject NavigationManager NavigationManager
 @inject ValidationService ValidationService
 
-<PageTitle>Event Assignment - TSA Chapter Organizer</PageTitle>
+<PageHeader
-
+    Title="Assignment"
-<MudText Typo="Typo.h3">Assignment</MudText>
+    Description="Optimized team assignments based on the student event rankings">
-
+    <ActionButtons>
-<MudGrid>
+        <MudButton StartIcon="@Icons.Material.Filled.Edit" Href="students/event-ranking" Variant="Variant.Outlined">
-    <MudItem><MudText>Optimized team assignments based on the student event rankings</MudText></MudItem>
+            Edit Student Event Rankings
-    <MudItem><MudButton StartIcon="@Icons.Material.Filled.Edit" Href="students/event-ranking">Edit Student Event Rankings</MudButton></MudItem>
+        </MudButton>
-</MudGrid>
+    </ActionButtons>
+</PageHeader>
 
 <MudPaper Class="pa-4 mt-5">
     <MudGrid>

WebApp/Components/Features/Teams/Create.razor

@@ -1,14 +1,26 @@
 @page "/teams/create"
 @attribute [Authorize]
 @using Microsoft.EntityFrameworkCore
+@using WebApp.Components.Shared.Components
 @inject AppDbContext Context
 @inject NavigationManager NavigationManager
 
-<PageTitle>Create Team - TSA Chapter Organizer</PageTitle>
+@if (_events is null)
+{
+    <p><em>Loading...</em></p>
+    return;
+}
 
-<MudText Typo="Typo.h3">Create</MudText>
+<PageHeader
-<MudText Typo="Typo.h4">Team</MudText>
+    Title="Create"
-<MudDivider />
+    Subtitle="Team"
+    ShowBackButton="true"
+    BackButtonUrl="/teams">
+    <ActionButtons>
+        <MudButton OnClick="AddTeam" Variant="Variant.Filled" Color="Color.Primary">Add</MudButton>
+        <MudButton Href="/teams" Variant="Variant.Text">Cancel</MudButton>
+    </ActionButtons>
+</PageHeader>
 
 <EditForm method="post" Model="Team" OnValidSubmit="AddTeam" FormName="create" Enhance>
     <AntiforgeryToken />
@@ -23,17 +35,18 @@
                         <MudSelectItem T="EventDefinition" Value="@(evt)"></MudSelectItem>
                     }
                 </MudSelect>
-                @if (_existingTeams?.Count == 1)
+                @switch (_existingTeams?.Count)
                 {
-                    <MudAlert Severity="Severity.Info" Class="my-2">
+                    case 1:
-                        A team for @Team.Event.Name already exists. This will be team 2, and the existing team will become team 1.
+                        <MudAlert Severity="Severity.Info" Class="my-2">
-                    </MudAlert>
+                            A team for @Team.Event.Name already exists. This will be team 2, and the existing team will become team 1.
-                }
+                        </MudAlert>
-                else if (_existingTeams?.Count >= 2)
+                        break;
-                {
+                    case >= 2:
-                    <MudAlert Severity="Severity.Error" Class="my-2">
+                        <MudAlert Severity="Severity.Error" Class="my-2">
-                        Two teams for @Team.Event.Name already exist. Cannot create a third team.
+                            Two teams for @Team.Event.Name already exist. Cannot create a third team.
-                    </MudAlert>
+                        </MudAlert>
+                        break;
                 }
 
                 <MudDivider Class="my-4" />
@@ -55,8 +68,6 @@
     {
         <MudAlert Severity="Severity.Error" Class="mt-3">@_errorMessage</MudAlert>
     }
-    <MudButton StartIcon="@Icons.Material.Filled.ArrowBack" Href="students">Back</MudButton>
-    <MudButton StartIcon="@Icons.Material.Filled.Add" OnClick="AddTeam">Add</MudButton>
 </EditForm>
 
 @code {

WebApp/Components/Features/Teams/Edit.razor

@@ -1,21 +1,27 @@
 @page "/teams/edit"
 @attribute [Authorize]
 @using Microsoft.EntityFrameworkCore
+@using WebApp.Components.Shared.Components
 @inject AppDbContext Context
 @inject NavigationManager NavigationManager
 
-<PageTitle>Edit Team - TSA Chapter Organizer</PageTitle>
-
-<MudText Typo="Typo.h3">Edit</MudText>
-<MudText Typo="Typo.h4">Team @(Team.ToString())</MudText>
-
 @if (Team is null)
 {
     <p><em>Loading...</em></p>
+    return;
 }
-else
+
-{
+<PageHeader Title="Edit Team"
-    <EditForm method="post" Model="Team" OnValidSubmit="UpdateTeam" FormName="edit" Enhance>
+    Subtitle=@Team.ToString()
+    ShowBackButton="true"
+    BackButtonUrl="/teams">
+    <ActionButtons>
+        <MudButton OnClick="UpdateTeam" Variant="Variant.Filled" Color="Color.Primary">Save</MudButton>
+        <MudButton Href="/teams" Variant="Variant.Text">Cancel</MudButton>
+    </ActionButtons>
+</PageHeader>
+
+<EditForm method="post" Model="Team" OnValidSubmit="UpdateTeam" FormName="edit" Enhance>
         <AntiforgeryToken />
         <DataAnnotationsValidator/>
         <MudGrid>
@@ -33,10 +39,7 @@ else
                 </MudPaper>
             </MudItem>
         </MudGrid>
-        <MudButton StartIcon="@Icons.Material.Filled.ArrowBack" Href="teams">Back</MudButton>
+</EditForm>
-        <MudButton StartIcon="@Icons.Material.Filled.Save" OnClick="UpdateTeam">Save</MudButton>
-    </EditForm>
-}
 
 @code {
     [SupplyParameterFromQuery]
@@ -45,7 +48,7 @@ else
     [SupplyParameterFromForm]
     private Team? Team { get; set; }
 
-    private IEnumerable<Student> _selectedStudents = [];
+    private IEnumerable<Student>? _selectedStudents = [];
     private List<Student> _students = [];
 
     protected override async Task OnInitializedAsync()
@@ -55,7 +58,7 @@ else
             .Include(e => e.Students)
             .FirstOrDefaultAsync(m => m.Id == Id);
         _students = await Context.Students.ToListAsync();
-        _selectedStudents = Team.Students.ToList();
+        _selectedStudents = Team?.Students.ToList();
 
         if (Team is null)
         {
@@ -68,6 +71,10 @@ else
                 Team.Captain ??= Team.Students[0];
                 Team.Identifier ??= Team.Captain.FirstName;
                 break;
+            case EventFormat.Team:
+                break;
+            default:
+                throw new ArgumentOutOfRangeException();
         }
     }
 
@@ -76,14 +83,15 @@ else
     private async Task UpdateTeam()
     {
         //Context.Attach(Team!).Entity = EntityState.Modified;
-        Team.Students.Clear();
+        Team?.Students.Clear();
-        foreach (var s in _selectedStudents)
+        if (_selectedStudents != null)
-        {
+            foreach (var s in _selectedStudents)
-            Team.Students.Add(s);
+            {
-        }
+                Team?.Students.Add(s);
+            }
 
         // Update identifier for individual events
-        if (Team.Event.EventFormat == EventFormat.Individual && Team.Students.Count == 1)
+        if (Team is { Event.EventFormat: EventFormat.Individual, Students.Count: 1 })
         {
             Team.Captain ??= Team.Students[0];
             Team.Identifier = Team.Captain.FirstName;

WebApp/Components/Features/Teams/Goals.razor

@@ -2,13 +2,13 @@
 @attribute [Authorize]
 @using Microsoft.EntityFrameworkCore
 @using WebApp.Models
+@using WebApp.Components.Shared.Components
 @inject IConfiguration Configuration
 @inject AppDbContext Context
 
-<PageTitle>@Configuration["ChapterSettings:Shortname"] TSA Student Goals @Configuration["ChapterSettings:CompetitionYear"]</PageTitle>
+<PageHeader
-
+    Title="@($"{Configuration["ChapterSettings:Shortname"]} TSA Student Goals {Configuration["ChapterSettings:CompetitionYear"]}")"
-<MudText Typo="Typo.h3">@Configuration["ChapterSettings:Shortname"] TSA Student Goals @Configuration["ChapterSettings:CompetitionYear"]</MudText>
+    Description="Set Your Goals for Success" />
-<MudText Typo="Typo.h5" Class="mb-4">Set Your Goals for Success</MudText>
 
 @if (_students == null)
 {

WebApp/Components/Features/Teams/Handout.razor

@@ -2,15 +2,15 @@
 @attribute [Authorize]
 @using Microsoft.EntityFrameworkCore
 @using WebApp.Models
+@using WebApp.Components.Shared.Components
 @inject IConfiguration Configuration
 @inject AppDbContext Context
 
-<PageTitle>@Configuration["ChapterSettings:Shortname"] TSA Teams @Configuration["ChapterSettings:CompetitionYear"]</PageTitle>
+<PageHeader
+    Title="@($"{Configuration["ChapterSettings:Shortname"]} TSA Teams {Configuration["ChapterSettings:CompetitionYear"]}")"
+    Description="Yearly theme: Unity Through Community" />
 
-<MudText Typo="Typo.h3">@Configuration["ChapterSettings:Shortname"] TSA Teams @Configuration["ChapterSettings:CompetitionYear"]</MudText>
+@if (_teams == null || _students == null)
-<MudText Typo="Typo.h5" Class="mb-4">Yearly theme: Unity Through Community</MudText>
-
-@if (_teams == null)
 {
     <p><em>Loading...</em></p>
 }

WebApp/Components/Features/Teams/Printout.razor

@@ -2,13 +2,13 @@
 @attribute [Authorize]
 @using Microsoft.EntityFrameworkCore
 @using WebApp.Models
+@using WebApp.Components.Shared.Components
 @inject IConfiguration Configuration
 @inject AppDbContext Context
 
-<PageTitle>@Configuration["ChapterSettings:Shortname"] TSA Teams @Configuration["ChapterSettings:CompetitionYear"]</PageTitle>
+<PageHeader
-
+    Title="@($"{Configuration["ChapterSettings:Shortname"]} TSA Teams {Configuration["ChapterSettings:CompetitionYear"]}")"
-<MudText Typo="Typo.h3">@Configuration["ChapterSettings:Shortname"] TSA Teams @Configuration["ChapterSettings:CompetitionYear"]</MudText>
+    Description="Yearly theme: Unity Through Community" />
-<MudText Typo="Typo.h5" Class="mb-4">Yearly theme: Unity Through Community</MudText>
 
 <Legend></Legend>
 @if (_teams == null)

WebApp/Components/Pages/ChapterSettings.razor

@@ -2,17 +2,18 @@
 @attribute [Authorize(Roles = AuthRoles.Administrator)]
 @using WebApp.Authentication
 @using WebApp.Models
+@using WebApp.Components.Shared.Components
 @using System.Text.Json
 @inject IWebHostEnvironment Environment
 @inject IConfiguration Configuration
 
 @rendermode InteractiveServer
 
-<PageTitle>Chapter Settings</PageTitle>
+<PageHeader
+    Title="Chapter Settings"
+    Description="Configure chapter information. Changes take effect on next application restart." />
 
 <MudContainer MaxWidth="MaxWidth.Large" Class="mt-4">
-    <MudText Typo="Typo.h3" Class="mb-4">Chapter Settings</MudText>
-    <MudText Typo="Typo.body1" Class="mb-6">Configure chapter information. Changes take effect on next application restart.</MudText>
 
     @if (_settings != null)
     {

WebApp/Components/Pages/ValidationSettings.razor

@@ -2,17 +2,18 @@
 @attribute [Authorize(Roles = AuthRoles.Administrator)]
 @using Core.Validation
 @using WebApp.Authentication
+@using WebApp.Components.Shared.Components
 @using System.Text.Json
 @inject IWebHostEnvironment Environment
 @inject IConfiguration Configuration
 
 @rendermode InteractiveServer
 
-<PageTitle>Validation Settings</PageTitle>
+<PageHeader
+    Title="Validation Settings"
+    Description="Configure validation rules and thresholds. Changes take effect on next application restart." />
 
 <MudContainer MaxWidth="MaxWidth.Large" Class="mt-4">
-    <MudText Typo="Typo.h3" Class="mb-4">Validation Settings</MudText>
-    <MudText Typo="Typo.body1" Class="mb-6">Configure validation rules and thresholds. Changes take effect on next application restart.</MudText>
 
     @if (_config != null)
     {

WebApp/Components/Shared/Components/PageHeader.razor

@@ -57,7 +57,7 @@
         @* Description *@
         @if (!string.IsNullOrEmpty(Description))
         {
-            <MudText Typo="Typo.body2" Color="Color.Secondary">@Description</MudText>
+            <MudText Typo="Typo.body2">@Description</MudText>
         }
 
         @* Custom Header Content *@