Start of some style improvments.
Logout button now matches.
This commit is contained in:
@@ -12,7 +12,12 @@
|
|||||||
<MudSpacer />
|
<MudSpacer />
|
||||||
<AuthorizeView>
|
<AuthorizeView>
|
||||||
<form action="Auth/CookieLogout" method="post">
|
<form action="Auth/CookieLogout" method="post">
|
||||||
<button type="submit" class="btn btn-primary">Logout</button>
|
<MudButton Color="Color.Primary"
|
||||||
|
ButtonType="ButtonType.Submit"
|
||||||
|
Variant="Variant.Filled"
|
||||||
|
Size="Size.Small">
|
||||||
|
Logout
|
||||||
|
</MudButton>
|
||||||
</form>
|
</form>
|
||||||
</AuthorizeView>
|
</AuthorizeView>
|
||||||
</MudAppBar>
|
</MudAppBar>
|
||||||
|
|||||||
@@ -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