Update flare-ui/src/app/components/test/test.component.html

flare-ui/src/app/components/test/test.component.html

@@ -17,7 +17,7 @@
     </button>
   </div>
 
-  <div class="test-categories">
+  <mat-card class="test-categories">
     <mat-checkbox [(ngModel)]="allSelected" (change)="toggleAll()">
       <strong>All Tests ({{ totalTests }} tests)</strong>
     </mat-checkbox>
@@ -75,36 +75,40 @@
         </mat-list>
       </mat-expansion-panel>
     </mat-accordion>
-  </div>
+  </mat-card>
 
-  <div class="test-results" *ngIf="testResults.length > 0 || running">
-    <h3>Test Progress</h3>
+  <mat-card class="test-results" *ngIf="testResults.length > 0 || running">
+    <mat-card-header>
+      <mat-card-title>Test Progress</mat-card-title>
+    </mat-card-header>
     
-    <mat-progress-bar [value]="progress" 
-                      [mode]="running ? 'determinate' : 'determinate'"
-                      [color]="failedTests > 0 ? 'warn' : 'primary'">
-    </mat-progress-bar>
+    <mat-card-content>
+      <mat-progress-bar [value]="progress" 
+                        [mode]="running ? 'determinate' : 'determinate'"
+                        [color]="failedTests > 0 ? 'warn' : 'primary'">
+      </mat-progress-bar>
 
-    <div class="test-summary">
-      <div class="summary-item">
-        <mat-icon class="success">check_circle</mat-icon>
-        <span>Passed: {{ passedTests }}</span>
-      </div>
-      <div class="summary-item">
-        <mat-icon class="error">cancel</mat-icon>
-        <span>Failed: {{ failedTests }}</span>
-      </div>
-      <div class="summary-item">
-        <mat-icon>timer</mat-icon>
-        <span>Total: {{ testResults.length }}/{{ selectedTests.length }}</span>
+      <div class="test-summary">
+        <div class="summary-item">
+          <mat-icon class="success">check_circle</mat-icon>
+          <span>Passed: {{ passedTests }}</span>
+        </div>
+        <div class="summary-item">
+          <mat-icon class="error">cancel</mat-icon>
+          <span>Failed: {{ failedTests }}</span>
+        </div>
+        <div class="summary-item">
+          <mat-icon>timer</mat-icon>
+          <span>Total: {{ testResults.length }}/{{ selectedTests.length }}</span>
+        </div>
       </div>
-    </div>
 
-    <div class="current-test" *ngIf="currentTest">
-      <mat-icon class="spin">sync</mat-icon>
-      Running: {{ currentTest }}
-    </div>
-  </div>
+      <div class="current-test" *ngIf="currentTest">
+        <mat-icon class="spin">sync</mat-icon>
+        Running: {{ currentTest }}
+      </div>
+    </mat-card-content>
+  </mat-card>
 
   <div class="empty-state" *ngIf="!running && testResults.length === 0">
     <mat-icon>assignment_turned_in</mat-icon>