feat(frontend+backend): add theming to the blazor frontend

This commit is contained in:
2025-09-04 22:16:04 -04:00
parent 133efdddea
commit 0768e4816d
30 changed files with 1544 additions and 686 deletions

View File

@@ -8,22 +8,37 @@
<PageTitle>Members</PageTitle>
<div class="d-flex justify-content-between align-items-center mb-4">
<h1>Members</h1>
<a href="/members/create" class="btn btn-primary">
<i class="bi bi-plus-circle"></i> Add Member
<h1 class="nimbus-page-title">
<i class="bi bi-people-fill me-3"></i>Members
</h1>
<a href="/members/create" class="btn btn-nimbus-primary">
<i class="bi bi-person-plus-fill me-2"></i>Add Member
</a>
</div>
@if (loading)
{
<div class="text-center">
<div class="spinner-border" role="status">
<div class="text-center py-5">
<div class="spinner-border nimbus-spinner" role="status" style="width: 3rem; height: 3rem;">
<span class="visually-hidden">Loading...</span>
</div>
<p class="mt-3 text-muted">Loading members...</p>
</div>
}
else if (members.Any())
{
<!-- Filter Controls -->
<div class="row mb-3">
<div class="col-md-4">
<div class="form-check">
<input class="form-check-input" type="checkbox" @bind="showInactiveMembers" id="showInactiveCheck">
<label class="form-check-label" for="showInactiveCheck">
Show inactive members
</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="card">
@@ -50,18 +65,22 @@ else if (members.Any())
<strong>@member.FullName</strong>
</td>
<td>
<span class="badge bg-secondary">@member.ClassificationName</span>
<span class="badge badge-nimbus-classification">@member.ClassificationName</span>
</td>
<td>@member.Email</td>
<td>@member.PhoneNumber</td>
<td>
@if (member.IsActive == 1)
{
<span class="badge bg-success">Active</span>
<span class="badge badge-nimbus-active">
<i class="bi bi-check-circle-fill me-1"></i>Active
</span>
}
else
{
<span class="badge bg-danger">Inactive</span>
<span class="badge badge-nimbus-inactive">
<i class="bi bi-x-circle-fill me-1"></i>Inactive
</span>
}
</td>
<td>
@@ -77,17 +96,23 @@ else if (members.Any())
<td>
@if (member.DeclineStreak > 0)
{
<span class="badge bg-warning">@member.DeclineStreak</span>
<span class="badge badge-nimbus-pending">
<i class="bi bi-exclamation-triangle-fill me-1"></i>@member.DeclineStreak
</span>
}
else
{
<span class="text-muted">0</span>
<span class="text-muted"></span>
}
</td>
<td>
<div class="btn-group" role="group">
<a href="/members/@member.MemberId" class="btn btn-sm btn-outline-primary">View</a>
<a href="/members/@member.MemberId/edit" class="btn btn-sm btn-outline-warning">Edit</a>
<a href="/members/@member.MemberId" class="btn btn-sm btn-nimbus-secondary me-1">
<i class="bi bi-eye-fill me-1"></i>View
</a>
<a href="/members/@member.MemberId/edit" class="btn btn-sm btn-outline-warning">
<i class="bi bi-pencil-fill me-1"></i>Edit
</a>
<button class="btn btn-sm btn-outline-danger" @onclick="() => ConfirmDelete(member)">Delete</button>
</div>
</td>
@@ -101,19 +126,12 @@ else if (members.Any())
</div>
</div>
<div class="row mt-3">
<div class="col-md-12">
<div class="d-flex justify-content-between align-items-center">
<small class="text-muted">
Showing @filteredMembers.Count() of @members.Count members
</small>
<div class="form-check">
<input class="form-check-input" type="checkbox" @bind="showInactiveMembers" id="showInactive">
<label class="form-check-label" for="showInactive">
Show inactive members
</label>
</div>
</div>
<small class="text-muted">
Showing @filteredMembers.Count() of @members.Count members
</small>
</div>
</div>
}