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

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

@@ -33,175 +33,6 @@ import { EnvironmentService } from '../../services/environment.service';
   ],
   templateUrl: './environment.component.html',
   styleUrls: ['./environment.component.scss']
-
-  styles: [`
-    .environment-container {
-      max-width: 800px;
-      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;
-        }
-      }
-    }
-
-    .info-card {
-      margin-bottom: 20px;
-      background-color: #e3f2fd;
-      
-      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;
-        }
-      }
-    }
-
-    .full-width {
-      width: 100%;
-      margin-bottom: 20px;
-    }
-
-    .engine-row {
-      display: flex;
-      gap: 16px;
-      align-items: flex-start;
-      margin-bottom: 20px;
-
-      .engine-field {
-        flex: 1;
-      }
-
-      .api-key-field {
-        flex: 1.5;
-      }
-    }
-
-    .prompt-panel {
-      margin-bottom: 20px;
-      
-      mat-expansion-panel-header {
-        mat-panel-title {
-          display: flex;
-          align-items: center;
-          gap: 8px;
-          
-          mat-icon {
-            color: #666;
-          }
-        }
-      }
-    }
-
-    .form-actions {
-      display: flex;
-      gap: 16px;
-      margin-top: 24px;
-      padding-top: 24px;
-      border-top: 1px solid #e0e0e0;
-    
-      button {
-    
-        mat-spinner {
-          margin-right: 8px;
-          vertical-align: middle; // Spinner'ı hizalamak için ekleyin
-        }
-        
-        mat-icon {
-          vertical-align: middle; // Icon'u hizalamak için ekleyin
-          margin-right: 4px;      // Icon ile text arasına boşluk
-        }
-      }
-    }
-    
-    .stt-settings-panel {
-      margin-bottom: 20px;
-      margin-top: 10px;
-      
-      mat-expansion-panel-header {
-        mat-panel-title {
-          display: flex;
-          align-items: center;
-          gap: 8px;
-          
-          mat-icon {
-            color: #666;
-          }
-        }
-      }
-    }
-    
-    .stt-settings-content {
-      padding-top: 16px;
-    }
-    
-    .slider-field {
-      margin-bottom: 24px;
-      
-      label {
-        display: block;
-        margin-bottom: 8px;
-        color: rgba(0, 0, 0, 0.87);
-        font-size: 14px;
-      }
-      
-      mat-slider {
-        width: 100%;
-      }
-      
-      mat-hint {
-        font-size: 12px;
-        color: rgba(0, 0, 0, 0.6);
-        margin-top: 4px;
-      }
-    }
-    
-    .checkbox-group {
-      display: flex;
-      flex-direction: column;
-      gap: 12px;
-      margin-top: 16px;
-      
-      mat-checkbox {
-        margin-bottom: 0;
-      }
-    }
-
-    ::ng-deep {
-      .mat-mdc-form-field-icon-prefix {
-        padding-right: 12px;
-      }
-
-      .mat-mdc-progress-spinner {
-        --mdc-circular-progress-active-indicator-color: white;
-      }
-      
-      .mat-expansion-panel-body {
-        padding: 16px 0 !important;
-      }
-    }
-  `]
 })
 export class EnvironmentComponent implements OnInit {
   private apiService = inject(ApiService);