Merge pull request #207 from UncoderIO/ui-fix

Update sass files

Author: Mzapeka

uncoder-os/package.json

@@ -50,19 +50,19 @@
     "eslint-plugin-local-rules": "^3.0.2",
     "eslint-plugin-react-hooks": "^4.6.2",
     "file-loader": "^6.2.0",
-    "html-webpack-plugin": "^5.6.0",
-    "mini-css-extract-plugin": "^2.9.1",
+    "html-webpack-plugin": "^5.6.3",
+    "mini-css-extract-plugin": "^2.9.2",
     "node-polyfill-webpack-plugin": "^4.0.0",
-    "postcss": "^8.4.47",
+    "postcss": "^8.4.49",
     "postcss-inline-base64": "^7.3.1",
     "postcss-loader": "^8.1.1",
-    "sass": "^1.79.3",
-    "sass-loader": "^16.0.2",
+    "sass": "^1.81.0",
+    "sass-loader": "^16.0.3",
     "source-map-loader": "^5.0.0",
     "style-loader": "^4.0.0",
     "ts-loader": "^9.5.1",
-    "typescript": "^5.6.2",
-    "webpack": "5.94.0",
+    "typescript": "^5.6.3",
+    "webpack": "5.96.1",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "^5.1.0",
     "webpack-merge": "^6.0.1",

uncoder-os/src/assets/sass/fonts/index.sass

@@ -1,2 +1,2 @@
-@import ./inter
-@import ./jetBrains
+@use "./inter" as *
+@use "./jetBrains" as *

uncoder-os/src/assets/sass/helpers/common.sass

@@ -1,25 +1,29 @@
+@use "variables" as variables
+@use "mixins" as mixins
+@use "helpers" as helpers
+
 html,
 body
-  background-color: $backgroundDarkBlue
+  background-color: variables.$backgroundDarkBlue
 
 body
   min-width: 375px
-  font-family: $inter
+  font-family: variables.$inter
   font-size: 14px
   font-weight: 400
-  color: $textDefault
-  +scrollbars
+  color: variables.$textDefault
+  +mixins.scrollbars
 
 .inner
   margin: 0 auto
   padding: 0 32px
   width: 100%
   max-width: 1920px
-  +md
+  +helpers.md
     padding: 0 12px
   &--xl
     max-width: 1650px
-    +xlMin
+    +helpers.xlMin
       max-width: 1920px
   &--md
     max-width: 1110px
@@ -31,7 +35,7 @@ body
 .simplebar-track
   .simplebar-scrollbar
     &::before
-      background-color: $backgroundSilverBlue
+      background-color: variables.$backgroundSilverBlue
 
 .three-dots
   max-width: 100%
@@ -65,7 +69,7 @@ body
     left: 0
     width: 100%
     height: 1px
-    background-color: $backgroundWhite
+    background-color: variables.$backgroundWhite
     transform: scaleX(0)
     transition: transform .15s
   &:hover
@@ -77,15 +81,15 @@ body
   &--white
     &,
     &:hover
-      color: $textDefault
+      color: variables.$textDefault
       &::after
-        background-color: $backgroundWhite
+        background-color: variables.$backgroundWhite
   &--green
     &,
     &:hover
-      color: $textSuccess
+      color: variables.$textSuccess
       &::after
-        background-color: $backgroundSuccess
+        background-color: variables.$backgroundSuccess
   &--underline
     &::after
       transform: scaleX(1)

uncoder-os/src/assets/sass/helpers/index.sass

@@ -1,6 +1,6 @@
-@import mixins
-@import reset
-@import helpers
-@import margin
-@import variables
-@import common
+@use "mixins" as *
+@use "reset" as *
+@use "helpers" as *
+@use "margin" as *
+@use "variables" as *
+@use "common" as *

uncoder-os/src/assets/sass/helpers/mixins.sass

@@ -1,4 +1,6 @@
-=scrollbars($size: 6px, $foreground-color: $backgroundSilverBlue, $background-color: transparent)
+@use 'variables' as variables
+
+=scrollbars($size: 6px, $foreground-color: variables.$backgroundSilverBlue, $background-color: transparent)
   // Standard version (Firefox only for now)
   scrollbar-color: $foreground-color $background-color
   // For Chrome & Safari

uncoder-os/src/assets/sass/index.sass

@@ -1,2 +1,2 @@
-@import helpers/index
-@import fonts/index
+@use "helpers/index" as *
+@use "fonts/index" as *

uncoder-os/src/components/AdditionalButtons/AdditionalButton/AdditionalButton.sass

@@ -1,4 +1,4 @@
-@import ../../../assets/sass/helpers/variables
+@use "../../../assets/sass/helpers/variables" as *
 
 .additional-button
   text-align: center

uncoder-os/src/components/Banner/Banner.sass

@@ -1,5 +1,5 @@
-@import ../../assets/sass/helpers/variables
-@import ../../assets/sass/helpers/helpers
+@use "../../assets/sass/helpers/variables" as *
+@use "../../assets/sass/helpers/helpers" as *
 
 .banner-grid
   padding: 16px 24px

uncoder-os/src/components/Buttons/Button/Button.sass

@@ -1,4 +1,4 @@
-@import ../../../assets/sass/helpers/variables
+@use "../../../assets/sass/helpers/variables" as *
 
 .button
   padding: 0 10px

uncoder-os/src/components/Buttons/TranslateButton/TranslateButton.sass

@@ -1,8 +1,8 @@
-@import ../../../assets/sass/helpers/variables
+@use "../../../assets/sass/helpers/variables" as *
 
 .button--upper
   &:disabled, &:disabled:hover
     border-color: $borderDisabled
     background-color: $iconDisabled
     box-shadow: none
-    z-index: 1
+    z-index: 1