Updated the error message and spinner to the center

c2siorg · Jan 8, 2025 · 2f761ed · 2f761ed
1 parent d79032d
commit 2f761ed
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 10 deletions.
diff --git a/webiu-ui/src/app/page/contributor-search/contributor-search.component.html b/webiu-ui/src/app/page/contributor-search/contributor-search.component.html
@@ -1,9 +1,8 @@
 <div style="padding: 20px">
   <!-- Loading  -->
-  <div class="contributors-card-container loading-spinner">
+  <div class="contributors-card-container">
     <i
-      class="fa fa-spinner fa-spin"
-      style="font-size: 32px ;color:blue"
+      class="fa fa-spinner fa-spin loadspinner"
       *ngIf="loading"></i>
   </div>
 
@@ -28,7 +27,7 @@
       </button>
     </div>
     <div class="filter-section">
-      <p>Filter by repo</p>
+      <p class="filter-name">Filter by repo</p>
       <select class="repository-select" (change)="onRepoFilterChange($event)">
         <option value="">All</option>
         <option *ngFor="let repo of uniqueRepositories" [value]="repo">
@@ -106,7 +105,7 @@ <h3 class="username">{{ userProfile.login }}</h3>
   <!-- Error message while fetching-->
   <p
     *ngIf="!loading && !hasData && !filteredIssues.length && !filteredPullRequests.length"
-    class="no-data-message"
+    class="error-message"
   >
    {{errorMessage}}
   </p>  

diff --git a/webiu-ui/src/app/page/contributor-search/contributor-search.component.scss b/webiu-ui/src/app/page/contributor-search/contributor-search.component.scss
@@ -35,6 +35,7 @@
 .filter-section {
   margin-top: 50px;
   margin-left: 50px;
+  width: 220px;
   color: #007bff;
   display: flex;
   justify-content: center;
@@ -281,4 +282,28 @@
 }
 .icon-open {
   color: #007bff; 
+}
+
+.loadspinner {
+  color: #007bff;
+  display: flex;
+  justify-content: center;
+  margin-top: 100px;
+  font-size: 32px ;
+}
+
+.center-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh; /* Full viewport height */
+}
+
+.error-message {
+  font-size: 1.2rem; 
+  color: red;
+  text-align: center;
+}
+.filter-name{
+  width: 410px;
 }
diff --git a/webiu-ui/src/app/page/contributors/contributors.component.scss b/webiu-ui/src/app/page/contributors/contributors.component.scss
@@ -251,14 +251,12 @@
 }
 
 
-.loading-spinner {
-
+i {
   color: #007bff;
-
-
+  display: flex;
+  justify-content: center;
 }
 
-
 .no-contributors-message {
   text-align: center;
   color: #888;