From b7e7de6e5e39986fc70e5a80249658a4539eda69 Mon Sep 17 00:00:00 2001
From: Arlen Johnson <arlen@sphericalcowgroup.com>
Date: Sun, 9 Feb 2025 17:39:10 -0500
Subject: [PATCH] Improve accept/decline buttons in invitation acceptor
 (CFM-422)

---
 .../InvitationAccepters/dispatch.inc          | 20 +++++++++++++++----
 app/resources/locales/en_US/operation.po      |  3 +++
 app/webroot/css/co-base.css                   | 15 +++++++++-----
 3 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/app/plugins/CoreEnroller/templates/InvitationAccepters/dispatch.inc b/app/plugins/CoreEnroller/templates/InvitationAccepters/dispatch.inc
index 9c8b2ad5..c3f70458 100644
--- a/app/plugins/CoreEnroller/templates/InvitationAccepters/dispatch.inc
+++ b/app/plugins/CoreEnroller/templates/InvitationAccepters/dispatch.inc
@@ -39,16 +39,28 @@ if($vv_action == 'dispatch') {
   print $this->element('form/listItem', [
     'arguments' => [
       'fieldName' => 'accepted',
-      'fieldLabel' => "Accept this invitation?",
+      'fieldLabel' => __d('operation','accept.invitation'),
       'fieldOptions' => [
         'type' => 'radio',
         'options' => [
-          ['value' => '1', 'text' => 'Accept'],
-          ['value' => '0', 'text' => 'Decline'],
+          ['value' => '1', 'text' => __d('operation','accept')],
+          ['value' => '0', 'text' => __d('operation','decline')],
         ],
         'empty' => false,
         'required' => true,
-        'class' => 'crazything'
+        'class' => 'form-check-input'
       ]
   ]]);
+?>
+  <script>
+    $('#accepted-1').click(function() {
+      $(this).closest('label').addClass('is-selected');
+      $("label[for='accepted-0']").removeClass('is-selected');
+    });
+    $('#accepted-0').click(function() {
+      $(this).closest('label').addClass('is-selected');
+      $("label[for='accepted-1']").removeClass('is-selected');
+    });
+  </script>
+<?php  
 }
\ No newline at end of file
diff --git a/app/resources/locales/en_US/operation.po b/app/resources/locales/en_US/operation.po
index 28923127..7a5c2ff2 100644
--- a/app/resources/locales/en_US/operation.po
+++ b/app/resources/locales/en_US/operation.po
@@ -27,6 +27,9 @@
 msgid "accept"
 msgstr "Accept"
 
+msgid "accept.invitation"
+msgstr "Accept this invitation?"
+
 msgid "acknowledge"
 msgstr "Acknowledge"
 
diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css
index 649c47d3..5f73e189 100644
--- a/app/webroot/css/co-base.css
+++ b/app/webroot/css/co-base.css
@@ -2003,15 +2003,20 @@ body.start .submit {
 #dispatch-list-container ul.fields li.fields-accepted .field-info label {
   display: flex;
   align-items: center;
+  gap: 0.25em;
   padding: 0.5em 1.5em 0.5em 1.25em;
-  background-color: var(--cmg-color-highlight-006);
-  border: 1px solid var(--cmg-color-highlight-008);
+  background-color: var(--cmg-color-bg-005);
+  border: 1px solid var(--cmg-color-bg-006);
   border-radius: 3px;
   box-shadow: 0 1px 1px 0 rgba(0,0,0,.14),0 3px 1px -3px rgba(0,0,0,.2),0 1px 3px 0 rgba(0,0,0,.12);
 }
-#dispatch-list-container ul.fields li.fields-accepted .field-info label:last-child {
-  background-color: var(--cmg-color-bg-005);
-  border: 1px solid var(--cmg-color-bg-006);
+#dispatch-list-container ul.fields li.fields-accepted .field-info label[for='accepted-1'].is-selected {
+  background-color: var(--cmg-color-highlight-006);
+  border: 1px solid var(--cmg-color-highlight-008);
+  color: var(--cmg-color-highlight-007);
+}
+#dispatch-list-container ul.fields li.fields-accepted .field-info label .form-check-input {
+  margin-top: 0;
 }
 #dispatch-list-container ul.fields li.fields-accepted .field .radio {
   gap: 0.5em;