From a6d244a3a96d38d320e4b712a10bcabc5f2c7f6a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Mon, 27 Jun 2022 21:02:56 +0300 Subject: [PATCH 1/8] Initial theme --- src/assets/icons/help-outline.svg | 10 +++-- src/assets/icons/list.svg | 2 +- src/assets/styles/_common-mixins.scss | 4 +- src/assets/styles/_common-variables.scss | 37 +++++++++++-------- src/assets/styles/common-base-screen.scss | 2 + src/assets/styles/common-breadcrumbs.scss | 2 +- src/assets/styles/common-checkbox.scss | 2 +- src/assets/styles/common-components.scss | 4 ++ src/assets/styles/common-full-pages.scss | 2 +- src/assets/styles/common-inputs.scss | 18 ++++++--- src/assets/styles/common-layout.scss | 11 +++--- src/assets/styles/common-menu.scss | 7 +++- src/assets/styles/common-select.scss | 3 +- src/assets/styles/common-side-nav.scss | 4 +- src/assets/styles/common-tabs.scss | 2 +- src/assets/styles/common-texts.scss | 8 ++-- .../quick-filters.component.scss | 6 +-- .../help-mode-dialog.component.scss | 2 +- .../round-checkbox.component.scss | 4 +- .../table-content.component.scss | 1 + .../table-item/table-item.component.scss | 1 + test.json | 0 22 files changed, 81 insertions(+), 51 deletions(-) create mode 100644 test.json diff --git a/src/assets/icons/help-outline.svg b/src/assets/icons/help-outline.svg index 2fd05c3..c0271f7 100644 --- a/src/assets/icons/help-outline.svg +++ b/src/assets/icons/help-outline.svg @@ -1,10 +1,12 @@ - - - + + + - + diff --git a/src/assets/icons/list.svg b/src/assets/icons/list.svg index ab4457d..2ae2446 100644 --- a/src/assets/icons/list.svg +++ b/src/assets/icons/list.svg @@ -1,7 +1,7 @@ - + *:not(:last-child) { margin-right: 50px; @@ -28,6 +29,7 @@ letter-spacing: 0; line-height: 20px; white-space: nowrap; + color: var(--iqser-text); } .menu { diff --git a/src/assets/styles/common-breadcrumbs.scss b/src/assets/styles/common-breadcrumbs.scss index b8976d7..5756f33 100644 --- a/src/assets/styles/common-breadcrumbs.scss +++ b/src/assets/styles/common-breadcrumbs.scss @@ -30,7 +30,7 @@ .breadcrumb { text-decoration: none; - color: var(--iqser-accent); + color: var(--iqser-text); font-weight: 600; width: fit-content; white-space: nowrap; diff --git a/src/assets/styles/common-checkbox.scss b/src/assets/styles/common-checkbox.scss index 9e9142a..765f013 100644 --- a/src/assets/styles/common-checkbox.scss +++ b/src/assets/styles/common-checkbox.scss @@ -19,7 +19,7 @@ .mat-checkbox-label { font-size: 13px; - color: var(--iqser-accent); + color: var(--iqser-text); display: flex; align-items: center; diff --git a/src/assets/styles/common-components.scss b/src/assets/styles/common-components.scss index 51592da..4598a4f 100644 --- a/src/assets/styles/common-components.scss +++ b/src/assets/styles/common-components.scss @@ -24,6 +24,7 @@ &.gray-dark { background-color: var(--iqser-grey-6); + color: var(--iqser-accent); } &.gray-primary { @@ -33,6 +34,7 @@ &.lightgray-dark { background-color: var(--iqser-grey-4); + color: var(--iqser-accent); } &.lightgray-primary { @@ -57,6 +59,7 @@ &.white-dark { border: 1px solid var(--iqser-grey-4); + color: var(--iqser-accent); } &.inactive { @@ -97,6 +100,7 @@ &.warn { background-color: rgba(var(--iqser-yellow-rgb), 0.7); + color: var(--iqser-accent); } &.error { diff --git a/src/assets/styles/common-full-pages.scss b/src/assets/styles/common-full-pages.scss index 3b37d46..b83f25a 100644 --- a/src/assets/styles/common-full-pages.scss +++ b/src/assets/styles/common-full-pages.scss @@ -6,7 +6,7 @@ .full-page-section { opacity: 0.7; - background: var(--iqser-white); + background: var(--iqser-background); z-index: 900; } diff --git a/src/assets/styles/common-inputs.scss b/src/assets/styles/common-inputs.scss index 7fff6a7..c9c540b 100644 --- a/src/assets/styles/common-inputs.scss +++ b/src/assets/styles/common-inputs.scss @@ -21,10 +21,10 @@ form .iqser-input-group:not(first-of-type) { position: absolute; left: 114px; bottom: 1px; - background: var(--iqser-quick-filter-border); + background: var(--iqser-grey-5); height: 34px; width: 34px; - border-left: 1px solid var(--iqser-quick-filter-border); + border-left: 1px solid var(--iqser-inputs-border); border-top-right-radius: 7px; border-bottom-right-radius: 7px; cursor: pointer; @@ -97,10 +97,11 @@ form .iqser-input-group:not(first-of-type) { box-sizing: border-box; padding-left: 11px; padding-right: 11px; - border: 1px solid var(--iqser-quick-filter-border); + border: 1px solid var(--iqser-inputs-border); font-family: Inter, sans-serif; font-size: 13px; - background-color: #ffffff; + background-color: var(--iqser-background); + color: var(--iqser-text); border-radius: 8px; outline: none; margin-top: 3px; @@ -111,11 +112,11 @@ form .iqser-input-group:not(first-of-type) { } &:focus:not(:disabled):not(.mat-select-disabled) { - border-color: var(--iqser-accent); + border-color: var(--iqser-text); } &::placeholder { - color: var(--iqser-accent); + color: var(--iqser-text); opacity: 0.7; } @@ -150,6 +151,11 @@ form .iqser-input-group:not(first-of-type) { .mat-select-value { vertical-align: middle; + color: var(--iqser-text); + } + + .mat-select-arrow { + color: rgba(var(--iqser-text-rgb), 0.7); } } diff --git a/src/assets/styles/common-layout.scss b/src/assets/styles/common-layout.scss index dcd8e4f..d9a2c4a 100644 --- a/src/assets/styles/common-layout.scss +++ b/src/assets/styles/common-layout.scss @@ -6,7 +6,8 @@ body { padding: 0; height: 100vh; font-family: 'Inter', sans-serif; - color: var(--iqser-accent); + color: var(--iqser-text); + background-color: var(--iqser-background); font-size: 13px; line-height: 16px; display: flex; @@ -44,7 +45,7 @@ section.settings { height: 50px; width: 100vw; box-sizing: border-box; - background-color: var(--iqser-white); + background-color: var(--iqser-background); border-bottom: 1px solid var(--iqser-separator); .filters { @@ -121,7 +122,7 @@ section.settings { border-radius: 8px; margin-top: 40px; margin-bottom: 70px; - background-color: var(--iqser-white); + background-color: var(--iqser-background); max-width: 650px; height: fit-content; box-shadow: 0 1px 5px 0 rgba(40, 50, 65, 0.19); @@ -158,9 +159,9 @@ section.settings { } .right-container { - border-left: 1px solid var(--iqser-grey-4); + border-left: 1px solid var(--iqser-separator); box-sizing: border-box; - background: var(--iqser-white); + background: var(--iqser-background); overflow: hidden; transition: width ease-in-out 0.2s, min-width ease-in-out 0.2s; diff --git a/src/assets/styles/common-menu.scss b/src/assets/styles/common-menu.scss index 1d38269..8775cd5 100644 --- a/src/assets/styles/common-menu.scss +++ b/src/assets/styles/common-menu.scss @@ -6,6 +6,7 @@ max-width: none !important; min-width: 180px !important; margin-top: 10px; + background-color: var(--iqser-background); @include common-mixins.scroll-bar; .mat-menu-content:not(:empty) { @@ -23,7 +24,7 @@ .mat-menu-item { font-size: 13px; - color: var(--iqser-accent); + color: var(--iqser-text); padding: 0 26px 0 8px; margin: 0 8px 2px 8px; border-radius: 4px; @@ -32,6 +33,10 @@ display: flex; align-items: center; + mat-icon { + color: var(--iqser-text); + } + .dot { right: 8px; } diff --git a/src/assets/styles/common-select.scss b/src/assets/styles/common-select.scss index d2c7cca..56fee69 100644 --- a/src/assets/styles/common-select.scss +++ b/src/assets/styles/common-select.scss @@ -2,6 +2,7 @@ .mat-select-panel { padding: 7px 0 !important; + background-color: var(--iqser-background); @include common-mixins.scroll-bar; .mat-option { @@ -15,7 +16,7 @@ &.mat-selected:not(.mat-option-multiple) { background-color: rgba(var(--iqser-primary-rgb), 0.2); - color: var(--iqser-accent); + color: var(--iqser-text); } } } diff --git a/src/assets/styles/common-side-nav.scss b/src/assets/styles/common-side-nav.scss index 61c2423..11f2e07 100644 --- a/src/assets/styles/common-side-nav.scss +++ b/src/assets/styles/common-side-nav.scss @@ -5,7 +5,7 @@ iqser-side-nav { flex-direction: column; min-width: 200px; max-width: 200px; - background-color: var(--iqser-grey-2); + background-color: var(--iqser-side-nav); border-right: 1px solid var(--iqser-separator); box-sizing: border-box; padding: 8px; @@ -24,7 +24,7 @@ iqser-side-nav { cursor: pointer; transition: background-color 0.2s; font-weight: 500; - color: var(--iqser-accent); + color: var(--iqser-text); text-decoration: none; display: flex; align-items: center; diff --git a/src/assets/styles/common-tabs.scss b/src/assets/styles/common-tabs.scss index 7bc7308..58051a5 100644 --- a/src/assets/styles/common-tabs.scss +++ b/src/assets/styles/common-tabs.scss @@ -26,7 +26,7 @@ } &[disabled] { - color: rgba(var(--iqser-accent-rgb), 0.3); + color: rgba(var(--iqser-text-rgb), 0.3); cursor: not-allowed; } } diff --git a/src/assets/styles/common-texts.scss b/src/assets/styles/common-texts.scss index 122ce29..273711f 100644 --- a/src/assets/styles/common-texts.scss +++ b/src/assets/styles/common-texts.scss @@ -52,7 +52,7 @@ a { pre { font-family: Inter, sans-serif; - color: var(--iqser-accent); + color: var(--iqser-text); } .heading-xl { @@ -95,7 +95,7 @@ pre { } .link-action { - color: var(--iqser-accent); + color: var(--iqser-text); font-size: 11px; line-height: 14px; text-decoration: underline; @@ -103,12 +103,12 @@ pre { &:hover { text-decoration: none; - color: var(--iqser-accent); + color: var(--iqser-text); } } .large-label { - color: var(--iqser-accent); + color: var(--iqser-text); font-size: 13px; line-height: 16px; } diff --git a/src/lib/filtering/quick-filters/quick-filters.component.scss b/src/lib/filtering/quick-filters/quick-filters.component.scss index e011abd..619ce6c 100644 --- a/src/lib/filtering/quick-filters/quick-filters.component.scss +++ b/src/lib/filtering/quick-filters/quick-filters.component.scss @@ -6,7 +6,7 @@ .quick-filter { box-sizing: border-box; - border: 1px solid var(--iqser-quick-filter-border); + border: 1px solid var(--iqser-inputs-border); border-radius: 17px; background-color: var(--iqser-btn-bg); padding: 0 14px; @@ -17,11 +17,11 @@ transition: background-color 0.2s; &:hover { - background-color: var(--iqser-white); + background-color: var(--iqser-background); } &.active { - background-color: var(--iqser-white); + background-color: var(--iqser-background); font-weight: 600; border: none; } diff --git a/src/lib/help-mode/help-mode-dialog/help-mode-dialog.component.scss b/src/lib/help-mode/help-mode-dialog/help-mode-dialog.component.scss index 05fc890..6f76799 100644 --- a/src/lib/help-mode/help-mode-dialog/help-mode-dialog.component.scss +++ b/src/lib/help-mode/help-mode-dialog/help-mode-dialog.component.scss @@ -1,5 +1,5 @@ section { - background: var(--iqser-grey-11); + background: var(--iqser-grey-4); align-items: center; .content { diff --git a/src/lib/inputs/round-checkbox/round-checkbox.component.scss b/src/lib/inputs/round-checkbox/round-checkbox.component.scss index a87359e..ff18c89 100644 --- a/src/lib/inputs/round-checkbox/round-checkbox.component.scss +++ b/src/lib/inputs/round-checkbox/round-checkbox.component.scss @@ -9,8 +9,8 @@ border-radius: 50%; &.inactive { - border: 1px solid #d3d5da; - background-color: var(--iqser-white); + border: 1px solid var(--iqser-inputs-border); + background-color: var(--iqser-background); } .mat-icon { diff --git a/src/lib/listing/table-content/table-content.component.scss b/src/lib/listing/table-content/table-content.component.scss index 568053f..3a65a2b 100644 --- a/src/lib/listing/table-content/table-content.component.scss +++ b/src/lib/listing/table-content/table-content.component.scss @@ -3,6 +3,7 @@ :host cdk-virtual-scroll-viewport { height: calc(100vh - 50px - 31px - 111px); overflow-y: hidden !important; + background-color: var(--iqser-background); @include mixins.scroll-bar; &.no-data { diff --git a/src/lib/listing/table-content/table-item/table-item.component.scss b/src/lib/listing/table-content/table-item/table-item.component.scss index 2260b6e..ec0cd43 100644 --- a/src/lib/listing/table-content/table-item/table-item.component.scss +++ b/src/lib/listing/table-content/table-item/table-item.component.scss @@ -17,6 +17,7 @@ border-bottom: 1px solid var(--iqser-separator); height: var(--itemSize); padding: 0 10px; + background-color: var(--iqser-background); &.center { align-items: center; diff --git a/test.json b/test.json new file mode 100644 index 0000000..e69de29 From 9714c93fc38388ecb9f87e1b812a4782f7fd6917 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Tue, 28 Jun 2022 12:02:14 +0300 Subject: [PATCH 2/8] Theme --- src/assets/styles/_common-mixins.scss | 8 ++++---- src/assets/styles/common-breadcrumbs.scss | 2 +- src/assets/styles/common-buttons.scss | 2 +- src/assets/styles/common-components.scss | 1 + src/assets/styles/common-dialogs.scss | 3 ++- src/assets/styles/common-inputs.scss | 2 +- src/assets/styles/common-layout.scss | 2 +- src/assets/styles/common-loading.scss | 8 ++++---- src/assets/styles/common-menu.scss | 4 ++-- src/assets/styles/common-select.scss | 4 ++-- src/assets/styles/common-toggle.scss | 4 ++-- src/lib/buttons/help-button/help-button.component.html | 10 +--------- src/lib/buttons/help-button/help-button.component.ts | 3 +-- .../help-mode-dialog/help-mode-dialog.component.scss | 2 +- .../listing/scroll-button/scroll-button.component.scss | 2 +- 15 files changed, 25 insertions(+), 32 deletions(-) diff --git a/src/assets/styles/_common-mixins.scss b/src/assets/styles/_common-mixins.scss index 4cf6984..dfe467c 100644 --- a/src/assets/styles/_common-mixins.scss +++ b/src/assets/styles/_common-mixins.scss @@ -40,11 +40,11 @@ } @mixin inset-shadow { - box-shadow: inset 0 4px 3px -2px var(--iqser-btn-bg-hover); + box-shadow: inset 0 4px 3px -2px var(--iqser-shadow); } @mixin drop-shadow { - box-shadow: 0 4px 3px 2px var(--iqser-btn-bg-hover); + box-shadow: 0 2px 6px 0 var(--iqser-shadow); } @mixin clear-btn { @@ -59,9 +59,9 @@ @mixin clear-a { text-decoration: none; - color: initial; + color: var(--iqser-text); &:hover { - color: initial; + color: var(--iqser-text); } } diff --git a/src/assets/styles/common-breadcrumbs.scss b/src/assets/styles/common-breadcrumbs.scss index 5756f33..7df17fb 100644 --- a/src/assets/styles/common-breadcrumbs.scss +++ b/src/assets/styles/common-breadcrumbs.scss @@ -18,7 +18,7 @@ color: var(--iqser-primary); &[aria-expanded='true'] .mat-button-wrapper > span { - color: var(--iqser-accent); + color: var(--iqser-text); } } } diff --git a/src/assets/styles/common-buttons.scss b/src/assets/styles/common-buttons.scss index 84c43ab..f136b90 100644 --- a/src/assets/styles/common-buttons.scss +++ b/src/assets/styles/common-buttons.scss @@ -23,7 +23,7 @@ } &.mat-button-disabled .mat-button-wrapper { - color: var(--iqser-accent); + color: var(--iqser-text); opacity: 0.3; } } diff --git a/src/assets/styles/common-components.scss b/src/assets/styles/common-components.scss index 4598a4f..a3bd775 100644 --- a/src/assets/styles/common-components.scss +++ b/src/assets/styles/common-components.scss @@ -79,6 +79,7 @@ display: flex; align-items: center; min-width: fit-content; + @include mixins.line-clamp(1); mat-icon { width: 10px; diff --git a/src/assets/styles/common-dialogs.scss b/src/assets/styles/common-dialogs.scss index ede9ae4..9eda646 100644 --- a/src/assets/styles/common-dialogs.scss +++ b/src/assets/styles/common-dialogs.scss @@ -2,7 +2,8 @@ .mat-dialog-container { display: flex !important; - color: var(--iqser-accent); + color: var(--iqser-text); + background-color: var(--iqser-background); padding: 0 !important; border-radius: 8px !important; @include common-mixins.scroll-bar; diff --git a/src/assets/styles/common-inputs.scss b/src/assets/styles/common-inputs.scss index c9c540b..e4c566f 100644 --- a/src/assets/styles/common-inputs.scss +++ b/src/assets/styles/common-inputs.scss @@ -177,7 +177,7 @@ form .iqser-input-group:not(first-of-type) { letter-spacing: 0; line-height: 14px; margin-bottom: 2px; - color: var(--iqser-accent); + color: var(--iqser-text); &.mat-checkbox-layout { opacity: 1; diff --git a/src/assets/styles/common-layout.scss b/src/assets/styles/common-layout.scss index d9a2c4a..27a6ed0 100644 --- a/src/assets/styles/common-layout.scss +++ b/src/assets/styles/common-layout.scss @@ -125,7 +125,7 @@ section.settings { background-color: var(--iqser-background); max-width: 650px; height: fit-content; - box-shadow: 0 1px 5px 0 rgba(40, 50, 65, 0.19); + box-shadow: 0 1px 5px 0 rgba(var(--iqser-accent-rgb), 0.19); position: unset; .heading-l { diff --git a/src/assets/styles/common-loading.scss b/src/assets/styles/common-loading.scss index 43fdc4f..7f93ba9 100644 --- a/src/assets/styles/common-loading.scss +++ b/src/assets/styles/common-loading.scss @@ -6,15 +6,15 @@ @keyframes dots { 0%, 20% { - color: rgba(40, 50, 65, 0); - text-shadow: 0.25em 0 0 rgba(40, 50, 65, 0), 0.5em 0 0 rgba(40, 50, 65, 0); + color: rgba(var(--iqser-accent-rgb), 0); + text-shadow: 0.25em 0 0 rgba(var(--iqser-accent-rgb), 0), 0.5em 0 0 rgba(var(--iqser-accent-rgb), 0); } 40% { color: #283241; - text-shadow: 0.25em 0 0 rgba(40, 50, 65, 0), 0.5em 0 0 rgba(40, 50, 65, 0); + text-shadow: 0.25em 0 0 rgba(var(--iqser-accent-rgb), 0), 0.5em 0 0 rgba(var(--iqser-accent-rgb), 0); } 60% { - text-shadow: 0.25em 0 0 #283241, 0.5em 0 0 rgba(40, 50, 65, 0); + text-shadow: 0.25em 0 0 #283241, 0.5em 0 0 rgba(var(--iqser-accent-rgb), 0); } 80%, 100% { diff --git a/src/assets/styles/common-menu.scss b/src/assets/styles/common-menu.scss index 8775cd5..f2586b9 100644 --- a/src/assets/styles/common-menu.scss +++ b/src/assets/styles/common-menu.scss @@ -2,12 +2,12 @@ .mat-menu-panel { border-radius: 8px !important; - box-shadow: 0 2px 6px 0 rgba(40, 50, 65, 0.3); max-width: none !important; min-width: 180px !important; margin-top: 10px; - background-color: var(--iqser-background); + background-color: var(--iqser-popup-background); @include common-mixins.scroll-bar; + @include common-mixins.drop-shadow; .mat-menu-content:not(:empty) { padding-top: 8px; diff --git a/src/assets/styles/common-select.scss b/src/assets/styles/common-select.scss index 56fee69..5773c34 100644 --- a/src/assets/styles/common-select.scss +++ b/src/assets/styles/common-select.scss @@ -8,15 +8,15 @@ .mat-option { margin: 1px 8px; border-radius: 4px; + color: var(--iqser-text); &:hover:not(.mat-option-disabled), &:focus:not(.mat-option-disabled) { - background-color: var(--iqser-grey-6); + background-color: var(--iqser-btn-bg); } &.mat-selected:not(.mat-option-multiple) { background-color: rgba(var(--iqser-primary-rgb), 0.2); - color: var(--iqser-text); } } } diff --git a/src/assets/styles/common-toggle.scss b/src/assets/styles/common-toggle.scss index 161a8bd..092d02d 100644 --- a/src/assets/styles/common-toggle.scss +++ b/src/assets/styles/common-toggle.scss @@ -27,11 +27,11 @@ &.mat-primary.mat-checked { .mat-slide-toggle-bar { background-color: var(--iqser-primary); - border: 1px solid var(--iqser-white); + border: 1px solid var(--iqser-background); } .mat-slide-toggle-thumb { - background-color: var(--iqser-white); + background-color: var(--iqser-background); } .mat-slide-toggle-thumb-container { diff --git a/src/lib/buttons/help-button/help-button.component.html b/src/lib/buttons/help-button/help-button.component.html index bac8fc3..45fbb64 100644 --- a/src/lib/buttons/help-button/help-button.component.html +++ b/src/lib/buttons/help-button/help-button.component.html @@ -1,14 +1,6 @@ - diff --git a/src/lib/buttons/help-button/help-button.component.ts b/src/lib/buttons/help-button/help-button.component.ts index 86f8d49..c684311 100644 --- a/src/lib/buttons/help-button/help-button.component.ts +++ b/src/lib/buttons/help-button/help-button.component.ts @@ -8,7 +8,6 @@ import { HelpModeService } from '@iqser/common-ui'; styleUrls: ['./help-button.component.scss'], }) export class HelpButtonComponent implements OnInit, OnDestroy { - @Input() dialogButton = true; @Input() helpButtonKey?: string; constructor(private readonly _helpModeService: HelpModeService) {} @@ -27,6 +26,6 @@ export class HelpButtonComponent implements OnInit, OnDestroy { window.open(url, '_blank'); return; } - this._helpModeService.activateHelpMode(this.dialogButton); + this._helpModeService.activateHelpMode(); } } diff --git a/src/lib/help-mode/help-mode-dialog/help-mode-dialog.component.scss b/src/lib/help-mode/help-mode-dialog/help-mode-dialog.component.scss index 6f76799..ba695e0 100644 --- a/src/lib/help-mode/help-mode-dialog/help-mode-dialog.component.scss +++ b/src/lib/help-mode/help-mode-dialog/help-mode-dialog.component.scss @@ -1,5 +1,5 @@ section { - background: var(--iqser-grey-4); + background: var(--iqser-grey-4); // todo align-items: center; .content { diff --git a/src/lib/listing/scroll-button/scroll-button.component.scss b/src/lib/listing/scroll-button/scroll-button.component.scss index ee4a294..8eaace7 100644 --- a/src/lib/listing/scroll-button/scroll-button.component.scss +++ b/src/lib/listing/scroll-button/scroll-button.component.scss @@ -6,7 +6,7 @@ width: 44px; border: none; border-radius: 8px 0 0 8px; - box-shadow: -1px 1px 5px 0 rgba(40, 50, 65, 0.25); + box-shadow: -1px 1px 5px 0 rgba(var(--iqser-accent-rgb), 0.25); &.bottom { bottom: 30px; From c56c44fb2415256c38db5cd6cf47322ef4a82d5e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Tue, 28 Jun 2022 23:24:27 +0300 Subject: [PATCH 3/8] Theme --- src/assets/styles/_common-mixins.scss | 2 +- src/assets/styles/common-buttons.scss | 6 ++++++ src/assets/styles/common-components.scss | 4 +--- src/assets/styles/common-inputs.scss | 12 +++++++---- src/assets/styles/common-layout.scss | 2 +- src/assets/styles/common-toggle.scss | 4 ++-- .../help-mode-dialog.component.scss | 2 +- .../help-mode/help-mode.component.scss | 3 ++- .../details-radio.component.scss | 2 +- .../listing/workflow/workflow.component.scss | 20 +++++++++---------- .../drag-drop-file-upload.directive.ts | 13 +++++------- .../upload-file/upload-file.component.scss | 8 +++++--- 12 files changed, 43 insertions(+), 35 deletions(-) diff --git a/src/assets/styles/_common-mixins.scss b/src/assets/styles/_common-mixins.scss index dfe467c..f31e562 100644 --- a/src/assets/styles/_common-mixins.scss +++ b/src/assets/styles/_common-mixins.scss @@ -44,7 +44,7 @@ } @mixin drop-shadow { - box-shadow: 0 2px 6px 0 var(--iqser-shadow); + box-shadow: 0 1px 6px 0 var(--iqser-shadow); } @mixin clear-btn { diff --git a/src/assets/styles/common-buttons.scss b/src/assets/styles/common-buttons.scss index f136b90..0b5a495 100644 --- a/src/assets/styles/common-buttons.scss +++ b/src/assets/styles/common-buttons.scss @@ -21,13 +21,18 @@ margin: auto; } } +} +.mat-button, +.mat-icon-button, +.mat-flat-button { &.mat-button-disabled .mat-button-wrapper { color: var(--iqser-text); opacity: 0.3; } } + .mat-flat-button.mat-primary, .mat-button.primary { padding: 0 14px; @@ -84,6 +89,7 @@ iqser-circle-button { &.help:hover { background-color: var(--iqser-helpmode-primary); + color: var(--iqser-grey-1); } } diff --git a/src/assets/styles/common-components.scss b/src/assets/styles/common-components.scss index a3bd775..2cd90d3 100644 --- a/src/assets/styles/common-components.scss +++ b/src/assets/styles/common-components.scss @@ -79,12 +79,10 @@ display: flex; align-items: center; min-width: fit-content; - @include mixins.line-clamp(1); mat-icon { width: 10px; - height: 10px; - line-height: 13px; + height: 11px; margin-right: 6px; } diff --git a/src/assets/styles/common-inputs.scss b/src/assets/styles/common-inputs.scss index e4c566f..9a87dad 100644 --- a/src/assets/styles/common-inputs.scss +++ b/src/assets/styles/common-inputs.scss @@ -59,7 +59,7 @@ form .iqser-input-group:not(first-of-type) { .mat-form-field-label { opacity: 0.7 !important; - color: var(--iqser-accent) !important; + color: var(--iqser-text) !important; transform: translateY(-1.34em) !important; } @@ -130,8 +130,8 @@ form .iqser-input-group:not(first-of-type) { &:disabled, &.mat-select-disabled { - background-color: var(--iqser-grey-2); - color: rgba(var(--iqser-accent-rgb), 0.3); + background-color: var(--iqser-alt-background); + color: rgba(var(--iqser-text-rgb), 0.3); } } @@ -144,11 +144,15 @@ form .iqser-input-group:not(first-of-type) { max-width: 150px; } - mat-select { + mat-select, .mat-select.mat-select-disabled { .mat-select-trigger { height: 32px; } + .mat-select-placeholder { + color: rgba(var(--iqser-text-rgb), 0.4); + } + .mat-select-value { vertical-align: middle; color: var(--iqser-text); diff --git a/src/assets/styles/common-layout.scss b/src/assets/styles/common-layout.scss index 27a6ed0..0db257f 100644 --- a/src/assets/styles/common-layout.scss +++ b/src/assets/styles/common-layout.scss @@ -125,7 +125,7 @@ section.settings { background-color: var(--iqser-background); max-width: 650px; height: fit-content; - box-shadow: 0 1px 5px 0 rgba(var(--iqser-accent-rgb), 0.19); + @include common-mixins.drop-shadow; position: unset; .heading-l { diff --git a/src/assets/styles/common-toggle.scss b/src/assets/styles/common-toggle.scss index 092d02d..fafb414 100644 --- a/src/assets/styles/common-toggle.scss +++ b/src/assets/styles/common-toggle.scss @@ -3,7 +3,7 @@ height: 16px !important; width: 30px !important; border-radius: 16px !important; - background-color: var(--iqser-grey-4); + background-color: var(--iqser-toggle-bg); } .mat-slide-toggle-thumb-container { @@ -17,7 +17,7 @@ height: 12px !important; width: 12px !important; box-shadow: none; - background-color: var(--iqser-grey-2); + background-color: var(--iqser-alt-background); } .mat-ripple { diff --git a/src/lib/help-mode/help-mode-dialog/help-mode-dialog.component.scss b/src/lib/help-mode/help-mode-dialog/help-mode-dialog.component.scss index ba695e0..0a00849 100644 --- a/src/lib/help-mode/help-mode-dialog/help-mode-dialog.component.scss +++ b/src/lib/help-mode/help-mode-dialog/help-mode-dialog.component.scss @@ -1,5 +1,5 @@ section { - background: var(--iqser-grey-4); // todo + background: var(--iqser-btn-bg-hover); align-items: center; .content { diff --git a/src/lib/help-mode/help-mode/help-mode.component.scss b/src/lib/help-mode/help-mode/help-mode.component.scss index ab71e1d..104a014 100644 --- a/src/lib/help-mode/help-mode/help-mode.component.scss +++ b/src/lib/help-mode/help-mode/help-mode.component.scss @@ -23,10 +23,11 @@ justify-content: space-between; align-items: center; pointer-events: visiblePainted; + color: var(--iqser-grey-1); a { - color: black; text-decoration: underline; + color: var(--iqser-grey-1); } .close { diff --git a/src/lib/inputs/details-radio/details-radio.component.scss b/src/lib/inputs/details-radio/details-radio.component.scss index b50616b..51db6f8 100644 --- a/src/lib/inputs/details-radio/details-radio.component.scss +++ b/src/lib/inputs/details-radio/details-radio.component.scss @@ -5,7 +5,7 @@ label { .option { padding: 16px; border-radius: 8px; - background-color: var(--iqser-grey-2); + background-color: var(--iqser-alt-background); &.active { background-color: rgba(var(--iqser-primary-rgb), 0.1); diff --git a/src/lib/listing/workflow/workflow.component.scss b/src/lib/listing/workflow/workflow.component.scss index f503083..f5dfda2 100644 --- a/src/lib/listing/workflow/workflow.component.scss +++ b/src/lib/listing/workflow/workflow.component.scss @@ -16,7 +16,7 @@ display: flex; flex-direction: column; flex: 1; - background-color: var(--iqser-grey-2); + background-color: var(--iqser-alt-background); border-radius: 6px; padding-top: 18px; position: relative; @@ -48,11 +48,11 @@ &:not(.list-can-receive):not(.list-dragging) { background: repeating-linear-gradient( - -45deg, - var(--iqser-separator), - var(--iqser-separator) 1px, - var(--iqser-white) 1px, - var(--iqser-white) 8px + -45deg, + var(--iqser-separator), + var(--iqser-separator) 1px, + var(--iqser-background) 1px, + var(--iqser-background) 8px ); > .heading, @@ -76,8 +76,8 @@ } .item { - background-color: var(--iqser-white); - border: 2px solid var(--iqser-white); + background-color: var(--iqser-background); + border: 2px solid var(--iqser-background); &:last-child { margin-bottom: 8px; @@ -99,7 +99,7 @@ } .add-btn { - background-color: var(--iqser-grey-6); + background-color: var(--iqser-btn-bg); padding: 10px; text-align: center; cursor: pointer; @@ -110,7 +110,7 @@ } &:hover { - background-color: var(--iqser-grey-4); + background-color: var(--iqser-btn-bg-hover); } } diff --git a/src/lib/upload-file/drag-drop-file-upload.directive.ts b/src/lib/upload-file/drag-drop-file-upload.directive.ts index 060f21f..fc73659 100644 --- a/src/lib/upload-file/drag-drop-file-upload.directive.ts +++ b/src/lib/upload-file/drag-drop-file-upload.directive.ts @@ -1,21 +1,18 @@ -import { Directive, EventEmitter, Output, HostListener, HostBinding } from '@angular/core'; - -const DRAG_OVER_BACKGROUND_COLOR = '#e2eefd'; -const DEFAULT_BACKGROUND_COLOR = '#f4f5f7'; +import { Directive, EventEmitter, HostBinding, HostListener, Output } from '@angular/core'; @Directive({ selector: '[iqserDragDropFileUpload]', }) export class DragDropFileUploadDirective { @Output() readonly fileDropped = new EventEmitter(); - @HostBinding('style.background-color') private _background = DEFAULT_BACKGROUND_COLOR; + @HostBinding('class.drag-over') private _dragOver = false; @HostListener('dragover', ['$event']) onDragOver(event: DragEvent) { event.preventDefault(); event.stopPropagation(); if (event.dataTransfer?.types.includes('Files')) { - this._background = DRAG_OVER_BACKGROUND_COLOR; + this._dragOver = true; } } @@ -23,7 +20,7 @@ export class DragDropFileUploadDirective { onDragLeave(event: DragEvent) { event.preventDefault(); event.stopPropagation(); - this._background = DEFAULT_BACKGROUND_COLOR; + this._dragOver = false; } @HostListener('drop', ['$event']) @@ -31,7 +28,7 @@ export class DragDropFileUploadDirective { event.preventDefault(); event.stopPropagation(); if (event?.dataTransfer?.types.includes('Files')) { - this._background = DEFAULT_BACKGROUND_COLOR; + this._dragOver = false; const files = event.dataTransfer.files; if (files.length > 0) { this.fileDropped.emit({ target: { files } }); diff --git a/src/lib/upload-file/upload-file.component.scss b/src/lib/upload-file/upload-file.component.scss index 81faed2..5c716cc 100644 --- a/src/lib/upload-file/upload-file.component.scss +++ b/src/lib/upload-file/upload-file.component.scss @@ -1,12 +1,14 @@ -@import '../../assets/styles/common-variables'; - .upload-area, .file-area { display: flex; align-items: center; border-radius: 8px; width: 100%; - background: var(--iqser-grey-2); + background: var(--iqser-alt-background); + + &.drag-over { + background-color: var(--iqser-file-drop-drag-over); + } } .upload-area { From 90c16d2ea592ff990ff77feae54f04ed837ee6a1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Tue, 28 Jun 2022 23:26:10 +0300 Subject: [PATCH 4/8] Theme --- src/assets/styles/common-buttons.scss | 1 - src/assets/styles/common-inputs.scss | 3 ++- src/lib/listing/workflow/workflow.component.scss | 10 +++++----- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/assets/styles/common-buttons.scss b/src/assets/styles/common-buttons.scss index 0b5a495..9d68a97 100644 --- a/src/assets/styles/common-buttons.scss +++ b/src/assets/styles/common-buttons.scss @@ -32,7 +32,6 @@ } } - .mat-flat-button.mat-primary, .mat-button.primary { padding: 0 14px; diff --git a/src/assets/styles/common-inputs.scss b/src/assets/styles/common-inputs.scss index 9a87dad..8050d00 100644 --- a/src/assets/styles/common-inputs.scss +++ b/src/assets/styles/common-inputs.scss @@ -144,7 +144,8 @@ form .iqser-input-group:not(first-of-type) { max-width: 150px; } - mat-select, .mat-select.mat-select-disabled { + mat-select, + .mat-select.mat-select-disabled { .mat-select-trigger { height: 32px; } diff --git a/src/lib/listing/workflow/workflow.component.scss b/src/lib/listing/workflow/workflow.component.scss index f5dfda2..e2bb64e 100644 --- a/src/lib/listing/workflow/workflow.component.scss +++ b/src/lib/listing/workflow/workflow.component.scss @@ -48,11 +48,11 @@ &:not(.list-can-receive):not(.list-dragging) { background: repeating-linear-gradient( - -45deg, - var(--iqser-separator), - var(--iqser-separator) 1px, - var(--iqser-background) 1px, - var(--iqser-background) 8px + -45deg, + var(--iqser-separator), + var(--iqser-separator) 1px, + var(--iqser-background) 1px, + var(--iqser-background) 8px ); > .heading, From 66cd896a99b47239c019d89e87d0bd7cd7fc626f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Wed, 29 Jun 2022 00:19:12 +0300 Subject: [PATCH 5/8] Theme --- src/assets/styles/common-color-picker.scss | 7 +++++++ src/assets/styles/common-components.scss | 16 ++++++++-------- src/assets/styles/common-styles.scss | 1 + src/assets/styles/common-toggle-button.scss | 2 +- .../table-item/table-item.component.scss | 2 +- 5 files changed, 18 insertions(+), 10 deletions(-) create mode 100644 src/assets/styles/common-color-picker.scss diff --git a/src/assets/styles/common-color-picker.scss b/src/assets/styles/common-color-picker.scss new file mode 100644 index 0000000..6562a74 --- /dev/null +++ b/src/assets/styles/common-color-picker.scss @@ -0,0 +1,7 @@ +.color-picker { + background-color: var(--iqser-background) !important; + + input { + color: var(--iqser-text) !important; + } +} diff --git a/src/assets/styles/common-components.scss b/src/assets/styles/common-components.scss index 2cd90d3..7ac4631 100644 --- a/src/assets/styles/common-components.scss +++ b/src/assets/styles/common-components.scss @@ -23,22 +23,22 @@ } &.gray-dark { - background-color: var(--iqser-grey-6); - color: var(--iqser-accent); + background-color: var(--iqser-user-avatar-1); + color: var(--iqser-text); } &.gray-primary { - background-color: var(--iqser-grey-6); + background-color: var(--iqser-user-avatar-1); color: var(--iqser-primary); } &.lightgray-dark { - background-color: var(--iqser-grey-4); - color: var(--iqser-accent); + background-color: var(--iqser-user-avatar-2); + color: var(--iqser-text); } &.lightgray-primary { - background-color: var(--iqser-grey-4); + background-color: var(--iqser-user-avatar-2); color: var(--iqser-primary); } @@ -58,12 +58,12 @@ } &.white-dark { - border: 1px solid var(--iqser-grey-4); + background-color: var(--iqser-user-avatar-2); color: var(--iqser-accent); } &.inactive { - background-color: var(--iqser-grey-6); + background-color: var(--iqser-user-avatar-1); color: var(--iqser-grey-7); } } diff --git a/src/assets/styles/common-styles.scss b/src/assets/styles/common-styles.scss index 9e77796..eb7891e 100644 --- a/src/assets/styles/common-styles.scss +++ b/src/assets/styles/common-styles.scss @@ -29,3 +29,4 @@ @use 'common-file-drop'; @use 'common-side-nav'; @use 'common-radio'; +@use 'common-color-picker'; diff --git a/src/assets/styles/common-toggle-button.scss b/src/assets/styles/common-toggle-button.scss index b6be148..19e3752 100644 --- a/src/assets/styles/common-toggle-button.scss +++ b/src/assets/styles/common-toggle-button.scss @@ -6,7 +6,7 @@ .mat-button-toggle:not(.mat-button-toggle-checked) { .mat-button-toggle-button { - background: var(--iqser-grey-6); + background: var(--iqser-btn-bg); color: var(--iqser-grey-7); } } diff --git a/src/lib/listing/table-content/table-item/table-item.component.scss b/src/lib/listing/table-content/table-item/table-item.component.scss index ec0cd43..eafb95b 100644 --- a/src/lib/listing/table-content/table-item/table-item.component.scss +++ b/src/lib/listing/table-content/table-item/table-item.component.scss @@ -69,7 +69,7 @@ padding-left: 100px; padding-right: 21px; z-index: 1; - background: linear-gradient(to right, rgba(244, 245, 247, 0) 0%, var(--iqser-grey-2) 35%); + background: linear-gradient(to right, rgba(244, 245, 247, 0) 0%, var(--iqser-side-nav) 35%); mat-icon { width: 14px; From 2c4a46cad1aa564a0682f0938cdfa1c4b80815f2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Wed, 29 Jun 2022 00:38:35 +0300 Subject: [PATCH 6/8] Theme --- src/assets/styles/common-slider.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/assets/styles/common-slider.scss b/src/assets/styles/common-slider.scss index b7b8efa..2eb38f6 100644 --- a/src/assets/styles/common-slider.scss +++ b/src/assets/styles/common-slider.scss @@ -22,7 +22,7 @@ height: 4px !important; margin-top: 1px; border-radius: 3px; - background-color: var(--iqser-grey-4) !important; + background-color: var(--iqser-toggle-bg) !important; } .mat-slider-focus-ring { From b6109e714ea67afea31451a9e8916c4d82ca18d0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Wed, 29 Jun 2022 03:19:19 +0300 Subject: [PATCH 7/8] Theme --- src/assets/styles/common-inputs.scss | 4 ++-- src/assets/styles/common-tabs.scss | 2 +- src/lib/filtering/popup-filter/popup-filter.component.scss | 2 +- src/lib/filtering/quick-filters/quick-filters.component.scss | 2 +- src/lib/inputs/round-checkbox/round-checkbox.component.scss | 2 +- 5 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/assets/styles/common-inputs.scss b/src/assets/styles/common-inputs.scss index 8050d00..0e3f2e3 100644 --- a/src/assets/styles/common-inputs.scss +++ b/src/assets/styles/common-inputs.scss @@ -24,7 +24,7 @@ form .iqser-input-group:not(first-of-type) { background: var(--iqser-grey-5); height: 34px; width: 34px; - border-left: 1px solid var(--iqser-inputs-border); + border-left: 1px solid var(--iqser-inputs-outline); border-top-right-radius: 7px; border-bottom-right-radius: 7px; cursor: pointer; @@ -97,7 +97,7 @@ form .iqser-input-group:not(first-of-type) { box-sizing: border-box; padding-left: 11px; padding-right: 11px; - border: 1px solid var(--iqser-inputs-border); + border: 1px solid var(--iqser-inputs-outline); font-family: Inter, sans-serif; font-size: 13px; background-color: var(--iqser-background); diff --git a/src/assets/styles/common-tabs.scss b/src/assets/styles/common-tabs.scss index 58051a5..422df34 100644 --- a/src/assets/styles/common-tabs.scss +++ b/src/assets/styles/common-tabs.scss @@ -16,7 +16,7 @@ cursor: pointer; &:not([disabled]):not(.active):hover { - background-color: var(--iqser-grey-6); + background-color: var(--iqser-tab-hover); } &.active { diff --git a/src/lib/filtering/popup-filter/popup-filter.component.scss b/src/lib/filtering/popup-filter/popup-filter.component.scss index 97a3f53..2e05059 100644 --- a/src/lib/filtering/popup-filter/popup-filter.component.scss +++ b/src/lib/filtering/popup-filter/popup-filter.component.scss @@ -28,7 +28,7 @@ } .filter-options { - background-color: var(--iqser-grey-2); + background-color: var(--iqser-side-nav); padding-bottom: 8px; } diff --git a/src/lib/filtering/quick-filters/quick-filters.component.scss b/src/lib/filtering/quick-filters/quick-filters.component.scss index 619ce6c..a7440a2 100644 --- a/src/lib/filtering/quick-filters/quick-filters.component.scss +++ b/src/lib/filtering/quick-filters/quick-filters.component.scss @@ -6,7 +6,7 @@ .quick-filter { box-sizing: border-box; - border: 1px solid var(--iqser-inputs-border); + border: 1px solid var(--iqser-inputs-outline); border-radius: 17px; background-color: var(--iqser-btn-bg); padding: 0 14px; diff --git a/src/lib/inputs/round-checkbox/round-checkbox.component.scss b/src/lib/inputs/round-checkbox/round-checkbox.component.scss index ff18c89..fc7aaeb 100644 --- a/src/lib/inputs/round-checkbox/round-checkbox.component.scss +++ b/src/lib/inputs/round-checkbox/round-checkbox.component.scss @@ -9,7 +9,7 @@ border-radius: 50%; &.inactive { - border: 1px solid var(--iqser-inputs-border); + border: 1px solid var(--iqser-inputs-outline); background-color: var(--iqser-background); } From 64b28cfb03389b4121b48715df82ce61a10774d4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Wed, 29 Jun 2022 19:49:03 +0300 Subject: [PATCH 8/8] Theme --- src/assets/icons/sort-asc.svg | 6 +++--- src/assets/icons/sort-desc.svg | 6 +++--- src/assets/styles/_common-mixins.scss | 10 +++++++--- src/assets/styles/common-file-drop.scss | 2 +- .../listing/scroll-button/scroll-button.component.scss | 6 ++++-- .../table-column-name/table-column-name.component.scss | 2 +- src/lib/misc/progress-bar/progress-bar.component.scss | 6 +++--- 7 files changed, 22 insertions(+), 16 deletions(-) diff --git a/src/assets/icons/sort-asc.svg b/src/assets/icons/sort-asc.svg index 8121847..2c00b5a 100644 --- a/src/assets/icons/sort-asc.svg +++ b/src/assets/icons/sort-asc.svg @@ -2,9 +2,9 @@ - - + diff --git a/src/assets/icons/sort-desc.svg b/src/assets/icons/sort-desc.svg index f9211f8..de28f2b 100644 --- a/src/assets/icons/sort-desc.svg +++ b/src/assets/icons/sort-desc.svg @@ -2,9 +2,9 @@ - - + diff --git a/src/assets/styles/_common-mixins.scss b/src/assets/styles/_common-mixins.scss index f31e562..9d90ac6 100644 --- a/src/assets/styles/_common-mixins.scss +++ b/src/assets/styles/_common-mixins.scss @@ -21,21 +21,25 @@ } @mixin scroll-bar { - scrollbar-color: var(--iqser-grey-5) var(--iqser-grey-2); + scrollbar-color: var(--iqser-inputs-outline) var(--iqser-alt-background); scrollbar-width: thin; + ::-webkit-scrollbar-corner { + background: var(--iqser-alt-background); + } + &::-webkit-scrollbar { width: 11px; } /* Track */ &::-webkit-scrollbar-track { - background: var(--iqser-grey-2); + background: var(--iqser-alt-background); } /* Handle */ &::-webkit-scrollbar-thumb { - background: var(--iqser-grey-5); + background: var(--iqser-inputs-outline); } } diff --git a/src/assets/styles/common-file-drop.scss b/src/assets/styles/common-file-drop.scss index 40fae90..320ff3d 100644 --- a/src/assets/styles/common-file-drop.scss +++ b/src/assets/styles/common-file-drop.scss @@ -9,7 +9,7 @@ z-index: 1000; padding: 12px; opacity: 0.7; - background: var(--iqser-white); + background: var(--iqser-background); justify-content: center; align-items: center; display: flex; diff --git a/src/lib/listing/scroll-button/scroll-button.component.scss b/src/lib/listing/scroll-button/scroll-button.component.scss index 8eaace7..afc466a 100644 --- a/src/lib/listing/scroll-button/scroll-button.component.scss +++ b/src/lib/listing/scroll-button/scroll-button.component.scss @@ -1,12 +1,14 @@ +@use '../../../assets/styles/common-mixins' as mixins; + .scroll-button { - background-color: var(--iqser-white); + background-color: var(--iqser-popup-background); position: absolute; right: 0; height: 40px; width: 44px; border: none; border-radius: 8px 0 0 8px; - box-shadow: -1px 1px 5px 0 rgba(var(--iqser-accent-rgb), 0.25); + @include mixins.drop-shadow; &.bottom { bottom: 30px; diff --git a/src/lib/listing/table-column-name/table-column-name.component.scss b/src/lib/listing/table-column-name/table-column-name.component.scss index 7fb6e0d..46aa2fc 100644 --- a/src/lib/listing/table-column-name/table-column-name.component.scss +++ b/src/lib/listing/table-column-name/table-column-name.component.scss @@ -36,7 +36,7 @@ .sort-arrows-container { display: none; - color: var(--iqser-primary); + color: rgba(var(--iqser-text-rgb), 0.5); margin-left: 8px; mat-icon { diff --git a/src/lib/misc/progress-bar/progress-bar.component.scss b/src/lib/misc/progress-bar/progress-bar.component.scss index dc7256e..c03010e 100644 --- a/src/lib/misc/progress-bar/progress-bar.component.scss +++ b/src/lib/misc/progress-bar/progress-bar.component.scss @@ -3,11 +3,11 @@ } .wrapper { - background-color: var(--iqser-grey-6); + background-color: var(--iqser-btn-bg); .indicator { width: calc(100% / var(--total) * var(--count)); - background-color: var(--iqser-grey-7); + background-color: var(--iqser-loading-progress); } } @@ -28,5 +28,5 @@ } .active .indicator { - background-color: rgba(var(--iqser-primary-rgb), 0.4); + background-color: rgba(var(--iqser-primary-rgb), 0.7); }