From 8be836b8d2f9aaf4ad090aab44c26dee8b649447 Mon Sep 17 00:00:00 2001 From: Maksim Zakharov Date: Fri, 30 Sep 2022 12:35:49 +0300 Subject: fix theme --- .../images/_sila/notifications/message-dark.svg | 3 +++ src/assets/styles/bmc/_sila/_buttons.scss | 2 +- src/assets/styles/bmc/_sila/_dropdown.scss | 9 +++++--- src/assets/styles/bmc/_sila/_forms.scss | 4 +++- src/components/_sila/AppHeader/AppHeader.vue | 25 ++++++++++++++++++---- src/env/assets/styles/_sila.scss | 13 +++++++++-- 6 files changed, 45 insertions(+), 11 deletions(-) create mode 100644 src/assets/images/_sila/notifications/message-dark.svg diff --git a/src/assets/images/_sila/notifications/message-dark.svg b/src/assets/images/_sila/notifications/message-dark.svg new file mode 100644 index 00000000..8fe7c094 --- /dev/null +++ b/src/assets/images/_sila/notifications/message-dark.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/styles/bmc/_sila/_buttons.scss b/src/assets/styles/bmc/_sila/_buttons.scss index 2ca971f8..a13a1457 100644 --- a/src/assets/styles/bmc/_sila/_buttons.scss +++ b/src/assets/styles/bmc/_sila/_buttons.scss @@ -57,7 +57,7 @@ border: none; box-shadow: 1px 2px 4px -1px rgb(79 37 37 / 10%) inset; @include themify($themes) { - background-color: themed("gray-5"); + background-color: themed("btn-secondary"); &:hover { background-color: themed("gray-5-hover"); color: $red; diff --git a/src/assets/styles/bmc/_sila/_dropdown.scss b/src/assets/styles/bmc/_sila/_dropdown.scss index 261d91f1..983d8bdd 100644 --- a/src/assets/styles/bmc/_sila/_dropdown.scss +++ b/src/assets/styles/bmc/_sila/_dropdown.scss @@ -4,7 +4,8 @@ padding: $spacer / 2; border-radius: $border-radius; @include themify($themes) { - background-color: themed("surface-primary"); + background-color: themed("dropdown-bg"); + border: 1px solid themed("dropdown-border"); } } @@ -17,7 +18,7 @@ color: themed("text-primary"); } &:hover { - background-color: $red-hover; + background-color: $red-dropdown-hover; } &:active { background-color: $red-active; @@ -48,7 +49,9 @@ &:focus { outline: none; background-color: transparent; - box-shadow: inset 0 0 0 2px theme-color("primary"); + @include themify($themes) { + box-shadow: inset 0 0 0 2px theme-color("primary"); + } } } } diff --git a/src/assets/styles/bmc/_sila/_forms.scss b/src/assets/styles/bmc/_sila/_forms.scss index 3c22ba30..d722e230 100644 --- a/src/assets/styles/bmc/_sila/_forms.scss +++ b/src/assets/styles/bmc/_sila/_forms.scss @@ -183,7 +183,9 @@ div:not(.search-global) > .form-group { width: 100%; .custom-select, .form-control { - color: #0c1c29e6; + @include themify($themes) { + color: themed("text-secondary"); + } border-radius: $border-radius; border: none; background-color: $gray-5; diff --git a/src/components/_sila/AppHeader/AppHeader.vue b/src/components/_sila/AppHeader/AppHeader.vue index d26f3b7c..076cce9f 100644 --- a/src/components/_sila/AppHeader/AppHeader.vue +++ b/src/components/_sila/AppHeader/AppHeader.vue @@ -172,9 +172,15 @@ :to="logsPage(log.id)" > +
{{ log.name | truncate(28, '...') }} {{ @@ -260,6 +266,7 @@ export default { isNavigationOpen: false, isFirstStatusLoad: true, altLogo: process.env.VUE_APP_COMPANY_NAME || 'Built on OpenBMC', + theme: 'light-theme', }; }, computed: { @@ -364,6 +371,8 @@ export default { this.$root.$on('bv::dropdown::show', () => { this.$root.$bvToast.hide(); }); + this.theme = localStorage.getItem('user-theme'); + this.$root.$on('change-theme', this.setLocalTheme); }, methods: { logsPage(id) { @@ -389,6 +398,9 @@ export default { event.preventDefault(); this.$root.$emit('skip-navigation'); }, + setLocalTheme() { + this.theme = localStorage.getItem('user-theme'); + }, }, }; @@ -555,7 +567,9 @@ export default { font-size: 12px; line-height: 16px; text-transform: uppercase; - color: #0c1c29; + @include themify($themes) { + color: themed('text-primary'); + } padding: 15px 15px 0 15px; } #dropdown-group-1, @@ -571,7 +585,9 @@ export default { font-weight: 600; font-size: 12px; line-height: 16px; - color: #0c1c29; + @include themify($themes) { + color: themed('text-primary'); + } white-space: normal; } @@ -580,9 +596,10 @@ export default { font-weight: 300; font-size: 12px; line-height: 16px; - color: rgba(12, 28, 41, 0.6); + @include themify($themes) { + color: themed('text-primary'); + } } - .dropdown-item { display: flex; padding: 0.25rem; diff --git a/src/env/assets/styles/_sila.scss b/src/env/assets/styles/_sila.scss index d39837a3..fbddef64 100644 --- a/src/env/assets/styles/_sila.scss +++ b/src/env/assets/styles/_sila.scss @@ -73,7 +73,7 @@ $red-hover: #fc2a2a; /* Red Brand Primary Hover */ $red-active: #df2323; /* Red Brand Primary Active */ $red-disabled: rgb(225, 113, 113); /* Red Brand Primary Disabled */ $red-click: #c71414; /* Red Brand Primary Click */ - +$red-dropdown-hover: #fc2a2a6e; $red-5: rgba(225, 23, 23, 0.05); /* Faint Brand Primary/5% */ $red-40: rgba(225, 23, 23, 0.4); /* Faint Brand Primary/40% */ $red-50: rgba(225, 23, 23, 0.5); /* Faint Brand Primary/50% */ @@ -105,6 +105,7 @@ $text-quaternary: rgba(12, 28, 41, 0.3); $select-bg-size: 18px; $select-bg : url("~@/assets/images/_sila/chevron-down.svg"); +$btn-secondary: rgb(26 62 91 / 15%); // Dark theme $red-5-dark: rgba(225, 23, 23, 0.1); /* Faint Brand Primary/5% */ @@ -136,7 +137,9 @@ $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; - +$btn-secondary-dark: rgb(26 62 91 / 90%); +$dropdown-bacground-dark: #2e4c66; +$dropdown-border-dark: #253448; $themes: ( light: ( surface-primary: $surface-primary, @@ -166,6 +169,9 @@ $themes: ( custom-switch-back: $white, select-bg: $select-bg, select-bg-size: $select-bg-size, + dropdown-bg: $surface-primary, + dropdown-border: $surface-primary, + btn-secondary: $btn-secondary, ), dark: ( surface-primary: $surface-primary-dark, @@ -195,6 +201,9 @@ $themes: ( custom-switch-back: $text-primary-dark, select-bg: $select-bg-dark, select-bg-size: $select-bg-size-dark, + dropdown-bg: $dropdown-bacground-dark, + dropdown-border: $dark, + btn-secondary: $btn-secondary-dark, ), ); -- cgit v1.2.3