From d5c37e999e87b310bc15c04bcf1c48ab25f9c95b Mon Sep 17 00:00:00 2001
From: Yagnik <yagnikhingrajiya56@gmail.com>
Date: Thu, 3 Oct 2024 14:54:57 +0530
Subject: [PATCH] align spinner in center and make feature flag name bold in
 header on deatils page

---
 .../feature-flag-details-page-content.component.html       | 4 +++-
 .../feature-flag-details-page-content.component.scss       | 7 +++++++
 .../common-details-page-header.component.html              | 2 +-
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-details-page-content.component.html b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-details-page-content.component.html
index 8506b0f3c5..d685c77ae1 100644
--- a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-details-page-content.component.html
+++ b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-details-page-content.component.html
@@ -35,6 +35,8 @@
   </ng-container>
 
   <ng-template #loading>
-    <mat-spinner></mat-spinner>
+    <div class="mat-spinner-container">
+      <mat-spinner diameter="100"></mat-spinner>
+    </div>
   </ng-template>
 </div>
diff --git a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-details-page-content.component.scss b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-details-page-content.component.scss
index e69de29bb2..757ffe93eb 100644
--- a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-details-page-content.component.scss
+++ b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-details-page-content.component.scss
@@ -0,0 +1,7 @@
+.mat-spinner-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  padding: 100px;
+}
\ No newline at end of file
diff --git a/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-details-page-header/common-details-page-header.component.html b/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-details-page-header/common-details-page-header.component.html
index a4a0783526..d6fc1ec2a3 100644
--- a/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-details-page-header/common-details-page-header.component.html
+++ b/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-details-page-header/common-details-page-header.component.html
@@ -2,6 +2,6 @@
   <span class="ft-14-400 breadcrumb">
     <a [routerLink]="['/', rootLink]" class="root-link">{{ rootName | translate }}</a>
     >
-    <span>{{ detailsName | translate }}</span>
+    <b>{{ detailsName | translate }}</b>
   </span>
 </div>