refactor: misc style updates (#395)

bluehalo · Jun 21, 2024 · d511345 · d511345
1 parent 771c744
commit d511345
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 30 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;