Update flare-ui/src/app/components/environment/environment.component.scss

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

@@ -1,212 +1,179 @@
 .environment-container {
-  max-width: 800px;
+  padding: 20px;
+  max-width: 1200px;
   margin: 0 auto;
 }
 
-mat-card-header {
-  margin-bottom: 24px;
-
-  mat-card-title {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    font-size: 24px;
-
-    mat-icon {
-      font-size: 28px;
-      width: 28px;
-      height: 28px;
+.main-card {
+  mat-card-header {
+    margin-bottom: 20px;
+    
+    mat-card-title {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      font-size: 24px;
+      
+      mat-icon {
+        font-size: 28px;
+        height: 28px;
+        width: 28px;
+      }
     }
   }
 }
 
-.info-card {
+.section {
+  padding: 20px 0;
+  
+  &:first-child {
+    padding-top: 0;
+  }
+}
+
+.section-title {
+  display: flex;
+  align-items: center;
+  gap: 10px;
   margin-bottom: 20px;
-  background-color: #e3f2fd;
+  color: #333;
   
-  mat-card-content {
-    display: flex;
-    gap: 16px;
-    align-items: flex-start;
-    
-    mat-icon {
-      color: #1976d2;
-      margin-top: 4px;
-    }
-    
-    p {
-      margin: 4px 0;
-      font-size: 14px;
-    }
+  mat-icon {
+    color: #1976d2;
   }
 }
 
 .full-width {
   width: 100%;
-  margin-bottom: 20px;
 }
 
-.engine-row {
+.small-field {
+  width: 200px;
+}
+
+.endpoint-row {
   display: flex;
-  gap: 16px;
+  gap: 10px;
   align-items: flex-start;
-  margin-bottom: 20px;
-
-  .engine-field {
+  
+  .endpoint-field {
     flex: 1;
   }
-
-  .api-key-field {
-    flex: 1.5;
+  
+  .test-button {
+    margin-top: 8px;
+    height: 40px;
   }
 }
 
 .settings-panel {
-  margin-bottom: 20px;
-  margin-top: 10px;
-  padding: 0px 10px 0px 10px;
+  margin: 20px 0;
   
-  mat-expansion-panel-header {
-    mat-panel-title {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      
-      mat-icon {
-        color: #666;
-      }
-    }
-  }
-
-  .mat-expansion-panel-header-description {
-    flex-grow: 1;
+  mat-panel-title {
+    display: flex;
+    align-items: center;
+    gap: 10px;
   }
 }
 
-.stt-settings-content {
-  padding-top: 16px;
-}
-
-.slider-field {
-  margin-bottom: 24px;
-  width:90%;
-  
-  label {
-    display: block;
-    margin-bottom: 8px;
-    color: rgba(0, 0, 0, 0.87);
-    font-size: 14px;
-  }
-  
-  mat-slider {
-    width: 100%;
-  }
+.parameter-config {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding: 10px 0;
   
-  mat-hint {
-    font-size: 12px;
-    color: rgba(0, 0, 0, 0.6);
-    margin-top: 4px;
+  mat-checkbox {
+    margin: 10px 0;
   }
 }
 
-.checkbox-group {
+.stt-settings {
+  padding: 10px 0;
+}
+
+.settings-row {
   display: flex;
-  flex-direction: column;
-  gap: 12px;
-  margin-top: 16px;
+  gap: 20px;
+  margin-bottom: 20px;
+  flex-wrap: wrap;
   
   mat-checkbox {
-    margin-bottom: 0;
+    margin-top: 10px;
   }
 }
 
-.form-actions {
+.actions {
   display: flex;
-  gap: 16px;
-  margin-top: 24px;
-  padding-top: 24px;
+  gap: 10px;
+  margin-top: 30px;
+  padding-top: 20px;
   border-top: 1px solid #e0e0e0;
-
+  
   button {
-    mat-spinner {
-      margin-right: 8px;
-      vertical-align: middle;
-    }
-    
     mat-icon {
-      vertical-align: middle;
-      margin-right: 4px;
+      margin-right: 5px;
     }
   }
 }
 
-.mat-expansion-panel-content {
-  padding-left: 5px;
-  padding-right: 5px;
+mat-divider {
+  margin: 30px 0;
 }
 
-.param-collection-content {
-  padding-top: 16px;
-  
-  .config-grid {
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: 20px;
-    margin-bottom: 24px;
-  }
-  
-  .collection-checkbox {
-    display: block;
-    margin-bottom: 8px;
-    
-    mat-hint {
-      display: block;
-      margin-top: 4px;
-      margin-left: 32px;
-      font-size: 12px;
-      color: rgba(0, 0, 0, 0.6);
+// Material overrides
+::ng-deep {
+  .mat-mdc-form-field {
+    .mat-mdc-text-field-wrapper {
+      background-color: #f5f5f5;
     }
-  }
-    
-  .help-panel {
-    margin: 16px 0;
-    background-color: rgba(0, 0, 0, 0.02);
     
-    mat-list-item {
-      height: auto;
-      
-      code {
-        background-color: #e8f5e9;
-        color: #2e7d32;
-        padding: 2px 6px;
-        border-radius: 3px;
-        font-family: 'Fira Code', 'Consolas', monospace;
-        font-size: 13px;
-      }
-      
-      .mat-mdc-list-item-line {
-        color: rgba(0, 0, 0, 0.6);
-        font-size: 13px;
-        margin-top: 4px;
+    &.mat-focused {
+      .mat-mdc-text-field-wrapper {
+        background-color: #fff;
       }
     }
   }
   
-  button[mat-stroked-button] {
-    margin-top: 8px;
+  .mat-expansion-panel {
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
+    border-radius: 8px !important;
+    
+    &:not(.mat-expanded) {
+      &:hover {
+        background-color: #f5f5f5;
+      }
+    }
   }
 }
 
-::ng-deep {
-  .mat-mdc-form-field-icon-prefix {
-    padding-right: 12px;
-  }
+.loading-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
 
-  .mat-mdc-progress-spinner {
-    --mdc-circular-progress-active-indicator-color: white;
+// Responsive
+@media (max-width: 768px) {
+  .endpoint-row {
+    flex-direction: column;
+    
+    .test-button {
+      width: 100%;
+    }
   }
   
-  .mat-expansion-panel-body {
-    padding: 16px 0 !important;
+  .settings-row {
+    flex-direction: column;
+    
+    .small-field {
+      width: 100%;
+    }
   }
 }