From 6e4d66333715c2e2eb2ba6805268c6879ebd7905 Mon Sep 17 00:00:00 2001 From: Hoan Luu Huu <110280845+xquanluu@users.noreply.github.com> Date: Tue, 15 Jul 2025 19:27:02 +0700 Subject: [PATCH] fixed deprecated api when migrating to sass 3 (#549) --- package-lock.json | 9 +++++---- package.json | 2 +- src/components/forms/selector/styles.scss | 2 +- .../forms/typeahead-selector/styles.scss | 14 +++++++------- .../internal/views/recent-calls/jaeger/styles.scss | 4 ++-- src/styles/_forms.scss | 6 +++--- src/styles/_grid.scss | 2 +- src/styles/_lists.scss | 2 +- src/styles/index.scss | 7 ++++--- vite.config.ts | 9 +++++++++ 10 files changed, 34 insertions(+), 23 deletions(-) diff --git a/package-lock.json b/package-lock.json index f9bf6d3..51fb333 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,7 @@ "hasInstallScript": true, "license": "MIT", "dependencies": { - "@jambonz/ui-kit": "^0.0.21", + "@jambonz/ui-kit": "^0.0.22", "@stripe/react-stripe-js": "^2.6.2", "@stripe/stripe-js": "^3.2.0", "dayjs": "^1.11.10", @@ -1033,9 +1033,10 @@ "dev": true }, "node_modules/@jambonz/ui-kit": { - "version": "0.0.21", - "resolved": "https://registry.npmjs.org/@jambonz/ui-kit/-/ui-kit-0.0.21.tgz", - "integrity": "sha512-tv0sPhzxS/ctJbgUxLVNY+7IjJb3OAhqrdYpmeW3lmEHi7+sHxpO2oMjaVTPFCN4vYh+QzyzT4eLQjpEUDd6sA==", + "version": "0.0.22", + "resolved": "https://registry.npmjs.org/@jambonz/ui-kit/-/ui-kit-0.0.22.tgz", + "integrity": "sha512-kaO094hexaBojrfN94Tm4NvuVi2I04hFnjcCYqQNl+y2h/Q64Gg/bHuqFetG+nVf4/fDQHSny6rLggs84fM2nQ==", + "license": "MIT", "engines": { "node": ">= 14" }, diff --git a/package.json b/package.json index a7a9e3d..57f3da5 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,7 @@ "deploy": "npm i && npm run build && npm run pm2" }, "dependencies": { - "@jambonz/ui-kit": "^0.0.21", + "@jambonz/ui-kit": "^0.0.22", "@stripe/react-stripe-js": "^2.6.2", "@stripe/stripe-js": "^3.2.0", "dayjs": "^1.11.10", diff --git a/src/components/forms/selector/styles.scss b/src/components/forms/selector/styles.scss index dcf84f4..d942dc5 100644 --- a/src/components/forms/selector/styles.scss +++ b/src/components/forms/selector/styles.scss @@ -25,7 +25,6 @@ } select { - @include ui-mixins.m(); appearance: none; padding: ui-vars.$px01 ui-vars.$px02; border-radius: ui-vars.$px01; @@ -33,6 +32,7 @@ background-color: ui-vars.$white; width: 100%; max-width: vars.$widthinput; + @include ui-mixins.m(); &:focus { border-color: ui-vars.$dark; diff --git a/src/components/forms/typeahead-selector/styles.scss b/src/components/forms/typeahead-selector/styles.scss index 3131b23..8c26835 100644 --- a/src/components/forms/typeahead-selector/styles.scss +++ b/src/components/forms/typeahead-selector/styles.scss @@ -28,7 +28,6 @@ } @mixin typeahead-input { - @include ui-mixins.m(); appearance: none; padding: ui-vars.$px01 ui-vars.$px02; border-radius: ui-vars.$px01; @@ -37,6 +36,7 @@ max-width: vars.$widthtypeaheadinput; transition: border-color 0.2s ease; font-family: inherit; + @include ui-mixins.m(); &:focus { border-color: ui-vars.$dark; @@ -84,7 +84,6 @@ } @mixin typeahead-dropdown { - @include ui-mixins.m(); position: absolute; top: 100%; left: 0; @@ -93,6 +92,7 @@ border: 1px solid ui-vars.$dark; max-height: 200px; overflow-y: auto; + @include ui-mixins.m(); } @mixin typeahead-option { @@ -126,8 +126,8 @@ width: 100%; input { - @include typeahead-input(); width: 100%; + @include typeahead-input(); } span { @@ -135,8 +135,8 @@ } .typeahead-dropdown { - @include typeahead-dropdown(); z-index: 1000; + @include typeahead-dropdown(); } .typeahead-option { @@ -149,10 +149,10 @@ width: auto; input { - @include typeahead-input(); height: 34px; min-width: 370px; font-size: var(--mxs-size); + @include typeahead-input(); } span { @@ -160,13 +160,13 @@ } .typeahead-dropdown { - @include typeahead-dropdown(); width: 100%; + @include typeahead-dropdown(); } .typeahead-option { - @include typeahead-option(); font-size: var(--mxs-size); + @include typeahead-option(); } .pointerevents { diff --git a/src/containers/internal/views/recent-calls/jaeger/styles.scss b/src/containers/internal/views/recent-calls/jaeger/styles.scss index 8739c75..dddf234 100644 --- a/src/containers/internal/views/recent-calls/jaeger/styles.scss +++ b/src/containers/internal/views/recent-calls/jaeger/styles.scss @@ -4,7 +4,6 @@ .barGroup { border-radius: ui-vars.$px01; - @include mixins.code(); text-align: left; padding: ui-vars.$px03; color: ui-vars.$pink; @@ -13,6 +12,7 @@ margin-top: ui-vars.$px02; overflow-x: auto; overflow-y: scroll; + @include mixins.code(); @media (max-width: 600px) { padding: 15px; @@ -72,7 +72,6 @@ .spanDetailsWrapper { border-radius: ui-vars.$px01; - @include mixins.code(); text-align: left; padding: ui-vars.$px01; background-color: ui-vars.$white; @@ -82,6 +81,7 @@ max-width: ui-vars.$width-tablet-2; max-height: 500px; overflow-y: scroll; + @include mixins.code(); &__detailsWrapper { height: 100%; diff --git a/src/styles/_forms.scss b/src/styles/_forms.scss index 5b9bb4e..a2cdb5f 100644 --- a/src/styles/_forms.scss +++ b/src/styles/_forms.scss @@ -7,12 +7,12 @@ input[type="text"], input[type="email"], input[type="number"], input[type="password"] { - @include ui-mixins.m(); padding: ui-vars.$px01 ui-vars.$px02; border-radius: ui-vars.$px01; border: 2px solid ui-vars.$grey; background-color: ui-vars.$white; color: inherit; + @include ui-mixins.m(); &:focus { border-color: ui-vars.$dark; @@ -110,11 +110,11 @@ fieldset { } label { - @include ui-mixins.m(); - @include ui-mixins.font-medium(); display: flex; align-items: center; flex-wrap: wrap; + @include ui-mixins.font-medium(); + @include ui-mixins.m(); span { color: ui-vars.$jambonz; diff --git a/src/styles/_grid.scss b/src/styles/_grid.scss index 67d4c6f..47d6c46 100644 --- a/src/styles/_grid.scss +++ b/src/styles/_grid.scss @@ -21,10 +21,10 @@ } &__row { - @include ui-mixins.m(); display: grid; padding: ui-vars.$px03; align-items: center; + @include ui-mixins.m(); @include mixins.small() { padding: ui-vars.$px02; diff --git a/src/styles/_lists.scss b/src/styles/_lists.scss index 8689ae4..a9864ff 100644 --- a/src/styles/_lists.scss +++ b/src/styles/_lists.scss @@ -30,11 +30,11 @@ } &__title { - @include ui-mixins.p(); display: flex; align-items: center; grid-gap: ui-vars.$px02; color: ui-vars.$jambonz; + @include ui-mixins.p(); + .item__meta { @include mixins.small() { diff --git a/src/styles/index.scss b/src/styles/index.scss index f862500..5530c74 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,4 @@ +@use "sass:color"; @use "./forms"; // @use "./cards"; @use "./lists"; @@ -68,7 +69,7 @@ details { &.ok { color: ui-vars.$teal; border: 2px solid ui-vars.$teal; - background-color: mix(ui-vars.$white, ui-vars.$teal, 95%); + background-color: color.mix(ui-vars.$white, ui-vars.$teal, 95%); } &.not-tested { @@ -77,8 +78,8 @@ details { } summary { - @include ui-mixins.m(); cursor: pointer; + @include ui-mixins.m(); + * { margin-top: ui-vars.$px02; @@ -160,7 +161,6 @@ details { /** Used for recent-calls */ .pre-grid { - @include mixins.code(); display: grid; grid-template-columns: auto 1fr; grid-row-gap: ui-vars.$px01; @@ -171,6 +171,7 @@ details { background-color: ui-vars.$dark; border-radius: ui-vars.$px01; margin-top: ui-vars.$px02; + @include mixins.code(); } .pre-grid-white { diff --git a/vite.config.ts b/vite.config.ts index 2919ff1..caec701 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -15,6 +15,15 @@ export default defineConfig(() => { src: path.resolve(__dirname, "src"), }, }, + + // Configure Sass to use the modern API + css: { + preprocessorOptions: { + scss: { + api: "modern-compiler", + }, + }, + }, }; return config;