use radios

app/components/workflow-review/index.css

@@ -35,5 +35,9 @@ table td {
 
 .comment-text-area {
   resize: none;
-  min-height: 38px!important;
+  min-height: 38px !important;
+}
+
+.swal2-radio {
+  flex-direction: column !important;
 }

app/components/workflow-review/index.js

@@ -126,17 +126,25 @@ export default class WorkflowReview extends Component {
 
     const result = yield swal
       .mixin({
-        input: 'checkbox',
-        inputPlaceholder:
-          "I agree to the above statement on today's date. I understand that if I proceed and do not check this box, my submission will not be deposited to above repository.",
         confirmButtonText: 'Next →',
+        input: 'radio',
+        inputOptions: {
+          agree: `I agree to the above statement on today's date.`,
+          noAgree:
+            'I do not agree to the above statement and I understand that if I proceed and do not check this box, my submission will not be deposited to above repository.',
+        },
+        inputValidator: (value) => {
+          if (!value) {
+            return 'You need to choose something!';
+          }
+        },
         progressSteps: reposWithAgreementText.map((repo, index) => index + 1),
       })
       .queue(reposWithAgreementText);
     if (result.value) {
       let reposThatUserAgreedToDeposit = reposWithAgreementText.filter((repo, index) => {
         // if the user agreed to depost to this repo === 1
-        if (result.value[index] === 1) {
+        if (result.value[index] === 'agree') {
           return repo;
         }
       });

app/styles/app.css

@@ -328,6 +328,18 @@ input[type='date']::-webkit-outer-spin-button {
   z-index: 99999 !important;
 }
 
+.swal2-radio {
+  display: block !important;
+}
+
+.swal2-radio label .swal2-label {
+  font-size: 1rem !important;
+}
+
+.swal2-radio label:not(:last-child) {
+  margin-bottom: 4px !important;
+}
+
 /*
 * End Alpaca
 */