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": [
-          "mat-spinner",
-          "mat-radio-button"
-        ]
+        "ignoreTypes": ["/^mat/", "/^mifosx/", "fa-icon", "ng-template"]
       }
     ],
     "selector-pseudo-element-no-unknown": [
@@ -45,8 +44,6 @@
         "ignorePseudoElements": ["ng-deep"]
       }
     ],
-    "unit-whitelist": ["px", "%", "em", "rem", "vw", "vh", "deg", "s"],
-    "max-empty-lines": 2,
-    "max-line-length": 120
+    "unit-allowed-list": ["px", "%", "em", "rem", "vw", "vh", "deg", "s", "ms"]
   }
 }

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-config-recommended-scss": "3.3.0",
-    "stylelint-config-standard": "18.3.0",
-    "stylelint-scss": "3.6.1",
+    "stylelint": "^16.10.0",
+    "stylelint-config-recommended-scss": "^14.1.0",
+    "stylelint-config-standard": "^36.0.1",
+    "stylelint-scss": "^6.8.1",
     "tailwindcss": "^3.3.3",
     "ts-node": "8.2.0",
     "typescript": "4.6.4"
@@ -130,4 +130,4 @@
     "node": ">= 16.15.1",
     "npm": ">= 8.11.0"
   }
-}
+}

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

@@ -1,5 +1,5 @@
 .container {
-  .filter-button{
+  .filter-button {
     height: 2.5rem;
     margin-top: 1rem;
   }
@@ -7,14 +7,15 @@
 
 table {
   width: 100%;
-    .account-action-button{
-      min-width: 26px;
-      padding: 0 6px;
-      margin: 4px;
-      line-height: 25px;
-    }
+
+  .account-action-button {
+    min-width: 26px;
+    padding: 0 6px;
+    margin: 4px;
+    line-height: 25px;
+  }
 }
 
 .mat-divider {
-  border-top-color: #ffffff;
+  border-top-color: #fff;
 }

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

@@ -1,20 +1,22 @@
-h2, h3, h4 {
-    margin: 0;
-    font-weight: 500;
+h2,
+h3,
+h4 {
+  margin: 0;
+  font-weight: 500;
 }
 
 span {
-    margin: 0.5em 0;
+  margin: 0.5em 0;
 }
 
 .margin-t {
-    margin-top: 1em;
+  margin-top: 1em;
 }
 
 mat-divider {
-  margin: 0 0 0.5em 0;
+  margin: 0 0 0.5em;
 }
 
 .container {
-    max-width: 37rem;
+  max-width: 37rem;
 }

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

@@ -1,12 +1,12 @@
 h3 {
-    margin: 0;
-    font-weight: 500;
+  margin: 0;
+  font-weight: 500;
 }
 
 span {
-    margin: 0.5em 0;
+  margin: 0.5em 0;
 }
 
 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,20 +1,22 @@
 .mat-elevation-z1 {
-    margin: 1em 0 1.5em 0;
+  margin: 1em 0 1.5em;
 }
 
-h2, h3, h4 {
-    margin: 0;
-    font-weight: 500;
+h2,
+h3,
+h4 {
+  margin: 0;
+  font-weight: 500;
 }
 
 span {
-    margin: 0.5em 0;
+  margin: 0.5em 0;
 }
 
 .margin-t {
-    margin-top: 1em;
+  margin-top: 1em;
 }
 
 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/activate-center/activate-center.component.scss

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

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

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

src/app/centers/centers-view/center-actions/center-attendance/center-attendance.component.scss

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

src/app/centers/centers-view/center-actions/close-center/close-center.component.scss

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

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

@@ -1,35 +1,35 @@
 .container {
-	max-width: 50rem;
+  max-width: 50rem;
 
-	.mat-table {
-		display: block;
-		font-family: Tahoma, Verdana;
-		width: 100%;
-	}
-	
-	.mat-row,
-	.mat-header-row {
-		display: flex;
-		border-bottom-width: 1px;
-		border-bottom-style: solid;
-		align-items: center;
-		min-height: 48px;
-		padding: 0 24px;
-	}
-	
-	.mat-cell,
-	.mat-header-cell {
-		flex: 1;
-		overflow: hidden;
-		word-wrap: break-word;
-	}
-	
-	h3 {
-		padding-left: 0;
-		margin-bottom: 0;
-	}
+  .mat-table {
+    display: block;
+    font-family: Tahoma, Verdana, sans-serif;
+    width: 100%;
+  }
 
-	.group-card {
-		max-height: 20rem;
-	}
+  .mat-row,
+  .mat-header-row {
+    display: flex;
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    align-items: center;
+    min-height: 48px;
+    padding: 0 24px;
+  }
+
+  .mat-cell,
+  .mat-header-cell {
+    flex: 1;
+    overflow: hidden;
+    word-wrap: break-word;
+  }
+
+  h3 {
+    padding-left: 0;
+    margin-bottom: 0;
+  }
+
+  .group-card {
+    max-height: 20rem;
+  }
 }

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,48 +3,59 @@
   max-width: 80rem;
   width: 90%;
   padding: 0;
+
   .header {
     padding: 1%;
-    .header-title-group {
-      .center-card-title {
+  }
+
+  .center-meeting {
+    align-self: flex-end;
+    width: 300px;
+    height: 140px;
+
+    div,
+    ng-template > div {
+      background-color: #0a6aac;
+
+      p {
         color: white;
-        width: 90%;
-        p {
-          color: white;
-        }
+        padding: 0 10px;
       }
     }
-    .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 {
-        background-color: #0a6aac;
-        p {
-          color: white;
-          padding: 0 10px;
-        }
-      }
-    }
-    .center-actions {
-      align-self: flex-end;
-      margin: 0 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-actions {
+    align-self: flex-end;
+    margin: 0 1%;
+  }
+
   .navigation-tabs {
     overflow: auto;
   }
 }
 
 .meetingDetails {
-  float:right;
+  float: right;
   margin-right: 10px;
   border: 1px black solid;
   padding: 10px;

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

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

src/app/centers/centers.component.scss

@@ -1,8 +1,9 @@
 .container {
-  .action-button{
+  .action-button {
     margin-left: auto;
   }
-  .search-button{
+
+  .search-button {
     min-width: 30px;
     margin: 4px;
   }

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

@@ -1,10 +1,10 @@
 .container {
-    max-width: 37rem;
-  }
+  max-width: 37rem;
+}
 
 .mat-table {
   display: block;
-  font-family: Tahoma, Verdana;
+  font-family: Tahoma, Verdana, sans-serif;
   width: 50%;
 }
 

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

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

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

@@ -1,13 +1,16 @@
 .address {
-  .address-actions{
+  .address-actions {
     margin-top: 1%;
-    button{
+
+    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{
+  .family-member-actions {
     margin-top: 1%;
-    button{
+
+    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

@@ -1,14 +1,16 @@
 .tab-container {
-  padding:1%;
+  padding: 1%;
   margin: 1%;
 
   .address {
-    .address-actions{
+    .address-actions {
       margin-top: 1%;
-      button{
+
+      button {
         margin-right: 1%;
       }
     }
+
     h3 {
       margin: 1% auto;
     }
@@ -19,4 +21,3 @@
     }
   }
 }
-  

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

@@ -1,6 +1,6 @@
 table {
-	width: 100%;
-	margin-top: 3%;
+  width: 100%;
+  margin-top: 3%;
 }
 
 .tab-container {

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

@@ -1,19 +1,19 @@
-.delBtn{
-    width: 20px !important;
-    height: 25px;
-    min-width: 20px!important;
-    line-height: 0px;
-    padding-left: 10px;
-    padding-right: 25px;
+.delBtn {
+  width: 20px !important;
+  height: 25px;
+  min-width: 20px !important;
+  line-height: 0px;
+  padding-left: 10px;
+  padding-right: 25px;
 }
 
 .strikeoff {
-    color: red !important;
-    text-decoration: line-through;
-    text-decoration-style: double;
+  color: red !important;
+  text-decoration: line-through;
+  text-decoration-style: double;
 }
 
 .share-account-tables {
-    display: flex;
-    justify-content: space-between;
-} 
+  display: flex;
+  justify-content: space-between;
+}

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

@@ -1,4 +1,3 @@
 .container {
-    width: 37rem;
-  }
-  
+  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

@@ -1,19 +1,17 @@
 .fa-question-circle {
-    color: #1abc9c;
+  color: #1abc9c;
 }
 
 .fa {
-    display: inline-block;
-    font-family: FontAwesome;
-    font-style: normal;
-    font-weight: normal;
-    line-height: 1;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+  display: inline-block;
+  font-family: FontAwesome;
+  font-style: normal;
+  font-weight: normal;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
-* {
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
+mat-card {
+  box-sizing: border-box;
 }

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

@@ -1,19 +1,18 @@
 .surveyOption {
-    border: 1px solid #cbcbcb;
-    padding: 5px;
-
+  border: 1px solid #cbcbcb;
+  padding: 5px;
 }
 
 .displayQuestions {
-    margin-top: 20px;
+  margin-top: 20px;
 }
 
 .question {
-  padding: 10px 0px;
+  padding: 10px 0;
 }
 
 .wrap-mat-radio-label {
-  white-space: normal
+  white-space: normal;
 }
 
 .questionText {
@@ -21,16 +20,16 @@
 }
 
 .surveySelect {
-    height: 40px;
-    margin-bottom: 20px;
+  height: 40px;
+  margin-bottom: 20px;
 }
 
 .nameLabel {
-    width: 25%;
+  width: 25%;
 }
 
 .surveyCont {
-    padding: 5%
+  padding: 5%;
 }
 
 .button-cancel {

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

@@ -1,4 +1,4 @@
-.headingContent{
+.headingContent {
   margin-bottom: 1%;
   margin-top: 1%;
 }

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

@@ -1,14 +1,15 @@
 .add-family-member-container {
-    width: 70%;
-    margin: 0 auto;
-    padding: 5%;
-    @media screen and (min-width:960px) {
-      [fxFlex]:nth-child(odd) {
-        margin-right: 25px;
-      }
-      [fxFlex]:last-child {
-        margin-right: 0;
-      }
+  width: 70%;
+  margin: 0 auto;
+  padding: 5%;
+
+  @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

@@ -1,14 +1,16 @@
 .tab-container {
-  padding:1%;
+  padding: 1%;
   margin: 1%;
 
   .family-member {
-    .family-member-actions{
+    .family-member-actions {
       margin-top: 1%;
-      button{
+
+      button {
         margin-right: 1%;
       }
     }
+
     h3 {
       margin: 1% auto;
     }

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

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

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

@@ -1,18 +1,19 @@
 .tab-container {
-    padding: 1%;
-    margin: 1%;
-  
-    h3{
-      margin:1% auto;
-    }
-    table {
-      width: 100%;
-      .identity-action-button{
-        min-width: 26px;
-        padding: 0 6px;
-        margin: 4px;
-        line-height: 25px;
-      }
+  padding: 1%;
+  margin: 1%;
+
+  h3 {
+    margin: 1% auto;
+  }
+
+  table {
+    width: 100%;
+
+    .identity-action-button {
+      min-width: 26px;
+      padding: 0 6px;
+      margin: 4px;
+      line-height: 25px;
     }
   }
-  
+}

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,8 +21,9 @@ table {
   tr.select-row:hover {
     cursor: pointer;
   }
-  tr:nth-child(odd).td{
-    color : black;
+
+  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));
-  animation: grow 4s linear infinite, move 4s linear infinite;
+  background: linear-gradient(125deg, rgb(255 255 255), #c4d2e9, rgb(255 255 255));
+  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;
-  }
-  
+  width: 37rem;
+}

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

@@ -1,36 +1,43 @@
 .client-collateral-card {
-    margin: 0 auto;
-    max-width: 80rem;
-    width: 90%;
-    padding: 0;
+  margin: 0 auto;
+  max-width: 80rem;
+  width: 90%;
+  padding: 0;
 }
+
 .tab-container {
+  padding: 1%;
+  margin: 1%;
+
+  h3 {
+    margin: 1% auto;
+  }
+
+  .group-details-container {
+    border: 1px solid;
     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;
+      margin: 4px;
+      line-height: 25px;
     }
-    .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 {
+
+    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,20 +21,21 @@
 }
 
 .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;
+    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));
-  animation: grow 4s linear infinite, move 4s linear infinite;
+  background: linear-gradient(125deg, rgb(255 255 255), #c4d2e9, rgb(255 255 255));
+  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;
-    }
+    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,11 +136,8 @@
   .app-brand {
     .app-logo {
       margin: auto;
-      &:hover {
-        cursor: pointer;
-      }
     }
-    
+
     .app-logo-text {
       display: none;
     }
@@ -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,9 +47,9 @@
   display: none;
 }
 
-@media (max-width: 959px) {
+@media (width <= 959px) {
   .lg-icon {
-    display: block; 
+    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,15 +1,19 @@
 .tab-container {
   padding: 1%;
   margin: 1%;
+
   h3 {
-    margin:1% auto;
+    margin: 1% auto;
   }
+
   .action-button {
-      margin-left: auto;
+    margin-left: auto;
   }
+
   table {
     width: 100%;
-    .account-action-button{
+
+    .account-action-button {
       min-width: 26px;
       padding: 0 6px;
       margin: 4px;

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

@@ -1,26 +1,28 @@
 .tab-container {
   padding: 1%;
   margin: 1%;
+
   h3 {
-    margin:1% auto;
+    margin: 1% auto;
   }
+
   table {
     width: 100%;
-  
+
     tr.incentives-row {
       height: 0;
-  
+
       > td {
         padding: 0;
       }
-  
+
       .incentives {
         overflow: hidden;
       }
-  
+
       .mat-card {
         border-radius: 0;
       }
     }
-  }  
+  }
 }

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

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

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;
+    margin: 1% auto;
   }
+
   .action-button {
-      margin-left: auto;
+    margin-left: auto;
   }
+
   table {
     width: 100%;
     color: $black;
-    .account-action-button{
+
+    .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;
     }
@@ -34,4 +42,4 @@
 .select-row:hover {
   cursor: pointer;
   font-weight: 800;
-}
+}

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/fixed-deposits/fixed-deposits-account-actions/fixed-deposits-cash-transaction/fixed-deposits-cash-transaction.component.scss

@@ -1,15 +1,15 @@
 .expandcollapsebutton {
-    margin-top: -7px;
+  margin-top: -7px;
 }
 
 .container {
-    max-width: 37rem;
+  max-width: 37rem;
 }
 
 .right-input {
-    text-align: right;
+  text-align: right;
 }
 
 .right-label {
-    padding-right: 25px !important;
-}
+  padding-right: 25px !important;
+}

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/close-recurring-deposits-account/close-recurring-deposits-account.component.scss

@@ -3,6 +3,6 @@
 }
 
 .expandcollapsebutton {
-    margin-top: -7px;
-    margin-left: 2%;
+  margin-top: -7px;
+  margin-left: 2%;
 }

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/deposit-recurring-deposits-account/deposit-recurring-deposits-account.component.scss

@@ -3,8 +3,8 @@
 }
 
 .expandcollapsebutton {
-    margin-top: -7px;
-    margin-left: 2%;
+  margin-top: -7px;
+  margin-left: 2%;
 }
 
 .right-input {

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-t {
-  margin-top: 1em;
+  margin: 0 0 0.5em;
 }
 
 .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,15 +1,19 @@
 .tab-container {
   padding: 1%;
   margin: 1%;
+
   h3 {
-    margin:1% auto;
+    margin: 1% auto;
   }
+
   .action-button {
-      margin-left: auto;
+    margin-left: auto;
   }
+
   table {
     width: 100%;
-    .account-action-button{
+
+    .account-action-button {
       min-width: 26px;
       padding: 0 6px;
       margin: 4px;

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;
+    margin: 1% auto;
   }
+
   table {
     width: 100%;
 

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

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

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;
+    margin: 1% auto;
   }
+
   .action-button {
-      margin-left: auto;
+    margin-left: auto;
   }
+
   table {
     width: 100%;
-    .account-action-button{
+
+    .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%;
       }
@@ -26,4 +31,4 @@
 .select-row:hover {
   cursor: pointer;
   font-weight: 800;
-}
+}

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;
@@ -29,4 +30,4 @@
 .undo {
   background-color: $status-active-overdue;
   height: 4px;
-}
+}

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

@@ -1,10 +1,10 @@
 .container {
-    max-width: 50rem;
-  }
+  max-width: 50rem;
+}
 
 .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,15 +1,19 @@
 .tab-container {
   padding: 1%;
   margin: 1%;
+
   h3 {
-    margin:1% auto;
+    margin: 1% auto;
   }
+
   .action-button {
-      margin-left: auto;
+    margin-left: auto;
   }
+
   table {
     width: 100%;
-    .account-action-button{
+
+    .account-action-button {
       min-width: 26px;
       padding: 0 6px;
       margin: 4px;

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;
+    margin: 1% auto;
   }
+
   .group-details-container {
     border: 1px solid;
     padding: 1%;
   }
-  .action-button{
+
+  .action-button {
     margin-left: auto;
   }
+
   table {
     width: 100%;
-    .account-action-button{
+
+    .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

@@ -1,11 +1,11 @@
 .container {
-    max-width: 37rem;
-  }
+  max-width: 37rem;
+}
 
 .mat-table {
   display: block;
-  font-family: Tahoma, Verdana;
-  width: 100%
+  font-family: Tahoma, Verdana, sans-serif;
+  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;
-  .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 {
-        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;
   }
+
+  .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 {
+      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;
+  }
 }

src/app/groups/groups.component.scss

@@ -1,8 +1,9 @@
 .container {
-  .action-button{
+  .action-button {
     margin-left: auto;
   }
-  .search-button{
+
+  .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;
+    #office {
+      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;
+    #office {
+      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;
+    #office {
+      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, .frequent-activities {
+    .recent-activities,
+    .frequent-activities {
       .header {
         background-color: mat.get-color-from-palette($primary, 500);
         color: mat.get-contrast-color-from-palette($primary, 500);
@@ -14,16 +15,18 @@
 
     mifosx-amount-collected-pie,
     mifosx-amount-disbursed-pie,
-    mifosx-client-trends-bar  {
+    mifosx-client-trends-bar {
       .card {
         .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

@@ -6,17 +6,18 @@
   overflow-x: hidden;
 
   .search {
-      width: 100%;
-      padding: 12px;
-      mat-card-content {
-        width: 100%;
-      }
+    width: 100%;
+    padding: 12px;
 
-      mat-form-field {
-        width: 100%;
-      }
+    mat-card-content {
+      width: 100%;
     }
 
+    mat-form-field {
+      width: 100%;
+    }
+  }
+
   .top-card {
     flex: 1 0 100%;
 
@@ -28,8 +29,7 @@
 
   .bottom-card {
     display: flex;
-    flex-wrap: wrap;
-    flex-direction: row;
+    flex-flow: row wrap;
     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{
+a {
   text-decoration: none;
-  color: black
+  color: black;
 }

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

@@ -3,38 +3,46 @@
   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;
   }
 }
 
-.loans-overview{
+.loans-overview {
   font-size: 14px;
 }

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,9 +28,9 @@ mat-divider {
 }
 
 .margin-b {
-  margin: 0 0 1em 0;
+  margin: 0 0 1em;
 }
 
 .tableName {
-    padding-left: 2%;
+  padding-left: 2%;
 }

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/account-details/account-details.component.scss

@@ -1,7 +1,7 @@
 table {
-    width: 100%;
+  width: 100%;
 }
 
 span {
-    margin: 0.5em 0;
+  margin: 0.5em 0;
 }

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;
+    margin: 1% auto;
   }
+
   table {
     width: 100%;
     margin-top: 3%;
-    .account-action-button{
+
+    .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{
+.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/general-tab/general-tab.component.scss

@@ -20,4 +20,4 @@
 
 span {
   margin: 0.5em 0;
-}
+}