Update sass dep to latest version

Enterprise-CMCS · Nov 12, 2024 · 68d2f6b · 68d2f6b
1 parent b7e2c23
commit 68d2f6b
Show file tree

Hide file tree

Showing 14 changed files with 431 additions and 306 deletions.
diff --git a/services/ui-src/package.json b/services/ui-src/package.json
@@ -17,12 +17,12 @@
     "@testing-library/user-event": "^14.5.1",
     "@vitejs/plugin-react": "^4.2.1",
     "aws-amplify": "^6.6.4",
-    "date-fns": "^3.6.0",
+    "date-fns": "^4.1.0",
     "font-awesome": "^4.7.0",
-    "jsonpath": "^1.0.2",
-    "launchdarkly-react-client-sdk": "^3.3.2",
-    "mathjs": "^7.5.0",
-    "prop-types": "^15.7.2",
+    "jsonpath": "^1.1.1",
+    "launchdarkly-react-client-sdk": "^3.6.0",
+    "mathjs": "^13.2.1",
+    "prop-types": "^15.8.1",
     "react": "^16.13.1",
     "react-data-table-component": "^6.11.6",
     "react-data-table-component-extensions": "^1.5.0",
@@ -35,8 +35,8 @@
     "redux": "4.2.1",
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.3.0",
-    "sass": "^1.77.1",
-    "vite": "^5.4.6",
+    "sass": "^1.80.6",
+    "vite": "^5.4.11",
     "vite-tsconfig-paths": "^4.3.2"
   },
   "scripts": {

diff --git a/services/ui-src/src/styles/_actionCard.scss b/services/ui-src/src/styles/_actionCard.scss
@@ -1,21 +1,26 @@
+@use "variables";
+
 /**********************
   Action Card
 **********************/
 
 .action-card {
+
+
+  display: flex;
+  flex-direction: column;
+  padding: variables.$padding * 3 variables.$padding * 4;
+  margin-top: variables.$margin * 4;
+  margin-bottom: variables.$margin * 8;
+
   box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px,
-    rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
+  rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
+
   @media screen and (min-width: 768px) {
     box-shadow: rgba(14, 30, 37, 0.08) 0px 2px 4px 0px,
-      rgba(14, 30, 37, 0.18) 0px 2px 8px 0px;
+    rgba(14, 30, 37, 0.18) 0px 2px 8px 0px;
   }
 
-  display: flex;
-  flex-direction: column;
-  padding: $padding * 3 $padding * 4;
-  margin-top: $margin * 4;
-  margin-bottom: $margin * 8;
-
   @media only screen and (min-width: 768px) {
     flex-direction: row;
   }
@@ -26,17 +31,17 @@
     &-container {
       text-align: center;
       @media only screen and (min-width: 768px) {
-        margin-right: $margin * 2;
+        margin-right: variables.$margin * 2;
         text-align: left;
       }
     }
   }
 
   &-info {
-    margin-left: $margin * 2;
+    margin-left: variables.$margin * 2;
 
     p:first-child {
-      margin-top: $margin;
+      margin-top: variables.$margin;
     }
 
     p:last-child {

diff --git a/services/ui-src/src/styles/_footer.scss b/services/ui-src/src/styles/_footer.scss
@@ -1,10 +1,13 @@
+@use "sass:color";
+@use "variables";
+
 /**********************
   FOOTER
 **********************/
 .footer {
-  background: $color-gray-lightest;
+  background: variables.$color-gray-lightest;
   font-size: 0.85rem;
-  color: $color-gray;
+  color: variables.$color-gray;
   margin-top: 2rem;
   text-align: center;
   flex-shrink: 0;
@@ -14,10 +17,10 @@
   }
 
   .adverts {
-    padding: ($padding * 4) $padding * 2;
+    padding: (variables.$padding * 4) variables.$padding * 2;
 
     @media only screen and (min-width: 544px) {
-      padding: ($padding * 4) 0;
+      padding: (variables.$padding * 4) 0;
     }
   }
 
@@ -33,14 +36,14 @@
     font-size: 14px;
     line-height: 21px;
     color: #212121;
-    margin-top: $margin * 2;
+    margin-top: variables.$margin * 2;
     @media only screen and (min-width: 768px) {
       margin-top: 0;
     }
   }
 
   .chip-info {
-    margin-bottom: $margin * 2;
+    margin-bottom: variables.$margin * 2;
 
     @media (min-width: 768px) {
       margin-bottom: 0;
@@ -95,22 +98,22 @@
   }
 
   .info {
-    background-color: $brand-tertiary;
-    color: $white;
-    padding: ($padding * 2) $padding * 2;
+    background-color: variables.$brand-tertiary;
+    color: variables.$white;
+    padding: (variables.$padding * 2) variables.$padding * 2;
 
     @media only screen and (min-width: 544px) {
-      padding: ($padding * 2) 0;
+      padding: (variables.$padding * 2) 0;
     }
 
     a,
     a:visited {
-      color: $white;
+      color: variables.$white;
       text-decoration: none;
 
       &:hover,
       &:active {
-        color: darken($lily-white, 20);
+        color: color.adjust(variables.$lily-white, $lightness: -20%);
       }
     }
 
@@ -127,27 +130,27 @@
       }
 
       &:first-child {
-        padding-right: $padding;
+        padding-right: variables.$padding;
         border-right: 0;
 
         @media only screen and (min-width: 768px) {
-          border-right: 1px solid $white;
+          border-right: 1px solid variables.$white;
         }
       }
 
       &:last-child {
-        margin-top: $margin;
+        margin-top: variables.$margin;
 
         @media only screen and (min-width: 768px) {
-          padding-left: $padding;
+          padding-left: variables.$padding;
           margin-top: 0;
         }
       }
     }
 
     .address {
-      margin-top: $margin * 4;
-      font-weight: $font-weight-bold;
+      margin-top: variables.$margin * 4;
+      font-weight: variables.$font-weight-bold;
       text-align: left;
 
       @media only screen and (min-width: 768px) {