From 2a2e91757437a3c6190a6257a587cb5c9a3ca025 Mon Sep 17 00:00:00 2001
From: Daniel Mohns <dmohns@users.noreply.github.com>
Date: Fri, 15 Mar 2024 12:40:39 +0100
Subject: [PATCH] chore: Resolve some deprecation warnings (#61)

---
 .../ui/src/assets/sass/mpm/_variables.scss    |  8 ++---
 .../src/assets/sass/mpm/mixins/_chartist.scss | 36 +++++++++----------
 Website/ui/vue.config.js                      |  5 +++
 3 files changed, 27 insertions(+), 22 deletions(-)

diff --git a/Website/ui/src/assets/sass/mpm/_variables.scss b/Website/ui/src/assets/sass/mpm/_variables.scss
index 4bebde1f6..638bbdbeb 100644
--- a/Website/ui/src/assets/sass/mpm/_variables.scss
+++ b/Website/ui/src/assets/sass/mpm/_variables.scss
@@ -428,8 +428,8 @@ $container-lg: $container-large-desktop !default;
 $navbar-height: 50px !default;
 $navbar-margin-bottom: $line-height-computed !default;
 $navbar-border-radius: $border-radius-base !default;
-$navbar-padding-horizontal: floor(($grid-gutter-width / 2)) !default;
-$navbar-padding-vertical: (
+$navbar-padding-horizontal: floor(calc($grid-gutter-width / 2)) !default;
+$navbar-padding-vertical: calc(
     ($navbar-height - $line-height-computed) / 2
 ) !default;
 $navbar-collapse-max-height: 340px !default;
@@ -941,8 +941,8 @@ $contrast-factor: 40% !default;
 // inputs
 $mdb-input-placeholder-color: #aaaaaa !default;
 $mdb-input-underline-color: #d2d2d2 !default;
-$mdb-label-static-size-ratio: 75 / 100 !default;
-$mdb-help-block-size-ratio: 75 / 100 !default;
+$mdb-label-static-size-ratio: calc(75 / 100) !default;
+$mdb-help-block-size-ratio: calc(75 / 100) !default;
 
 $mdb-input-font-size-base: 14px !default;
 $mdb-input-font-size-large: ceil(($font-size-base * 1.25)) !default; // ~20px
diff --git a/Website/ui/src/assets/sass/mpm/mixins/_chartist.scss b/Website/ui/src/assets/sass/mpm/mixins/_chartist.scss
index e5757d43e..d4b294d8e 100644
--- a/Website/ui/src/assets/sass/mpm/mixins/_chartist.scss
+++ b/Website/ui/src/assets/sass/mpm/mixins/_chartist.scss
@@ -1,22 +1,22 @@
 // Scales for responsive SVG containers
 $ct-scales: (
-    (1),
-    (15/16),
-    (8/9),
-    (5/6),
-    (4/5),
-    (3/4),
-    (2/3),
-    (5/8),
-    (1/1.618),
-    (3/5),
-    (9/16),
-    (8/15),
-    (1/2),
-    (2/5),
-    (3/8),
-    (1/3),
-    (1/4)
+    calc(1),
+    calc(15 / 16),
+    calc(8 / 9),
+    calc(5 / 6),
+    calc(4 / 5),
+    calc(3 / 4),
+    calc(2 / 3),
+    calc(5 / 8),
+    calc(1 / 1.618),
+    calc(3 / 5),
+    calc(9 / 16),
+    calc(8 / 15),
+    calc(1 / 2),
+    calc(2 / 5),
+    calc(3 / 8),
+    calc(1 / 3),
+    calc(1 / 4)
 ) !default;
 $ct-scales-names: (
     ct-square,
@@ -60,7 +60,7 @@ $ct-class-start: ct-start !default;
 $ct-class-end: ct-end !default;
 
 // Container ratio
-$ct-container-ratio: (1/1.618) !default;
+$ct-container-ratio: calc(1 / 1.618) !default;
 
 // Text styles for labels
 $ct-text-color: rgba(0, 0, 0, 0.4) !default;
diff --git a/Website/ui/vue.config.js b/Website/ui/vue.config.js
index cad54e04c..c9292d240 100644
--- a/Website/ui/vue.config.js
+++ b/Website/ui/vue.config.js
@@ -3,4 +3,9 @@ module.exports = {
     devServer: {
         allowedHosts: 'all',
     },
+    configureWebpack: {
+        performance: {
+            hints: false,
+        },
+    },
 }