From 034f4974ff9fd9e022e2d60cacd765f66d0a9cbb Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sat, 29 Oct 2022 14:07:12 -0700
Subject: [PATCH] Use check badge for dropdowns

---
 .../common/date-dropdown/date-dropdown.component.html       | 6 ++++--
 .../filterable-dropdown/filterable-dropdown.component.html  | 6 ++++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html
index c99c71cda..dc8ae8688 100644
--- a/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html
+++ b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html
@@ -1,8 +1,10 @@
   <div class="btn-group w-100" ngbDropdown role="group">
   <button class="btn btn-sm" id="dropdown{{title}}" ngbDropdownToggle [ngClass]="dateBefore || dateAfter ? 'btn-primary' : 'btn-outline-primary'">
     {{title}}
-    <div *ngIf="isActive" class="position-absolute top-0 start-100 p-2 translate-middle badge bg-secondary border border-light rounded-circle">
-      <span class="visually-hidden">selected</span>
+    <div *ngIf="isActive" class="position-absolute top-0 start-100 p-1 translate-middle badge bg-secondary border border-light rounded-circle">
+      <svg width="1em" height="1em" class="m-0 p-0 opacity-75" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+        <use xlink:href="assets/bootstrap-icons.svg#check-lg"/>
+      </svg><span class="visually-hidden">selected</span>
     </div>
   </button>
   <div class="dropdown-menu date-dropdown shadow pt-0" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
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 d5eb29e90..eef92c4eb 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
@@ -8,8 +8,10 @@
       <div *ngIf="multiple" class="position-absolute top-0 start-100 translate-middle badge bg-secondary border border-light text-light rounded-pill">
         {{selectionModel.totalCount}}<span class="visually-hidden">selected</span>
       </div>
-      <div *ngIf="!multiple" class="position-absolute top-0 start-100 p-2 translate-middle badge bg-secondary border border-light rounded-circle">
-        <span class="visually-hidden">selected</span>
+      <div *ngIf="!multiple" class="position-absolute top-0 start-100 p-1 translate-middle badge bg-secondary border border-light rounded-circle">
+        <svg width="1em" height="1em" class="m-0 p-0 opacity-75" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+          <use xlink:href="assets/bootstrap-icons.svg#check-lg"/>
+        </svg><span class="visually-hidden">selected</span>
       </div>
     </ng-container>
   </button>