Fix React SCSS @import deprecation warnings

Author: AlisherAmonulloev

React/src/components/create-account-form/CreateAccountForm.scss

@@ -1,4 +1,4 @@
-@import "../../themes/variables.base.scss";
+@use "../../themes/variables.base.scss" as *;
 
 .create-account-form {
   .policy-info {

React/src/components/footer/Footer.scss

@@ -1,4 +1,4 @@
-@import "../../themes/variables.base.scss";
+@use "../../themes/variables.base.scss" as *;
 
 .footer {
   display: block;

React/src/components/header/Header.scss

@@ -1,5 +1,5 @@
-@import "../../themes/variables.base.scss";
-@import "../../dx-styles.scss";
+@use "../../themes/variables.base.scss" as *;
+@use "../../dx-styles.scss" as *;
 
 .header-component {
   flex: 0 0 auto;

React/src/components/login-form/LoginForm.scss

@@ -1,4 +1,4 @@
-@import "../../themes/variables.base.scss";
+@use "../../themes/variables.base.scss" as *;
 
 .login-form {
   .link {

React/src/components/reset-password-form/ResetPasswordForm.scss

@@ -1,4 +1,4 @@
-@import "../../themes/variables.base.scss";
+@use "../../themes/variables.base.scss" as *;
 
 .reset-password-form {
   .submit-button {

React/src/components/side-navigation-menu/SideNavigationMenu.scss

@@ -1,5 +1,6 @@
-@import "../../dx-styles.scss";
-@import "../../themes/variables.additional.scss";
+@use "../../dx-styles.scss" as *;
+@use "../../themes/variables.additional.scss" as *;
+@use "../../utils/patches.scss" as patches;
 
 .side-navigation-menu {
   display: flex;
@@ -94,6 +95,5 @@
 }
 
 .dx-drawer-overlap.pre-init-blink-fix {
-  @import "../../utils/patches.scss";
-  @include menu-pre-init-patch;
+  @include patches.menu-pre-init-patch;
 }

React/src/components/user-panel/UserPanel.scss

@@ -1,4 +1,4 @@
-@import "../../themes/variables.base.scss";
+@use "../../themes/variables.base.scss" as *;
 
 .user-info {
   display: flex;

React/src/dx-styles.scss

@@ -1,7 +1,8 @@
-@import "./themes/variables.base.scss";
+@use "sass:color";
+@use "./themes/variables.base.scss" as *;
 
 .app {
-  background-color: darken($base-bg, 5.00);
+  background-color: color.adjust($base-bg, $lightness: -5%);
   display: flex;
   height: 100%;
   width: 100%;

React/src/layouts/side-nav-inner-toolbar/side-nav-inner-toolbar.scss

@@ -1,9 +1,10 @@
+@use "../../themes/variables.additional.scss" as *;
+
 .side-nav-inner-toolbar {
   width: 100%;
 }
 
 #navigation-header {
-  @import "../../themes/variables.additional.scss";
   background-color: $base-accent;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
 

React/src/layouts/single-card/single-card.scss

@@ -1,4 +1,4 @@
-@import "../../themes/variables.base.scss";
+@use "../../themes/variables.base.scss" as *;
 
 .single-card {