16851 - Styling issues in the correction module (#537)

* ui fixes from yui * version * override comment
bcgov · Aug 1, 2023 · bef1b9b · bef1b9b
1 parent cf37c68
commit bef1b9b
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 5 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "business-filings-ui",
-  "version": "6.6.6",
+  "version": "6.6.7",
   "private": true,
   "appName": "Filings UI",
   "sbcName": "SBC Common Components",

diff --git a/src/components/common/Certify.vue b/src/components/common/Certify.vue
@@ -120,6 +120,7 @@ export default class Certify extends Vue {
   @Emit('update:isCertified')
   emitIsCertified (isCertified: boolean): boolean {
     this.emitValid(!!this.trimmedCertifiedBy && isCertified)
+    this.checkboxState = isCertified
     return isCertified
   }
 

diff --git a/src/components/common/DetailComment.vue b/src/components/common/DetailComment.vue
@@ -6,6 +6,8 @@
     <v-textarea
       id="detail-comment-textarea"
       ref="textarea"
+      class="pt-2"
+      filled
       auto-grow
       rows="5"
       persistent-hint
@@ -119,7 +121,6 @@ export default class DetailComment extends Vue {
     .theme--light.v-label {
       padding-left: 12px;
       padding-bottom: 12px;
-      margin-top: -3px;
     }
   }
 }

diff --git a/src/views/Correction.vue b/src/views/Correction.vue
@@ -133,6 +133,7 @@
                   :isCertified.sync="isCertified"
                   :certifiedBy.sync="certifiedBy"
                   :validateForm="showErrors"
+                  :class="{ 'invalid-certify': !certifyFormValid && showErrors}"
                   :entityDisplay="displayName()"
                   :message="certifyText(FilingCodes.ANNUAL_REPORT_OT)"
                   @valid="certifyFormValid=$event"
@@ -192,8 +193,8 @@
       <div class="buttons-right">
         <v-tooltip
           top
-          color="tooltipColor"
           content-class="top-tooltip"
+          transition="fade-transition"
         >
           <template #activator="{ on }">
             <div
@@ -954,6 +955,10 @@ h2 {
   }
 }
 
+.v-tooltip__content {
+  margin-top: -10px;
+}
+
 // Save & Filing Buttons
 #correction-buttons-container {
   padding-top: 2rem;
@@ -975,4 +980,14 @@ h2 {
     margin-left: 0.5rem;
   }
 }
+
+:deep() {
+
+  // To ensure validation for Certify
+  .invalid-certify {
+    .certify-stmt, .title-label {
+      color: $app-red;
+    }
+  }
+}
 </style>