Improve layout and styling of delete matchgrid page (CO-1705)

app/resources/locales/en_US/default.po

@@ -575,7 +575,10 @@ msgstr "Welcome to {0}."
 
 ### Informational Messages
 msgid "match.in.delete.matchgrid.info"
-msgstr "The database table for this Matchgrid currently exists. You may delete it, or leave it in place. If you delete it, the table CAN NOT BE RESTORED except via database backups. Do you want to delete the physical Matchgrid table ({0})?"
+msgstr "The database table for this Matchgrid currently exists. You may delete it, or leave it in place. If you delete it, the table CAN NOT BE RESTORED except via database backups."
+
+msgid "match.in.delete.matchgrid.prompt"
+msgstr "Do you want to delete the physical Matchgrid table {0}?"
 
 msgid "match.in.matchgrid.display"
 msgstr "Display all records associated with this Matchgrid."

app/templates/Matchgrids/delete.php

@@ -34,14 +34,36 @@
   </div>
 </div>
 
-<p><?= __('match.in.delete.matchgrid.info', [$vv_matchgrid]); ?></p>
+<div class="co-info-topbox">
+  <em class="material-icons">info</em>     
+  <?= __('match.in.delete.matchgrid.info'); ?>
+</div>
+
+<?= $this->Form->create() //$vv_delete_matchgrid_form); ?>
 
-<?php
-  print $this->Form->create(); //$vv_delete_matchgrid_form);
-  print $this->Form->radio('remove',
-                           [
-                              ['value' => 'leave', 'text' => __('match.op.delete.matchgrid.leave', [$vv_matchgrid])],
-                              ['value' => 'remove', 'text' => __('match.op.delete.matchgrid.remove', [$vv_matchgrid])]
-                           ]);
-  print $this->Form->submit(__('match.op.confirm'));
-  print $this->Form->end();
+<fieldset class="content-fieldset">
+  <legend><?= __('match.in.delete.matchgrid.prompt', [$vv_matchgrid]); ?></legend>
+  <?php  
+    $this->Form->setTemplates([
+      'radioWrapper' => '<div class="form-check">{{input}}{{label}}</div>',
+      'nestingLabel' => '<label class="form-check-label" {{attrs}}>{{text}}</label>'
+    ]);
+    print $this->Form->radio('remove',
+      [
+        [
+          'value' => 'leave', 
+          'text' => __('match.op.delete.matchgrid.leave', [$vv_matchgrid]),
+          'class' => 'form-check-input',
+          'checked' => 'checked'
+        ],
+        [
+          'value' => 'remove', 
+          'text' => __('match.op.delete.matchgrid.remove', [$vv_matchgrid]), 
+          'class' => 'form-check-input'
+        ]
+      ]);
+  ?>
+</fieldset>
+
+<?= $this->Form->submit(__('match.op.confirm')) ?>
+<?= $this->Form->end() ?>

app/webroot/css/co-base.css

@@ -354,6 +354,7 @@ body.logged-in #top-menu {
   clear: both;
   padding: 1em;
   background-color: var(--cmg-color-yellow-002);
+  border: 1px solid var(--cmg-color-lightgray-005);
   margin-bottom: 1em;
 }
 #lastLogin p {
@@ -761,6 +762,12 @@ body.logged-in #top-menu {
   margin-bottom: 2em;
   font-style: italic;
 }
+fieldset.content-fieldset {
+  margin-bottom: 1.5em;
+}
+fieldset.content-fieldset legend {
+  float: none;
+}
 /* MATCHGRID CONFIGURATION */
 #matchgrid-config-menu {
   list-style: none;

app/webroot/css/co-color.css

@@ -62,7 +62,7 @@
   --cmg-color-green-007: #28a745;    /* success badge */
 
   --cmg-color-yellow-001: #f5f5bb;    /* yellow warning */
-  --cmg-color-yellow-002: #fbec88;    /* infobox informational area */
+  --cmg-color-yellow-002: #fffeb4;    /* infobox informational area */
   --cmg-color-yellow-003: #ffd;       /* forms: focused input; diffing fields for reconciliation */
 
   --cmg-color-red-001: #fcc;          /* red warning */