Merge pull request #2543 from steinwinde/product-fixes

fix: Fixes many smaller layout issues in the read-only product views

Author: gkbishnoi07

src/app/products/loan-products/common/loan-product-summary/loan-product-summary.component.html

@@ -1,3 +1,4 @@
+@use 'assets/styles/helper';
 @use 'assets/styles/colours' as *;
 
 .tab-container {

src/app/products/loan-products/common/loan-product-summary/loan-product-summary.component.scss

@@ -19,9 +19,8 @@ import {
 import { LoanProducts } from '../../loan-products';
 import { CodeName, OptionData, StringEnumOptionData } from '../../../../shared/models/option-data.model';
 import { Accounting } from 'app/core/utils/accounting';
-import { NgIf, NgFor, DecimalPipe } from '@angular/common';
+import { DecimalPipe } from '@angular/common';
 import { MatDivider } from '@angular/material/divider';
-import { LongTextComponent } from '../../../../shared/long-text/long-text.component';
 import {
   MatTable,
   MatColumnDef,
@@ -50,7 +49,6 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   imports: [
     ...STANDALONE_SHARED_IMPORTS,
     MatDivider,
-    LongTextComponent,
     MatTable,
     MatColumnDef,
     MatHeaderCellDef,

src/app/products/loan-products/common/loan-product-summary/loan-product-summary.component.ts

@@ -515,7 +515,7 @@ <h4 class="mat-h4 flex-33">
     </div>
   </div>
 
-  <div class="layout-row align-center margin-t responsive-column">
+  <div class="layout-row align-center margin-t responsive-column gap-2percent">
     <button mat-raised-button matStepperPrevious>
       <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       {{ 'labels.buttons.Previous' | translate }}

src/app/products/loan-products/loan-product-stepper/loan-product-accounting-step/loan-product-accounting-step.component.html

@@ -10,9 +10,9 @@
   </button>
 </div>
 
-<div class="tab-container mat-typography">
+<div class="tab-container">
   <div class="responsive-column">
-    <h2 class="mat-h2 flex-fill">{{ savingProduct.name }}</h2>
+    <h2 class="mat-h2 flex-100">{{ savingProduct.name }}</h2>
 
     <mat-divider [inset]="true"></mat-divider>
 

src/app/products/saving-products/view-saving-product/saving-product-general-tab/saving-product-general-tab.component.html

@@ -1,3 +1,5 @@
+@use 'assets/styles/colours' as *;
+
 table {
   width: 100%;
 }
@@ -24,3 +26,9 @@ mat-divider {
 .margin-t {
   margin-top: 1em;
 }
+
+.mat-h3 {
+  margin-top: 10px !important;
+  font-weight: 300;
+  color: $status-approved;
+}