diff options
| -rw-r--r-- | apps/dashboard/src/DashboardApp.vue | 4 | ||||
| -rw-r--r-- | core/css/header.scss | 2 | ||||
| -rw-r--r-- | core/src/components/AppMenu.vue | 14 | ||||
| -rw-r--r-- | core/src/views/ContactsMenu.vue | 6 | ||||
| -rw-r--r-- | core/src/views/LegacyUnifiedSearch.vue | 7 | ||||
| -rw-r--r-- | core/src/views/UnifiedSearch.vue | 2 |
6 files changed, 21 insertions, 14 deletions
diff --git a/apps/dashboard/src/DashboardApp.vue b/apps/dashboard/src/DashboardApp.vue index b3dd3d285be..83fbe7d3b53 100644 --- a/apps/dashboard/src/DashboardApp.vue +++ b/apps/dashboard/src/DashboardApp.vue @@ -471,8 +471,8 @@ export default { background-attachment: fixed; > h2 { - // this is shown directly on the background which has `color-primary`, so we need `color-primary-text` - color: var(--color-primary-text); + // this is shown directly on the background image / color + color: var(--color-background-plain-text); text-align: center; font-size: 32px; line-height: 130%; diff --git a/core/css/header.scss b/core/css/header.scss index 0d13f9847e5..52f98bce5a9 100644 --- a/core/css/header.scss +++ b/core/css/header.scss @@ -22,7 +22,7 @@ width: 12px; height: 2px; border-radius: 3px; - background-color: var(--color-primary-text); + background-color: var(--color-background-plain-text); left: 50%; opacity: 1; } diff --git a/core/src/components/AppMenu.vue b/core/src/components/AppMenu.vue index a9bce0dcea3..e84a1250222 100644 --- a/core/src/components/AppMenu.vue +++ b/core/src/components/AppMenu.vue @@ -144,7 +144,7 @@ $header-icon-size: 20px; width: 12px; height: 5px; border-radius: 3px; - background-color: var(--color-primary-text); + background-color: var(--color-background-plain-text); left: 50%; bottom: 6px; display: block; @@ -161,8 +161,8 @@ $header-icon-size: 20px; width: calc(100% - 4px); height: calc(100% - 4px); margin: 2px; - // this is shown directly on the background which has `color-primary`, so we need `color-primary-text` - color: var(--color-primary-text); + // this is shown directly on the background + color: var(--color-background-plain-text); position: relative; } @@ -179,8 +179,8 @@ $header-icon-size: 20px; opacity: 0; position: absolute; font-size: 12px; - // this is shown directly on the background which has `color-primary`, so we need `color-primary-text` - color: var(--color-primary-text); + // this is shown directly on the background + color: var(--color-background-plain-text); text-align: center; left: 50%; top: 45%; @@ -238,7 +238,7 @@ $header-icon-size: 20px; /* Remove all background and align text color if not expanded */ &:not([aria-expanded="true"]) { - color: var(--color-primary-element-text); + color: var(--color-background-plain-text); &:hover { opacity: 1; @@ -278,7 +278,7 @@ $header-icon-size: 20px; content: ""; width: 8px; height: 8px; - background-color: var(--color-primary-element-text); + background-color: var(--color-background-plain-text); border-radius: 50%; position: absolute; display: block; diff --git a/core/src/views/ContactsMenu.vue b/core/src/views/ContactsMenu.vue index 75c4994ef9b..51eea0a0fb1 100644 --- a/core/src/views/ContactsMenu.vue +++ b/core/src/views/ContactsMenu.vue @@ -9,7 +9,7 @@ :aria-label="t('core', 'Search contacts')" @open="handleOpen"> <template #trigger> - <Contacts :size="20" /> + <Contacts class="contactsmenu__trigger-icon" :size="20" /> </template> <div class="contactsmenu__menu"> <div class="contactsmenu__menu__input-wrapper"> @@ -171,6 +171,10 @@ export default { .contactsmenu { overflow-y: hidden; + &__trigger-icon { + color: var(--color-background-plain-text) !important; + } + &__menu { display: flex; flex-direction: column; diff --git a/core/src/views/LegacyUnifiedSearch.vue b/core/src/views/LegacyUnifiedSearch.vue index ed955060c96..72a30b5b708 100644 --- a/core/src/views/LegacyUnifiedSearch.vue +++ b/core/src/views/LegacyUnifiedSearch.vue @@ -12,8 +12,7 @@ @close="onClose"> <!-- Header icon --> <template #trigger> - <Magnify class="unified-search__trigger" - :size="22/* fit better next to other 20px icons */" /> + <Magnify class="unified-search__trigger-icon" :size="20" /> </template> <!-- Search form & filters wrapper --> @@ -706,6 +705,10 @@ $input-height: 34px; $input-padding: 10px; .unified-search { + &__trigger-icon { + color: var(--color-background-plain-text) !important; + } + &__input-wrapper { position: sticky; // above search results diff --git a/core/src/views/UnifiedSearch.vue b/core/src/views/UnifiedSearch.vue index d769b7b556f..2adf818b181 100644 --- a/core/src/views/UnifiedSearch.vue +++ b/core/src/views/UnifiedSearch.vue @@ -71,7 +71,7 @@ export default { &-icon { // ensure the icon has the correct color - color: var(--color-primary-text) !important; + color: var(--color-background-plain-text) !important; } } } |