feat(ux): loading state, accessible status badges#476
Conversation
|
@CooLHecker is attempting to deploy a commit to the 007's projects Team on Vercel. A member of the Team first needs to authorize it. |
Thanks for creating a PR for your Issue!
|
|
|
||
| {% if error %} | ||
| <!-- Server-side error (e.g. invalid student ID, duplicate cert) --> | ||
| <div class="error-box" | ||
| style="background:rgba(229,62,62,0.12);color:#fc8181;padding:14px 16px;border-radius:10px;border:1px solid rgba(229,62,62,0.3);margin-bottom:20px;font-weight:500;" | ||
| role="alert"> | ||
| ⚠️ {{ error }} | ||
| </div> | ||
| {% endif %} | ||
|
|
||
| {% if success %} | ||
| <div class="welcome-text"> | ||
| <p style="color:#38a169;font-weight:bold;">Congratulations! <br> {{ success }}</p> | ||
| </div> | ||
| <div class="button"> | ||
| <a href="{{ url_for('teacher-dashboard') }}" class="btn-primary">Back to Dashboard</a> | ||
| </div> | ||
| {% else %} |
There was a problem hiding this comment.
Error and success Jinja blocks are dead code — route never renders this template with those variables
submit_achievements() always renders submit_achievements.html for all POST responses (success and every error path); teacher_achievements_2.html is only served on GET without any template variables. The {% if error %} and {% if success %} blocks added here will never execute.
Prompt to fix with AI
Copy this prompt into your AI coding assistant to fix this issue.
In `app.py`, the `submit_achievements()` route (lines 405–533) renders `submit_achievements.html` for every POST response (success at line 525, all error returns). The `{% if error %}` and `{% if success %}` Jinja blocks added to `templates/teacher_achievements_2.html` at lines 301–318 will never be reached. Fix: update the POST handler in `app.py` to render `teacher_achievements_2.html` (instead of `submit_achievements.html`) when returning error/success responses, so the inline feedback UI in this template is actually shown to users.
| .badge-pending { | ||
| background: #fef3c7; | ||
| color: #78350f; | ||
| border-color: #f59e0b; | ||
| font-weight: 600; | ||
| } | ||
|
|
||
| /* --- Approved / Verified --- */ | ||
| /* Light: #064e3b on #d1fae5 → 5.9:1 ✓ */ | ||
| .badge-approved { | ||
| background: #d1fae5; | ||
| color: #064e3b; | ||
| border-color: #10b981; | ||
| font-weight: 600; | ||
| } | ||
|
|
||
| /* --- Rejected --- */ | ||
| /* Light: #7f1d1d on #fee2e2 → 6.1:1 ✓ */ | ||
| .badge-rejected { | ||
| background: #fee2e2; | ||
| color: #7f1d1d; | ||
| border-color: #f87171; | ||
| font-weight: 600; | ||
| } |
There was a problem hiding this comment.
Global light-mode badge colors silently overridden by template inline styles
admin_users.html and admin_dashboard.html each contain inline .badge-pending/.badge-approved <style> blocks at the same specificity (0,1,0); they win by cascade source order and render the old colors instead of these new WCAG-audited values in light mode.
Prompt to fix with AI
Copy this prompt into your AI coding assistant to fix this issue.
In static/styles.css, the new light-mode rules for `.badge-pending` (line 1143) and `.badge-approved` (line 1152) are silently overridden by duplicate inline `<style>` blocks in templates/admin_users.html (lines 95–103) and templates/admin_dashboard.html (lines 138–146). To make the global WCAG-compliant colors take effect, remove the duplicate `.badge-pending` and `.badge-approved` rules from both template `<style>` blocks. No changes to styles.css are needed.
Confidence Score: 3/5 - Review RecommendedLikely safe but review recommended — the PR introduces useful UX improvements (loading states and accessible status badges), but contains a substantive bug in Key Findings:
Files requiring special attention
|
EntelligenceAI PR SummaryThis PR consolidates the template used in the
Confidence Score: 5/5 - Safe to MergeSafe to merge — this PR makes a straightforward template consolidation in the Key Findings:
Files requiring special attention
|
Which issue does this PR close?
Closes #442
Rationale for this change
The achievement form had no loading state,
and status badges failed WCAG contrast requirements in dark mode.
What changes are included in this PR?
spinner + disabled state on submit button, bfcache restore
with WCAG AA contrast ratios for light and dark themes
Are these changes tested?
Tested manually:
Are there any user-facing changes?
Yes , teachers see inline validation errors and a loading spinner.
Admins see improved badge readability in dark mode.