[FSADT1-1102] Can not click button in Accept/Reject (using Edge) (#722)

* fix: adjust approve/reject modals * fix: apply css class defined on Figma * fix: remove remaining space in approve/reject modals * fix: reduce button height * Revert "fix: reduce button height" This reverts commit db97a14.
bcgov · Jan 9, 2024 · 1b3962e · 1b3962e
1 parent 5637c43
commit 1b3962e
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 74 deletions.
diff --git a/frontend/src/assets/styles/global.scss b/frontend/src/assets/styles/global.scss
@@ -1012,6 +1012,15 @@ cds-modal-footer {
   padding: 1rem 1rem 1rem 1rem;
 }
 
+cds-modal:is(#reject-modal, #approve-modal) cds-modal-footer {
+  padding-top: 0;
+  height: auto;
+}
+
+cds-modal:is(#reject-modal, #approve-modal) cds-modal-footer-button {
+  height: min-content;
+}
+
 cds-modal-footer-button::part(button) {
   border-radius: 0.25rem;
   height: 75%;
@@ -1022,6 +1031,10 @@ cds-modal-footer-button::part(button) {
   --cds-button-danger-hover: var(--light-theme-button-danger-hover, #b32001);
 }
 
+cds-modal:is(#reject-modal, #approve-modal) cds-modal-footer-button::part(button) {
+  padding-bottom: 1rem;
+}
+
 .cds--modal-close-btn {
   margin-right: 0.25rem;
 }
@@ -1296,6 +1309,10 @@ Useful for scrolling to the *start* of an HTML element without having it covered
   display: unset;
 }
 
+.invisible {
+  visibility: hidden;
+}
+
 /* Small (up to 671px) */
 @media screen and (max-width: 671px) {
   .content-landing {
@@ -1340,11 +1357,6 @@ Useful for scrolling to the *start* of an HTML element without having it covered
     padding-bottom: 1rem;
   }
 
-  cds-modal#reject-modal cds-modal-body.grouping-12,
-  cds-modal#approve-modal cds-modal-body {
-    margin-bottom: 3rem;
-  }
-
   .screen {
     padding: 1.5rem 1rem 2.5rem 1rem;
     flex-direction: column;
@@ -1548,27 +1560,6 @@ Useful for scrolling to the *start* of an HTML element without having it covered
     width: 40%;
   }
 
-  cds-modal#reject-modal::part(dialog),
-  cds-modal#approve-modal::part(dialog) {
-    width: 95%;
-  }
-
-  cds-modal#reject-modal cds-modal-body.grouping-12,
-  cds-modal#approve-modal cds-modal-body {
-    margin-bottom: 3rem;
-  }
-
-  cds-modal#reject-modal cds-modal-body.grouping-12 {
-    height: 19rem;
-  }
-
-  cds-modal#reject-modal cds-modal-footer,
-  cds-modal#approve-modal cds-modal-footer {
-    height: 6rem;
-    margin: -2rem 0 -2rem 0;
-    padding: 0 1rem 1rem 1rem !important;
-  }
-
   .mg-sd-25 {
     margin: 0rem 2.5rem 2rem 2rem;
   }
@@ -1635,17 +1626,6 @@ Useful for scrolling to the *start* of an HTML element without having it covered
     height: 16rem;
   }
 
-  cds-modal#reject-modal cds-modal-body.grouping-12 {
-    margin: 1rem 1rem 3rem 1rem;
-    height: 19rem;
-  }
-  cds-modal#reject-modal cds-modal-footer,
-  cds-modal#approve-modal cds-modal-footer {
-    height: 6rem;
-    margin: -2rem 0 -2rem 0;
-    padding: 0 1rem 1rem 1rem !important;
-  }
-
   cds-modal#reject-modal cds-modal-body.grouping-12 .grouping-02,
   cds-modal#reject-modal cds-modal-body.grouping-12 .grouping-03 {
     width: auto;
@@ -1702,17 +1682,6 @@ Useful for scrolling to the *start* of an HTML element without having it covered
     height: 22rem;
   }
 
-  cds-modal#reject-modal cds-modal-body.grouping-12 {
-    margin: 1rem 1rem 3rem 1rem;
-    height: 19rem;
-  }
-  cds-modal#reject-modal cds-modal-footer,
-  cds-modal#approve-modal cds-modal-footer {
-    height: 6rem;
-    margin: -2rem 0 -2rem 0;
-    padding: 0 1rem 1rem 1rem !important;
-  }
-
   cds-modal#reject-modal cds-modal-body.grouping-12 .grouping-02,
   cds-modal#reject-modal cds-modal-body.grouping-12 .grouping-03 {
     width: auto;
@@ -1748,17 +1717,6 @@ Useful for scrolling to the *start* of an HTML element without having it covered
     height: 29.8125rem;
   }
 
-  cds-modal#reject-modal cds-modal-body.grouping-12 {
-    margin: 1rem 1rem 3rem 1rem;
-    height: 19rem;
-  }
-  cds-modal#reject-modal cds-modal-footer,
-  cds-modal#approve-modal cds-modal-footer {
-    height: 6rem;
-    margin: -2rem 0 -2rem 0;
-    padding: 0 1rem 1rem 1rem !important;
-  }
-
   cds-modal#reject-modal cds-modal-body.grouping-12 .grouping-02,
   cds-modal#reject-modal cds-modal-body.grouping-12 .grouping-03 {
     width: auto;
@@ -1795,17 +1753,6 @@ Useful for scrolling to the *start* of an HTML element without having it covered
     height: 31.375rem;
   }
 
-  cds-modal#reject-modal cds-modal-body.grouping-12 {
-    margin: 1rem 1rem 3rem 1rem;
-    height: 19rem;
-  }
-  cds-modal#reject-modal cds-modal-footer,
-  cds-modal#approve-modal cds-modal-footer {
-    height: 6rem;
-    margin: -2rem 0 -2rem 0;
-    padding: 0 1rem 1rem 1rem !important;
-  }
-
   cds-modal#reject-modal cds-modal-body.grouping-12 .grouping-02,
   cds-modal#reject-modal cds-modal-body.grouping-12 .grouping-03 {
     width: auto;

diff --git a/frontend/src/components/forms/TextInputComponent.vue b/frontend/src/components/forms/TextInputComponent.vue
@@ -120,7 +120,7 @@ const selectValue = (event: any) => {
 </script>
 
 <template>
-  <div class="grouping-02" v-if="enabled">
+  <div v-if="enabled" class="grouping-02" :class="$attrs.class">
     <div class="input-group">
       <div class="cds--text-input__label-wrapper">
         <label :id="id + 'Label'" 

diff --git a/frontend/src/pages/SubmissionReviewPage.vue b/frontend/src/pages/SubmissionReviewPage.vue
@@ -505,7 +505,7 @@ const matchingData = computed(() => {
         </cds-modal-header>
 
         <cds-modal-body>
-          <p>A new client number will be created and an email will be sent to the submitter.</p>
+          <p class="body-compact-01">A new client number will be created and an email will be sent to the submitter.</p>
         </cds-modal-body>
 
         <cds-modal-footer>
@@ -539,7 +539,7 @@ const matchingData = computed(() => {
         </cds-modal-header>
 
         <cds-modal-body class="grouping-12">
-          <p>This submission will be rejected and the submitter will receive an email notification. Please choose the reason below:</p>
+          <p class="body-compact-01">This submission will be rejected and the submitter will receive an email notification. Please choose the reason below:</p>
           <multiselect-input-component
             id="reject_reason_id"
             label="Reason for rejection"
@@ -551,7 +551,7 @@ const matchingData = computed(() => {
             @update:selected-value="event => selectedRejectReasons = event"        
           />
           <text-input-component
-            v-if="showClientNumberField"
+            :class="{invisible: !showClientNumberField}"
             id="reject_reason_message"
             label="Matching client number"
             placeholder=""