Merge pull request yeatmanlab#523 from yeatmanlab/enh/consent-picker

Consent Picker

cypress/e2e/participant/default-tests/checkLegalDoc.cy.js

@@ -8,7 +8,7 @@ describe('Test to maintain that assent form shows in when signing in with an un-
     cy.login(test_login, test_pw);
     cy.visit('/');
     cy.wait(1000);
-    cy.get('.p-dialog-title').contains('Assent Form').should('be.visible');
+    cy.get('.p-dialog-title').contains('CONSENT FORM').should('be.visible');
     cy.get('.p-confirm-dialog-accept').contains('Continue').should('be.visible');
   });
 });

package.json

@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@bdelab/roam-fluency": "^1.11.19",
-    "@bdelab/roar-firekit": "^6.0.0",
+    "@bdelab/roar-firekit": "^6.0.1",
     "@bdelab/roar-letter": "^1.11.4",
     "@bdelab/roar-multichoice": "^1.11.3",
     "@bdelab/roar-pa": "^2.2.3",

src/assets/styles/theme-tailwind.css

@@ -1083,12 +1083,10 @@
   border-radius: var(--border-radius);
 }
 .p-fieldset .p-fieldset-legend {
-  padding: 1.25rem;
-  border: 1px solid var(--surface-d);
+  padding: 0.5rem;
   color: var(--text-color);
-  background: var(--surface-b);
   font-weight: 700;
-  border-radius: var(--border-radius);
+  font-size: 1.25rem;
 }
 .p-fieldset.p-fieldset-toggleable .p-fieldset-legend {
   padding: 0;
@@ -1117,7 +1115,7 @@
   color: var(--surface-900);
 }
 .p-fieldset .p-fieldset-content {
-  padding: 1.25rem;
+  padding: 0.25rem;
 }
 
 .p-divider .p-divider-content {

src/components/ConsentModal.vue

@@ -18,6 +18,7 @@ import { useToast } from 'primevue/usetoast';
 import { marked } from 'marked';
 import { useAuthStore } from '@/store/auth';
 import { useI18n } from 'vue-i18n';
+import _lowerCase from 'lodash/lowerCase';
 
 const authStore = useAuthStore();
 const i18n = useI18n();
@@ -26,12 +27,7 @@ const props = defineProps({
   consentText: { type: String, require: true, default: 'Text Here' },
   consentType: { type: String, require: true, default: 'Consent' },
 });
-const consentHeader = {
-  tos: 'Terms of Service',
-  consent: 'Consent',
-  assent: 'Assent',
-  'assent-es': 'Asentimiento',
-};
+
 const emit = defineEmits(['accepted', 'delayed']);
 
 const confirm = useConfirm();
@@ -49,8 +45,8 @@ onMounted(() => {
   confirm.require({
     group: 'templating',
     header: props.consentType.includes('-es')
-      ? `Formulario de ${consentHeader[props.consentType]}`
-      : `${consentHeader[props.consentType]} Form`,
+      ? `FORMULARIO DE ${_lowerCase(props.consentType).toUpperCase()}`
+      : `${_lowerCase(props.consentType).toUpperCase()} FORM`,
     icon: 'pi pi-question-circle',
     acceptLabel: i18n.t('consentModal.acceptButton'),
     acceptIcon: 'pi pi-check',
@@ -59,8 +55,8 @@ onMounted(() => {
         severity: 'info',
         summary: i18n.t('consentModal.toastHeader'),
         detail: props.consentType.includes('-es')
-          ? `Estado de ${consentHeader[props.consentType]} actualizado`
-          : `${consentHeader[props.consentType]} status updated.`,
+          ? `ESTADO DE ${_lowerCase(props.consentType).toUpperCase()} ACTUALIZADO`
+          : `${_lowerCase(props.consentType).toUpperCase()} STATUS UPDATED.`,
         life: 3000,
       });
       emit('accepted');