Switch to angular

frontend/src/app/app.component.scss

@@ -0,0 +1,244 @@
+.app-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background: #f5f5f5;
+}
+
+.app-toolbar {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+}
+
+.app-icon {
+  margin-right: 12px;
+}
+
+.app-title {
+  font-size: 20px;
+  font-weight: 500;
+  letter-spacing: 0.5px;
+}
+
+.spacer {
+  flex: 1 1 auto;
+}
+
+.header-info {
+  mat-chip-set {
+    mat-chip {
+      background-color: rgba(255, 255, 255, 0.2) !important;
+      color: white !important;
+
+      mat-icon {
+        color: white !important;
+      }
+    }
+  }
+}
+
+// Tab Group Styling
+.main-tabs {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background: white;
+
+  ::ng-deep {
+    .mat-mdc-tab-body-wrapper {
+      flex: 1;
+      padding: 0;
+    }
+
+    .mat-mdc-tab-header {
+      background: white;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.08);
+    }
+
+    .mat-mdc-tab-labels {
+      padding: 0 24px;
+    }
+
+    .mat-mdc-tab {
+      min-width: 120px;
+      height: 56px;
+      font-size: 14px;
+      font-weight: 500;
+      letter-spacing: 0.5px;
+      text-transform: uppercase;
+    }
+  }
+}
+
+// Tab Content Wrapper
+.tab-content-wrapper {
+  padding: 24px;
+  max-width: 1400px;
+  margin: 0 auto;
+  width: 100%;
+  min-height: calc(100vh - 180px);
+}
+
+// Content Header
+.content-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+  padding-bottom: 16px;
+  border-bottom: 2px solid #e0e0e0;
+
+  h2 {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin: 0;
+    font-size: 24px;
+    font-weight: 500;
+    color: #333;
+
+    mat-icon {
+      color: #3f51b5;
+      font-size: 28px;
+      width: 28px;
+      height: 28px;
+    }
+  }
+
+  button {
+    mat-icon {
+      margin-right: 8px;
+    }
+  }
+}
+
+// Artifacts Table Styling
+.artifacts-table {
+  width: 100%;
+  background: white;
+  border-radius: 8px;
+  overflow: hidden;
+
+  th.mat-mdc-header-cell {
+    background: #f8f9fa;
+    color: #333;
+    font-weight: 600;
+    font-size: 14px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    padding: 16px 12px;
+    border-bottom: 2px solid #e0e0e0;
+  }
+
+  td.mat-mdc-cell {
+    padding: 16px 12px;
+    font-size: 14px;
+    color: #555;
+    border-bottom: 1px solid #f0f0f0;
+  }
+
+  tr.mat-mdc-row {
+    transition: background-color 0.2s ease;
+
+    &:hover {
+      background-color: #f8f9fa;
+    }
+  }
+
+  .filename-cell {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-weight: 500;
+
+    .file-icon {
+      color: #3f51b5;
+      font-size: 20px;
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  .type-chip {
+    background-color: #e3f2fd !important;
+    color: #1976d2 !important;
+    font-weight: 500;
+    font-size: 12px;
+    padding: 4px 12px;
+    height: 28px;
+  }
+
+  .text-muted {
+    color: #999;
+  }
+}
+
+// Result Chips
+.result-pass {
+  background-color: #e8f5e9 !important;
+  color: #2e7d32 !important;
+  font-weight: 600;
+}
+
+.result-fail {
+  background-color: #ffebee !important;
+  color: #c62828 !important;
+  font-weight: 600;
+}
+
+.result-skip {
+  background-color: #fff3e0 !important;
+  color: #ef6c00 !important;
+  font-weight: 600;
+}
+
+.result-error {
+  background-color: #fce4ec !important;
+  color: #c2185b !important;
+  font-weight: 600;
+}
+
+// Responsive Design
+@media (max-width: 768px) {
+  .tab-content-wrapper {
+    padding: 16px;
+  }
+
+  .app-title {
+    font-size: 16px;
+  }
+
+  .header-info {
+    display: none;
+  }
+
+  .content-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+
+    h2 {
+      font-size: 20px;
+    }
+  }
+
+  .artifacts-table {
+    font-size: 12px;
+
+    th.mat-mdc-header-cell,
+    td.mat-mdc-cell {
+      padding: 12px 8px;
+    }
+  }
+}
+
+@media (max-width: 480px) {
+  .artifacts-table {
+    th.mat-mdc-header-cell:nth-child(n+5),
+    td.mat-mdc-cell:nth-child(n+5) {
+      display: none;
+    }
+  }
+}