Improve accept/decline layout in InvitationAccepters plugin (CFM-428)

app/plugins/CoreEnroller/src/Model/Table/PetitionAcceptancesTable.php

@@ -121,7 +121,7 @@ public function processReply(int $petitionId, int $enrollmentFlowStepId, bool $a
       $expires = $acceptance->created->addSeconds($ia->invitation_validity);
 
       if($expires->isPast()) {
-        throw new \RuntimeException('error.PetitionAcceptances.expired');
+        throw new \RuntimeException(__d('core_enroller','error.PetitionAcceptances.expired'));
       }
     }
 

app/plugins/CoreEnroller/templates/InvitationAccepters/dispatch.inc

@@ -29,7 +29,9 @@ declare(strict_types = 1);
 
 // This view is intended to work with dispatch
 if($vv_action == 'dispatch') {
-  print $vv_config->welcome_message . "\n";
+  if(!empty($vv_config->welcome_message)) {
+    print '<li class="dispatch-welcome">' . $vv_config->welcome_message . "</li>\n";
+  }
 
   // Make the Form fields editable
   $this->Field->enableFormEditMode();
@@ -45,7 +47,8 @@ if($vv_action == 'dispatch') {
           ['value' => '0', 'text' => 'Decline'],
         ],
         'empty' => false,
-        'required' => true
+        'required' => true,
+        'class' => 'crazything'
       ]
   ]]);
 }

app/webroot/css/co-base.css

@@ -1607,6 +1607,16 @@ ul.form-list li.info-title {
 .form-control {
   font-size: 1em; /* bootstrap override */
 }
+.field .radio {
+  display: flex;
+  gap: 1em;
+}
+.field .radio input {
+  margin-right: 0.25em;
+}
+.field .radio.required {
+  color: var(--cmg-color-body-txt);
+}
 /* DATE and TIME PICKERS */
 .cm-datetime-picker {
   display: flex;
@@ -1919,6 +1929,35 @@ body.start .submit {
 #dispatch-list-container textarea {
   padding: 0.5rem;
 }
+#dispatch-list-container li.dispatch-welcome {
+  margin: 1em 1em 2em;
+  font-size: 1.1em;
+}
+#dispatch-list-container ul.fields li.fields-accepted .field {
+  background-color: var(--cmg-color-bg-001);
+  border: 1px solid var(--cmg-color-bg-006);
+  padding: 1em 1.5em 1.5em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+#dispatch-list-container ul.fields li.fields-accepted .field-info label {
+  display: flex;
+  align-items: center;
+  padding: 0.5em 1.5em 0.5em 1.25em;
+  background-color: var(--cmg-color-highlight-006);
+  border: 1px solid var(--cmg-color-highlight-008);
+  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 .radio {
+  gap: 0.5em;
+}
 /* DIALOG BOX */
 #dialog .modal-header {
   background-color: var(--cmg-color-bg-004);

app/webroot/css/co-responsive.css

@@ -120,6 +120,14 @@
   .duet-date__dialog {
     left: -20em;
   }
+  /* DISPATCH */
+  #dispatch-list-container ul.fields li.fields-accepted .field {
+    justify-content: space-between;
+    padding: 1em 1em 1em 1.25em;
+  }
+  #dispatch-list-container ul.fields li.fields-accepted .field-info {
+    padding: 0;
+  }
   /* DENSITY SETTINGS (from User Settings Menu; Medium is default) */
   /* Density "small" */
   html.density-small h1 {