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

src/app/shared/accounting/view-savings-accounting-details/view-savings-accounting-details.component.scss

@@ -1,4 +1,4 @@
-@import "assets/styles/colours";
+@use 'assets/styles/colours' as *;
 
 .container {
   padding: 1%;
@@ -6,6 +6,13 @@
   width: 100%;
 }
 
+h2,
+h3,
+h4 {
+  margin: 0;
+  font-weight: 500;
+}
+
 table {
   width: 100%;
 
@@ -32,18 +39,13 @@ table {
 }
 
 .mat-h4 {
-    margin-top: 10px !important;
-    font-weight: 200;
-    color: $status-approved;
+  margin-top: 10px !important;
+  font-weight: 200;
+  color: $status-approved;
 }
 
 .mat-elevation-z1 {
-  margin: 1em 0 1.5em 0;
-}
-
-h2, h3, h4 {
-  margin: 0;
-  font-weight: 500;
+  margin: 1em 0 1.5em;
 }
 
 span {
@@ -51,7 +53,7 @@ span {
 }
 
 mat-divider {
-  margin: 0 0 0.5em 0;
+  margin: 0 0 0.5em;
 }
 
 .margin-t {

src/app/shared/footer/footer.component.scss

@@ -1,4 +1,5 @@
-@import "assets/styles/helper";
+@use 'assets/styles/helper';
+@use 'assets/styles/colours' as *;
 
 #footer {
   align-items: center;
@@ -26,7 +27,6 @@
     color: $status-approved;
   }
 
-
   table {
     border: none;
 
@@ -34,5 +34,4 @@
       background-color: transparent;
     }
   }
-
 }

src/app/shared/input-amount/input-amount.component.scss

@@ -1,21 +1,21 @@
 .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;
 }
 
 .right-hint {
-    min-width: 100%;
-    text-align: right;
-    font-weight: 500;
-}
+  min-width: 100%;
+  text-align: right;
+  font-weight: 500;
+}

src/app/shared/keyboard-shortcuts-dialog/keyboard-shortcuts-dialog.component.scss

@@ -1,12 +1,12 @@
 .modifierKey {
-    border: 1px solid #0000004d;
-    padding: 0.3rem;
-    background: #f8f8f8;
-    color: #00000086;
-    font-weight: bold;
-    border-radius: 0.3rem;
+  border: 1px solid #0000004d;
+  padding: 0.3rem;
+  background: #f8f8f8;
+  color: #00000086;
+  font-weight: bold;
+  border-radius: 0.3rem;
 }
 
 .mat-divider.mat-divider-inset {
-    margin-left: 0px;
+  margin-left: 0;
 }

src/app/shared/notifications-tray/notifications-tray.component.scss

@@ -1,5 +1,4 @@
 .mifosx-notifications-menu {
-
   max-height: 20rem !important;
   width: 12.5rem !important;
 
@@ -10,12 +9,13 @@
   [mat-menu-item] {
     height: 5rem;
     line-height: 2.2rem;
+
     .time {
       font-size: small;
     }
+
     &.unread {
-      background-color: #E0F7FF !important;
+      background-color: #e0f7ff !important;
     }
   }
-
 }

src/app/shared/search-tool/search-tool.component.scss

@@ -4,6 +4,7 @@
     width: 100%;
     font-size: 1rem;
   }
+
   .resource {
     max-width: 90px;
     width: 100%;

src/app/shared/server-selector/server-selector.component.scss

@@ -1,16 +1,15 @@
 .actions {
-    display: inline-block;
+  display: inline-block;
 }
 
 .rg {
-    float: right;
+  float: right;
 }
 
 .ml {
-    margin-left: 10px;
+  margin-left: 10px;
 }
 
-
 /* .pba {
     width: 80%;
     left: 10%;
@@ -18,9 +17,9 @@
 } */
 
 .sticky {
-    position: sticky;
-    z-index: 1; // appear above mat-option
-    top: 0; // fix at the top
-    background-color: white; // don't see mat-option when scrolling
-    box-shadow: 1px -2px 10px 0px grey; // shadow at the bottom
-}
+  position: sticky;
+  z-index: 1; // appear above mat-option
+  top: 0; // fix at the top
+  background-color: white; // don't see mat-option when scrolling
+  box-shadow: 1px -2px 10px 0 grey; // shadow at the bottom
+}

src/app/shared/svg-icon/svg-icon.component.scss

@@ -1,4 +1,4 @@
-@import "assets/styles/helper";
+@use 'assets/styles/helper';
 
 .icon {
   flex: 1;

src/app/shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.scss

@@ -1,13 +1,16 @@
-@import "assets/styles/helper";
+@use 'assets/styles/helper';
+@use 'assets/styles/colours' as *;
 
 .tab-container {
   padding: 1%;
   margin: 1%;
-  .action-button{
-      margin-left: auto;
+
+  .action-button {
+    margin-left: auto;
   }
+
   table {
-      width: 100%;
+    width: 100%;
   }
 }
 

src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.scss

@@ -1,10 +1,12 @@
-@import "assets/styles/helper";
+@use 'assets/styles/helper';
+@use 'assets/styles/colours' as *;
 
 .tab-container {
   padding: 1%;
   margin: 1%;
+
   .delete-button {
-      margin-left: 1%;
+    margin-left: 1%;
   }
 }
 

src/app/shared/tabs/entity-documents-tab/entity-documents-tab.component.scss

@@ -1,11 +1,12 @@
 table {
-	width: 100%;
-	margin-top: 3%;
+  width: 100%;
+  margin-top: 3%;
+
   .document-action-button {
-      min-width: 26px;
-      padding: 0 6px;
-      margin: 4px;
-      line-height: 25px;
+    min-width: 26px;
+    padding: 0 6px;
+    margin: 4px;
+    line-height: 25px;
   }
 }
 

src/app/shared/theme-picker/theme-picker.component.scss

@@ -1,4 +1,4 @@
-@use "sass:math";
+@use 'sass:math';
 
 $theme-picker-menu-padding: 8px;
 $theme-picker-grid-cell-size: 48px;
@@ -34,14 +34,14 @@ $theme-picker-accent-stripe-size: 6px;
     }
 
     &::after {
-      content: "";
+      content: '';
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       box-sizing: border-box;
-      border: 1px solid rgba(0, 0, 0, 0.2);
+      border: 1px solid rgb(0 0 0 / 20%);
       border-radius: 50%;
     }
   }

src/app/shared/transaction-payment-detail/transaction-payment-detail.component.scss

@@ -1,4 +1,4 @@
-@import "assets/styles/helper";
+@use 'assets/styles/helper';
 
 .content {
   width: 100%;