From 07a8276899b4166f77b66d31e9920d48f6c13c9a Mon Sep 17 00:00:00 2001
From: Jonathan van Rij <jonathan@blijnder.nl>
Date: Mon, 16 Feb 2026 09:13:54 +0100
Subject: [PATCH] Also improves how buttons are shown with the missing files.

---
 docs/index.md                            |  2 +-
 docs/theming-templating-vue.md           | 18 +++++++++
 resources/css/app.css                    |  1 +
 resources/js/Components/QuestionCard.vue | 51 ++++++++----------------
 resources/js/Pages/Screening/Show.vue    | 33 +++++----------
 5 files changed, 45 insertions(+), 60 deletions(-)

diff --git a/docs/index.md b/docs/index.md
index f7bc69e..9510d79 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -13,7 +13,7 @@ ### Root Level
 
 ### Frontend
 
-- `docs/theming-templating-vue.md` - Design tokens, Tailwind config, layout, shared Vue components, icon and scoring color standards
+- `docs/theming-templating-vue.md` - Design tokens, Tailwind config, layout, shared Vue components, RadioButtonGroup pill buttons, icon and scoring color standards
 
 ### Agents
 
diff --git a/docs/theming-templating-vue.md b/docs/theming-templating-vue.md
index 48c8592..16b1d43 100644
--- a/docs/theming-templating-vue.md
+++ b/docs/theming-templating-vue.md
@@ -9,6 +9,7 @@ ### Color Palette
 | Token       | Hex       | RGB              | Tailwind Class  | Usage                                      |
 |-------------|-----------|------------------|-----------------|---------------------------------------------|
 | Primary     | `#d1ec51` | 209, 236, 81    | `bg-primary`, `text-primary`    | Buttons (default), accents, highlights       |
+| Primary Dark | `#b5d136` | 181, 209, 54   | `bg-primary-dark`, `text-primary-dark` | Selected/hover state for pill buttons, ~15% darker primary |
 | Secondary   | `#00b7b3` | 0, 183, 179     | `bg-secondary`, `text-secondary` | Button hover states, secondary accents       |
 | Background  | `#2b303a` | 43, 48, 58      | `bg-surface`    | Page background, card backgrounds            |
 | Text        | `#ffffff` | 255, 255, 255   | `text-white`    | Primary body text on dark background         |
@@ -96,6 +97,23 @@ ### QuestionCard
 - `has_na` -- show N/A button
 - `details` -- show a text input for additional notes
 
+### RadioButtonGroup
+
+Pill-shaped button group that replaces native radio buttons. Options appear as connected segments with rounded outer edges.
+
+| Prop         | Type                          | Default | Description                    |
+|--------------|-------------------------------|---------|--------------------------------|
+| `modelValue` | `String \| null`              | `null`  | Selected value (v-model)       |
+| `options`    | `Array<{value, label}>`       | required | Options to render              |
+| `name`       | `String`                      | required | HTML radio group name          |
+| `disabled`   | `Boolean`                     | `false` | Disables all options           |
+
+Default state: `bg-primary` with `text-gray-900`.
+Selected & hover state: `bg-primary-dark`.
+Keyboard focus: visible ring using `ring-primary-dark`.
+
+Used in `QuestionCard` (3-option: Yes/No/N/A) and `Screening/Show` (2-option: Yes/No).
+
 ## Icons
 
 Heroicons is the only icon library. No other icon packages.
diff --git a/resources/css/app.css b/resources/css/app.css
index 3671e14..6431d2d 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -11,6 +11,7 @@ @theme {
         'Segoe UI Symbol', 'Noto Color Emoji';
 
     --color-primary: #d1ec51;
+    --color-primary-dark: #b5d136;
     --color-secondary: #00b7b3;
     --color-surface: #2b303a;
 }
diff --git a/resources/js/Components/QuestionCard.vue b/resources/js/Components/QuestionCard.vue
index b0051fe..6eb253e 100644
--- a/resources/js/Components/QuestionCard.vue
+++ b/resources/js/Components/QuestionCard.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { computed } from 'vue'
+import RadioButtonGroup from '@/Components/RadioButtonGroup.vue'
 
 const props = defineProps({
   question: {
@@ -39,6 +40,14 @@ const isTextOnly = computed(() => {
   return !hasRadioButtons.value && props.question.details
 })
 
+const availableOptions = computed(() => {
+  const opts = []
+  if (props.question.has_yes) opts.push({ value: 'yes', label: 'Yes' })
+  if (props.question.has_no) opts.push({ value: 'no', label: 'No' })
+  if (props.question.has_na) opts.push({ value: 'not_applicable', label: 'N/A' })
+  return opts
+})
+
 const updateValue = (value) => {
   emit('update:modelValue', { ...props.modelValue, value })
 }
@@ -65,41 +74,13 @@ const updateTextValue = (event) => {
 
         <!-- Radio button question -->
         <div v-if="hasRadioButtons">
-            <div class="flex flex-wrap gap-4 mb-3">
-                <label v-if="question.has_yes" class="flex items-center gap-2 cursor-pointer">
-                    <input
-                        type="radio"
-                        :name="`question-${question.id}`"
-                        value="yes"
-                        :checked="modelValue.value === 'yes'"
-                        @change="updateValue('yes')"
-                        class="w-4 h-4 text-primary bg-surface border-gray-600 focus:ring-primary focus:ring-offset-surface"
-                    />
-                    <span class="text-white">Yes</span>
-                </label>
-                <label v-if="question.has_no" class="flex items-center gap-2 cursor-pointer">
-                    <input
-                        type="radio"
-                        :name="`question-${question.id}`"
-                        value="no"
-                        :checked="modelValue.value === 'no'"
-                        @change="updateValue('no')"
-                        class="w-4 h-4 text-primary bg-surface border-gray-600 focus:ring-primary focus:ring-offset-surface"
-                    />
-                    <span class="text-white">No</span>
-                </label>
-                <label v-if="question.has_na" class="flex items-center gap-2 cursor-pointer">
-                    <input
-                        type="radio"
-                        :name="`question-${question.id}`"
-                        value="not_applicable"
-                        :checked="modelValue.value === 'not_applicable'"
-                        @change="updateValue('not_applicable')"
-                        class="w-4 h-4 text-primary bg-surface border-gray-600 focus:ring-primary focus:ring-offset-surface"
-                    />
-                    <span class="text-white">N/A</span>
-                </label>
-            </div>
+            <RadioButtonGroup
+                :modelValue="modelValue.value"
+                @update:modelValue="updateValue($event)"
+                :name="`question-${question.id}`"
+                :options="availableOptions"
+                class="mb-3"
+            />
 
             <!-- Details textarea (conditional) -->
             <div v-if="showDetails" class="mt-2">
diff --git a/resources/js/Pages/Screening/Show.vue b/resources/js/Pages/Screening/Show.vue
index 7820600..87f5f6b 100644
--- a/resources/js/Pages/Screening/Show.vue
+++ b/resources/js/Pages/Screening/Show.vue
@@ -3,6 +3,7 @@ import { computed } from 'vue'
 import { Head, useForm } from '@inertiajs/vue3'
 import AppLayout from '@/Layouts/AppLayout.vue'
 import AppButton from '@/Components/AppButton.vue'
+import RadioButtonGroup from '@/Components/RadioButtonGroup.vue'
 
 defineOptions({ layout: AppLayout })
 
@@ -54,30 +55,14 @@ const allAnswered = computed(() => {
                     <span class="text-gray-400 font-mono text-sm mt-1 shrink-0">{{ index + 1 }}.</span>
                     <div class="flex-1">
                         <p class="text-white mb-3">{{ question }}</p>
-                        <div class="flex gap-4">
-                            <label class="flex items-center gap-2 cursor-pointer">
-                                <input
-                                    type="radio"
-                                    :name="`question-${index + 1}`"
-                                    value="yes"
-                                    v-model="form.answers[index + 1]"
-                                    class="w-4 h-4 text-primary bg-surface border-gray-600 focus:ring-primary focus:ring-offset-surface"
-                                    data-cy="yes"
-                                />
-                                <span class="text-white">Yes</span>
-                            </label>
-                            <label class="flex items-center gap-2 cursor-pointer">
-                                <input
-                                    type="radio"
-                                    :name="`question-${index + 1}`"
-                                    value="no"
-                                    v-model="form.answers[index + 1]"
-                                    class="w-4 h-4 text-primary bg-surface border-gray-600 focus:ring-primary focus:ring-offset-surface"
-                                    data-cy="no"
-                                />
-                                <span class="text-white">No</span>
-                            </label>
-                        </div>
+                        <RadioButtonGroup
+                            v-model="form.answers[index + 1]"
+                            :name="`question-${index + 1}`"
+                            :options="[
+                                { value: 'yes', label: 'Yes' },
+                                { value: 'no', label: 'No' },
+                            ]"
+                        />
                         <p v-if="form.errors[`answers.${index + 1}`]" class="text-red-500 text-sm mt-1">
                             {{ form.errors[`answers.${index + 1}`] }}
                         </p>