fix chart theme, select bacground

7 files changed, 27 insertions, 12 deletions

diff --git a/src/assets/images/_sila/chevron-down-dark.svg b/src/assets/images/_sila/chevron-down-dark.svg
new file mode 100644
index 00000000..71fff0ff
--- /dev/null
+++ b/src/assets/images/_sila/chevron-down-dark.svg
@@ -0,0 +1,3 @@
+<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.23332 0.741797L4.99998 3.97513L1.76665 0.741797C1.44165 0.416797 0.91665 0.416797 0.59165 0.741797C0.26665 1.0668 0.26665 1.5918 0.59165 1.9168L4.41665 5.7418C4.74165 6.0668 5.26665 6.0668 5.59165 5.7418L9.41665 1.9168C9.74165 1.5918 9.74165 1.0668 9.41665 0.741797C9.09165 0.42513 8.55832 0.416797 8.23332 0.741797Z" fill="white" fill-opacity="0.9"/>
+</svg>
diff --git a/src/assets/styles/bmc/_sila/_forms.scss b/src/assets/styles/bmc/_sila/_forms.scss
index 4bc8f626..3c22ba30 100644
--- a/src/assets/styles/bmc/_sila/_forms.scss
+++ b/src/assets/styles/bmc/_sila/_forms.scss
@@ -136,14 +136,14 @@ div:not(.search-global) > .form-group {
 .custom-select,
 .form-control {
   @include themify($themes) {
-    &:disabled {
-      color: themed("text-quaternary") !important;
-      background-color: themed("gray-20") !important;
-    }
-    &::placeholder {
-      color: themed("text-quaternary");
-    }
+  &:disabled {
+    color: themed("text-quaternary") !important;
+    background-color: themed("gray-20") !important;
+  }
+  &::placeholder {
+    color: themed("text-quaternary");
   }
+}
   &.is-invalid,
   &:invalid {
     border: 1px solid theme-color("danger") !important;
@@ -214,8 +214,10 @@ div:not(.search-global) > .form-group {
 }
 
 .custom-select {
-  background-image: url("~@/assets/images/_sila/chevron-down.svg");
-  background-size: 18px;
+  @include themify($themes) {
+    background-image: themed("select-bg");
+    background-size: themed("select-bg-size");
+  }
 }
 
 .custom-control-label > span {
diff --git a/src/components/_sila/Global/ThemeButton.vue b/src/components/_sila/Global/ThemeButton.vue
index e88c948d..687e0b19 100644
--- a/src/components/_sila/Global/ThemeButton.vue
+++ b/src/components/_sila/Global/ThemeButton.vue
@@ -40,6 +40,7 @@ export default {
 
     setTheme(theme) {
       localStorage.setItem('user-theme', theme);
+      this.$root.$emit('change-theme');
       this.userTheme = theme;
       document.documentElement.className = theme;
     },
diff --git a/src/env/assets/styles/_sila.scss b/src/env/assets/styles/_sila.scss
index 6af537c2..d39837a3 100644
--- a/src/env/assets/styles/_sila.scss
+++ b/src/env/assets/styles/_sila.scss
@@ -103,6 +103,9 @@ $text-secondary: rgba(12, 28, 41, 0.8);
 $text-tretiatry: rgba(12, 28, 41, 0.6);
 $text-quaternary: rgba(12, 28, 41, 0.3);
 
+$select-bg-size:  18px;
+$select-bg : url("~@/assets/images/_sila/chevron-down.svg");
+
 // Dark theme
 $red-5-dark: rgba(225, 23, 23, 0.1); /* Faint Brand Primary/5% */
 $red-40-dark: rgba(225, 23, 23, 0.5); /* Faint Brand Primary/40% */
@@ -131,6 +134,9 @@ $text-secondary-dark: rgba(255, 255, 255, 0.9);
 $text-tretiatry-dark: rgba(255, 255, 255, 0.6);
 $text-quaternary-dark: rgba(255, 255, 255, 0.3);
 
+$select-bg-dark: url("~@/assets/images/_sila/chevron-down-dark.svg");
+$select-bg-size-dark: 15px 7px;
+
 $themes: (
   light: (
     surface-primary: $surface-primary,
@@ -158,6 +164,8 @@ $themes: (
     green-10: $green-10,
     yellow-10: $yellow-10,
     custom-switch-back: $white,
+    select-bg: $select-bg,
+    select-bg-size: $select-bg-size,
   ),
   dark: (
     surface-primary: $surface-primary-dark,
@@ -185,6 +193,8 @@ $themes: (
     green-10: $green-10-dark,
     yellow-10: $yellow-10-dark,
     custom-switch-back: $text-primary-dark,
+    select-bg: $select-bg-dark,
+    select-bg-size: $select-bg-size-dark,
   ),
 );
 
diff --git a/src/layouts/_sila/AppLayout.vue b/src/layouts/_sila/AppLayout.vue
index e494dda5..c15f9318 100644
--- a/src/layouts/_sila/AppLayout.vue
+++ b/src/layouts/_sila/AppLayout.vue
@@ -45,7 +45,6 @@ export default {
   },
   mounted() {
     this.$root.$on('refresh-application', this.refresh);
-    this.$root.$on('change-theme', this.refresh);
   },
   methods: {
     refresh() {
diff --git a/src/locales/ru-RU.json b/src/locales/ru-RU.json
index 017531a5..a562a8f5 100644
--- a/src/locales/ru-RU.json
+++ b/src/locales/ru-RU.json
@@ -825,7 +825,7 @@
     "rtad": "RTAD",
     "rtadDescription": "Данная опция включает/отключает Remote Trusted Attestation Daemon для программного обеспечения хоста",
     "ssh": "Консоль BMC (через SSH)",
-    "sshDescription": "Разрешить доступ к консольной сессии через SSH, через порт 22 на BMC.",
+    "sshDescription": "Разрешить доступ к консольной сессии через SSH, через порт %{port} на BMC.",
     "port": "Порт",
     "modal": {
       "editSshPort": "Изменить порт SSH",
diff --git a/src/views/_sila/SecurityAndAccess/Policies/Policies.vue b/src/views/_sila/SecurityAndAccess/Policies/Policies.vue
index cbc0362a..2cbfe5dd 100644
--- a/src/views/_sila/SecurityAndAccess/Policies/Policies.vue
+++ b/src/views/_sila/SecurityAndAccess/Policies/Policies.vue
@@ -8,7 +8,7 @@
             <dl class="mr-3 w-75">
               <dt>{{ $t('pagePolicies.ssh') }}</dt>
               <dd>
-                {{ $t('pagePolicies.sshDescription') }}
+                {{ $t('pagePolicies.sshDescription', { sshPort }) }}
               </dd>
               <dt class="d-flex">
                 {{ $t('pagePolicies.port') }}: {{ sshPort }}