fixed deprecated SCSS syntax usage in files

apinkhasov101 · apinkhasov101 · commit 23ae71afae93 · 2025-01-16T09:57:43.000-06:00
diff --git a/app/charts/GrafanaEventChart/styles.scss b/app/charts/GrafanaEventChart/styles.scss
@@ -1,3 +1,5 @@
+
+
 #graphType {
     min-width: 100px;
     height: 25px;
diff --git a/app/components/About/styles.scss b/app/components/About/styles.scss
@@ -1,4 +1,4 @@
-@import '../../index.scss';
+@use '../../index.scss' as *; // @use '../../index' as index;
 
 .about {
   min-width: 421px;
diff --git a/app/components/ApplicationsCard/styles.scss b/app/components/ApplicationsCard/styles.scss
@@ -1,4 +1,4 @@
-@import '../../index.scss';
+@use '../../index.scss' as *;
 
 .card {
   display: flex;
diff --git a/app/components/Contact/styles.scss b/app/components/Contact/styles.scss
@@ -1,4 +1,4 @@
-@import '../../index.scss';
+@use '../../index.scss' as *;
 
 .contact {
   display: flex;
diff --git a/app/components/DashboardIcons/styles.scss b/app/components/DashboardIcons/styles.scss
@@ -1,4 +1,4 @@
-@import '../../index.scss';
+@use '../../index.scss' as *;
 
 .dashboardIconWrapper {
   margin-right: 37px;
diff --git a/app/components/Header/styles.scss b/app/components/Header/styles.scss
@@ -1,4 +1,5 @@
-@import '../../index.scss';
+@use '../../index.scss' as *;
+
 .microservice-header {
   width: 100%;
   @include centerWithFlex(center);
diff --git a/app/components/Occupied/styles.scss b/app/components/Occupied/styles.scss
@@ -1,4 +1,5 @@
-@import '../../index.scss';
+@use '../../index' as *;
+
 
 // MAIN DASHBOARD
 .dashboardArea {
diff --git a/app/components/Setting/styles.scss b/app/components/Setting/styles.scss
@@ -1,4 +1,4 @@
-@import '../../index.scss';
+@use '../../index.scss' as *;
 
 .settings {
   display: flex;
diff --git a/app/components/Splash/styles.scss b/app/components/Splash/styles.scss
@@ -1,4 +1,4 @@
-@import '../../index.scss'; // Update the import path according to your project structure
+@use '../../index.scss' as *; // Update the import path according to your project structure
 
 #splash {
   display: flex;
diff --git a/app/components/WindowBar/styles.scss b/app/components/WindowBar/styles.scss
@@ -1,4 +1,5 @@
-@import '../../index.scss';
+@use '../../index.scss' as *;
+
 #titleBar {
   position: fixed;
   display: flex;
diff --git a/app/containers/AWSGraphsContainer/styles.scss b/app/containers/AWSGraphsContainer/styles.scss
@@ -1,4 +1,4 @@
-@import '../../index.scss';
+@use '../../index.scss' as *;
 
 .AWS-container {
   margin-top: 40px;
diff --git a/app/containers/GraphsContainer/styles.scss b/app/containers/GraphsContainer/styles.scss
@@ -1,4 +1,4 @@
-@import '../../index.scss';
+@use '../../index.scss' as *;
 
 .traceContainer {
   display: flex;
diff --git a/app/containers/MainContainer/styles.scss b/app/containers/MainContainer/styles.scss
@@ -1,4 +1,4 @@
-@import '../../index.scss';
+@use '../../index.scss' as *;
 
 .main-container {
   background-color: $grey;
diff --git a/app/containers/ModifyMetricsContainer/styles.scss b/app/containers/ModifyMetricsContainer/styles.scss
@@ -1,4 +1,4 @@
-@import '../../index.scss';
+@use '../../index.scss' as *;
 
 .metricsSelector {
   max-width: 90%;
diff --git a/app/containers/SidebarContainer/styles.scss b/app/containers/SidebarContainer/styles.scss
@@ -1,4 +1,4 @@
-@import '../../index.scss';
+@use '../../index.scss' as *;
 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
 
 
diff --git a/app/index.scss b/app/index.scss
@@ -1,7 +1,7 @@
+@use "sass:color";
 @import url('https://fonts.googleapis.com/css?family=Baloo+Bhaijaan&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Open+Sans&family=Inter:wght@100&family=Inter:wght@100&family=Lexend+Peta&family=Nunito+Sans:wght@300;400;600&family=Quicksand:wght@300&display=swap');
 
-
 // sass constants
 
 // Chronos 6.0 colors
@@ -31,6 +31,8 @@ $gyellow: #febc2c;
 $ggreen: #32b44f;
 $gorange: #ffa500;
 
+
+
 // Graph colors:
 $purple: #4b54ea;
 $lightpurple: #5e84fb;
@@ -122,7 +124,7 @@ $sidebarWidth: 140px;
     background-color: $navy;
   }
   66% {
-    background-color: lighten($navy, 35%);
+    background-color: color.adjust($navy, $lightness: 35%);
   }
   100% {
     background-color: $navy;
diff --git a/app/modals/AddModal/AddModal.scss b/app/modals/AddModal/AddModal.scss
@@ -1,88 +1 @@
-@import '../../index.scss';
-
-.add-container {
-  @include centerModal(30%, 500px);
-
-  /* Header */
-  .add-header {
-    width: 100%;
-    padding: 20px 30px;
-    text-align: center;
-    border-bottom: thin solid $grey;
-    background-color: $grey;
-    border-top-left-radius: 5px;
-    border-top-right-radius: 5px;
-    color: $darkgrey;
-
-    h2 {
-      @include modalHeader();
-      font-size: 26px;
-      font-weight: 300;
-      color: $darkgrey;
-    }
-  }
-
-  /* Form */
-  form {
-    @include centerWithFlex($direction: column);
-    padding: 20px 30px;
-    width: 100%;
-    font-size: 12px;
-    font-family: 'Roboto';
-    color: $darkgrey;
-
-    p,
-    span {
-      color: rgb(211, 0, 0);
-    }
-
-    span {
-      font-weight: 300;
-      font-size: 90%;
-    }
-
-    p {
-      align-self: flex-start;
-    }
-
-    div {
-      @include centerWithFlex();
-
-      // <select /> margins
-      &:first-of-type {
-        margin-top: 20px;
-      }
-
-      // <textarea>
-      &:last-of-type {
-        @include centerWithFlex($justify: flex-start, $align: flex-start);
-      }
-    }
-
-    /* Submit button */
-    button {
-      font-family: 'Roboto';
-      font-size: 16px;
-      font-weight: 800;
-      height: 40px;
-      width: 50%;
-      color: #fff;
-      background-color: $header;
-      transition: 0.1s;
-      margin: 20px 0;
-      font-weight: 400;
-      letter-spacing: 2px;
-      border: none;
-      padding: 4px;
-      text-transform: uppercase;
-
-      &:hover {
-        background-color: $gblue;
-      }
-    }
-  }
-}
-
-::placeholder {
-  color: rgb(201, 201, 201);
-}
+@use '../../index.scss' as *;
diff --git a/app/modals/AwsModal/AwsModal.scss b/app/modals/AwsModal/AwsModal.scss
@@ -1,4 +1,4 @@
-@import '../../index.scss';
+@use '../../index.scss' as *;
 
 .add-container {
   @include centerModal(30%, 500px);
diff --git a/app/modals/EnvModal/EnvModal.scss b/app/modals/EnvModal/EnvModal.scss
@@ -1,4 +1,4 @@
-@import '../../index.scss';
+@use '../../index.scss' as *;
 
 .add-container {
   @include centerModal(30%, 500px);
diff --git a/app/modals/ServicesModal/ServicesModal.scss b/app/modals/ServicesModal/ServicesModal.scss
@@ -1,4 +1,4 @@
-@import '../../index.scss';
+@use '../../index.scss' as *;
 
 .servicesContainer {
   width: 100px;
diff --git a/app/modals/UserModal/UserModal.scss b/app/modals/UserModal/UserModal.scss
@@ -1,4 +1,5 @@
-@import '../../index.scss';
+@use '../../index.scss' as *;
+@use "sass:color";
 
 .add-container {
   @include centerModal(30%, 500px);
@@ -84,7 +85,7 @@
         transition: 0.2s;
 
         &:hover {
-          background-color: darken(#fff, 5%);
+          background-color: color.scale(#fff, $lightness: -5%);
         }
       }
 
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
diff --git a/webpack.config.js b/webpack.config.js

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+`
	`2`	`+`
`1`	`3`	`#graphType {`
`2`	`4`	`min-width: 100px;`
`3`	`5`	`height: 25px;`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-@import '../../index.scss';`
	`1`	`+@use '../../index.scss' as *; // @use '../../index' as index;`
`2`	`2`
`3`	`3`	`.about {`
`4`	`4`	`min-width: 421px;`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-@import '../../index.scss';`
	`1`	`+@use '../../index.scss' as *;`
`2`	`2`
`3`	`3`	`.card {`
`4`	`4`	`display: flex;`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-@import '../../index.scss'; // Update the import path according to your project structure`
	`1`	`+@use '../../index.scss' as *; // Update the import path according to your project structure`
`2`	`2`
`3`	`3`	`#splash {`
`4`	`4`	`display: flex;`