From d19e937bd4fe3c0591e3b0bca97323952a8c5a59 Mon Sep 17 00:00:00 2001
From: Ross <xkjq@ymail.com>
Date: Wed, 22 Oct 2025 22:05:33 +0100
Subject: [PATCH] Enhance QuestionReviewForm layout with Bootstrap styling for
 status buttons and improve comment field presentation

---
 generic/forms.py                              |  7 +--
 .../partials/question_review_form.html        | 47 ++++++++++++++-----
 2 files changed, 38 insertions(+), 16 deletions(-)

diff --git a/generic/forms.py b/generic/forms.py
index 6b7fc63b..c1c78e0e 100755
--- a/generic/forms.py
+++ b/generic/forms.py
@@ -31,7 +31,7 @@ from generic.models import (
 )
 
 from django.contrib.admin.widgets import FilteredSelectMultiple
-from django.forms.widgets import RadioSelect, TextInput, Textarea
+from django.forms.widgets import RadioSelect, Textarea
 
 from rapids.models import Rapid
 from anatomy.models import AnatomyQuestion
@@ -840,8 +840,9 @@ class QuestionReviewForm(ModelForm):
         model = QuestionReview
         fields = ["status", "comment"]
         widgets = {
-                "status": RadioSelect(attrs={"class": "form-check-input"}),
-                "comment": TextInput(attrs={"class": "form-control form-control-sm", "placeholder": "Comment (optional)"}),
+                # Use Bootstrap "btn-check" inputs so we can style labels as button toggles
+                "status": RadioSelect(attrs={"class": "btn-check", "autocomplete": "off"}),
+                "comment": Textarea(attrs={"class": "form-control form-control-sm", "placeholder": "Comment (optional)", "rows": 2}),
             }
 
     def __init__(self, *args, **kwargs):
diff --git a/generic/templates/generic/partials/question_review_form.html b/generic/templates/generic/partials/question_review_form.html
index e9be1aab..a1d7726b 100644
--- a/generic/templates/generic/partials/question_review_form.html
+++ b/generic/templates/generic/partials/question_review_form.html
@@ -2,23 +2,44 @@
       hx-post="{% url app_name|add:':question_set_review' question.pk %}?edit=1"
       hx-target="#question-review-block"
       hx-swap="innerHTML"
-      class="d-flex gap-2 align-items-start">
+      class="w-100">
     {% csrf_token %}
 
-    <div class="d-flex gap-2 align-items-center">
-        {% for radio in form.status %}
-            <div class="form-check form-check-inline">
-                {{ radio.tag }}
-                <label class="form-check-label" for="{{ radio.id_for_label }}">{{ radio.choice_label }}</label>
+    <div class="row g-2 align-items-start">
+        <div class="col-auto">
+            <label class="form-label mb-1">Status</label>
+            <div>
+                {% for radio in form.status %}
+                    {% comment %} Render colored button for each choice by checking value {% endcomment %}
+                    {{ radio.tag }}
+                    {% if radio.choice_value == 'AC' %}
+                        <label class="btn btn-outline-success me-1 mb-1" for="{{ radio.id_for_label }}">{{ radio.choice_label }}</label>
+                    {% elif radio.choice_value == 'OD' %}
+                        <label class="btn btn-outline-secondary me-1 mb-1" for="{{ radio.id_for_label }}">{{ radio.choice_label }}</label>
+                    {% elif radio.choice_value == 'ER' %}
+                        <label class="btn btn-outline-warning me-1 mb-1" for="{{ radio.id_for_label }}">{{ radio.choice_label }}</label>
+                    {% elif radio.choice_value == 'RJ' %}
+                        <label class="btn btn-outline-danger me-1 mb-1" for="{{ radio.id_for_label }}">{{ radio.choice_label }}</label>
+                    {% else %}
+                        <label class="btn btn-outline-primary me-1 mb-1" for="{{ radio.id_for_label }}">{{ radio.choice_label }}</label>
+                    {% endif %}
+                {% endfor %}
             </div>
-        {% endfor %}
-    </div>
+            {% if form.status.errors %}
+                <div class="invalid-feedback d-block">{{ form.status.errors|join:", " }}</div>
+            {% endif %}
+        </div>
 
-    <div>
-    {{ form.comment }}
-    </div>
+        <div class="col">
+            <label for="{{ form.comment.id_for_label }}" class="form-label mb-1">Comment</label>
+            {{ form.comment }}
+            {% if form.comment.errors %}
+                <div class="invalid-feedback d-block">{{ form.comment.errors|join:", " }}</div>
+            {% endif %}
+        </div>
 
-    <div>
-        <button class="btn btn-sm btn-primary" type="submit">Save</button>
+        <div class="col-auto d-flex align-items-end">
+            <button class="btn btn-primary" type="submit">Save</button>
+        </div>
     </div>
 </form>
\ No newline at end of file