From 05d282c010f3d269876e25713ecc37e29b26815f Mon Sep 17 00:00:00 2001
From: Balaji-Sridharan_NYULH <Balaji.Sridharan@nyulangone.org>
Date: Sun, 24 Nov 2024 17:23:47 +0530
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A8=20Fix=20SCSS=20Lint=20issues?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Change @import to @use
---
 src/stylesheets/datepicker.scss | 59 +++++++++++++++++++++++++--------
 src/stylesheets/mixins.scss     |  6 ++--
 2 files changed, 50 insertions(+), 15 deletions(-)

diff --git a/src/stylesheets/datepicker.scss b/src/stylesheets/datepicker.scss
index 8b08ba3cb..ca6bbb0aa 100644
--- a/src/stylesheets/datepicker.scss
+++ b/src/stylesheets/datepicker.scss
@@ -1,6 +1,6 @@
 @use "sass:color";
-@import "variables.scss";
-@import "mixins.scss";
+@use "variables.scss" as *;
+@use "mixins.scss" as *;
 
 .react-datepicker-wrapper {
   display: inline-block;
@@ -362,17 +362,26 @@ h2.react-datepicker__current-month {
     color: #fff;
 
     &:hover {
-      background-color: color.adjust($datepicker__selected-color, $lightness: -5%);
+      background-color: color.adjust(
+        $datepicker__selected-color,
+        $lightness: -5%
+      );
     }
   }
 
   &--keyboard-selected {
     border-radius: $datepicker__border-radius;
-    background-color: color.adjust($datepicker__selected-color, $lightness: 10%);
+    background-color: color.adjust(
+      $datepicker__selected-color,
+      $lightness: 10%
+    );
     color: #fff;
 
     &:hover {
-      background-color: color.adjust($datepicker__selected-color, $lightness: -5%);
+      background-color: color.adjust(
+        $datepicker__selected-color,
+        $lightness: -5%
+      );
     }
   }
 }
@@ -418,7 +427,10 @@ h2.react-datepicker__current-month {
     color: #fff;
 
     &:not([aria-disabled="true"]):hover {
-      background-color: color.adjust($datepicker__highlighted-color, $lightness: -5%);
+      background-color: color.adjust(
+        $datepicker__highlighted-color,
+        $lightness: -5%
+      );
     }
 
     &-custom-1 {
@@ -454,7 +466,10 @@ h2.react-datepicker__current-month {
     }
 
     &:not([aria-disabled="true"]):hover {
-      background-color: color.adjust($datepicker__holidays-color, $lightness: -10%);
+      background-color: color.adjust(
+        $datepicker__holidays-color,
+        $lightness: -10%
+      );
     }
 
     &:hover .overlay {
@@ -471,17 +486,26 @@ h2.react-datepicker__current-month {
     color: #fff;
 
     &:not([aria-disabled="true"]):hover {
-      background-color: color.adjust($datepicker__selected-color, $lightness: -5%);
+      background-color: color.adjust(
+        $datepicker__selected-color,
+        $lightness: -5%
+      );
     }
   }
 
   &--keyboard-selected {
     border-radius: $datepicker__border-radius;
-    background-color: color.adjust($datepicker__selected-color, $lightness: 45%);
+    background-color: color.adjust(
+      $datepicker__selected-color,
+      $lightness: 45%
+    );
     color: rgb(0, 0, 0);
 
     &:not([aria-disabled="true"]):hover {
-      background-color: color.adjust($datepicker__selected-color, $lightness: -5%);
+      background-color: color.adjust(
+        $datepicker__selected-color,
+        $lightness: -5%
+      );
     }
   }
 
@@ -550,7 +574,10 @@ h2.react-datepicker__current-month {
 
     .react-datepicker__year-read-view--down-arrow,
     .react-datepicker__month-read-view--down-arrow {
-      border-top-color: color.adjust($datepicker__muted-color, $lightness: -10%);
+      border-top-color: color.adjust(
+        $datepicker__muted-color,
+        $lightness: -10%
+      );
     }
   }
 
@@ -613,11 +640,17 @@ h2.react-datepicker__current-month {
     background-color: $datepicker__muted-color;
 
     .react-datepicker__navigation--years-upcoming {
-      border-bottom-color: color.adjust($datepicker__muted-color, $lightness: -10%);
+      border-bottom-color: color.adjust(
+        $datepicker__muted-color,
+        $lightness: -10%
+      );
     }
 
     .react-datepicker__navigation--years-previous {
-      border-top-color: color.adjust($datepicker__muted-color, $lightness: -10%);
+      border-top-color: color.adjust(
+        $datepicker__muted-color,
+        $lightness: -10%
+      );
     }
   }
 
diff --git a/src/stylesheets/mixins.scss b/src/stylesheets/mixins.scss
index 2fb5443ac..f9d02351c 100644
--- a/src/stylesheets/mixins.scss
+++ b/src/stylesheets/mixins.scss
@@ -1,5 +1,7 @@
+@use "variables";
+
 %navigation-chevron {
-  border-color: $datepicker__muted-color;
+  border-color: variables.$datepicker__muted-color;
   border-style: solid;
   border-width: 3px 3px 0 0;
   content: "";
@@ -11,7 +13,7 @@
 
   &--disabled,
   &--disabled:hover {
-    border-color: $datepicker__navigation-disabled-color;
+    border-color: variables.$datepicker__navigation-disabled-color;
     cursor: default;
   }
 }