From c945b90b64d5264bff3ea1b739d67c6cc95b7133 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sat, 19 Feb 2022 14:03:55 -0800
Subject: [PATCH] Indicate disabled but active All button

---
 .../filterable-dropdown/filterable-dropdown.component.html | 6 +++---
 .../filterable-dropdown/filterable-dropdown.component.scss | 7 +++++++
 src-ui/src/theme_dark.scss                                 | 4 ++++
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html
index fa4497573..3cc116171 100644
--- a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html
+++ b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html
@@ -13,12 +13,12 @@
   <div class="dropdown-menu py-0 shadow" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
     <div class="list-group list-group-flush">
       <div *ngIf="!editing && multiple" class="list-group-item d-flex">
-        <div class="btn-group btn-group-xs btn-group-toggle flex-fill" ngbRadioGroup [(ngModel)]="selectionModel.logicalOperator" (change)="selectionModel.toggleOperator()">
+        <div class="btn-group btn-group-xs btn-group-toggle flex-fill" ngbRadioGroup [(ngModel)]="selectionModel.logicalOperator" (change)="selectionModel.toggleOperator()" [disabled]="!operatorToggleEnabled">
           <label ngbButtonLabel class="btn btn-outline-primary">
-            <input ngbButton type="radio" name="logicalOperator" value="and" [disabled]="!operatorToggleEnabled"> All
+            <input ngbButton type="radio" name="logicalOperator" value="and"> All
           </label>
           <label ngbButtonLabel class="btn btn-outline-primary">
-            <input ngbButton type="radio" name="logicalOperator" value="or" [disabled]="!operatorToggleEnabled"> Any
+            <input ngbButton type="radio" name="logicalOperator" value="or"> Any
           </label>
         </div>
       </div>
diff --git a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.scss b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.scss
index ef6090212..e728ca16b 100644
--- a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.scss
+++ b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.scss
@@ -1,3 +1,5 @@
+@import "/src/theme";
+
 .badge-corner {
   position: absolute;
   top: -8px;
@@ -34,8 +36,13 @@
 
 .btn-group > label.disabled {
   filter: brightness(0.5);
+
+  &.active {
+    background-color: lighten($primary, 30%);
+  }
 }
 
+
 small > svg {
   margin-top: -2px;
 }
diff --git a/src-ui/src/theme_dark.scss b/src-ui/src/theme_dark.scss
index 25abac773..4735eb3a9 100644
--- a/src-ui/src/theme_dark.scss
+++ b/src-ui/src/theme_dark.scss
@@ -231,6 +231,10 @@ $border-color-dark-mode: #47494f;
       border-color: darken($primary-dark-mode, 10%);
       color: $text-color-dark-mode-accent;
     }
+
+    &.disabled.active {
+      background-color: darken($primary-dark-mode, 10%);
+    }
   }
 
   .btn-outline-secondary {