Create test.component.scss

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

@@ -0,0 +1,159 @@
+.test-container {
+  h2 {
+    margin-bottom: 24px;
+  }
+
+  .test-controls {
+    display: flex;
+    gap: 12px;
+    margin-bottom: 24px;
+
+    button {
+      mat-icon {
+        margin-right: 4px;
+      }
+    }
+  }
+
+  .test-categories {
+    background: white;
+    border: 1px solid #e0e0e0;
+    border-radius: 4px;
+    padding: 16px;
+    margin-bottom: 24px;
+
+    > mat-checkbox {
+      margin-bottom: 16px;
+      display: block;
+    }
+
+    mat-accordion {
+      mat-expansion-panel {
+        margin-bottom: 8px;
+
+        mat-checkbox {
+          margin-right: 8px;
+        }
+
+        .category-status {
+          mat-chip {
+            font-size: 11px;
+            min-height: 20px;
+            padding: 2px 8px;
+
+            &.success-chip {
+              background-color: #e8f5e9;
+              color: #2e7d32;
+            }
+
+            &.error-chip {
+              background-color: #ffebee;
+              color: #c62828;
+            }
+          }
+        }
+
+        mat-list-item {
+          .status-PASS { color: #4caf50; }
+          .status-FAIL { color: #f44336; }
+          .status-RUNNING { color: #ff9800; }
+          .status-pending { color: #9e9e9e; }
+
+          .test-duration {
+            color: #666;
+            font-size: 12px;
+          }
+
+          .test-details {
+            color: #666;
+            font-size: 12px;
+          }
+
+          .test-error {
+            color: #f44336;
+            font-size: 12px;
+          }
+
+          .running-icon {
+            animation: spin 1s linear infinite;
+          }
+        }
+      }
+    }
+  }
+
+  .test-results {
+    background: white;
+    border: 1px solid #e0e0e0;
+    border-radius: 4px;
+    padding: 24px;
+
+    h3 {
+      margin-top: 0;
+      margin-bottom: 16px;
+    }
+
+    mat-progress-bar {
+      margin-bottom: 24px;
+    }
+
+    .test-summary {
+      display: flex;
+      gap: 32px;
+      justify-content: center;
+      margin-bottom: 16px;
+
+      .summary-item {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+
+        mat-icon {
+          &.success { color: #4caf50; }
+          &.error { color: #f44336; }
+        }
+
+        span {
+          font-size: 16px;
+          font-weight: 500;
+        }
+      }
+    }
+
+    .current-test {
+      text-align: center;
+      color: #666;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+
+      mat-icon {
+        animation: spin 1s linear infinite;
+      }
+    }
+  }
+
+  .empty-state {
+    text-align: center;
+    padding: 60px 20px;
+    background: white;
+    border-radius: 4px;
+
+    mat-icon {
+      font-size: 64px;
+      width: 64px;
+      height: 64px;
+      color: #e0e0e0;
+      margin-bottom: 16px;
+    }
+
+    p {
+      color: #666;
+    }
+  }
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}