build: Upgrade stylelint to version 16 and fix issues

Migrate upgrade stylelint from version 10 to 16 and fix all the
stylelint and prettier issues in scss files.

The following deprecated stylistic rules are no longer supported in
stylelint, and the checks are taken over by prettier:

- string-quotes
- max-empty-lines
- max-line-length

.prettierignore

@@ -0,0 +1,9 @@
+/dist
+/node_modules
+**/.git
+*.html
+*.js
+*.json
+*.md
+*.ts
+*.yml

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "trailingComma": "none"
+}

.stylelintrc

@@ -2,6 +2,7 @@
   "extends": ["stylelint-config-standard", "stylelint-config-recommended-scss"],
   "rules": {
     "font-family-name-quotes": "always-where-recommended",
+    "font-family-no-missing-generic-family-keyword": [true, { "ignoreFontFamilies": ["FontAwesome"] }],
     "function-url-quotes": [
       "always",
       {
@@ -9,12 +10,13 @@
       }
     ],
     "selector-attribute-quotes": "always",
-    "string-quotes": "double",
     "max-nesting-depth": 5,
     "selector-max-compound-selectors": 5,
     "selector-max-specificity": "1,3,2",
-    "declaration-no-important": true,
+    "declaration-no-important": null,
     "at-rule-no-vendor-prefix": true,
+    "at-rule-no-unknown": null,
+    "scss/at-rule-no-unknown": [true, { "ignoreAtRules": ["tailwind"] }],
     "media-feature-name-no-vendor-prefix": true,
     "property-no-vendor-prefix": true,
     "selector-no-vendor-prefix": true,
@@ -33,10 +35,7 @@
     "selector-type-no-unknown": [
       true,
       {
-        "ignoreTypes": [
+        "ignoreTypes": ["/^mat/", "/^mifosx/", "fa-icon", "ng-template"]
-          "mat-spinner",
-          "mat-radio-button"
-        ]
       }
     ],
     "selector-pseudo-element-no-unknown": [
@@ -45,8 +44,6 @@
         "ignorePseudoElements": ["ng-deep"]
       }
     ],
-    "unit-whitelist": ["px", "%", "em", "rem", "vw", "vh", "deg", "s"],
+    "unit-allowed-list": ["px", "%", "em", "rem", "vw", "vh", "deg", "s", "ms"]
-    "max-empty-lines": 2,
-    "max-line-length": 120
   }
 }

package.json

@@ -17,7 +17,7 @@
     "start": "npm run env -s && ng serve --aot --proxy-config proxy.conf.js",
     "serve:dev": "npm run env -s && ng serve",
     "serve:sw": "npm run build -s && npx http-server ./dist -p 4200",
-    "lint": "ng lint && stylelint \"src/**/*.scss\" --syntax scss && htmlhint \"src\" --config .htmlhintrc",
+    "lint": "ng lint && stylelint \"src/**/*.scss\" && prettier . --check && htmlhint \"src\" --config .htmlhintrc",
     "test": "npm run env -s && ng test",
     "test:ci": "npm run env -s && npm run lint -s && ng test --code-coverage --watch=false",
     "e2e": "ng e2e",
@@ -108,13 +108,13 @@
     "karma-jasmine": "^5.1.0",
     "karma-jasmine-html-reporter": "^2.0.0",
     "karma-junit-reporter": "1.2.0",
-    "prettier": "^3.0.1",
+    "prettier": "^3.3.3",
     "protractor": "~7.0.0",
     "puppeteer": "^15.3.2",
-    "stylelint": "10.0.1",
+    "stylelint": "^16.10.0",
-    "stylelint-config-recommended-scss": "3.3.0",
+    "stylelint-config-recommended-scss": "^14.1.0",
-    "stylelint-config-standard": "18.3.0",
+    "stylelint-config-standard": "^36.0.1",
-    "stylelint-scss": "3.6.1",
+    "stylelint-scss": "^6.8.1",
     "tailwindcss": "^3.3.3",
     "ts-node": "8.2.0",
     "typescript": "4.6.4"

src/app/account-transfers/list-standing-instructions/list-standing-instructions.component.scss

@@ -7,6 +7,7 @@
 
 table {
   width: 100%;
+
   .account-action-button {
     min-width: 26px;
     padding: 0 6px;
@@ -16,5 +17,5 @@ table {
 }
 
 .mat-divider {
-  border-top-color: #ffffff;
+  border-top-color: #fff;
 }

src/app/account-transfers/make-account-transfers/make-account-transfers.component.scss

@@ -1,4 +1,6 @@
-h2, h3, h4 {
+h2,
+h3,
+h4 {
   margin: 0;
   font-weight: 500;
 }
@@ -12,7 +14,7 @@ span {
 }
 
 mat-divider {
-  margin: 0 0 0.5em 0;
+  margin: 0 0 0.5em;
 }
 
 .container {

src/app/account-transfers/view-account-transfer/view-account-transfer.component.scss

@@ -8,5 +8,5 @@ span {
 }
 
 mat-divider {
-  margin: 0 0 0.5em 0;
+  margin: 0 0 0.5em;
 }

src/app/account-transfers/view-standing-instructions/view-standing-instructions.component.scss

@@ -1,8 +1,10 @@
 .mat-elevation-z1 {
-    margin: 1em 0 1.5em 0;
+  margin: 1em 0 1.5em;
 }
 
-h2, h3, h4 {
+h2,
+h3,
+h4 {
   margin: 0;
   font-weight: 500;
 }
@@ -16,5 +18,5 @@ span {
 }
 
 mat-divider {
-	margin: 0 0 1em 0;
+  margin: 0 0 1em;
 }

src/app/accounting/accounting-rules/create-rule/create-rule.component.scss

@@ -1,12 +1,12 @@
 .rule-wrapper {
-  margin: 17.5px 0 0 0;
+  margin: 17.5px 0 0;
 }
 
 .entries-wrapper {
   position: relative;
 
   .entries {
-    padding: 0 0 17.5px 0;
+    padding: 0 0 17.5px;
     position: absolute;
     bottom: 0;
     right: 0;

src/app/accounting/accounting-rules/edit-rule/edit-rule.component.scss

@@ -1,12 +1,12 @@
 .rule-wrapper {
-  margin: 17.5px 0 0 0;
+  margin: 17.5px 0 0;
 }
 
 .entries-wrapper {
   position: relative;
 
   .entries {
-    padding: 0 0 17.5px 0;
+    padding: 0 0 17.5px;
     position: absolute;
     bottom: 0;
     right: 0;

src/app/accounting/chart-of-accounts/create-gl-account/create-gl-account.component.scss

@@ -2,7 +2,7 @@
   position: relative;
 
   .manual-entries-allowed {
-    padding: 0 0 17.5px 0;
+    padding: 0 0 17.5px;
     position: absolute;
     bottom: 0;
     right: 0;

src/app/accounting/chart-of-accounts/edit-gl-account/edit-gl-account.component.scss

@@ -2,7 +2,7 @@
   position: relative;
 
   .manual-entries-allowed {
-    padding: 0 0 17.5px 0;
+    padding: 0 0 17.5px;
     position: absolute;
     bottom: 0;
     right: 0;

src/app/accounting/closing-entries/closing-entries.component.scss

@@ -1,6 +1,7 @@
 table {
   width: 100%;
-  select-row:hover {
+
+  .select-row:hover {
     cursor: pointer;
   }
 }

src/app/accounting/migrate-opening-balances/migrate-opening-balances.component.scss

@@ -1,5 +1,6 @@
 .content {
   padding-top: 20px;
+
   div {
     word-wrap: break-word;
 

src/app/centers/centers-view/center-actions/manage-groups/manage-groups.component.scss

@@ -3,7 +3,7 @@
 
   .mat-table {
     display: block;
-		font-family: Tahoma, Verdana;
+    font-family: Tahoma, Verdana, sans-serif;
     width: 100%;
   }
 

src/app/centers/centers-view/center-actions/staff-assignment-history/staff-assignment-history.component.scss

@@ -1,5 +1,6 @@
 .container {
   max-width: 60rem;
+
   .back-button {
     max-height: 2%;
     margin-bottom: 2%;

src/app/centers/centers-view/centers-view.component-theme.scss

@@ -1,7 +1,8 @@
 @use '@angular/material' as mat;
+@use 'sass:map';
 
 @mixin centers-view-component-theme($theme) {
-  $primary: map-get($theme, primary);
+  $primary: map.get($theme, primary);
 
   mifosx-centers-view {
     .center-card {

src/app/centers/centers-view/centers-view.component.scss

@@ -3,41 +3,52 @@
   max-width: 80rem;
   width: 90%;
   padding: 0;
+
   .header {
     padding: 1%;
-    .header-title-group {
-      .center-card-title {
-        color: white;
-        width: 90%;
-        p {
-          color: white;
-        }
-      }
-    }
-    .profile-image-container {
-      margin: 1%;
-      .profile-image {
-        object-fit: cover;
-        border-radius: 20px;
-      }
   }
+
   .center-meeting {
     align-self: flex-end;
     width: 300px;
     height: 140px;
-      div, ng-template > div {
+
+    div,
+    ng-template > div {
       background-color: #0a6aac;
+
       p {
         color: white;
         padding: 0 10px;
       }
     }
   }
+
+  .header-title-group {
+    .center-card-title {
+      color: white;
+      width: 90%;
+
+      p {
+        color: white;
+      }
+    }
+  }
+
+  .profile-image-container {
+    margin: 1%;
+
+    .profile-image {
+      object-fit: cover;
+      border-radius: 20px;
+    }
+  }
+
   .center-actions {
     align-self: flex-end;
     margin: 0 1%;
   }
-  }
+
   .navigation-tabs {
     overflow: auto;
   }

src/app/centers/centers-view/general-tab/general-tab.component.scss

@@ -5,6 +5,7 @@
   h3 {
     margin: 1% auto;
   }
+
   .summary-details-container {
     border: 1px solid;
     padding: 1%;
@@ -12,6 +13,7 @@
 
   table {
     width: 100%;
+
     .account-action-button {
       min-width: 26px;
       padding: 0 6px;

src/app/centers/centers.component.scss

@@ -2,6 +2,7 @@
   .action-button {
     margin-left: auto;
   }
+
   .search-button {
     min-width: 30px;
     margin: 4px;

src/app/centers/create-center/create-center.component.scss

@@ -4,7 +4,7 @@
 
 .mat-table {
   display: block;
-  font-family: Tahoma, Verdana;
+  font-family: Tahoma, Verdana, sans-serif;
   width: 50%;
 }
 

src/app/clients/client-stepper/client-address-step/client-address-step.component.scss

@@ -1,13 +1,16 @@
 .address {
   .address-actions {
     margin-top: 1%;
+
     button {
       margin-right: 1%;
     }
   }
+
   h3 {
     margin: 1% auto;
   }
+
   p {
     line-height: 30px;
     margin-left: 2%;

src/app/clients/client-stepper/client-family-members-step/client-family-members-step.component.scss

@@ -1,13 +1,16 @@
 .family-member {
   .family-member-actions {
     margin-top: 1%;
+
     button {
       margin-right: 1%;
     }
   }
+
   h3 {
     margin: 1% auto;
   }
+
   p {
     line-height: 30px;
     margin-left: 2%;

src/app/clients/client-stepper/client-general-step/client-general-step.component.scss

@@ -1,5 +1,5 @@
 .margin-v {
-  margin: 2em 0 0 0;
+  margin: 2em 0 0;
 }
 
 .margin-t {

src/app/clients/client-stepper/client-preview-step/client-preview-step.component.scss

@@ -1,4 +1,6 @@
-h2, h3, h4 {
+h2,
+h3,
+h4 {
   margin: 0;
   font-weight: 500;
 }
@@ -8,7 +10,7 @@ span {
 }
 
 mat-divider {
-  margin: 0 0 0.5em 0;
+  margin: 0 0 0.5em;
 }
 
 .margin-t {
@@ -19,6 +21,7 @@ mat-divider {
   h3 {
     margin: 1% auto;
   }
+
   p {
     line-height: 30px;
     margin-left: 2%;
@@ -29,6 +32,7 @@ mat-divider {
   h3 {
     margin: 1% auto;
   }
+
   p {
     line-height: 30px;
     margin-left: 2%;

src/app/clients/clients-view/address-tab/address-tab.component.scss

@@ -5,10 +5,12 @@
   .address {
     .address-actions {
       margin-top: 1%;
+
       button {
         margin-right: 1%;
       }
     }
+
     h3 {
       margin: 1% auto;
     }
@@ -19,4 +21,3 @@
     }
   }
 }
-  

src/app/clients/clients-view/client-actions/add-client-collateral/add-client-collateral.component.scss

@@ -1,4 +1,3 @@
 .container {
   width: 37rem;
 }
-  

src/app/clients/clients-view/client-actions/client-screen-reports/client-screen-reports.component.scss

@@ -1,5 +1,6 @@
 .container {
   max-width: 37rem;
+
   .print {
     align-self: flex-end;
   }

src/app/clients/clients-view/client-actions/create-self-service-user/create-self-service-user.component.scss

@@ -12,8 +12,6 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-* {
+mat-card {
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
   box-sizing: border-box;
 }

src/app/clients/clients-view/client-actions/take-survey/take-survey.component.scss

@@ -1,7 +1,6 @@
 .surveyOption {
   border: 1px solid #cbcbcb;
   padding: 5px;
-
 }
 
 .displayQuestions {
@@ -9,11 +8,11 @@
 }
 
 .question {
-  padding: 10px 0px;
+  padding: 10px 0;
 }
 
 .wrap-mat-radio-label {
-  white-space: normal
+  white-space: normal;
 }
 
 .questionText {
@@ -30,7 +29,7 @@
 }
 
 .surveyCont {
-    padding: 5%
+  padding: 5%;
 }
 
 .button-cancel {

src/app/clients/clients-view/clients-view.component.scss

@@ -7,11 +7,13 @@
         margin: 4px;
         line-height: 25px;
       }
+
       .signature {
         color: white;
         text-align: center;
         margin: 0;
         padding: 2%;
+
         &:hover {
           cursor: pointer;
         }

src/app/clients/clients-view/documents-tab/documents-tab.component.scss

@@ -5,8 +5,10 @@
   h3 {
     margin: 1% auto;
   }
+
   table {
     width: 100%;
+
     .document-action-button {
       min-width: 26px;
       padding: 0 6px;

src/app/clients/clients-view/family-members-tab/add-family-member/add-family-member.component.scss

@@ -2,10 +2,12 @@
   width: 70%;
   margin: 0 auto;
   padding: 5%;
-  @media screen and (min-width:960px) {
+
+  @media screen and (width >=960px) {
     [fxFlex]:nth-child(odd) {
       margin-right: 25px;
     }
+
     [fxFlex]:last-child {
       margin-right: 0;
     }

src/app/clients/clients-view/family-members-tab/edit-family-member/edit-family-member.component.scss

@@ -2,13 +2,14 @@
   width: 70%;
   margin: 0 auto;
   padding: 5%;
-    @media screen and (min-width:960px) {
+
+  @media screen and (width >=960px) {
     [fxFlex]:nth-child(odd) {
       margin-right: 25px;
     }
+
     [fxFlex]:last-child {
       margin-right: 0;
     }
   }
 }
-  

src/app/clients/clients-view/family-members-tab/family-members-tab.component.scss

@@ -5,10 +5,12 @@
   .family-member {
     .family-member-actions {
       margin-top: 1%;
+
       button {
         margin-right: 1%;
       }
     }
+
     h3 {
       margin: 1% auto;
     }

src/app/clients/clients-view/general-tab/general-tab.component.scss

@@ -5,6 +5,7 @@
   h3 {
     margin: 1% auto;
   }
+
   .performance-history-container {
     border: 1px solid;
     padding: 1%;
@@ -12,9 +13,11 @@
 
   table {
     width: 100%;
+
     td:hover {
       cursor: pointer;
     }
+
     .account-action-button {
       min-width: 26px;
       padding: 0 6px;
@@ -26,7 +29,6 @@
       cursor: pointer;
     }
   }
-
 }
 
 .heading-content {

src/app/clients/clients-view/identities-tab/identities-tab.component.scss

@@ -5,8 +5,10 @@
   h3 {
     margin: 1% auto;
   }
+
   table {
     width: 100%;
+
     .identity-action-button {
       min-width: 26px;
       padding: 0 6px;
@@ -15,4 +17,3 @@
     }
   }
 }
-  

src/app/clients/clients.component.scss

@@ -2,13 +2,16 @@
   .action-button {
     margin-left: auto;
   }
+
   .search-button {
     min-width: 30px;
     margin: 4px;
   }
+
   .search-box {
     min-width: 320px;
   }
+
   .filter-box {
     min-width: 280px;
   }
@@ -18,6 +21,7 @@ table {
   tr.select-row:hover {
     cursor: pointer;
   }
+
   tr:nth-child(odd).td {
     color: black;
   }
@@ -27,13 +31,14 @@ $bar: 150px;
 $foo: $bar * 8;
 $color: #e2e4ec;
 
-
 .loading {
   position: absolute;
   width: $bar;
   height: 8px;
-  background: linear-gradient(125deg, rgb(255, 255, 255), #c4d2e9, rgb(255, 255, 255));
+  background: linear-gradient(125deg, rgb(255 255 255), #c4d2e9, rgb(255 255 255));
-  animation: grow 4s linear infinite, move 4s linear infinite;
+  animation:
+    grow 4s linear infinite,
+    move 4s linear infinite;
   top: 75px;
 }
 
@@ -51,7 +56,7 @@ $color: #e2e4ec;
   }
 
   33.3% {
-    left: $foo / 2;
+    left: calc($foo / 2);
   }
 
   50% {
@@ -59,7 +64,7 @@ $color: #e2e4ec;
   }
 
   66.7% {
-    left: $foo / 2;
+    left: calc($foo / 2);
   }
 
   83.3% {
@@ -77,11 +82,11 @@ $color: #e2e4ec;
   }
 
   16.7% {
-    width: $foo / 2;
+    width: calc($foo / 2);
   }
 
   33.3% {
-    width: $foo / 2;
+    width: calc($foo / 2);
   }
 
   50% {
@@ -89,11 +94,11 @@ $color: #e2e4ec;
   }
 
   66.7% {
-    width: $foo / 2;
+    width: calc($foo / 2);
   }
 
   83.3% {
-    width: $foo / 2;
+    width: calc($foo / 2);
   }
 
   100% {

src/app/clients/edit-client/edit-client.component.scss

@@ -1,3 +1,3 @@
 .margin-v {
-  margin: 2em 0 0 0;
+  margin: 2em 0 0;
 }

src/app/collaterals/edit-collateral/edit-collateral.component.scss

@@ -1,4 +1,3 @@
 .container {
   width: 37rem;
 }
-  

src/app/collaterals/view-collateral/view-collateral.component.scss

@@ -4,33 +4,40 @@
   width: 90%;
   padding: 0;
 }
+
 .tab-container {
   padding: 1%;
   margin: 1%;
+
   h3 {
     margin: 1% auto;
   }
+
   .group-details-container {
     border: 1px solid;
     padding: 1%;
   }
+
   .action-button {
     margin-left: auto;
   }
+
   table {
     width: 100%;
+
     .account-action-button {
       min-width: 26px;
       padding: 0 6px;
       margin: 4px;
       line-height: 25px;
     }
+
     tr.select-row:hover {
       cursor: pointer;
     }
   }
+
   i:hover {
     cursor: pointer;
   }
 }
-  

src/app/collections/individual-collection-sheet/individual-collection-sheet.component.scss

@@ -1,5 +1,4 @@
 .container {
-
   max-width: 37em;
 
   .margin-v {
@@ -7,13 +6,12 @@
   }
 
   .margin-b {
-    margin: 0 0 1em 0;
+    margin: 0 0 1em;
   }
 
   .margin-t {
     margin-top: 1em;
   }
-
 }
 
 .showcollectionsheet {
@@ -23,18 +21,19 @@
 }
 
 .alert {
-  background-color: rgb(253, 236, 234);
+  background-color: rgb(253 236 234);
   padding: 6px 16px;
   font-size: 0.875rem;
-  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-family: Roboto, Helvetica, Arial, sans-serif;
   font-weight: 400;
   line-height: 1.43;
   border-radius: 4px;
-  letter-spacing: 0.01071em;
+  letter-spacing: 0.0107em;
 
   .message {
     padding: 8px 0;
   }
+
   .alert-check {
     color: #f44336;
     margin-right: 2px;

src/app/core/shell/breadcrumb/breadcrumb.component.scss

@@ -1,4 +1,5 @@
-@import "assets/styles/helper";
+@use 'assets/styles/helper';
+@use 'assets/styles/colours' as *;
 
 .breadcrumb-wrapper {
   margin: 0 auto;
@@ -18,7 +19,7 @@
     }
 
     .separator::before {
-      content: "";
+      content: '';
       border: 1.5px solid $mid-grey;
       margin: 0 0.6rem;
       font-size: 1.25rem;
@@ -40,7 +41,7 @@
         }
 
         &::after {
-          content: "/";
+          content: '/';
           margin: 0 0.4rem;
         }
       }

src/app/core/shell/content/content.component.scss

@@ -4,6 +4,7 @@ mifosx-content {
   height: 100%;
   margin: 0 auto -30px;
 }
+
 #push {
   height: 30px;
 }

src/app/core/shell/shell.component.scss

@@ -5,7 +5,10 @@
   .sidebar-panel {
     min-height: 100vh;
     overflow: auto;
-    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+    box-shadow:
+      0 3px 1px -2px rgb(0 0 0 / 20%),
+      0 2px 2px 0 rgb(0 0 0 / 14%),
+      0 1px 5px 0 rgb(0 0 0 / 12%);
   }
 
   .sidebar-full {
@@ -17,18 +20,18 @@
   }
 }
 
-
 $bar: 190px;
 $foo: $bar * 8;
 $color: #e2e4ec;
 
-
 .loading {
   position: absolute;
   width: $bar;
   height: 8px;
-  background: linear-gradient(125deg, rgb(255, 255, 255), #c4d2e9, rgb(255, 255, 255));
+  background: linear-gradient(125deg, rgb(255 255 255), #c4d2e9, rgb(255 255 255));
-  animation: grow 4s linear infinite, move 4s linear infinite;
+  animation:
+    grow 4s linear infinite,
+    move 4s linear infinite;
   top: 64px;
 }
 
@@ -46,7 +49,7 @@ $color: #e2e4ec;
   }
 
   33.3% {
-    left: $foo / 2;
+    left: calc($foo / 2);
   }
 
   50% {
@@ -54,7 +57,7 @@ $color: #e2e4ec;
   }
 
   66.7% {
-    left: $foo / 2;
+    left: calc($foo / 2);
   }
 
   83.3% {
@@ -72,11 +75,11 @@ $color: #e2e4ec;
   }
 
   16.7% {
-    width: $foo / 2;
+    width: calc($foo / 2);
   }
 
   33.3% {
-    width: $foo / 2;
+    width: calc($foo / 2);
   }
 
   50% {
@@ -84,11 +87,11 @@ $color: #e2e4ec;
   }
 
   66.7% {
-    width: $foo / 2;
+    width: calc($foo / 2);
   }
 
   83.3% {
-    width: $foo / 2;
+    width: calc($foo / 2);
   }
 
   100% {

src/app/core/shell/sidenav/sidenav.component.scss

@@ -19,9 +19,7 @@
     text-align: center;
     max-width: 15rem;
     z-index: 9999;
-    &:hover {
     cursor: pointer;
-    }
 
     .app-logo {
       width: auto;
@@ -46,7 +44,8 @@
       width: 72px;
       margin: 0 auto 8px;
       height: 72px;
-      border: 1px solid hsla(210, 8%, 51%, 0.13);
+      /* stylelint-disable-next-line color-function-notation */
+      border: 1px solid hsla(210deg, 8%, 51%, 13%);
       padding: 4px;
       border-radius: 50%;
     }
@@ -75,7 +74,7 @@
       }
 
       .text-muted {
-        color: rgba(0, 0, 0, 0.54);
+        color: rgba(0 0 0 / 54%);
       }
     }
   }
@@ -137,9 +136,6 @@
   .app-brand {
     .app-logo {
       margin: auto;
-      &:hover {
-        cursor: pointer;
-      }
     }
 
     .app-logo-text {
@@ -172,10 +168,12 @@
     }
   }
 }
+
 .sidebar-full {
   .navigation-panel {
     padding-top: 5%;
   }
+
   .app-sidenav {
     .icon-menu {
       flex-direction: row;

src/app/core/shell/toolbar/toolbar.component.scss

@@ -1,6 +1,9 @@
 #mifosx-toolbar {
   position: relative;
-  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  box-shadow:
+    0 3px 1px -2px rgb(0 0 0 / 20%),
+    0 2px 2px 0 rgb(0 0 0 / 14%),
+    0 1px 5px 0 rgb(0 0 0 / 12%);
 
   .tab-link {
     min-width: auto;
@@ -44,7 +47,7 @@
   display: none;
 }
 
-@media (max-width: 959px) {
+@media (width <= 959px) {
   .lg-icon {
     display: block;
     margin-left: 5px;

src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-charges-step/fixed-deposit-account-charges-step.component.scss

@@ -3,7 +3,7 @@ table {
 }
 
 .mat-elevation-z1 {
-  margin: 1em 0 1.5em 0;
+  margin: 1em 0 1.5em;
 }
 
 .margin-t {

src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-preview-step/fixed-deposit-account-preview-step.component.scss

@@ -3,10 +3,12 @@ table {
 }
 
 .mat-elevation-z1 {
-  margin: 1em 0 1.5em 0;
+  margin: 1em 0 1.5em;
 }
 
-h2, h3, h4 {
+h2,
+h3,
+h4 {
   margin: 0;
   font-weight: 500;
 }
@@ -16,7 +18,7 @@ span {
 }
 
 mat-divider {
-  margin: 0 0 0.5em 0;
+  margin: 0 0 0.5em;
 }
 
 .margin-t {

src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-settings-step/fixed-deposit-account-settings-step.component.scss

@@ -8,7 +8,7 @@ h3 {
 }
 
 mat-divider {
-  margin: 1em 0 2em 0;
+  margin: 1em 0 2em;
 }
 
 .margin-v {
@@ -16,7 +16,7 @@ mat-divider {
 }
 
 .margin-b {
-  margin: 0 0 1em 0;
+  margin: 0 0 1em;
 }
 
 .margin-t {

src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-terms-step/fixed-deposit-account-terms-step.component.scss

@@ -8,7 +8,7 @@ h3 {
 }
 
 mat-divider {
-  margin: 1em 0 2em 0;
+  margin: 1em 0 2em;
 }
 
 .margin-v {
@@ -16,7 +16,7 @@ mat-divider {
 }
 
 .margin-b {
-  margin: 0 0 1em 0;
+  margin: 0 0 1em;
 }
 
 .margin-t {

src/app/deposits/fixed-deposits/fixed-deposit-account-view/charges-tab/charges-tab.component.scss

@@ -1,14 +1,18 @@
 .tab-container {
   padding: 1%;
   margin: 1%;
+
   h3 {
     margin: 1% auto;
   }
+
   .action-button {
     margin-left: auto;
   }
+
   table {
     width: 100%;
+
     .account-action-button {
       min-width: 26px;
       padding: 0 6px;

src/app/deposits/fixed-deposits/fixed-deposit-account-view/interest-rate-chart-tab/interest-rate-chart-tab.component.scss

@@ -1,9 +1,11 @@
 .tab-container {
   padding: 1%;
   margin: 1%;
+
   h3 {
     margin: 1% auto;
   }
+
   table {
     width: 100%;
 

src/app/deposits/fixed-deposits/fixed-deposit-account-view/standing-instructions-tab/standing-instructions-tab.component.scss

@@ -1,14 +1,18 @@
 .tab-container {
   padding: 1%;
   margin: 1%;
+
   h3 {
     margin: 1% auto;
   }
+
   .action-button {
     margin-left: auto;
   }
+
   table {
     width: 100%;
+
     .account-action-button {
       min-width: 26px;
       padding: 0 6px;

src/app/deposits/fixed-deposits/fixed-deposit-account-view/transactions-tab/transactions-tab.component.scss

@@ -1,30 +1,38 @@
-@import "assets/styles/helper";
+@use 'assets/styles/helper';
+@use 'assets/styles/colours' as *;
 
 .tab-container {
   padding: 1%;
   margin: 1%;
+
   h3 {
     margin: 1% auto;
   }
+
   .action-button {
     margin-left: auto;
   }
+
   table {
     width: 100%;
     color: $black;
+
     .account-action-button {
       min-width: 26px;
-      padding: 0 0 3px 0;
+      padding: 0 0 3px;
       margin: 0 2%;
       line-height: 25px;
     }
+
     .strike {
       text-decoration: line-through;
       color: $status-active-overdue;
     }
+
     .linked {
       color: $status-approved;
     }
+
     .accrual {
       color: $msg-default;
     }

src/app/deposits/fixed-deposits/fixed-deposit-account-view/view-transaction/view-transaction.component.scss

@@ -1,4 +1,5 @@
-@import "assets/styles/helper";
+@use 'assets/styles/helper';
+@use 'assets/styles/colours' as *;
 
 .container {
   max-width: 37rem;

src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-charges-step/recurring-deposits-account-charges-step.component.scss

@@ -3,7 +3,7 @@ table {
 }
 
 .mat-elevation-z1 {
-  margin: 1em 0 1.5em 0;
+  margin: 1em 0 1.5em;
 }
 
 .margin-t {

src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-preview-step/recurring-deposits-account-preview-step.component.scss

@@ -3,10 +3,12 @@ table {
 }
 
 .mat-elevation-z1 {
-  margin: 1em 0 1.5em 0;
+  margin: 1em 0 1.5em;
 }
 
-h2, h3, h4 {
+h2,
+h3,
+h4 {
   margin: 0;
   font-weight: 500;
 }
@@ -16,11 +18,7 @@ span {
 }
 
 mat-divider {
-  margin: 0 0 0.5em 0;
+  margin: 0 0 0.5em;
-}
-
-.margin-t {
-  margin-top: 1em;
 }
 
 .margin-t {
@@ -50,4 +48,3 @@ mat-divider {
     }
   }
 }
-

src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-settings-step/recurring-deposits-account-settings-step.component.scss

@@ -8,7 +8,7 @@ h3 {
 }
 
 mat-divider {
-  margin: 1em 0 2em 0;
+  margin: 1em 0 2em;
 }
 
 .margin-v {
@@ -16,7 +16,7 @@ mat-divider {
 }
 
 .margin-b {
-  margin: 0 0 1em 0;
+  margin: 0 0 1em;
 }
 
 .margin-t {

src/app/deposits/recurring-deposits/recurring-deposits-account-view/charges-tab/charges-tab.component.scss

@@ -1,14 +1,18 @@
 .tab-container {
   padding: 1%;
   margin: 1%;
+
   h3 {
     margin: 1% auto;
   }
+
   .action-button {
     margin-left: auto;
   }
+
   table {
     width: 100%;
+
     .account-action-button {
       min-width: 26px;
       padding: 0 6px;

src/app/deposits/recurring-deposits/recurring-deposits-account-view/interest-rate-chart-tab/interest-rate-chart-tab.component.scss

@@ -1,9 +1,11 @@
 .tab-container {
   padding: 1%;
   margin: 1%;
+
   h3 {
     margin: 1% auto;
   }
+
   table {
     width: 100%;
 

src/app/deposits/recurring-deposits/recurring-deposits-account-view/standing-instructions-tab/standing-instructions-tab.component.scss

@@ -1,14 +1,18 @@
 .tab-container {
   padding: 1%;
   margin: 1%;
+
   h3 {
     margin: 1% auto;
   }
+
   .action-button {
     margin-left: auto;
   }
+
   table {
     width: 100%;
+
     .account-action-button {
       min-width: 26px;
       padding: 0 6px;

src/app/deposits/recurring-deposits/recurring-deposits-account-view/transactions-tab/transactions-tab.component.scss

@@ -1,21 +1,26 @@
-@import "assets/styles/helper";
+@use 'assets/styles/helper';
 
 .tab-container {
   padding: 1%;
   margin: 1%;
+
   h3 {
     margin: 1% auto;
   }
+
   .action-button {
     margin-left: auto;
   }
+
   table {
     width: 100%;
+
     .account-action-button {
       min-width: 26px;
-      padding: 0 0 3px 0;
+      padding: 0 0 3px;
       margin: 0 10%;
       line-height: 25px;
+
       .accruals {
         padding-top: 1%;
       }

src/app/deposits/recurring-deposits/recurring-deposits-account-view/transactions-tab/view-transaction/view-transaction.component.scss

@@ -1,4 +1,5 @@
-@import "assets/styles/helper";
+@use 'assets/styles/helper';
+@use 'assets/styles/colours' as *;
 
 .container {
   max-width: 37rem;

src/app/groups/create-group/create-group.component.scss

@@ -4,7 +4,7 @@
 
 .mat-table {
   display: block;
-  font-family: Tahoma, Verdana;
+  font-family: Tahoma, Verdana, sans-serif;
   width: 50%;
 }
 

src/app/groups/groups-view/committee-tab/committee-tab.component.scss

@@ -1,14 +1,18 @@
 .tab-container {
   padding: 1%;
   margin: 1%;
+
   h3 {
     margin: 1% auto;
   }
+
   .action-button {
     margin-left: auto;
   }
+
   table {
     width: 100%;
+
     .account-action-button {
       min-width: 26px;
       padding: 0 6px;

src/app/groups/groups-view/general-tab/general-tab.component.scss

@@ -1,31 +1,39 @@
 .tab-container {
   padding: 1%;
   margin: 1%;
+
   h3 {
     margin: 1% auto;
   }
+
   .group-details-container {
     border: 1px solid;
     padding: 1%;
   }
+
   .action-button {
     margin-left: auto;
   }
+
   table {
     width: 100%;
+
     .account-action-button {
       min-width: 26px;
       padding: 0 6px;
       margin: 4px;
       line-height: 25px;
     }
+
     tr.select-row:hover {
       cursor: pointer;
     }
   }
+
   i:hover {
     cursor: pointer;
   }
+
   tr:hover {
     cursor: pointer;
   }

src/app/groups/groups-view/group-actions/group-transfer-clients/group-transfer-clients.component.scss

@@ -4,8 +4,8 @@
 
 .mat-table {
   display: block;
-  font-family: Tahoma, Verdana;
+  font-family: Tahoma, Verdana, sans-serif;
-  width: 100%
+  width: 100%;
 }
 
 .mat-row,

src/app/groups/groups-view/group-actions/manage-group-members/manage-group-members.component.scss

@@ -3,7 +3,7 @@
 
   .mat-table {
     display: block;
-    font-family: Tahoma, Verdana;
+    font-family: Tahoma, Verdana, sans-serif;
     width: 100%;
   }
 

src/app/groups/groups-view/groups-view.component-theme.scss

@@ -1,7 +1,9 @@
 @use '@angular/material' as mat;
+@use 'sass:map';
 
 @mixin groups-view-component-theme($theme) {
-  $primary: map-get($theme, primary);
+  $primary: map.get($theme, primary);
+
   mifosx-groups-view {
     .group-card {
       .header {

src/app/groups/groups-view/groups-view.component.scss

@@ -3,48 +3,61 @@
   max-width: 80rem;
   width: 90%;
   padding: 0;
+
+  i:hover {
+    cursor: pointer;
+  }
+
   .header {
     padding: 1%;
+  }
+
   .header-title-group {
     .group-card-title {
       color: white;
       width: 90%;
+
       mat-card-subtitle {
         color: white;
       }
     }
   }
+
   .profile-image-container {
     margin: 1%;
+
     .profile-image {
       object-fit: cover;
       border-radius: 20px;
     }
   }
+
   .group-meeting {
     align-self: flex-end;
     width: 300px;
-      div, ng-template > div {
+
+    div,
+    ng-template > div {
       background-color: #0a6aac;
+
       p {
         color: white;
         padding: 0 10px;
       }
     }
   }
+
   .group-actions {
     align-self: flex-end;
     margin: 0 1%;
+
     i {
       margin-bottom: 2px;
       margin-right: 4px;
     }
   }
-  }
+
   .navigation-tabs {
     overflow: auto;
   }
-  i:hover {
-    cursor: pointer;
-  }
 }

src/app/groups/groups.component.scss

@@ -2,6 +2,7 @@
   .action-button {
     margin-left: auto;
   }
+
   .search-button {
     min-width: 30px;
     margin: 4px;

src/app/home/dashboard/amount-collected-pie/amount-collected-pie.component.scss

@@ -1,11 +1,13 @@
 .card {
   min-width: 18.5rem;
   padding: 0;
+
   .header {
     #office {
-      margin-bottom: -1.20em;
+      margin-bottom: -1.2em;
     }
   }
+
   .fallback {
     height: 20rem;
   }

src/app/home/dashboard/amount-disbursed-pie/amount-disbursed-pie.component.scss

@@ -1,11 +1,13 @@
 .card {
   min-width: 18.5rem;
   padding: 0;
+
   .header {
     #office {
-      margin-bottom: -1.20em;
+      margin-bottom: -1.2em;
     }
   }
+
   .fallback {
     height: 20rem;
   }

src/app/home/dashboard/client-trends-bar/client-trends-bar.component.scss

@@ -1,15 +1,18 @@
 .card {
   min-width: 18.5rem;
   padding: 0;
+
   .header {
     #office {
-      margin-bottom: -1.20em;
+      margin-bottom: -1.2em;
     }
   }
+
   #timescale {
     margin: 2% 50%;
     transform: translateX(-50%);
   }
+
   .fallback {
     overflow-x: auto;
     max-width: 100%;

src/app/home/dashboard/dashboard.component-theme.scss

@@ -1,11 +1,12 @@
 @use '@angular/material' as mat;
+@use 'sass:map';
 
 @mixin dashboard-component-theme($theme) {
-  $primary: map-get($theme, primary);
+  $primary: map.get($theme, primary);
 
   mifosx-dashboard {
-
+    .recent-activities,
-    .recent-activities, .frequent-activities {
+    .frequent-activities {
       .header {
         background-color: mat.get-color-from-palette($primary, 500);
         color: mat.get-contrast-color-from-palette($primary, 500);
@@ -19,11 +20,13 @@
         .header {
           background-color: mat.get-color-from-palette($primary, 500);
           color: mat.get-contrast-color-from-palette($primary, 500);
+
           mat-label,
           .mat-select-value,
           .mat-select-arrow {
             color: mat.get-contrast-color-from-palette($primary, 500);
           }
+
           .mat-form-field-underline,
           .mat-form-field-ripple {
             background-color: mat.get-contrast-color-from-palette($primary, 500);
@@ -31,6 +34,5 @@
         }
       }
     }
-
   }
 }

src/app/home/dashboard/dashboard.component.scss

@@ -8,6 +8,7 @@
   .search {
     width: 100%;
     padding: 12px;
+
     mat-card-content {
       width: 100%;
     }
@@ -28,8 +29,7 @@
 
   .bottom-card {
     display: flex;
-    flex-wrap: wrap;
+    flex-flow: row wrap;
-    flex-direction: row;
     gap: 2px;
 
     .amount-collected,
@@ -41,8 +41,7 @@
   }
 }
 
-@media screen and (max-width: 768px) {
+@media screen and (width <= 768px) {
-
   .top-card,
   .bottom-card {
     flex-direction: column;

src/app/home/home.component.scss

@@ -9,10 +9,10 @@
 }
 
 .mat-list-base {
-  padding-top: 0px;
+  padding-top: 0;
 }
 
 a {
   text-decoration: none;
-  color: black
+  color: black;
 }

src/app/loans/glim-account/glim-account.component.scss

@@ -3,33 +3,41 @@
   max-width: 80rem;
   width: 90%;
   padding: 0;
+
   .header {
     padding: 1%;
+
     .header-title-group {
       .loan-card-title {
         color: white;
         width: 90%;
+
         p {
           color: white;
         }
       }
     }
+
     .profile-image-container {
       margin: 1%;
+
       .profile-image {
         object-fit: cover;
         border-radius: 20px;
       }
     }
+
     .loan-actions {
       align-self: flex-end;
       margin: 0 1%;
       // min-width: 72%;
     }
+
     .loan-span {
       margin: 0 0.5%;
     }
   }
+
   .navigation-tabs {
     overflow: auto;
   }

src/app/loans/loans-account-stepper/loans-account-charges-step/loans-account-charges-step.component.scss

@@ -3,7 +3,7 @@ table {
 }
 
 .mat-elevation-z1 {
-  margin: 1em 0 1.5em 0;
+  margin: 1em 0 1.5em;
 }
 
 .margin-t {
@@ -20,7 +20,7 @@ h3 {
 }
 
 mat-divider {
-  margin: 1em 0 1em 0;
+  margin: 1em 0;
 }
 
 .margin-v {
@@ -28,7 +28,7 @@ mat-divider {
 }
 
 .margin-b {
-  margin: 0 0 1em 0;
+  margin: 0 0 1em;
 }
 
 .tableName {

src/app/loans/loans-account-stepper/loans-account-details-step/loans-account-details-step.component.scss

@@ -8,7 +8,7 @@ h3 {
 }
 
 mat-divider {
-  margin: 1em 0 2em 0;
+  margin: 1em 0 2em;
 }
 
 .margin-v {
@@ -16,7 +16,7 @@ mat-divider {
 }
 
 .margin-b {
-  margin: 0 0 1em 0;
+  margin: 0 0 1em;
 }
 
 .margin-t {

src/app/loans/loans-account-stepper/loans-account-preview-step/loans-account-preview-step.component.scss

@@ -3,10 +3,12 @@ table {
 }
 
 .mat-elevation-z1 {
-  margin: 1em 0 1.5em 0;
+  margin: 1em 0 1.5em;
 }
 
-h2, h3, h4 {
+h2,
+h3,
+h4 {
   margin: 0;
   font-weight: 500;
 }
@@ -16,7 +18,7 @@ span {
 }
 
 mat-divider {
-  margin: 0 0 0.5em 0;
+  margin: 0 0 0.5em;
 }
 
 .margin-t {

src/app/loans/loans-account-stepper/loans-account-terms-step/loans-account-terms-step.component.scss

@@ -8,7 +8,7 @@ h3 {
 }
 
 mat-divider {
-  margin: 1em 0 2em 0;
+  margin: 1em 0 2em;
 }
 
 .margin-v {
@@ -16,7 +16,7 @@ mat-divider {
 }
 
 .margin-b {
-  margin: 0 0 1em 0;
+  margin: 0 0 1em;
 }
 
 .margin-t {

src/app/loans/loans-view/charges-tab/charges-tab.component.scss

@@ -1,18 +1,22 @@
 .tab-container {
   padding: 1%;
   margin: 1%;
+
   h3 {
     margin: 1% auto;
   }
+
   table {
     width: 100%;
     margin-top: 3%;
+
     .account-action-button {
       min-width: 26px;
       padding: 0 6px;
       margin: 4px;
       line-height: 25px;
     }
+
     .select-row:hover {
       cursor: pointer;
     }

src/app/loans/loans-view/external-asset-owner-tab/external-asset-owner-tab.component.scss

@@ -1,5 +1,6 @@
 .tab-container {
-  padding-bottom: 2%;
+  padding: 1% 1% 2%;
+  margin: 1%;
 
   h3 {
     margin: 1% auto;
@@ -8,6 +9,7 @@
   .transaction-buttons {
     padding-bottom: 1rem;
     padding-top: 1rem;
+
     .accruals {
       padding-top: 1%;
     }
@@ -28,20 +30,13 @@
   }
 }
 
-.tab-container {
-	padding: 1%;
-	margin: 1%;
-}
-
 .external-asset-owner-status {
   color: black;
 }
 
 .account-action-button {
   min-width: 26px;
-  padding: 0 0 3px 0;
+  padding: 0 0 3px;
   margin: 0 2%;
   line-height: 25px;
 }
-
-

src/app/loans/loans-view/external-asset-owner-tab/external-asset-transfer/external-asset-transfer.component.scss

@@ -1,5 +1,4 @@
 .asset-transfer-container {
-
   height: 150px;
 
   .status {

src/app/loans/loans-view/loan-account-actions/charge-off/charge-off.component.scss

@@ -1,4 +1,3 @@
-
 .container {
   max-width: 37rem;
 }

src/app/loans/loans-view/loan-account-actions/create-guarantor/create-guarantor.component.scss

@@ -1,8 +1,7 @@
 .container {
-
   .mat-table {
     display: block;
-    font-family: Tahoma, Verdana;
+    font-family: Tahoma, Verdana, sans-serif;
     width: 100%;
   }
 
@@ -27,5 +26,4 @@
     padding-left: 0;
     margin-bottom: 0;
   }
-
 }

src/app/loans/loans-view/loan-account-actions/loan-screen-reports/loan-screen-reports.component.scss

@@ -1,8 +1,10 @@
 .container {
   max-width: 37rem;
+
   .print {
     align-self: flex-end;
   }
+
   .screen-report {
     text-align: center;
   }

src/app/loans/loans-view/loan-account-actions/view-guarantors/view-guarantors.component.scss

@@ -1,10 +1,12 @@
 .view-guarantors-account-tables {
   padding: 1%;
   margin: 1%;
+
   .table-headers {
     margin: 0;
     padding: 6px;
   }
+
   td {
     padding: 3px;
   }
@@ -12,6 +14,7 @@
 
 table {
   width: 100%;
+
   .account-action-button {
     min-width: 26px;
     padding: 0 6px;

src/app/loans/loans-view/loan-collateral-tab/loan-collateral-tab.component.scss

@@ -1,6 +1,7 @@
 table {
   width: 100%;
   margin-top: 3%;
+
   .document-action-button {
     min-width: 26px;
     padding: 0 6px;

src/app/loans/loans-view/loan-delinquency-tags-tab/loan-delinquency-tags-tab.component.scss

@@ -5,6 +5,7 @@ table {
 .container {
   padding-top: 1%;
   padding-bottom: 2%;
+
   .delete-button {
     margin-left: 1%;
   }

src/app/loans/loans-view/loan-documents-tab/loan-documents-tab.component.scss

@@ -1,6 +1,7 @@
 table {
   width: 100%;
   margin-top: 3%;
+
   .document-action-button {
     min-width: 26px;
     padding: 0 6px;

src/app/loans/loans-view/loan-tranche-details/loan-tranche-details.component.scss

@@ -5,6 +5,7 @@ table {
 .container {
   padding-top: 1%;
   padding-bottom: 2%;
+
   .delete-button {
     margin-left: 1%;
   }

src/app/loans/loans-view/repayment-schedule-tab/repayment-schedule-tab.component.scss

@@ -1,4 +1,5 @@
-@import "assets/styles/helper";
+@use 'assets/styles/helper';
+@use 'assets/styles/colours' as *;
 
 table {
   width: 100%;

src/app/loans/loans-view/reschedule-loan-tab/reschedule-loan-tab.component.scss

@@ -1,8 +1,9 @@
 table {
   width: 100%;
+
   .action-button {
     min-width: 26px;
-    padding: 0 0 3px 0;
+    padding: 0 0 3px;
     margin: 0 2%;
     line-height: 25px;
   }

src/app/loans/loans-view/standing-instructions-tab/standing-instructions-tab.component.scss

@@ -1,14 +1,18 @@
 .tab-container {
   padding: 1%;
   margin: 1%;
+
   h3 {
     margin: 1% auto;
   }
+
   .action-button {
     margin-left: auto;
   }
+
   table {
     width: 100%;
+
     .account-action-button {
       min-width: 26px;
       padding: 0 6px;

src/app/loans/loans-view/transactions-tab/transactions-tab.component.scss

@@ -1,4 +1,5 @@
-@import "assets/styles/helper";
+@use 'assets/styles/helper';
+@use 'assets/styles/colours' as *;
 
 .container {
   padding-bottom: 2%;
@@ -6,6 +7,7 @@
   .transaction-buttons {
     padding-bottom: 1rem;
     padding-top: 1rem;
+
     .accruals {
       padding-top: 1%;
     }
@@ -13,9 +15,10 @@
 
   table {
     width: 100%;
+
     .account-action-button {
       min-width: 26px;
-      padding: 0 0 3px 0;
+      padding: 0 0 3px;
       margin: 0 2%;
       line-height: 25px;
     }
@@ -24,21 +27,27 @@
       text-decoration: line-through;
       color: $status-active-overdue;
     }
+
     .linked {
       color: $status-approved;
     }
+
     .accrual {
       color: $msg-default;
     }
+
     .down-payment {
       color: $status-downpayment;
     }
+
     .chargeoff {
       color: $status-chargeoff;
     }
+
     .reage {
       color: $status-reage;
     }
+
     .reamortize {
       color: $status-reamortize;
     }

src/app/loans/loans-view/transactions/view-reciept/view-reciept.component.scss

@@ -1,5 +1,6 @@
 .container {
   max-width: 50rem;
+
   .back-button {
     max-height: 2%;
     margin-bottom: 2%;