15051 Second update to local filings to respond to UX observations (#491

) * 15051 Second update to local filings to respond to UX observations * Cleanup * Fixed comment * Renamed class * Updated to respond to Sev's PR comments * Updated package version after rebase * Fixed comment
bcgov · Apr 27, 2023 · 2e06b47 · 2e06b47
1 parent a8bfa8a
commit 2e06b47
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 77 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.3.5",
+  "version": "6.3.6",
   "private": true,
   "appName": "Filings UI",
   "sbcName": "SBC Common Components",

diff --git a/src/components/common/Certify.vue b/src/components/common/Certify.vue
@@ -1,35 +1,35 @@
 <template>
   <v-card flat>
-    <div class="certify-container">
-      <div class="certifiedby-container">
-        <label>Legal Name</label>
-        <div class="value certifiedby">
-          <v-text-field
-            filled
-            persistent-hint
-            id="certified-by-textfield"
-            label="Person's legal name"
-            hint="Legal name of authorized person"
-            :value="certifiedBy"
-            :rules="[ v => !!v || 'A person\'s legal name is required.']"
-            @input="emitCertifiedBy($event)"
-          />
-        </div>
-      </div>
-      <v-checkbox
-        :value="isCertified"
-        @change="emitIsCertified($event)"
-      >
-        <template v-slot:label>
-          <div class="certify-stmt">
-            I, <strong>{{trimmedCertifiedBy || '[Legal Name]'}}</strong>, certify that I have relevant knowledge
-            of the {{entityDisplay || 'association'}} and that I am authorized to make this filing.
-          </div>
-        </template>
-      </v-checkbox>
-      <p class="certify-clause">Date: {{getCurrentDate}}</p>
-      <p class="certify-clause">{{message}}</p>
-    </div>
+    <v-row no-gutters class="pl-4 pr-4 pt-4">
+      <v-col cols="12" sm="3">
+        <label class="title-label">Legal Name</label>
+      </v-col>
+      <v-col cols="12" sm="9">
+        <v-text-field
+          filled
+          persistent-hint
+          id="certified-by-textfield"
+          label="Person's legal name"
+          hint="Legal name of authorized person"
+          :value="certifiedBy"
+          :rules="[ v => !!v || 'A person\'s legal name is required.']"
+          @input="emitCertifiedBy($event)"
+        />
+        <v-checkbox
+          :value="isCertified"
+          @change="emitIsCertified($event)"
+        >
+          <template v-slot:label>
+            <div class="certify-stmt">
+              I, <strong>{{trimmedCertifiedBy || '[Legal Name]'}}</strong>, certify that I have relevant knowledge
+              of the {{entityDisplay || 'association'}} and that I am authorized to make this filing.
+            </div>
+          </template>
+        </v-checkbox>
+        <p class="certify-clause">Date: {{getCurrentDate}}</p>
+        <p class="certify-clause">{{message}}</p>
+      </v-col>
+    </v-row>
   </v-card>
 </template>
 
@@ -100,37 +100,6 @@ export default class Certify extends Vue {
   font-size: $px-14;
 }
 
-.certify-container {
-  padding: 1.25rem;
-}
-
-.certifiedby-container {
-  display: flex;
-  flex-flow: column nowrap;
-  position: relative;
-
-  > label:first-child {
-    font-weight: 700;
-    margin-bottom: 2rem;
-  }
-}
-
-@media (min-width: 768px) {
-  .certifiedby-container {
-    flex-flow: row nowrap;
-
-    > label:first-child {
-      flex: 0 0 auto;
-      padding-right: 2rem;
-      width: 12rem;
-    }
-  }
-}
-
-.value.certifiedby {
-  width: 100%;
-}
-
 .certify-clause {
   padding-left: 2rem;
   color: black;
@@ -142,4 +111,9 @@ export default class Certify extends Vue {
   font-size: $px-14;
   color: black;
 }
+
+.title-label {
+  color: $gray9;
+  font-weight: bold;
+}
 </style>
diff --git a/src/views/ConsentContinuationOut.vue b/src/views/ConsentContinuationOut.vue
@@ -65,7 +65,7 @@
             <section>
               <header>
                 <h2>Ledger Detail</h2>
-                <p>Enter a detail that will appear on the ledger for this entity.</p>
+                <p class="grey-text">Enter a detail that will appear on the ledger for this entity.</p>
               </header>
               <div :class="{ 'invalid-section': !detailCommentValid && showErrors }" id="detail-comment-section">
                 <v-card flat class="py-8 px-5">
@@ -74,8 +74,9 @@
                       <strong>Detail</strong>
                     </v-col>
                     <v-col cols="12" sm="9">
-                      <p class="detail-text">{{defaultComment}}</p>
+                      <p class="grey-text font-weight-bold">{{defaultComment}}</p>
                       <DetailComment
+                        ref="detailCommentRef"
                         v-model="detailComment"
                         placeholder="Add a Detail that will appear on the ledger for this entity."
                         :maxLength="maxDetailCommentLength"
@@ -91,7 +92,7 @@
             <section>
               <header>
                 <h2>Documents Delivery</h2>
-                <p>Copies of the consent to continue out documents will be sent to the email addresses listed below.</p>
+                <p class="grey-text">Copies of the consent to continue out documents will be sent to the email addresses listed below.</p>
               </header>
               <div :class="{ 'invalid-section': !documentDeliveryValid && showErrors }" id="document-delivery-section">
                 <v-card flat class="py-8 px-5">
@@ -111,7 +112,7 @@
             <section>
               <header>
                 <h2>Certify</h2>
-                <p>Enter the legal name of the person authorized to complete and submit this correction.</p>
+                <p class="grey-text">Enter the legal name of the person authorized to complete and submit this correction.</p>
               </header>
               <div :class="{ 'invalid-section': !certifyFormValid && showErrors }" id="certify-form-section">
                 <Certify
@@ -128,7 +129,7 @@
             <section>
               <header>
                 <h2>Court Order and Plan of Arrangement</h2>
-                <p>If this filing is pursuant to a court order, enter the court order number. If this filing is pursuant
+                <p class="grey-text">If this filing is pursuant to a court order, enter the court order number. If this filing is pursuant
                   to a plan of arrangement, enter the court order number and select Plan of Arrangement.</p>
               </header>
               <div :class="{ 'invalid-section': !courtOrderValid && showErrors }" id="court-order-section">
@@ -566,6 +567,10 @@ export default class ConsentContinuationOut extends Vue {
     // if there is an invalid component, scroll to it
     if (!this.isPageValid) {
       this.showErrors = true
+      if (!this.detailCommentValid) {
+        // Show error message of text area if invalid
+        this.$refs.detailCommentRef.$refs.textarea.error = true
+      }
       await this.validateAndScroll(this.validFlags, this.validComponents)
       return
     }
@@ -881,11 +886,6 @@ h2::before {
   content: counter(header-counter) '. ';
 }
 
-.detail-text {
-  color: $gray7;
-  font-weight: bold;
-}
-
 article {
   .v-card {
     line-height: 1.2rem;
@@ -936,14 +936,14 @@ h2 {
   }
 }
 
-// Fix font size to stay consistent between all components.
+// Fix font size and color to stay consistent.
 :deep(){
   #document-delivery, #court-order-label, #poa-label {
     font-size: $px-14;
   }
 
-  .value.certifiedby {
-    padding-left: 3rem;
+  .certify-clause, .certify-stmt, .grey-text {
+    color: $gray7;
   }
 }
 </style>