Merge pull request #557 from shruthi-rapala/angular-upgrade

EMBCDFA # 1274 - Fixed the DFA UI issues
bcgov · Sep 4, 2024 · d5f7980 · d5f7980
2 parents 1518706 + 9383fce
commit d5f7980
Show file tree

Hide file tree

Showing 11 changed files with 42 additions and 55 deletions.
diff --git a/dfa/src/UI/embc-dfa/src/app/core/components/dfa-attachment/dfa-attachment.component.html b/dfa/src/UI/embc-dfa/src/app/core/components/dfa-attachment/dfa-attachment.component.html
@@ -11,7 +11,7 @@
         >
           + Add {{ title }}
         </button>
-        <mat-card appearance="outlined" *ngIf="showFileUpload">
+        <mat-card appearance="outlined" *ngIf="showFileUpload" style="padding: 12px;">
           <div class="row">
             <div class="col-md-6">
               <b>{{title}}<span style="color:red;" *ngIf="requiredDocumentType !== null">*</span></b><br/>

diff --git a/...ents/secondary-applicant-warning-dialog/secondary-applicant-warning-dialog.component.html b/...ents/secondary-applicant-warning-dialog/secondary-applicant-warning-dialog.component.html
@@ -1,4 +1,4 @@
-<h2><b>Add Secondary Applicant</b></h2>
+<h2 class="dialog-title"><b>Add Secondary Applicant</b></h2>
 
 <mat-dialog-content>
   <div class="row">

diff --git a/...p/sharedModules/forms/dfa-application-main-forms/clean-up-log/clean-up-log.component.html b/...p/sharedModules/forms/dfa-application-main-forms/clean-up-log/clean-up-log.component.html
@@ -131,7 +131,7 @@
                 + Add to clean up log
               </button>
 
-              <mat-card appearance="outlined" *ngIf="showCleanUpWorkForm">
+              <mat-card appearance="outlined" *ngIf="showCleanUpWorkForm" style="padding: 12px;">
                 <p class="sub-heading" style="font-size: 15px">
                   New Clean Up Log
                 </p>
@@ -275,7 +275,7 @@
       </div>
   </form>
 
-  <ng-container>
+  <ng-container >
     <div class="row">
       <div class="col-md-8">
         <app-dfa-attachment
@@ -372,7 +372,7 @@
         </table>
 
         <div  *ngIf="cleanUpWorkFileDataSource.data.length > 0">
-          <br /><br/>
+          <br/>
         </div>
         <div  *ngIf="cleanUpWorkFileDataSource.data.length == 0">
           <br />No cleanup photos were added.<br/>

diff --git a/...rms/dfa-application-main-forms/damaged-items-by-room/damaged-items-by-room.component.html b/...rms/dfa-application-main-forms/damaged-items-by-room/damaged-items-by-room.component.html
@@ -100,7 +100,7 @@
                 + Add Room & Items
               </button>
 
-              <mat-card appearance="outlined" *ngIf="showDamagedRoomForm">
+              <mat-card appearance="outlined" *ngIf="showDamagedRoomForm" style="padding: 12px;">
                 <p class="sub-heading" style="font-size: 15px">
                   New room and items
                 </p>

diff --git a/...a-application-main-forms/damaged-property-address/damaged-property-address.component.html b/...a-application-main-forms/damaged-property-address/damaged-property-address.component.html
@@ -35,7 +35,7 @@
                   [readOnly]="isReadOnly"
                 ></app-bc-address>
               </div>
-            </mat-radio-group><br/><br/>
+            </mat-radio-group>
           </div>
         </div>
 
@@ -52,7 +52,7 @@
               <mat-radio-button value=true>Yes</mat-radio-button>&nbsp;&nbsp;<mat-radio-button value=false>No</mat-radio-button>
             </mat-radio-group>
           </div>
-        </div><br/><br/>
+        </div>
 
         <div class="row" *ngIf="isHomeowner === true || isResidentialTenant === true">
           <div class="col-md-12 bottomspace">
@@ -67,7 +67,6 @@
               <mat-radio-button value=true>Yes</mat-radio-button>&nbsp;&nbsp;<mat-radio-button value=false>No</mat-radio-button>
             </mat-radio-group>
             <div *ngIf="damagedPropertyAddressForm.get('occupyAsPrimaryResidence').value != 'false'">
-              <br/><br/>
             </div>
             <div class="row radio-extra-label" *ngIf="damagedPropertyAddressForm.get('occupyAsPrimaryResidence').value == 'false'">
               You must have occupied the property as your principal residence at the time of te event to be eligible for DFA. <br/><br/>
@@ -103,7 +102,7 @@
               required
               aria-label="Select an option">
               <mat-radio-button value=true>Yes</mat-radio-button>&nbsp;&nbsp;<mat-radio-button value=false>No</mat-radio-button>
-            </mat-radio-group><br/><br/>
+            </mat-radio-group>
           </div>
         </div>
 
@@ -118,7 +117,7 @@
               required
               aria-label="Select an option">
               <mat-radio-button value=true>Yes</mat-radio-button>&nbsp;&nbsp;<mat-radio-button value=false>No</mat-radio-button>
-            </mat-radio-group><br/><br/>
+            </mat-radio-group>
           </div>
         </div>
 
@@ -133,7 +132,7 @@
               required
               aria-label="Select an option">
               <mat-radio-button value=true>Yes</mat-radio-button>&nbsp;&nbsp;<mat-radio-button value=false>No</mat-radio-button>
-            </mat-radio-group><br/><br/>
+            </mat-radio-group>
           </div>
         </div>
 
@@ -148,7 +147,7 @@
               required
               aria-label="Select an option">
               <mat-radio-button value=true>Yes</mat-radio-button>&nbsp;&nbsp;<mat-radio-button value=false>No</mat-radio-button>
-            </mat-radio-group><br/><br/>
+            </mat-radio-group>
           </div>
         </div>
 
@@ -163,7 +162,7 @@
               required
               aria-label="Select an option">
               <mat-radio-button value=true>Yes</mat-radio-button>&nbsp;&nbsp;<mat-radio-button value=false>No</mat-radio-button>
-            </mat-radio-group><br/><br/>
+            </mat-radio-group>
           </div>
         </div>
 
@@ -178,7 +177,7 @@
               required
               aria-label="Select an option">
               <mat-radio-button value=true>Yes</mat-radio-button>&nbsp;&nbsp;<mat-radio-button value=false>No</mat-radio-button>
-            </mat-radio-group><br/><br/>
+            </mat-radio-group>
           </div>
         </div>
 
@@ -193,7 +192,7 @@
               required
               aria-label="Select an option">
               <mat-radio-button value=true>Yes</mat-radio-button>&nbsp;&nbsp;<mat-radio-button value=false>No</mat-radio-button>
-            </mat-radio-group><br/><br/>
+            </mat-radio-group>
           </div>
         </div>
 
@@ -208,7 +207,7 @@
               required
               aria-label="Select an option">
               <mat-radio-button value=true>Yes</mat-radio-button>&nbsp;&nbsp;<mat-radio-button value=false>No</mat-radio-button>
-            </mat-radio-group><br/><br/>
+            </mat-radio-group>
           </div>
         </div>
 
@@ -246,7 +245,7 @@
                 {{accountPlaceHolderLabel + ' Legal Name is required'}}</mat-error
               >
             </mat-form-field>
-            <br/><br/>
+
           </div>
         </div>
 
@@ -296,12 +295,12 @@
                 Maximum length is 100 characters</mat-error
               >
             </mat-form-field>
-            <br/><br/><br/>
+
           </div>
         </div>
 
         <div *ngIf="damagedPropertyAddressForm.get('onAFirstNationsReserve').value != 'true'">
-          <br/><br/>
+
         </div>
 
         <div class="row" *ngIf="isHomeowner === true || isResidentialTenant === true">
@@ -315,7 +314,7 @@
               class="primary-radio-group horizontal-radio-group"
               aria-label="Select an option">
               <mat-radio-button value=true>Yes</mat-radio-button>&nbsp;&nbsp;<mat-radio-button value=false>No</mat-radio-button>
-            </mat-radio-group><br/><br/>
+            </mat-radio-group>
           </div>
         </div>
 

diff --git a/...src/app/sharedModules/forms/dfa-application-main-forms/occupants/occupants.component.html b/...src/app/sharedModules/forms/dfa-application-main-forms/occupants/occupants.component.html
@@ -304,7 +304,7 @@
                 + Add secondary applicant
               </button>
 
-              <mat-card appearance="outlined" *ngIf="showSecondaryApplicantForm">
+              <mat-card appearance="outlined" *ngIf="showSecondaryApplicantForm" style="padding: 12px;">
                 <p class="sub-heading" style="font-size: 15px">
                   New secondary applicant
                 </p>
@@ -584,7 +584,7 @@
                 + Add Other Contact
               </button>
 
-              <mat-card appearance="outlined" *ngIf="showOtherContactForm">
+              <mat-card appearance="outlined" *ngIf="showOtherContactForm" style="padding: 12px;">
                 <p class="sub-heading" style="font-size: 15px">
                   {{otherContactText}}
                 </p>

diff --git a/...edModules/forms/dfa-application-main-forms/property-damage/property-damage.component.html b/...edModules/forms/dfa-application-main-forms/property-damage/property-damage.component.html
@@ -61,10 +61,10 @@
               >
             </mat-form-field>
             <mat-error *ngIf="propertyDamageForm.hasError('noCauseOfDamage')">
-              <br/>At least one cause of damage is required.
+              At least one cause of damage is required.
             </mat-error>
           </div>
-        </div><br/><br/>
+        </div><br/>
 
         <div class="row">
           <p class="sub-heading" style="font-size: 15px">
@@ -146,7 +146,7 @@
               >
             </mat-form-field>
           </div>
-        </div><br/><br/>
+        </div><br/>
 
         <div class="row">
           <p class="sub-heading" style="font-size: 15px">
@@ -175,7 +175,7 @@
                 Maximum length is 2000 characters</mat-error
               >
           </mat-form-field>
-        </div><br/>
+        </div>
 
         <div class="row" *ngIf="isResidentialTenant === true || isHomeowner === true">
           <div class="col-md-12 bottomspace">
@@ -190,7 +190,7 @@
               <mat-radio-button value=true>Yes</mat-radio-button>&nbsp;&nbsp;<mat-radio-button value=false>No</mat-radio-button>
             </mat-radio-group>
           </div>
-        </div><br/><br/>
+        </div><br/>
 
         <div class="row" *ngIf="propertyDamageForm.get('wereYouEvacuated').value == 'true' && (isResidentialTenant === true || isHomeowner === true)">
           <p class="sub-heading" style="font-size: 15px">
@@ -234,10 +234,10 @@
               <mat-radio-button value=true>Yes</mat-radio-button>&nbsp;&nbsp;<mat-radio-button value=false>No</mat-radio-button>
             </mat-radio-group>
           </div>
-        </div><br/><br/>
+        </div>
 
         <div class="row">
-          <div class="col-md-12 bottomspace">
+          <div class="col-md-12">
             <p class="sub-heading" style="font-size: 15px">
               In the past, have you submitted a DFA application for the same property?<span style="color:red" >*</span>
             </p>

diff --git a/...edModules/forms/dfa-application-main-forms/property-damage/property-damage.component.scss b/...edModules/forms/dfa-application-main-forms/property-damage/property-damage.component.scss
@@ -8,10 +8,6 @@ mat-form-field {
     margin: 15px 0;
 }
 
-.primary-radio-button {
-    margin: 5px;
-}
-
 .highlight {
     font-weight: 700;
     color: #169bd5;

diff --git a/...c/app/sharedModules/forms/dfa-prescreening-forms/prescreening/prescreening.component.html b/...c/app/sharedModules/forms/dfa-prescreening-forms/prescreening/prescreening.component.html
@@ -44,18 +44,16 @@
                   </mat-radio-button><br />
                   <div class="row">
                     <div class="sub-heading radio-extra-label col-md-12" *ngIf="prescreeningForm.get('applicantOption').value === option.key && option.value === radioApplicantOptions.Homeowner">
-                      <br/>
                       To qualify for DFA you must have occupied the property as your principal residence at the time of the event. Seasonal or recreational properties aren’t eligible. If you are a landlord, you must apply and qualify as a small business owner.
-                      <br/><br/>
+                      <br/>
                       As a homeowner, you must provide the following with your DFA application:<br/>
                       <ul>
                         <li><a href="https://www2.gov.bc.ca/assets/gov/public-safety-and-emergency-services/emergency-preparedness-response-recovery/embc/dfa/dfa_homeowners_insurance_template.pdf" target="_blank">insurance template</a> completed by your insurance broker.</li>
                       </ul>
                     </div>
                     <div class="sub-heading radio-extra-label col-md-12" *ngIf="prescreeningForm.get('applicantOption').value === option.key && option.value === radioApplicantOptions.ResidentialTenant">
-                      <br/>
                       To qualify for DFA, you must have occupied the property as your principal residence at the time of the event. Seasonal or recreational properties aren’t eligible.
-                      <br/><br/>
+                      <br/>
                       As a Residential Tenant, you will need to provide the following with your DFA application:
                       <ul>
                         <li><a href="https://www2.gov.bc.ca/assets/gov/public-safety-and-emergency-services/emergency-preparedness-response-recovery/embc/dfa/dfa_homeowners_insurance_template.pdf" target="_blank">insurance template</a> completed by your insurance broker</li>
@@ -64,7 +62,7 @@
                       </ul>
                     </div>
                     <div class="sub-heading radio-extra-label col-md-12" *ngIf="prescreeningForm.get('applicantOption').value === option.key && option.value === radioApplicantOptions.ResidentialTenant && showOtherDocuments === true" style="border: 3px solid #70abd9">
-                      <br/>
+
                       <b>Other documentation to show tenancy:</b>
                       If you don't have a rental or lease agreement, you may include:
                       <ul>
@@ -73,7 +71,7 @@
                       </ul>
                     </div>
                     <div class="sub-heading radio-extra-label col-md-12" *ngIf="prescreeningForm.get('applicantOption').value === option.key && option.value === radioApplicantOptions.SmallBusinessOwner">
-                      <br/>
+
                       To qualify for DFA, your business must:
                       <ul>
                         <li>be managed by the owner on a day-to-day basis,</li>
@@ -92,23 +90,20 @@
                         <li>lease agreements</li>
                       </ul>
                     </div>
-                    <div class="sub-heading radio-extra-label col-md-12" *ngIf="prescreeningForm.get('applicantOption').value === option.key && option.value === radioApplicantOptions.FarmOwner">
-                      <br/>
+                    <div class="sub-heading radio-extra-label col-md-12" *ngIf="prescreeningForm.get('applicantOption').value === option.key && option.value === radioApplicantOptions.FarmOwner">         
                       To qualify for DFA, your farm must:
                       <ul>
                         <li>be identified as a developing or established agricultural operation,</li>
                         <li>be owned and operated by a person whose full-time employment is a farmer,</li>
                         <li>be the means by which the owner derives the majority of their income, and</li>
                         <li>demonstrate that, without the claimed assistance, the future of the farm operation could be placed in financial jeopardy. Financial jeopardy is defined as when the assistance payment to repair the damage would be greater than 10 percent of the net income of the farm operation. </li>
                       </ul>
-                      <br/>
                       If your farm operation is incorporated, the small business eligibility criteria applies which means your farm also must:
                       <ul>
                         <li>be managed by the owner on a day-to-day basis,</li>
                         <li>have grossed at least $10,000 but less than $2 million in revenue in the year immediately preceding the disaster, and</li>
                         <li>employ fewer than 50 employees at one time.</li>
                       </ul>
-                      <br/>
                       As a farm, you will need to provide the following with your application:
                       <ul>
                         <li><a href="https://www2.gov.bc.ca/assets/gov/public-safety-and-emergency-services/emergency-preparedness-response-recovery/embc/dfa/dfa_farm_small_business_charitable_organization-insurance_template.pdf" target="_blank">Small Business Insurance Template</a> completed by insurance broker,</li>
@@ -117,21 +112,20 @@
                       </ul>
                     </div>
                     <div class="sub-heading radio-extra-label col-md-12" *ngIf="prescreeningForm.get('applicantOption').value === option.key && option.value === radioApplicantOptions.CharitableOrganization">
-                      <br/>
                       To qualify for DFA, your charitable/non-profit organization must:
                       <ul>
                         <li>provide a benefit or service to the community,</li>
                         <li>have been in existence for at least 12 months, and</li>
                         <li>be registered under the BC <i>Societies Act</i>.</li>
-                      </ul><br/>
+                      </ul>
                       As a charitable organization or non-profit you must provide the following with your application:
                       <ul>
                         <li><a href="https://www2.gov.bc.ca/assets/gov/public-safety-and-emergency-services/emergency-preparedness-response-recovery/embc/dfa/dfa_farm_small_business_charitable_organization-insurance_template.pdf" target="_blank">Insurance template</a> completed by an insurance broker,</li>
                         <li>a listing of the Directors, including their contact and address information,</li>
                         <li>proof of the organization's registration (must include registration date) under the BC <i>Societies Act</i> and annual fillings, and</li>
                         <li>a statement outlining the organizations benefit or service to the community, and any other documentation supporting how the organization meets the eligibility criteria for DFA.</li>
-                      </ul><br/>
-                      IF applicable, you will also need to to provide:
+                      </ul>
+                      If applicable, you will also need to to provide:
                       <ul>
                       <li>lease agreements</li>
                       </ul>

diff --git a/...c/app/sharedModules/forms/dfa-prescreening-forms/prescreening/prescreening.component.scss b/...c/app/sharedModules/forms/dfa-prescreening-forms/prescreening/prescreening.component.scss
@@ -8,12 +8,6 @@ mat-form-field {
     margin: 15px 0;
 }
 
-.primary-radio-button {
-  margin-top: 5px;
-  margin-right: 5px;
-  margin-bottom: 5px;
-}
-
 .highlight {
     font-weight: 700;
     color: #169bd5;

diff --git a/dfa/src/UI/embc-dfa/src/styles/styles.scss b/dfa/src/UI/embc-dfa/src/styles/styles.scss
@@ -181,7 +181,7 @@ footer nav {
   @extend .button-style;
   border: 1px solid #b5b5b5;
   color: #606060;
-  background-color: #ffffff;
+  background-color: #e5e5e5;
 
   --mdc-outlined-button-outline-color: #b5b5b5;
 }
@@ -321,6 +321,10 @@ mat-card {
   border-color: #169bd5 !important;
 }
 
+.mat-mdc-radio-button .mdc-radio{
+  padding: 0 !important;
+}
+
 .mat-mdc-radio-button.mat-accent .mat-radio-inner-circle,
 .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple),
 .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-persistent-ripple,