refactor: jumbotron class removed from bootstrap. Replicate look with…

… utility classes.
bluehalo · Jun 11, 2024 · c118feb · c118feb
1 parent 683e822
commit c118feb
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 33 deletions.
diff --git a/src/app/core/about.component.ts b/src/app/core/about.component.ts
@@ -4,13 +4,9 @@ import { APP_CONFIG } from './tokens';
 
 @Component({
 	template: `
-		<div class="container">
-			<div class="row">
-				<div class="col-md-8 offset-2 jumbotron" style="margin-top: 4rem;">
-					<h1>{{ appTitle() }}</h1>
-					<p>v{{ version() }}</p>
-				</div>
-			</div>
+		<div class="p-5 text-center bg-body-tertiary rounded-3">
+			<h1 class="text-body-emphasis">{{ appTitle() }}</h1>
+			<p class="load">v{{ version() }}</p>
 		</div>
 	`,
 	standalone: true,

diff --git a/src/app/core/errors/access.component.ts b/src/app/core/errors/access.component.ts
@@ -3,14 +3,10 @@ import { Router } from '@angular/router';
 
 @Component({
 	template: `
-		<div class="container">
-			<div class="row">
-				<div class="col-md-8 offset-2 jumbotron" style="margin-top: 4rem;">
-					<h1>{{ status }}</h1>
-					<p>{{ message }}</p>
-					<p>Once your account is updated, <a href="/">go back home</a> and try again.</p>
-				</div>
-			</div>
+		<div class="p-5 text-center bg-body-tertiary rounded-3">
+			<h1 class="text-body-emphasis">{{ status }}</h1>
+			<p class="load">{{ message }}</p>
+			<p>Once your account is updated, <a href="/">go back home</a> and try again.</p>
 		</div>
 	`,
 	standalone: true,

diff --git a/src/app/core/errors/error.component.ts b/src/app/core/errors/error.component.ts
@@ -8,15 +8,11 @@ import { ErrorState } from './error-state.model';
 	standalone: true,
 	imports: [HasRoleDirective],
 	template: `
-		<div class="container">
-			<div class="row">
-				<div class="col-md-8 offset-2 jumbotron" style="margin-top: 4rem;">
-					<h1>{{ state.status }} {{ state.statusText }}</h1>
-					<p>{{ state.url }}</p>
-					<p>{{ state.message }}</p>
-					<p *hasRole="'admin'">{{ state.stack }}</p>
-				</div>
-			</div>
+		<div class="p-5 bg-body-tertiary rounded-3">
+			<h1 class="text-body-emphasis">{{ state.status }} {{ state.statusText }}</h1>
+			<p class="load">{{ state.url }}</p>
+			<p class="load">{{ state.message }}</p>
+			<p class="load" *hasRole="'admin'">{{ state.stack }}</p>
 		</div>
 	`
 })

diff --git a/src/app/core/unauthorized.component.ts b/src/app/core/unauthorized.component.ts
@@ -3,18 +3,14 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 @Component({
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	template: `
-		<div class="container">
-			<div class="row">
-				<div class="col-md-8 offset-2 jumbotron" style="margin-top: 4rem;">
-					<h1 [innerHTML]="title"></h1>
-					<p [innerHTML]="message"></p>
-				</div>
-			</div>
+		<div class="p-5 text-center bg-body-tertiary rounded-3">
+			<h1 class="text-body-emphasis" [innerHTML]="title"></h1>
+			<p class="load" [innerHTML]="message"></p>
 		</div>
 	`,
 	standalone: true
 })
 export class UnauthorizedComponent {
-	title = `&#x0CA0;_&#x0CA0;<br/><br/>Not Authorized`;
-	message = `You are not authorized to view this page. If you got here by accident, please <a href="/">go back home</a> and try again.`;
+	title = 'Not Authorized';
+	message = `You are not authorized to view this page.<br/> If you got here by accident, please <a href="/">go back home</a> and try again.`;
 }