fix: color of text-muted css selector (#2158)

* fix: color of text-muted css selector Summary: - tried to follow the bootstrap 5 dark style. Because in the future we would like to switch to BS dark mode instead of custom dark mode. - use `text-body-secondary` as successor `text-muted` - `--bs-secondary-color` use the `$secondary` color in dark mode * style: linter issue
UltimateHackingKeyboard · Jan 8, 2024 · 8d06b80 · 8d06b80
1 parent 5c4c430
commit 8d06b80
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 3 deletions.
diff --git a/packages/uhk-web/src/app/components/device/firmware/device-firmware.component.html b/packages/uhk-web/src/app/components/device/firmware/device-firmware.component.html
@@ -16,12 +16,12 @@ <h1>
                     </span>
                     {{ state.moduleName }}
                     <span *ngIf="state.firmwareUpgradeSupported">firmware:
-                        <span *ngIf="state.gitRepo" [class.text-muted]="state.isOfficialFirmware">{{ state.gitRepo }}:</span>
+                        <span *ngIf="state.gitRepo" [class.text-body-secondary]="state.isOfficialFirmware">{{ state.gitRepo }}:</span>
                         <span [class.text-dotted]="state.tooltip"
                               [ngbTooltip]="state.tooltip"
                               tooltipClass="tooltip-firmware-version"
                         >{{ state.currentFirmwareVersion }}</span>
-                        <span *ngIf="state.gitTag" [class.text-muted]="state.isOfficialFirmware">{{ gitTagText(state.currentFirmwareVersion, state.gitTag) }}</span>
+                        <span *ngIf="state.gitTag" [class.text-body-secondary]="state.isOfficialFirmware">{{ gitTagText(state.currentFirmwareVersion, state.gitTag) }}</span>
                         <span *ngIf="state.newFirmwareVersion && state.currentFirmwareVersion !== state.newFirmwareVersion">
                             <fa-icon [icon]="faLongArrowAltRight"></fa-icon> {{ state.newFirmwareVersion }}
                         </span>

diff --git a/packages/uhk-web/src/app/components/popover/tab/keymap/keymap-tab.component.html b/packages/uhk-web/src/app/components/popover/tab/keymap/keymap-tab.component.html
@@ -13,7 +13,7 @@
                     (select)="onChange($event)">
 
             <ng-template ngx-select-option let-option>
-                <div [ngClass]="{'text-muted': option.disabled}">
+                <div [ngClass]="{'text-body-secondary': option.disabled}">
                     <span [ngClass]="{'indent-dropdown-item':option.data.id !== '-1'}">
                             <span>{{ option.text }}</span>
                             <span class="scancode--searchterm">

diff --git a/packages/uhk-web/src/styles/themes/_dark.scss b/packages/uhk-web/src/styles/themes/_dark.scss
@@ -61,6 +61,7 @@ $input-focus-border-color: tint-color($component-active-bg, 25%) !default;
 
 :root,
 .theme-dark {
+    --bs-secondary-color: #{$secondary} !important; /* stylelint-disable-line declaration-no-important */
     --bs-list-group-bg: #{$input-bg};
 
     --color-btn-danger-text: #{$white};