Start of some style improvments.
Logout button now matches.
This commit is contained in:
@@ -0,0 +1,362 @@
|
||||
# TSA Chapter Organizer - Style Improvement Plan
|
||||
|
||||
## Overview
|
||||
This document outlines recommended style improvements to enhance the visual design, consistency, and user experience of the TSA Chapter Organizer application.
|
||||
|
||||
## Priority Improvements
|
||||
|
||||
### 1. Fix MudBlazor/Bootstrap Inconsistency ✅ COMPLETED
|
||||
**Location**: `WebApp/Components/Shared/Layout/MainLayout.razor`
|
||||
|
||||
**Issue**: The logout button uses Bootstrap classes (`btn btn-primary`) instead of MudBlazor components, creating visual inconsistency.
|
||||
|
||||
**Current Code**:
|
||||
```razor
|
||||
<form action="Auth/CookieLogout" method="post">
|
||||
<button type="submit" class="btn btn-primary">Logout</button>
|
||||
</form>
|
||||
```
|
||||
|
||||
**Recommended Fix**:
|
||||
```razor
|
||||
<form action="Auth/CookieLogout" method="post">
|
||||
<MudButton Color="Color.Primary"
|
||||
ButtonType="ButtonType.Submit"
|
||||
Variant="Variant.Filled"
|
||||
Size="Size.Small">
|
||||
Logout
|
||||
</MudButton>
|
||||
</form>
|
||||
```
|
||||
|
||||
**Benefits**:
|
||||
- Consistent component usage across the application
|
||||
- Matches MudBlazor theme styling
|
||||
- Better integration with application theme
|
||||
|
||||
---
|
||||
|
||||
### 2. Enhance Visual Hierarchy with Elevation
|
||||
**Locations**: Multiple page components
|
||||
|
||||
**Issue**: Most MudPapers use Elevation="0" which makes the UI feel flat and lacks visual hierarchy.
|
||||
|
||||
**Recommendations**:
|
||||
- **Primary content containers** (data grids, forms): `Elevation="2"`
|
||||
- **Secondary content** (cards within pages): `Elevation="1"`
|
||||
- **Navigation** (current usage): `Elevation="0"` ✓ Correct
|
||||
|
||||
**Example Files to Update**:
|
||||
- `WebApp/Components/Features/Students/Index.razor`
|
||||
- `WebApp/Components/Features/Events/Index.razor`
|
||||
- `WebApp/Components/Features/Teams/Index.razor`
|
||||
- `WebApp/Components/Features/Students/Create.razor`
|
||||
- `WebApp/Components/Features/Events/Create.razor`
|
||||
|
||||
**Benefits**:
|
||||
- Better visual separation of content areas
|
||||
- Improved depth perception
|
||||
- More modern, material design aesthetic
|
||||
|
||||
---
|
||||
|
||||
### 3. Improve Table Density and Spacing
|
||||
**Locations**: All MudDataGrid components
|
||||
|
||||
**Current State**: Tables lack visual distinction between rows and don't have optimal spacing.
|
||||
|
||||
**Recommendations**:
|
||||
```razor
|
||||
<MudPaper Elevation="2" Class="pa-4">
|
||||
<MudDataGrid T="Student"
|
||||
ServerData="ServerReload"
|
||||
@ref="_dataGrid"
|
||||
Filterable="true"
|
||||
RowsPerPage="25"
|
||||
Dense="true"
|
||||
Striped="true"
|
||||
Hover="true">
|
||||
<!-- columns -->
|
||||
</MudDataGrid>
|
||||
</MudPaper>
|
||||
```
|
||||
|
||||
**Properties to Add**:
|
||||
- `Dense="true"` - Tighter spacing for more data visibility
|
||||
- `Striped="true"` - Alternating row colors for easier scanning
|
||||
- `Hover="true"` - Visual feedback on row hover
|
||||
- Wrap in `MudPaper` with `Elevation="2"` and padding
|
||||
|
||||
**Benefits**:
|
||||
- Better row distinction and readability
|
||||
- More professional appearance
|
||||
- Improved user experience when scanning data
|
||||
|
||||
---
|
||||
|
||||
### 4. Refine Typography Hierarchy
|
||||
**Locations**: Throughout the application
|
||||
|
||||
**Current State**: Good theme typography definition, but inconsistent usage.
|
||||
|
||||
**Recommendations**:
|
||||
|
||||
| Element | Typography |
|
||||
|---------|------------|
|
||||
| Page titles | `Typo.h3` (via PageHeader) ✓ Current |
|
||||
| Section headings | `Typo.h4` |
|
||||
| Subsection headings | `Typo.subtitle1` |
|
||||
| Body text | `Typo.body1` ✓ Default |
|
||||
| Supporting text | `Typo.body2` with `Class="mud-text-secondary"` |
|
||||
| Labels | `Typo.caption` |
|
||||
|
||||
**Example Usage**:
|
||||
```razor
|
||||
<PageHeader Title="Students" Description="Manage student information and assignments" />
|
||||
|
||||
<MudText Typo="Typo.h4" Class="mb-3">Recent Activity</MudText>
|
||||
<MudText Typo="Typo.body2" Class="mud-text-secondary">
|
||||
Last updated: @DateTime.Now.ToShortDateString()
|
||||
</MudText>
|
||||
```
|
||||
|
||||
**Benefits**:
|
||||
- Clear visual hierarchy
|
||||
- Improved readability
|
||||
- Consistent information architecture
|
||||
|
||||
---
|
||||
|
||||
### 5. Add Loading States
|
||||
**Locations**: All MudDataGrid and async components
|
||||
|
||||
**Issue**: No visual feedback during data loading operations.
|
||||
|
||||
**Recommendations**:
|
||||
```csharp
|
||||
@code {
|
||||
private bool _isLoading = true;
|
||||
|
||||
private async Task<GridData<Student>> ServerReload(GridState<Student> state)
|
||||
{
|
||||
_isLoading = true;
|
||||
try
|
||||
{
|
||||
// ... existing code
|
||||
}
|
||||
finally
|
||||
{
|
||||
_isLoading = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```razor
|
||||
<MudDataGrid T="Student"
|
||||
Loading="@_isLoading"
|
||||
LoadingProgressColor="Color.Primary">
|
||||
```
|
||||
|
||||
**Benefits**:
|
||||
- Better user feedback during async operations
|
||||
- Reduces perceived wait time
|
||||
- Professional appearance
|
||||
|
||||
---
|
||||
|
||||
### 6. Improve Button Hierarchy
|
||||
**Current State**: Generally good, but needs consistency checks.
|
||||
|
||||
**Standard to Apply**:
|
||||
- **Primary actions** (Create, Save, Submit): `Variant="Variant.Filled" Color="Color.Primary"`
|
||||
- **Secondary actions** (Edit, View): `Variant="Variant.Outlined"`
|
||||
- **Tertiary actions** (Cancel): `Variant="Variant.Text"`
|
||||
- **Destructive actions** (Delete): Use IconButtonWithTooltip with `HoverColor="Color.Error"`
|
||||
|
||||
**Files to Audit**:
|
||||
- All Index.razor pages (mostly correct ✓)
|
||||
- All Create.razor pages (mostly correct ✓)
|
||||
- All Edit.razor pages (mostly correct ✓)
|
||||
|
||||
**Benefits**:
|
||||
- Clear action priority
|
||||
- Better user guidance
|
||||
- Consistent UX patterns
|
||||
|
||||
---
|
||||
|
||||
### 7. Add Consistent Page Container Styling
|
||||
**Locations**: All page components
|
||||
|
||||
**Recommendation**:
|
||||
Wrap main page content in consistent containers:
|
||||
|
||||
```razor
|
||||
<PageHeader Title="Page Title" />
|
||||
|
||||
<MudPaper Elevation="2" Class="pa-6">
|
||||
<!-- Page content -->
|
||||
</MudPaper>
|
||||
```
|
||||
|
||||
**Or for multiple sections**:
|
||||
```razor
|
||||
<PageHeader Title="Page Title" />
|
||||
|
||||
<MudStack Spacing="4">
|
||||
<MudPaper Elevation="2" Class="pa-6">
|
||||
<MudText Typo="Typo.h4" Class="mb-4">Section 1</MudText>
|
||||
<!-- Section content -->
|
||||
</MudPaper>
|
||||
|
||||
<MudPaper Elevation="2" Class="pa-6">
|
||||
<MudText Typo="Typo.h4" Class="mb-4">Section 2</MudText>
|
||||
<!-- Section content -->
|
||||
</MudPaper>
|
||||
</MudStack>
|
||||
```
|
||||
|
||||
**Benefits**:
|
||||
- Visual consistency across pages
|
||||
- Better content organization
|
||||
- Professional appearance
|
||||
|
||||
---
|
||||
|
||||
### 8. Enhance Event Rank Color System
|
||||
**Current State**: Good color-coding system (ranks 1-6) defined in app.css
|
||||
|
||||
**Potential Enhancement**:
|
||||
Consider using MudChip components with rank colors for better visual distinction:
|
||||
|
||||
```razor
|
||||
<MudChip T="string"
|
||||
Color="Color.Default"
|
||||
Style="@($"background-color: {GetRankColor(rank)};")"
|
||||
Size="Size.Small">
|
||||
Rank @rank
|
||||
</MudChip>
|
||||
```
|
||||
|
||||
**Files Using Rank Colors**:
|
||||
- `WebApp/Components/Features/Students/EventRanking.razor`
|
||||
- `WebApp/Components/Features/Teams/Components/TeamStudents.razor`
|
||||
|
||||
**Benefits**:
|
||||
- More prominent rank visualization
|
||||
- Better accessibility with chip component
|
||||
- Maintains existing color scheme
|
||||
|
||||
---
|
||||
|
||||
### 9. Improve Form Layout
|
||||
**Locations**: Create.razor and Edit.razor pages
|
||||
|
||||
**Recommendations**:
|
||||
- Ensure consistent spacing between form fields using MudGrid's `Spacing` parameter
|
||||
- Group related fields in MudPaper containers with subtle backgrounds
|
||||
- Use consistent label positioning
|
||||
|
||||
**Example**:
|
||||
```razor
|
||||
<EditForm Model="@_model" OnValidSubmit="HandleSubmit">
|
||||
<DataAnnotationsValidator />
|
||||
|
||||
<MudPaper Elevation="1" Class="pa-4 mb-4">
|
||||
<MudText Typo="Typo.h5" Class="mb-3">Basic Information</MudText>
|
||||
<MudGrid Spacing="3">
|
||||
<MudItem xs="12" sm="6">
|
||||
<MudTextField @bind-Value="_model.FirstName" Label="First Name" />
|
||||
</MudItem>
|
||||
<MudItem xs="12" sm="6">
|
||||
<MudTextField @bind-Value="_model.LastName" Label="Last Name" />
|
||||
</MudItem>
|
||||
</MudGrid>
|
||||
</MudPaper>
|
||||
|
||||
<FormActions>
|
||||
<MudButton ButtonType="ButtonType.Submit">Save</MudButton>
|
||||
<MudButton OnClick="HandleCancel">Cancel</MudButton>
|
||||
</FormActions>
|
||||
</EditForm>
|
||||
```
|
||||
|
||||
**Benefits**:
|
||||
- Better visual grouping
|
||||
- Improved form scanability
|
||||
- Reduced cognitive load
|
||||
|
||||
---
|
||||
|
||||
### 10. Add Micro-interactions
|
||||
**Current State**: Hover effect for delete buttons implemented ✓
|
||||
|
||||
**Additional Opportunities**:
|
||||
|
||||
1. **Table row transitions** (app.css):
|
||||
```css
|
||||
.mud-table-row {
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
```
|
||||
|
||||
2. **Button ripple effects**: Ensure MudBlazor's default ripple is not disabled (check by default ✓)
|
||||
|
||||
3. **Page transitions**: Consider adding fade-in animation for page content:
|
||||
```css
|
||||
.page-enter {
|
||||
animation: fadeIn 0.3s ease-in;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
```
|
||||
|
||||
**Benefits**:
|
||||
- More polished user experience
|
||||
- Better feedback for user actions
|
||||
- Modern, responsive feel
|
||||
|
||||
---
|
||||
|
||||
## Implementation Priority
|
||||
|
||||
### Phase 1: Quick Wins (High Impact, Low Effort)
|
||||
1. ✅ Fix logout button (MudBlazor consistency)
|
||||
2. Add elevation to data grids and content containers
|
||||
3. Add table density and hover properties
|
||||
|
||||
### Phase 2: Visual Polish (Medium Impact, Medium Effort)
|
||||
4. Audit and ensure button hierarchy consistency
|
||||
5. Add loading states to all grids
|
||||
6. Wrap pages in consistent container styling
|
||||
|
||||
### Phase 3: Enhancements (Nice to Have)
|
||||
7. Refine typography hierarchy usage
|
||||
8. Enhance event rank visualization
|
||||
9. Improve form layout grouping
|
||||
10. Add micro-interactions and transitions
|
||||
|
||||
---
|
||||
|
||||
## Testing Checklist
|
||||
|
||||
After each implementation:
|
||||
- [ ] Visual consistency across all pages
|
||||
- [ ] Responsive design (mobile, tablet, desktop)
|
||||
- [ ] Theme colors applied correctly
|
||||
- [ ] Accessibility (contrast ratios, keyboard navigation)
|
||||
- [ ] Print styles not affected
|
||||
- [ ] No performance regressions
|
||||
|
||||
---
|
||||
|
||||
## Notes
|
||||
|
||||
- All changes maintain compatibility with existing MudBlazor v7+ theme
|
||||
- Cerulean theme colors are preserved
|
||||
- Print styles (@media print) are not affected
|
||||
- No breaking changes to existing functionality
|
||||
Reference in New Issue
Block a user