From 2563ed57065d783c05ea8ba02719826bd719d59d Mon Sep 17 00:00:00 2001
From: John Rassa <john.rassa@bluehalo.com>
Date: Fri, 21 Jun 2024 12:53:52 -0400
Subject: [PATCH] refactor: misc style updates

---
 .../search-input/search-input.component.html  |  2 +-
 .../search-input.component.spec.ts            |  9 ++--
 .../column-chooser.component.scss             |  2 +-
 .../list-audit-entries.component.html         | 41 +++++++++----------
 .../site/example/forms/forms.component.html   |  4 +-
 src/styles/bootstrap/_cards.scss              |  2 +-
 src/styles/bootstrap/_forms.scss              |  2 +-
 7 files changed, 32 insertions(+), 30 deletions(-)

diff --git a/src/app/common/search-input/search-input.component.html b/src/app/common/search-input/search-input.component.html
index d4cecefb..961fd73d 100644
--- a/src/app/common/search-input/search-input.component.html
+++ b/src/app/common/search-input/search-input.component.html
@@ -14,7 +14,7 @@
 	}
 </div>
 @if (!disableMinCountMessage() && showMinCountMessage()) {
-	<div class="text-muted pt-2" [@minCount]>
+	<div class="text-body-secondary pt-2" [@minCount]>
 		<div class="pt-2">
 			Searches require a minimum of {{ minSearchCharacterCount() }} characters.
 		</div>
diff --git a/src/app/common/search-input/search-input.component.spec.ts b/src/app/common/search-input/search-input.component.spec.ts
index adc56a0f..375a24b2 100644
--- a/src/app/common/search-input/search-input.component.spec.ts
+++ b/src/app/common/search-input/search-input.component.spec.ts
@@ -93,7 +93,8 @@ describe('SearchInputComponent', () => {
 
 		expect(
 			(
-				fixture.debugElement.query(By.css('.text-muted')).nativeElement as HTMLElement
+				fixture.debugElement.query(By.css('.text-body-secondary'))
+					.nativeElement as HTMLElement
 			).textContent?.trim()
 		).toEqual('Searches require a minimum of 3 characters.');
 	}));
@@ -110,7 +111,7 @@ describe('SearchInputComponent', () => {
 
 		fixture.detectChanges();
 
-		expect(fixture.debugElement.query(By.css('.text-muted'))).toBeNull();
+		expect(fixture.debugElement.query(By.css('.text-body-secondary'))).toBeNull();
 	}));
 
 	it('should not show warning message if disableMinCountMessage is set when minSearchCharacterCount is adhered to', fakeAsync(() => {
@@ -126,7 +127,7 @@ describe('SearchInputComponent', () => {
 
 		fixture.detectChanges();
 
-		expect(fixture.debugElement.query(By.css('.text-muted'))).toBeNull();
+		expect(fixture.debugElement.query(By.css('.text-body-secondary'))).toBeNull();
 	}));
 
 	it('should not show warning message if disableMinCountMessage is set when minSearchCharacterCount is not adhered to', fakeAsync(() => {
@@ -142,7 +143,7 @@ describe('SearchInputComponent', () => {
 
 		fixture.detectChanges();
 
-		expect(fixture.debugElement.query(By.css('.text-muted'))).toBeNull();
+		expect(fixture.debugElement.query(By.css('.text-body-secondary'))).toBeNull();
 	}));
 
 	it('should show clear-search options if search input length > 0', () => {
diff --git a/src/app/common/table/column-chooser/column-chooser.component.scss b/src/app/common/table/column-chooser/column-chooser.component.scss
index 78496932..f01cb64e 100644
--- a/src/app/common/table/column-chooser/column-chooser.component.scss
+++ b/src/app/common/table/column-chooser/column-chooser.component.scss
@@ -1,5 +1,5 @@
 .fa-bars {
-	color: #dee2e6;
+	color: var(--bs-tertiary-color);
 	cursor: grab;
 }
 
diff --git a/src/app/core/audit/list-audit-entries/list-audit-entries.component.html b/src/app/core/audit/list-audit-entries/list-audit-entries.component.html
index 90a0cf27..10d2d6c6 100644
--- a/src/app/core/audit/list-audit-entries/list-audit-entries.component.html
+++ b/src/app/core/audit/list-audit-entries/list-audit-entries.component.html
@@ -78,15 +78,16 @@ <h1 skipTo>Audit Logs</h1>
 					></asy-audit-component>
 					<div>
 						@if (entry.isViewDetailsAction) {
-							<small>
-								<a
-									class="btn-icon no-href"
-									[hidden]="(entry.audit.object ?? null) === null"
-									(click)="viewMore(entry, 'viewDetails')"
-								>
-									<span class="fa-solid fa-eye"></span><span>View Details</span>
-								</a>
-							</small>
+							<button
+								class="btn btn-link btn-sm"
+								container="body"
+								placement="bottom"
+								tooltip="See details of the update"
+								[hidden]="(entry.audit.object ?? null) === null"
+								(click)="viewMore(entry, 'viewDetails')"
+							>
+								<span class="fa-solid fa-eye"></span><span>View Details</span>
+							</button>
 						}
 						@if (entry.audit.action === 'save') {
 							<small style="opacity: 0.5"><span>No Changes Detected</span></small>
@@ -106,18 +107,16 @@ <h1 skipTo>Audit Logs</h1>
 					></asy-audit-component>
 					<div>
 						@if (entry.isViewChangesAction) {
-							<small>
-								<a
-									class="btn-icon no-href"
-									container="body"
-									placement="bottom"
-									tooltip="See details of the update"
-									[hidden]="(entry.audit.object?.before ?? null) === null"
-									(click)="viewMore(entry, 'viewChanges')"
-								>
-									<span class="fa-solid fa-eye"></span><span>View Changes</span>
-								</a>
-							</small>
+							<button
+								class="btn btn-link btn-sm"
+								container="body"
+								placement="bottom"
+								tooltip="See details of the update"
+								[hidden]="(entry.audit.object?.before ?? null) === null"
+								(click)="viewMore(entry, 'viewChanges')"
+							>
+								<span class="fa-solid fa-eye"></span><span>View Details</span>
+							</button>
 						}
 						@if (entry.audit.action === 'save') {
 							<small style="opacity: 0.5"><span>No Changes Detected</span></small>
diff --git a/src/app/site/example/forms/forms.component.html b/src/app/site/example/forms/forms.component.html
index 999935e8..a81dff96 100644
--- a/src/app/site/example/forms/forms.component.html
+++ b/src/app/site/example/forms/forms.component.html
@@ -12,7 +12,9 @@ <h2>Form Controls</h2>
 			cdkFocusInitial
 			placeholder="Default input"
 		/>
-		<small class="form-text text-muted">Extra explanation provided if necessary.</small>
+		<small class="form-text text-body-secondary"
+			>Extra explanation provided if necessary.</small
+		>
 	</div>
 
 	<div class="mb-3">
diff --git a/src/styles/bootstrap/_cards.scss b/src/styles/bootstrap/_cards.scss
index be837adf..ae1ebc13 100644
--- a/src/styles/bootstrap/_cards.scss
+++ b/src/styles/bootstrap/_cards.scss
@@ -25,7 +25,7 @@ $card-header-height: 4rem !default;
 		.card-header {
 			height: auto;
 			border-bottom: 0;
-			border-right: $border-width solid $border-color;
+			border-right: $border-width solid var(--bs-border-color);
 		}
 	}
 }
diff --git a/src/styles/bootstrap/_forms.scss b/src/styles/bootstrap/_forms.scss
index 5a0f961d..f1b8e3ab 100644
--- a/src/styles/bootstrap/_forms.scss
+++ b/src/styles/bootstrap/_forms.scss
@@ -28,7 +28,7 @@ input[bsDatepicker] + span {
 
 .inline-edit-btns {
 	background: var(--bs-body-bg);
-	border-top: 1px solid $border-color;
+	border-top: 1px solid var(--bs-border-color);
 	border-radius: 0 0 $border-radius $border-radius;
 	bottom: $form-inline-edit-btns-bottom;
 	margin-left: -1 * $card-spacer-x;