Switch to angular

frontend/src/app/components/upload-form/upload-form.component.scss

@@ -0,0 +1,124 @@
+.upload-card {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.upload-form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.file-upload-section {
+  margin-bottom: 24px;
+
+  .file-input-container {
+    position: relative;
+  }
+}
+
+.selected-file-info {
+  margin-top: 12px;
+
+  mat-chip-set {
+    gap: 8px;
+  }
+}
+
+.form-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+}
+
+.full-width {
+  width: 100%;
+}
+
+.json-section {
+  margin-top: 24px;
+  padding-top: 24px;
+  border-top: 1px solid #e0e0e0;
+
+  h3 {
+    margin: 0 0 16px 0;
+    font-size: 16px;
+    font-weight: 500;
+    color: #424242;
+  }
+}
+
+.upload-progress {
+  margin: 16px 0;
+}
+
+.form-actions {
+  display: flex;
+  justify-content: center;
+  margin-top: 24px;
+}
+
+.upload-button {
+  padding: 12px 32px;
+  font-size: 16px;
+
+  mat-icon {
+    margin-right: 8px;
+  }
+}
+
+.status-section {
+  margin-top: 20px;
+  display: flex;
+  justify-content: center;
+
+  mat-chip-set {
+    justify-content: center;
+  }
+
+  .success {
+    background-color: #c8e6c9 !important;
+    color: #2e7d32 !important;
+  }
+
+  .error {
+    background-color: #ffcdd2 !important;
+    color: #d32f2f !important;
+  }
+}
+
+// Material Design overrides
+:host ::ng-deep {
+  .mat-mdc-form-field {
+    width: 100%;
+  }
+
+  .mat-mdc-form-field-hint {
+    font-size: 12px;
+  }
+
+  .mat-mdc-chip {
+    --mdc-chip-container-height: 28px;
+  }
+
+  .mat-mdc-text-field-wrapper {
+    background-color: transparent;
+  }
+}
+
+// Responsive design
+@media (max-width: 768px) {
+  .form-row {
+    grid-template-columns: 1fr;
+  }
+
+  .upload-card {
+    margin: 16px;
+  }
+}
+
+@media (max-width: 480px) {
+  .upload-button {
+    width: 100%;
+  }
+}