fix: colors fixes [WTEL-3902]

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.91",
+    "@webitel/ui-sdk": "^23.12.92",
     "axios": "^0.27.1",
     "clipboard-copy": "^4.0.1",
     "cron-validator": "^1.3.1",

src/app/components/utils/code-editor.vue

@@ -26,6 +26,7 @@
 <script>
 import { editor, languages } from 'monaco-editor';
 import { markRaw } from 'vue';
+import { mapState } from 'vuex';
 
 // https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.ieditorconstructionoptions.html
 
@@ -40,7 +41,6 @@ const fullscreenSizeConfig = {
 const config = {
   ...defaultSizeConfig,
   language: 'json',
-  theme: 'vs',
   wordWrap: 'off',
   autoClosingQuotes: true,
   autoClosingBrackets: true,
@@ -81,6 +81,9 @@ export default {
     isFullscreen: false,
   }),
   computed: {
+    ...mapState('appearance', {
+      theme: (state) => state.theme,
+    }),
     fullscreenIcon() {
       return this.isFullscreen ? 'collapse' : 'expand';
     },
@@ -101,6 +104,14 @@ export default {
         }
       }
     },
+    theme: {
+      handler() {
+        this.theme === 'dark'
+          ? editor.setTheme('vs-dark')
+          : editor.setTheme('vs');
+      },
+      immediate: true,
+    },
   },
   mounted() {
     this.initEditor();
@@ -122,8 +133,6 @@ export default {
         }
       });
 
-      editor.setTheme('vs-dark');
-
       // eslint-disable-next-line no-unused-vars
       this.editor.onDidChangeModelDecorations((event) => {
         this.checkSyntaxError();

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(--text-main-color);
+  color: var(--white);
 }
 
 // specific @hover toggled styles (hovered)

src/modules/directory/modules/license/components/all-licenses/all-licenses.vue

@@ -95,7 +95,7 @@
 
         <template #status="{ item }">
           <wt-chip
-            :class="statusClass(item.notAfter)"
+            :color="statusColor(item.notAfter)"
             class="license-status"
           >
             {{ statusText(item.notAfter) }}
@@ -160,25 +160,18 @@ export default {
       return daysLeft + this.$t('objects.directory.license.daysToExpire.days');
     },
 
-    statusClass(endDate) {
+    statusColor(endDate) {
       const daysLeft = Math.ceil((endDate - Date.now()) / 1000 / 60 / 60 / 24);
-      if (daysLeft <= 0) return 'days0';
-      if (daysLeft < 30) return 'days30';
-      if (daysLeft < 90) return 'days90';
-      return 'valid';
+      if (daysLeft <= 0) return 'error';
+      if (daysLeft < 30) return 'warning';
+      if (daysLeft < 90) return 'success';
+      return 'success';
     },
   },
 };
 </script>
 
 <style lang="scss" scoped>
-.all-licenses {
-  --license--valid: var(--success-color);
-  --license--90: var(--success-color);
-  --license--30: var(--warning-color);
-  --license--0: var(--error-color);
-}
-
 .all-licenses__product-cell {
   display: flex;
   align-items: center;
@@ -196,21 +189,5 @@ export default {
   align-self: flex-end;
   width: 93px;
   text-align: center;
-
-  &.valid {
-    background: var(--license--valid);
-  }
-
-  &.days90 {
-    background: var(--license--90);
-  }
-
-  &.days30 {
-    background: var(--license--30);
-  }
-
-  &.days0 {
-    background: var(--license--0);
-  }
 }
 </style>