TSA/chapter-organizer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Consistent Typography in Details pages.

Browse Source
This commit is contained in:
poprhythm
2025-12-26 16:35:09 -05:00
parent 75a64faff0
commit ed9487a5ad
4 changed files with 137 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files
WebApp/Components/Features/Events/Details.razor
+49 -36
View File
@@ -28,67 +28,80 @@
</ActionButtons> </ActionButtons>
</PageHeader> </PageHeader>
<MudPaper Class="pa-4 mt-4"> <MudPaper Elevation="2" Class="pa-6">
<MudGrid> <MudText Typo="Typo.h5" Class="mb-4">Basic Information</MudText>
<MudGrid Spacing="3">
<MudItem xs="12" sm="6" md="4"> <MudItem xs="12" sm="6" md="4">
<MudText Typo="Typo.subtitle2">Name</MudText> <MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Name</MudText>
<MudText>@eventdefinition.Name</MudText> <MudText Typo="Typo.body1">@eventdefinition.Name</MudText>
</MudItem> </MudItem>
<MudItem xs="12" sm="6" md="4"> <MudItem xs="12" sm="6" md="4">
<MudText Typo="Typo.subtitle2">Short Name</MudText> <MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Short Name</MudText>
<MudText>@eventdefinition.ShortName</MudText> <MudText Typo="Typo.body1">@eventdefinition.ShortName</MudText>
</MudItem> </MudItem>
<MudItem xs="12" sm="6" md="4"> <MudItem xs="12" sm="6" md="4">
<MudText Typo="Typo.subtitle2">Event Format</MudText> <MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Event Format</MudText>
<MudText>@eventdefinition.EventFormat</MudText> <MudText Typo="Typo.body1">@eventdefinition.EventFormat</MudText>
</MudItem> </MudItem>
<MudItem xs="12" sm="6" md="4"> <MudItem xs="12" sm="6" md="4">
<MudText Typo="Typo.subtitle2">Min Team Size</MudText> <MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Min Team Size</MudText>
<MudText>@eventdefinition.MinTeamSize</MudText> <MudText Typo="Typo.body1">@eventdefinition.MinTeamSize</MudText>
</MudItem> </MudItem>
<MudItem xs="12" sm="6" md="4"> <MudItem xs="12" sm="6" md="4">
<MudText Typo="Typo.subtitle2">Max Team Size</MudText> <MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Max Team Size</MudText>
<MudText>@eventdefinition.MaxTeamSize</MudText> <MudText Typo="Typo.body1">@eventdefinition.MaxTeamSize</MudText>
</MudItem> </MudItem>
<MudItem xs="12" sm="6" md="4"> <MudItem xs="12" sm="6" md="4">
<MudText Typo="Typo.subtitle2">Chapter Eligibility Count (State)</MudText> <MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Level of Effort</MudText>
<MudText>@eventdefinition.ChapterEligibilityCountState</MudText> <MudText Typo="Typo.body1">@eventdefinition.LevelOfEffort</MudText>
</MudItem>
</MudGrid>
<MudDivider Class="my-6" />
<MudText Typo="Typo.h5" Class="mb-4">Competition Details</MudText>
<MudGrid Spacing="3">
<MudItem xs="12" sm="6" md="4">
<MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Chapter Eligibility Count (State)</MudText>
<MudText Typo="Typo.body1">@eventdefinition.ChapterEligibilityCountState</MudText>
</MudItem> </MudItem>
<MudItem xs="12" sm="6" md="4"> <MudItem xs="12" sm="6" md="4">
<MudText Typo="Typo.subtitle2">Regional Event</MudText> <MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Regional Event</MudText>
<MudText>@eventdefinition.RegionalEvent</MudText> <MudText Typo="Typo.body1">@eventdefinition.RegionalEvent</MudText>
</MudItem> </MudItem>
<MudItem xs="12" sm="6" md="4"> <MudItem xs="12" sm="6" md="4">
<MudText Typo="Typo.subtitle2">Presubmission Required</MudText> <MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Presubmission Required</MudText>
<MudText>@eventdefinition.Presubmission</MudText> <MudText Typo="Typo.body1">@eventdefinition.Presubmission</MudText>
</MudItem>
<MudItem xs="12" sm="6" md="4">
<MudText Typo="Typo.subtitle2">Level of Effort</MudText>
<MudText>@eventdefinition.LevelOfEffort</MudText>
</MudItem> </MudItem>
<MudItem xs="12"> <MudItem xs="12">
<MudText Typo="Typo.subtitle2">Semifinalist Activity</MudText> <MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Semifinalist Activity</MudText>
<MudText>@eventdefinition.SemifinalistActivity</MudText> <MudText Typo="Typo.body1">@eventdefinition.SemifinalistActivity</MudText>
</MudItem>
</MudGrid>
<MudDivider Class="my-6" />
<MudText Typo="Typo.h5" Class="mb-4">Additional Information</MudText>
<MudGrid Spacing="3">
<MudItem xs="12">
<MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Eligibility</MudText>
<MudText Typo="Typo.body1">@eventdefinition.Eligibility</MudText>
</MudItem> </MudItem>
<MudItem xs="12"> <MudItem xs="12">
<MudText Typo="Typo.subtitle2">Notes</MudText> <MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Theme</MudText>
<MudText>@eventdefinition.Notes</MudText> <MudText Typo="Typo.body1">@eventdefinition.Theme</MudText>
</MudItem> </MudItem>
<MudItem xs="12"> <MudItem xs="12">
<MudText Typo="Typo.subtitle2">Documentation</MudText> <MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Description</MudText>
<MudText>@eventdefinition.Documentation</MudText> <MudText Typo="Typo.body1">@eventdefinition.Description</MudText>
</MudItem> </MudItem>
<MudItem xs="12"> <MudItem xs="12">
<MudText Typo="Typo.subtitle2">Eligibility</MudText> <MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Documentation</MudText>
<MudText>@eventdefinition.Eligibility</MudText> <MudText Typo="Typo.body1">@eventdefinition.Documentation</MudText>
</MudItem> </MudItem>
<MudItem xs="12"> <MudItem xs="12">
<MudText Typo="Typo.subtitle2">Theme</MudText> <MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Notes</MudText>
<MudText>@eventdefinition.Theme</MudText> <MudText Typo="Typo.body1">@eventdefinition.Notes</MudText>
</MudItem>
<MudItem xs="12">
<MudText Typo="Typo.subtitle2">Description</MudText>
<MudText>@eventdefinition.Description</MudText>
</MudItem> </MudItem>
</MudGrid> </MudGrid>
</MudPaper> </MudPaper>
WebApp/Components/Features/Students/Details.razor
+31 -24
View File
@@ -27,47 +27,54 @@
</ActionButtons> </ActionButtons>
</PageHeader> </PageHeader>
<MudPaper Class="pa-4 mt-4"> <MudPaper Elevation="2" Class="pa-6">
<MudGrid> <MudText Typo="Typo.h5" Class="mb-4">Student Information</MudText>
<MudGrid Spacing="3">
<MudItem xs="12" sm="6" md="4"> <MudItem xs="12" sm="6" md="4">
<MudText Typo="Typo.subtitle2">First Name</MudText> <MudText Typo="Typo.subtitle2" Class="mud-text-secondary">First Name</MudText>
<MudText>@student.FirstName</MudText> <MudText Typo="Typo.body1">@student.FirstName</MudText>
</MudItem> </MudItem>
<MudItem xs="12" sm="6" md="4"> <MudItem xs="12" sm="6" md="4">
<MudText Typo="Typo.subtitle2">Last Name</MudText> <MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Last Name</MudText>
<MudText>@student.LastName</MudText> <MudText Typo="Typo.body1">@student.LastName</MudText>
</MudItem> </MudItem>
<MudItem xs="12" sm="6" md="4"> <MudItem xs="12" sm="6" md="4">
<MudText Typo="Typo.subtitle2">Grade</MudText> <MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Grade</MudText>
<MudText>@student.Grade</MudText> <MudText Typo="Typo.body1">@student.Grade</MudText>
</MudItem> </MudItem>
<MudItem xs="12" sm="6" md="4"> <MudItem xs="12" sm="6" md="4">
<MudText Typo="Typo.subtitle2">Email</MudText> <MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Email</MudText>
<MudText>@student.Email</MudText> <MudText Typo="Typo.body1">@student.Email</MudText>
</MudItem> </MudItem>
<MudItem xs="12" sm="6" md="4"> <MudItem xs="12" sm="6" md="4">
<MudText Typo="Typo.subtitle2">Phone Number</MudText> <MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Phone Number</MudText>
<MudText>@student.PhoneNumber</MudText> <MudText Typo="Typo.body1">@student.PhoneNumber</MudText>
</MudItem> </MudItem>
<MudItem xs="12" sm="6" md="4"> <MudItem xs="12" sm="6" md="4">
<MudText Typo="Typo.subtitle2">TSA Year</MudText> <MudText Typo="Typo.subtitle2" Class="mud-text-secondary">TSA Year</MudText>
<MudText>@student.TsaYear</MudText> <MudText Typo="Typo.body1">@student.TsaYear</MudText>
</MudItem>
</MudGrid>
<MudDivider Class="my-6" />
<MudText Typo="Typo.h5" Class="mb-4">TSA IDs</MudText>
<MudGrid Spacing="3">
<MudItem xs="12" sm="6" md="4">
<MudText Typo="Typo.subtitle2" Class="mud-text-secondary">State ID</MudText>
<MudText Typo="Typo.body1">@student.StateId</MudText>
</MudItem> </MudItem>
<MudItem xs="12" sm="6" md="4"> <MudItem xs="12" sm="6" md="4">
<MudText Typo="Typo.subtitle2">State ID</MudText> <MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Regional ID</MudText>
<MudText>@student.StateId</MudText> <MudText Typo="Typo.body1">@student.RegionalId</MudText>
</MudItem> </MudItem>
<MudItem xs="12" sm="6" md="4"> <MudItem xs="12" sm="6" md="4">
<MudText Typo="Typo.subtitle2">Regional ID</MudText> <MudText Typo="Typo.subtitle2" Class="mud-text-secondary">National ID</MudText>
<MudText>@student.RegionalId</MudText> <MudText Typo="Typo.body1">@student.NationalId</MudText>
</MudItem> </MudItem>
<MudItem xs="12" sm="6" md="4"> <MudItem xs="12" sm="6" md="4">
<MudText Typo="Typo.subtitle2">National ID</MudText> <MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Officer Role</MudText>
<MudText>@student.NationalId</MudText> <MudText Typo="Typo.body1">@student.OfficerRole</MudText>
</MudItem>
<MudItem xs="12" sm="6" md="4">
<MudText Typo="Typo.subtitle2">Officer Role</MudText>
<MudText>@student.OfficerRole</MudText>
</MudItem> </MudItem>
</MudGrid> </MudGrid>
</MudPaper> </MudPaper>
WebApp/Components/Features/Teams/Details.razor
+8 -7
View File
@@ -30,26 +30,27 @@
</ActionButtons> </ActionButtons>
</PageHeader> </PageHeader>
<MudPaper Class="pa-4"> <MudPaper Elevation="2" Class="pa-6">
<MudGrid> <MudText Typo="Typo.h5" Class="mb-4">Team Information</MudText>
<MudGrid Spacing="3">
<MudItem xs="12" sm="6"> <MudItem xs="12" sm="6">
<MudText Typo="Typo.subtitle2" Color="Color.Secondary">Event</MudText> <MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Event</MudText>
<MudText Typo="Typo.body1">@Team.Event.Name</MudText> <MudText Typo="Typo.body1">@Team.Event.Name</MudText>
</MudItem> </MudItem>
<MudItem xs="12" sm="6"> <MudItem xs="12" sm="6">
<MudText Typo="Typo.subtitle2" Color="Color.Secondary">Event Format</MudText> <MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Event Format</MudText>
<MudText Typo="Typo.body1">@Team.Event.EventFormat</MudText> <MudText Typo="Typo.body1">@Team.Event.EventFormat</MudText>
</MudItem> </MudItem>
<MudItem xs="12" sm="6"> <MudItem xs="12" sm="6">
<MudText Typo="Typo.subtitle2" Color="Color.Secondary">Team Identifier</MudText> <MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Team Identifier</MudText>
<MudText Typo="Typo.body1">@(Team.Identifier ?? "N/A")</MudText> <MudText Typo="Typo.body1">@(Team.Identifier ?? "N/A")</MudText>
</MudItem> </MudItem>
<MudItem xs="12" sm="6"> <MudItem xs="12" sm="6">
<MudText Typo="Typo.subtitle2" Color="Color.Secondary">Captain</MudText> <MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Captain</MudText>
<MudText Typo="Typo.body1">@(Team.Captain?.FirstNameLastName ?? "N/A")</MudText> <MudText Typo="Typo.body1">@(Team.Captain?.FirstNameLastName ?? "N/A")</MudText>
</MudItem> </MudItem>
<MudItem xs="12"> <MudItem xs="12">
<MudText Typo="Typo.subtitle2" Color="Color.Secondary">Team Members</MudText> <MudText Typo="Typo.subtitle2" Class="mud-text-secondary">Team Members</MudText>
<TeamStudents Team="@Team" /> <TeamStudents Team="@Team" />
</MudItem> </MudItem>
</MudGrid> </MudGrid>
docs/plans/style-improvements.md
+3 -3
View File
@@ -94,7 +94,7 @@ This document outlines recommended style improvements to enhance the visual desi
--- ---
### 4. Refine Typography Hierarchy ### 4. Refine Typography Hierarchy ✅ COMPLETED
**Locations**: Throughout the application **Locations**: Throughout the application
**Current State**: Good theme typography definition, but inconsistent usage. **Current State**: Good theme typography definition, but inconsistent usage.
@@ -330,12 +330,12 @@ Consider using MudChip components with rank colors for better visual distinction
3. ✅ Add table density and hover properties 3. ✅ Add table density and hover properties
### Phase 2: Visual Polish (Medium Impact, Medium Effort) ### Phase 2: Visual Polish (Medium Impact, Medium Effort)
4. Audit and ensure button hierarchy consistency 4. ✅ Refine typography hierarchy usage
5. Add loading states to all grids 5. Add loading states to all grids
6. Wrap pages in consistent container styling 6. Wrap pages in consistent container styling
### Phase 3: Enhancements (Nice to Have) ### Phase 3: Enhancements (Nice to Have)
7. Refine typography hierarchy usage 7. Audit and ensure button hierarchy consistency
8. Enhance event rank visualization 8. Enhance event rank visualization
9. Improve form layout grouping 9. Improve form layout grouping
10. Add micro-interactions and transitions 10. Add micro-interactions and transitions