From a3aeba172f48a98550befddcbe1fdd1bf7ba0427 Mon Sep 17 00:00:00 2001 From: Daniil Lohvinov Date: Mon, 4 Dec 2023 23:51:05 +0200 Subject: [PATCH 1/2] refactor: colors in progress [WTEL-3902] --- package-lock.json | 14 +++++++------- package.json | 2 +- src/app/components/utils/code-editor.vue | 2 ++ src/app/css/main.scss | 1 + .../_reusable/app-header/components/app-header.vue | 7 +++++++ .../_shared/object-wrap/the-object-wrap.vue | 2 +- .../_shared/upload-csv-popup/css/upload-popup.scss | 2 +- .../application-hub/components/application-hub.vue | 2 +- .../components/all-licenses/all-licenses.vue | 8 ++++---- .../users/components/opened-user-devices.vue | 1 + .../google/opened-cognitive-profile-google.vue | 2 +- .../modules/flow/components/create-flow-popup.vue | 1 + .../diagram/components/opened-flow-diagram.vue | 2 +- .../components/_internals/start-category-lvl-2.vue | 6 +++++- .../start-page/components/the-start-page.vue | 6 +++--- src/modules/start-page/css/_start-category.scss | 1 + 16 files changed, 38 insertions(+), 21 deletions(-) diff --git a/package-lock.json b/package-lock.json index ecf93e19d..b9684bb4f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,7 @@ "@vuelidate/validators": "^2.0.0", "@vueuse/core": "^10.3.0", "@webitel/flow-ui-sdk": "^0.1.14", - "@webitel/ui-sdk": "^23.12.51", + "@webitel/ui-sdk": "^23.12.75", "axios": "^0.27.1", "clipboard-copy": "^4.0.1", "cron-validator": "^1.3.1", @@ -1372,9 +1372,9 @@ } }, "node_modules/@webitel/ui-sdk": { - "version": "23.12.51", - "resolved": "https://registry.npmjs.org/@webitel/ui-sdk/-/ui-sdk-23.12.51.tgz", - "integrity": "sha512-8jUBmno0RkpQEFm0s9dLmoIh/UQXHiAolA+LTldGVmjMtRVr7/Hs2c34XngL3w0iqzC3FTcv80qedfzm08YPRQ==", + "version": "23.12.75", + "resolved": "https://registry.npmjs.org/@webitel/ui-sdk/-/ui-sdk-23.12.75.tgz", + "integrity": "sha512-a/dphmEzjyeJYjBjLIP0Wo8sVuYFx7S3/O8IlBr9Atj78HLw81iI7IFiSWK/W+AkoAMAH/yxfO8ix5kiCXnCTA==", "dependencies": { "@floating-ui/vue": "^1.0.1", "@vuelidate/core": "^2.0.3", @@ -9252,9 +9252,9 @@ } }, "@webitel/ui-sdk": { - "version": "23.12.51", - "resolved": "https://registry.npmjs.org/@webitel/ui-sdk/-/ui-sdk-23.12.51.tgz", - "integrity": "sha512-8jUBmno0RkpQEFm0s9dLmoIh/UQXHiAolA+LTldGVmjMtRVr7/Hs2c34XngL3w0iqzC3FTcv80qedfzm08YPRQ==", + "version": "23.12.75", + "resolved": "https://registry.npmjs.org/@webitel/ui-sdk/-/ui-sdk-23.12.75.tgz", + "integrity": "sha512-a/dphmEzjyeJYjBjLIP0Wo8sVuYFx7S3/O8IlBr9Atj78HLw81iI7IFiSWK/W+AkoAMAH/yxfO8ix5kiCXnCTA==", "requires": { "@floating-ui/vue": "^1.0.1", "@vuelidate/core": "^2.0.3", diff --git a/package.json b/package.json index 805e62303..1c23837f1 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "@vuelidate/validators": "^2.0.0", "@vueuse/core": "^10.3.0", "@webitel/flow-ui-sdk": "^0.1.14", - "@webitel/ui-sdk": "^23.12.51", + "@webitel/ui-sdk": "^23.12.75", "axios": "^0.27.1", "clipboard-copy": "^4.0.1", "cron-validator": "^1.3.1", diff --git a/src/app/components/utils/code-editor.vue b/src/app/components/utils/code-editor.vue index 96beb75a0..c2a5a4c42 100644 --- a/src/app/components/utils/code-editor.vue +++ b/src/app/components/utils/code-editor.vue @@ -122,6 +122,8 @@ export default { } }); + editor.setTheme('vs-dark'); + // eslint-disable-next-line no-unused-vars this.editor.onDidChangeModelDecorations((event) => { this.checkSyntaxError(); diff --git a/src/app/css/main.scss b/src/app/css/main.scss index 611f15ecc..aebf5b914 100644 --- a/src/app/css/main.scss +++ b/src/app/css/main.scss @@ -11,6 +11,7 @@ body { display: flex; min-width: 100%; min-height: 100%; + color: var(--text-main-color); } #app { diff --git a/src/modules/_reusable/app-header/components/app-header.vue b/src/modules/_reusable/app-header/components/app-header.vue index 7e7703156..6981479e0 100644 --- a/src/modules/_reusable/app-header/components/app-header.vue +++ b/src/modules/_reusable/app-header/components/app-header.vue @@ -4,6 +4,9 @@ :current-app="currentApp" :nav="nav" /> + diff --git a/src/modules/_shared/object-wrap/the-object-wrap.vue b/src/modules/_shared/object-wrap/the-object-wrap.vue index 9922f1854..02581573f 100644 --- a/src/modules/_shared/object-wrap/the-object-wrap.vue +++ b/src/modules/_shared/object-wrap/the-object-wrap.vue @@ -34,7 +34,7 @@ export default { flex-grow: 1; max-width: 100%; min-height: 100%; - background: var(--page-bg-color); + background: var(--wt-page-wrapper-background-color); } .object-content-wrap { diff --git a/src/modules/_shared/upload-csv-popup/css/upload-popup.scss b/src/modules/_shared/upload-csv-popup/css/upload-popup.scss index f23dfe9de..9ef359334 100644 --- a/src/modules/_shared/upload-csv-popup/css/upload-popup.scss +++ b/src/modules/_shared/upload-csv-popup/css/upload-popup.scss @@ -52,7 +52,7 @@ .upload-popup-form__error-stack-trace { margin-top: var(--spacing-sm); padding: var(--spacing-sm); - color: var(--false-color); + color: var(--error-color); border-radius: var(--border-radius); background: var(--secondary-color); } diff --git a/src/modules/application-hub/components/application-hub.vue b/src/modules/application-hub/components/application-hub.vue index fb9a4a36c..13c111702 100644 --- a/src/modules/application-hub/components/application-hub.vue +++ b/src/modules/application-hub/components/application-hub.vue @@ -277,7 +277,7 @@ $transition: 0.4s; // title text .application-link__title { @extend %typo-body-1; - color: var(--main-color); + color: var(--text-main-color); } // specific @hover toggled styles (hovered) diff --git a/src/modules/directory/modules/license/components/all-licenses/all-licenses.vue b/src/modules/directory/modules/license/components/all-licenses/all-licenses.vue index 91cf785a4..18b0e6138 100644 --- a/src/modules/directory/modules/license/components/all-licenses/all-licenses.vue +++ b/src/modules/directory/modules/license/components/all-licenses/all-licenses.vue @@ -173,10 +173,10 @@ export default { diff --git a/src/modules/integrations/modules/cognitive-profiles/components/google/opened-cognitive-profile-google.vue b/src/modules/integrations/modules/cognitive-profiles/components/google/opened-cognitive-profile-google.vue index 0744ea3ea..9173a189a 100644 --- a/src/modules/integrations/modules/cognitive-profiles/components/google/opened-cognitive-profile-google.vue +++ b/src/modules/integrations/modules/cognitive-profiles/components/google/opened-cognitive-profile-google.vue @@ -154,6 +154,6 @@ export default { justify-content: space-between; padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--border-radius); - background: var(--secondary-color-50); + background: var(--secondary-color); } diff --git a/src/modules/routing/modules/flow/components/create-flow-popup.vue b/src/modules/routing/modules/flow/components/create-flow-popup.vue index b2ab28062..35c2b2236 100644 --- a/src/modules/routing/modules/flow/components/create-flow-popup.vue +++ b/src/modules/routing/modules/flow/components/create-flow-popup.vue @@ -186,6 +186,7 @@ $pic-height: 136px; overflow: hidden; text-align: center; text-overflow: ellipsis; + color: var(--text-main-color); grid-column-start: 2; } } diff --git a/src/modules/routing/modules/flow/modules/diagram/components/opened-flow-diagram.vue b/src/modules/routing/modules/flow/modules/diagram/components/opened-flow-diagram.vue index 60c07b159..8ee98eac4 100644 --- a/src/modules/routing/modules/flow/modules/diagram/components/opened-flow-diagram.vue +++ b/src/modules/routing/modules/flow/modules/diagram/components/opened-flow-diagram.vue @@ -172,7 +172,7 @@ export default { bottom: 0; left: 0; pointer-events: none; - background: var(--page-bg-color); + background: var(--wt-page-wrapper-background-color); .wt-loader { position: absolute; diff --git a/src/modules/start-page/components/_internals/start-category-lvl-2.vue b/src/modules/start-page/components/_internals/start-category-lvl-2.vue index 46329e2f4..802ad1a47 100644 --- a/src/modules/start-page/components/_internals/start-category-lvl-2.vue +++ b/src/modules/start-page/components/_internals/start-category-lvl-2.vue @@ -56,11 +56,15 @@ export default { content: ''; transform: translate(-50%, -50%); border-radius: 50%; - background: var(--contrast-color); + background: var(--text-main-color); } } } +.start-nav__link { + color: var(--text-main-color); +} + .start-nav__link:hover, .start-nav__link:active { text-decoration: underline; } diff --git a/src/modules/start-page/components/the-start-page.vue b/src/modules/start-page/components/the-start-page.vue index e394c0d4a..5487ffe31 100644 --- a/src/modules/start-page/components/the-start-page.vue +++ b/src/modules/start-page/components/the-start-page.vue @@ -70,8 +70,8 @@ export default { + var(--spacing-2xs) * 6 ); - --lvl-1-bg: hsla(var(--_secondary-color), var(--_opacity--default)); - --lvl-1-bg--hover: hsla(var(--_accent-color), var(--_opacity--default)); + --lvl-1-bg: var(--dp-18-surface-color); + --lvl-1-bg--hover: var(--dp-20-surface-color); @media (#{$media} and #{$media-width-sm}) { --wrapper-width: 80%; @@ -100,7 +100,7 @@ export default { margin: auto; padding: var(--spacing-sm); border-radius: var(--border-radius); - background: var(--main-color); + background: var(--dp-20-surface-color); grid-template-columns: repeat(2, 1fr); grid-gap: var(--spacing-sm); diff --git a/src/modules/start-page/css/_start-category.scss b/src/modules/start-page/css/_start-category.scss index 9ef135c7d..a7036b37e 100644 --- a/src/modules/start-page/css/_start-category.scss +++ b/src/modules/start-page/css/_start-category.scss @@ -21,6 +21,7 @@ padding: 18px 20px; transition: var(--transition); text-align: left; + color: var(--text-main-color); border-radius: var(--border-radius); .wt-icon { From bb55115315f13c32abf5755491c38bf667d6f481 Mon Sep 17 00:00:00 2001 From: Daniil Lohvinov Date: Wed, 6 Dec 2023 13:31:18 +0200 Subject: [PATCH 2/2] refactor: colors [WTEL-3902] --- package-lock.json | 14 +++++++------- package.json | 2 +- .../one-plus-many-table-cell.vue | 4 ++++ src/app/css/main.scss | 1 + src/app/store/store.js | 2 ++ .../_reusable/app-header/components/app-header.vue | 10 ++++++---- src/modules/appearance/store/appearance.js | 4 ++++ .../viber/opened-chat-gateway-viber-style-tab.vue | 4 ++++ .../webchat/components/copy-code-button.vue | 5 ++++- .../opened-chat-gateway-webchat-view-tab.vue | 4 ++++ .../components/_internals/start-category-lvl-1.vue | 7 ++++++- .../start-page/components/the-start-page.vue | 2 ++ vite.config.js | 1 + 13 files changed, 46 insertions(+), 14 deletions(-) create mode 100644 src/modules/appearance/store/appearance.js diff --git a/package-lock.json b/package-lock.json index b9684bb4f..7778e7513 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,7 @@ "@vuelidate/validators": "^2.0.0", "@vueuse/core": "^10.3.0", "@webitel/flow-ui-sdk": "^0.1.14", - "@webitel/ui-sdk": "^23.12.75", + "@webitel/ui-sdk": "^23.12.91", "axios": "^0.27.1", "clipboard-copy": "^4.0.1", "cron-validator": "^1.3.1", @@ -1372,9 +1372,9 @@ } }, "node_modules/@webitel/ui-sdk": { - "version": "23.12.75", - "resolved": "https://registry.npmjs.org/@webitel/ui-sdk/-/ui-sdk-23.12.75.tgz", - "integrity": "sha512-a/dphmEzjyeJYjBjLIP0Wo8sVuYFx7S3/O8IlBr9Atj78HLw81iI7IFiSWK/W+AkoAMAH/yxfO8ix5kiCXnCTA==", + "version": "23.12.91", + "resolved": "https://registry.npmjs.org/@webitel/ui-sdk/-/ui-sdk-23.12.91.tgz", + "integrity": "sha512-6JyqPQfiLd7cs9goMri3GB9/0AYTXWMSEaqWy6GhMoakXqr9CwoiALb9gcVEk6xAO6cladBoki/utJ2G8TtclQ==", "dependencies": { "@floating-ui/vue": "^1.0.1", "@vuelidate/core": "^2.0.3", @@ -9252,9 +9252,9 @@ } }, "@webitel/ui-sdk": { - "version": "23.12.75", - "resolved": "https://registry.npmjs.org/@webitel/ui-sdk/-/ui-sdk-23.12.75.tgz", - "integrity": "sha512-a/dphmEzjyeJYjBjLIP0Wo8sVuYFx7S3/O8IlBr9Atj78HLw81iI7IFiSWK/W+AkoAMAH/yxfO8ix5kiCXnCTA==", + "version": "23.12.91", + "resolved": "https://registry.npmjs.org/@webitel/ui-sdk/-/ui-sdk-23.12.91.tgz", + "integrity": "sha512-6JyqPQfiLd7cs9goMri3GB9/0AYTXWMSEaqWy6GhMoakXqr9CwoiALb9gcVEk6xAO6cladBoki/utJ2G8TtclQ==", "requires": { "@floating-ui/vue": "^1.0.1", "@vuelidate/core": "^2.0.3", diff --git a/package.json b/package.json index 1c23837f1..df112d9bc 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "@vuelidate/validators": "^2.0.0", "@vueuse/core": "^10.3.0", "@webitel/flow-ui-sdk": "^0.1.14", - "@webitel/ui-sdk": "^23.12.75", + "@webitel/ui-sdk": "^23.12.91", "axios": "^0.27.1", "clipboard-copy": "^4.0.1", "cron-validator": "^1.3.1", diff --git a/src/app/components/utils/table-cell/one-plus-many-table-cell/one-plus-many-table-cell.vue b/src/app/components/utils/table-cell/one-plus-many-table-cell/one-plus-many-table-cell.vue index 6b7eb885d..c17bdecb6 100644 --- a/src/app/components/utils/table-cell/one-plus-many-table-cell/one-plus-many-table-cell.vue +++ b/src/app/components/utils/table-cell/one-plus-many-table-cell/one-plus-many-table-cell.vue @@ -30,6 +30,10 @@ export default { diff --git a/src/modules/appearance/store/appearance.js b/src/modules/appearance/store/appearance.js new file mode 100644 index 000000000..685b38408 --- /dev/null +++ b/src/modules/appearance/store/appearance.js @@ -0,0 +1,4 @@ +import AppearanceStoreModule + from '@webitel/ui-sdk/src/modules/Appearance/store/AppearanceStoreModule'; + +export default new AppearanceStoreModule().getModule(); diff --git a/src/modules/routing/modules/chat-gateways/components/viber/opened-chat-gateway-viber-style-tab.vue b/src/modules/routing/modules/chat-gateways/components/viber/opened-chat-gateway-viber-style-tab.vue index 210d0c0be..45cf8f653 100644 --- a/src/modules/routing/modules/chat-gateways/components/viber/opened-chat-gateway-viber-style-tab.vue +++ b/src/modules/routing/modules/chat-gateways/components/viber/opened-chat-gateway-viber-style-tab.vue @@ -76,5 +76,9 @@ export default { .wt-button { margin-top: var(--spacing-sm); } + + :deep(.vc-chrome-body) { + background: var(--content-wrapper-color); + } } diff --git a/src/modules/routing/modules/chat-gateways/modules/webchat/components/copy-code-button.vue b/src/modules/routing/modules/chat-gateways/modules/webchat/components/copy-code-button.vue index 5434011aa..da22008fc 100644 --- a/src/modules/routing/modules/chat-gateways/modules/webchat/components/copy-code-button.vue +++ b/src/modules/routing/modules/chat-gateways/modules/webchat/components/copy-code-button.vue @@ -4,7 +4,10 @@ @click="copyCode" > {{ text }} - + {{ $t('objects.routing.chatGateways.webchat.copyCodeHint') }} diff --git a/src/modules/routing/modules/chat-gateways/modules/webchat/components/opened-chat-gateway-webchat-view-tab.vue b/src/modules/routing/modules/chat-gateways/modules/webchat/components/opened-chat-gateway-webchat-view-tab.vue index f384703d5..9aa31a704 100644 --- a/src/modules/routing/modules/chat-gateways/modules/webchat/components/opened-chat-gateway-webchat-view-tab.vue +++ b/src/modules/routing/modules/chat-gateways/modules/webchat/components/opened-chat-gateway-webchat-view-tab.vue @@ -153,6 +153,10 @@ export default { .colorpicker { width: 100%; + + //:deep(.vc-chrome-body) { + // background: var(--content-wrapper-color); + //} } } } diff --git a/src/modules/start-page/components/_internals/start-category-lvl-1.vue b/src/modules/start-page/components/_internals/start-category-lvl-1.vue index 8e4c7dcf5..52ea56d5b 100644 --- a/src/modules/start-page/components/_internals/start-category-lvl-1.vue +++ b/src/modules/start-page/components/_internals/start-category-lvl-1.vue @@ -11,6 +11,7 @@ @click="select(category)" > @@ -50,9 +51,13 @@ export default { .start-nav__category-option--lvl-1 { background: var(--lvl-1-bg); - &.start-nav__category-option--selected, &:hover { background: var(--lvl-1-bg--hover); } + + &.start-nav__category-option--selected { + color: var(--lvl-1-text--selected); + background: var(--lvl-1-bg--selected); + } } diff --git a/src/modules/start-page/components/the-start-page.vue b/src/modules/start-page/components/the-start-page.vue index 5487ffe31..28d9b8da3 100644 --- a/src/modules/start-page/components/the-start-page.vue +++ b/src/modules/start-page/components/the-start-page.vue @@ -72,6 +72,8 @@ export default { --lvl-1-bg: var(--dp-18-surface-color); --lvl-1-bg--hover: var(--dp-20-surface-color); + --lvl-1-bg--selected: var(--primary-color); + --lvl-1-text--selected: var(--primary-on-color); @media (#{$media} and #{$media-width-sm}) { --wrapper-width: 80%; diff --git a/vite.config.js b/vite.config.js index a40261802..3f337f027 100644 --- a/vite.config.js +++ b/vite.config.js @@ -13,6 +13,7 @@ export default ({ mode }) => { .replaceAll('VITE_', 'VUE_APP_')), }, server: { + host: true, port: 8080, }, css: {