#2565 Resolve SASS deprecation warnings for Chelonia dashboard (#2599)

* retire some old default esbuild settings

* fix createCID issue

* update various sass partials with the latest syntaxes

Author: SebinSong

Gruntfile.dashboard.js

@@ -44,7 +44,6 @@ module.exports = (grunt) => {
   const esbuildOptionsBag = {
     default: {
       bundle: true,
-      incremental: true,
       loader: {
         '.eot': 'file',
         '.ttf': 'file',
@@ -57,7 +56,6 @@ module.exports = (grunt) => {
       sourcemap: isDevelopment,
       format: 'esm',
       external: ['*.eot', '*.ttf', '*woff', '*.woff2'],
-      watch: false,
       chunkNames: '[name]-[hash]-cached'
     },
     mainJS: {

backend/dashboard/assets/style/_base.scss

@@ -1,3 +1,5 @@
+@use "variables" as *;
+
 html {
   background-color: white;
   min-height: 19rem;

backend/dashboard/assets/style/_colors.scss

@@ -1,3 +1,5 @@
+@use "sass:list";
+
 $black: var(--black);
 $white: var(--white);
 $text_black: var(--text_black);
@@ -89,7 +91,7 @@ $colors_map: (
 // "light-theme" custom-variable declarations
 :root {
   @each $name, $values in $colors_map {
-    $light_value: nth($values, 1);
+    $light_value: list.nth($values, 1);
 
     --#{$name}: #{$light_value};
   }
@@ -98,7 +100,7 @@ $colors_map: (
 // "dark-theme" custom-variable declarations
 :root[data-theme="dark"] {
   @each $name, $values in $colors_map {
-    $dark_value: nth($values, 2);
+    $dark_value: list.nth($values, 2);
 
     --#{$name}: #{$dark_value};
   }

backend/dashboard/assets/style/_icons.scss

@@ -1,4 +1,4 @@
-// TODO Remove font-awesome and replace by https://icomoon.io font.
+@use "sass:map";
 
 // More fonts icon in node_module/fontawesome
 $icons: (
@@ -84,7 +84,7 @@ $icons: (
 }
 
 @mixin icon($name) {
-  content: map-get($icons, $name);
+  content: map.get($icons, $name);
   text-rendering: auto;
   line-height: 1;
   font-family: "Chelonia Icons";

backend/dashboard/assets/style/_layout.scss

@@ -1,3 +1,5 @@
+@use "variables" as *;
+
 $toolbarHeight: 2.75rem;
 
 .app-layout {

backend/dashboard/assets/style/_mixins.scss

@@ -1,3 +1,9 @@
+// Breakpoints
+$gap: 1rem;
+$phone_narrow: 441px;
+$tablet: 769px;
+$desktop: 1200px;
+
 @mixin fa($size, $dimensions) {
   display: inline-block;
   font-size: $size;

backend/dashboard/assets/style/_transitions.scss

@@ -1,4 +1,4 @@
-@import "_variables";
+@use "variables" as *;
 
 .fade-enter-active,
 .fade-leave-active {

backend/dashboard/assets/style/_typography.scss

@@ -1,3 +1,6 @@
+@use "variables" as *;
+@use "sass:list";
+
 @font-face {
   src: url(../fonts/Inter/Inter_Regular.woff2) format("woff2");
   font-family: "Inter";
@@ -61,13 +64,13 @@ $lineHeight: 3, 2.25, 1.6875, 1.3125, 1.175, 1;
 // From line height: 48px, 36px, 27px, 21px, 16px
 
 @each $size in $titles {
-  $i: index($titles, $size);
+  $i: list.index($titles, $size);
 
   .is-title-#{$i} {
     font-family: "Poppins";
     font-weight: bold;
     font-size: $size;
-    line-height: #{nth($lineHeight, $i)}rem;
+    line-height: #{list.nth($lineHeight, $i)}rem;
     letter-spacing: 1px;
   }
 }

backend/dashboard/assets/style/_utilities.scss

@@ -1,3 +1,5 @@
+@use "variables" as *;
+
 // spacing utiltity classes
 // utility classes for margins
 @for $n from 0 through 6 {

backend/dashboard/assets/style/_variables.scss

@@ -24,14 +24,6 @@ $size_extra-large: $size_1;
 $radius: 3px;
 $radius-large: 5px;
 
-// Breakpoints
-// // Same as JS breakpoints at breakpoints.js
-// TODO: Redefine the breakpoints with @mmbotelho in a next task.
-$gap: 1rem;
-$phone_narrow: 441px;
-$tablet: 769px;
-$desktop: 1200px;
-
 $transitionSpeed: 300ms;
 $formWidthConstraint: 36.5rem;
 
@@ -41,5 +33,5 @@ $formWidthConstraint: 36.5rem;
 // tag of .vue components, and so those classes would end up being
 // duplicated across all the injected component CSS
 
-@import "_mixins";
-@import "_colors";
+@forward "_mixins";
+@forward "_colors";

backend/dashboard/assets/style/components/_buttons.scss

@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 button,
 .button {
   position: relative;

backend/dashboard/assets/style/components/_forms.scss

@@ -1,3 +1,6 @@
+@use "../variables" as *;
+@use "../icons" as i;
+
 form {
   display: block;
   width: 100%;
@@ -178,7 +181,7 @@ p.error {
   user-select: none;
 
   &::before {
-    @include icon(close-circle);
+    @include i.icon(close-circle);
     position: relative;
     top: 2px;
     display: inline-block;

backend/dashboard/assets/style/components/_miscellaneous.scss

@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 // Various global classes for styling UI elements that are used across the app
 
 // section-title

backend/dashboard/assets/style/components/_skeletons.scss

@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 .skeleton {
   position: relative;
   display: block;

backend/dashboard/assets/style/components/_tables.scss

@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 table.table {
   position: relative;
 

backend/dashboard/assets/style/main.scss

@@ -2,17 +2,16 @@
 
 // Files here are currently the replica of the same files in the 'group-income' project,
 // but likely to be modified according to the design
-@import "_variables";
-@import "_reset";
-@import "_base";
-@import "_typography";
-@import "_utilities";
-@import "_icons";
-@import "_layout";
-@import "_transitions";
+@use "reset";
+@use "base";
+@use "typography";
+@use "utilities";
+@use "icons";
+@use "layout";
+@use "transitions";
 
-@import "components/_buttons";
-@import "components/_miscellaneous";
-@import "components/_tables";
-@import "components/_forms";
-@import "components/_skeletons";
+@use "components/buttons";
+@use "components/miscellaneous";
+@use "components/tables";
+@use "components/forms";
+@use "components/skeletons";

backend/dashboard/views/utils/dummy-data.js

@@ -1,7 +1,7 @@
 /* eslint-disable */
 
 // dummy placeholder data to be used in various pages
-import { createCID } from '@common/functions.js'
+import { createCID } from '~/shared/functions.js'
 import { addTimeToDate, MONTHS_MILLIS } from '@common/cdTimeUtils.js'
 import L from '@common/translations.js'