show icon colors in profile selector - fixes #4405

tabby-core/src/api/selector.ts

@@ -4,5 +4,6 @@ export interface SelectorOption<T> {
     result?: T
     icon?: string
     freeInputPattern?: string
+    color?: string
     callback?: (string?) => void
 }

tabby-core/src/components/selectorModal.component.pug

@@ -7,7 +7,7 @@
         (ngModelChange)='onFilterChange()'
     )
 
-    .list-group(*ngIf='filteredOptions.length')
+    div(*ngIf='filteredOptions.length')
         a.list-group-item.list-group-item-action.d-flex.align-items-center(
             #item,
             (click)='selectOption(option)',
@@ -16,10 +16,12 @@
         )
             i.icon(
                 class='fa-fw {{option.icon}}',
+                style='color: {{option.color}}',
                 *ngIf='!iconIsSVG(option.icon)'
             )
             .icon(
                 [fastHtmlBind]='option.icon',
+                style='color: {{option.color}}',
                 *ngIf='iconIsSVG(option.icon)'
             )
             .title.mr-2 {{getOptionText(option)}}

tabby-core/src/services/profiles.service.ts

@@ -84,8 +84,9 @@ export class ProfilesService {
     selectorOptionForProfile <P extends Profile, T> (profile: PartialProfile<P>): SelectorOption<T> {
         const fullProfile = this.getConfigProxyForProfile(profile)
         return {
-            icon: profile.icon,
             name: profile.group ? `${fullProfile.group} / ${fullProfile.name}` : fullProfile.name,
+            icon: profile.icon,
+            color: profile.color,
             description: this.providerForProfile(fullProfile)?.getDescription(fullProfile),
         }
     }
@@ -99,6 +100,7 @@ export class ProfilesService {
                 let options: SelectorOption<void>[] = recentProfiles.map(p => ({
                     ...this.selectorOptionForProfile(p),
                     icon: 'fas fa-history',
+                    color: p.color,
                     callback: async () => {
                         if (p.id) {
                             p = (await this.getProfiles()).find(x => x.id === p.id) ?? p

tabby-core/src/theme.scss

@@ -230,7 +230,7 @@ hotkey-input-modal {
     }
 }
 
-.list-group.list-group-flush .list-group-item:not(.list-group-item-action) {
+.list-group.list-group-flush {
     background: transparent;
     border-color: rgba(0, 0, 0, 0.2);
 

tabby-core/src/theme.vars.scss

@@ -88,7 +88,7 @@ $list-group-item-padding-y: 0.8rem;
 $list-group-item-padding-x: 1rem;
 
 $list-group-hover-bg: $table-bg-hover;
-$list-group-active-bg: rgba(255,255,255,.2);
+$list-group-active-bg: rgba(255,255,255,.05);
 $list-group-active-color: $component-active-color;
 $list-group-active-border-color: translate;