Update flare-ui/src/app/dialogs/api-edit-dialog/api-edit-dialog.component.scss

flare-ui/src/app/dialogs/api-edit-dialog/api-edit-dialog.component.scss

@@ -1,7 +1,10 @@
 .tab-content {
-  padding: 24px;
-  overflow-y: auto;
-  max-height: calc(80vh - 200px);
+  padding: 24px 0;
+  
+  mat-form-field {
+    display: block;
+    margin-bottom: 16px;
+  }
 
   h3 {
     margin-top: 10px;
@@ -9,428 +12,38 @@
   }
 }
 
-.section-title {
-  font-size: 16px;
-  font-weight: 500;
-  margin: 24px 0 16px 0;
-  color: #666;
-
-  &:first-child {
-    margin-top: 0;
-  }
-}
-
-.section-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 16px;
-
-  h4 {
-    margin: 0;
-    font-size: 16px;
-    font-weight: 500;
-  }
-}
-
-.form-section {
-  margin-bottom: 24px;
-}
-
-.section-label {
-  display: block;
-  margin-bottom: 8px;
-  font-size: 14px;
-  font-weight: 500;
-  color: rgba(0, 0, 0, 0.87);
-}
-
 .full-width {
   width: 100%;
 }
 
-.headers-list {
-  .header-row {
-    display: flex;
-    gap: 16px;
-    align-items: flex-start;
-    margin-bottom: 16px;
-
-    mat-form-field {
-      flex: 1;
-    }
-
-    .header-value {
-      flex: 2;
-    }
-
-    button {
-      margin-top: 8px;
-    }
-  }
-}
-
-.response-mappings-list {
-  .mapping-row {
-    display: flex;
-    gap: 16px;
-    align-items: flex-start;
-    margin-bottom: 16px;
-
-    mat-form-field {
-      flex: 1;
-    }
-
-    .json-path-field {
-      flex: 2;
-    }
-
-    button {
-      margin-top: 8px;
-    }
-  }
-}
-
-.empty-state {
-  text-align: center;
-  padding: 24px;
-  background-color: #f5f5f5;
-  border-radius: 4px;
-  margin: 16px 0;
-
-  mat-icon {
-    font-size: 48px;
-    width: 48px;
-    height: 48px;
-    color: #ccc;
-  }
-
-  p {
-    margin-top: 16px;
-    color: #666;
-  }
-}
-
-.empty-state-small {
-  text-align: center;
-  padding: 16px;
-  background-color: #f5f5f5;
-  border-radius: 4px;
-  margin: 16px 0;
-
-  mat-icon {
-    font-size: 24px;
-    width: 24px;
-    height: 24px;
-    color: #ccc;
-  }
-
-  p {
-    margin-top: 8px;
-    font-size: 14px;
-    color: #666;
-  }
-}
-
-.auth-settings {
-  margin-top: 16px;
-}
-
-.retry-settings {
+// Row layout
+.row {
   display: flex;
-  gap: 16px;
+  gap: 12px;
   align-items: flex-start;
-
+  
   mat-form-field {
     flex: 1;
   }
-}
-
-.template-helpers {
-  margin-top: 8px;
-
-  .template-list {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-    padding: 16px;
-  }
-
-  .template-chip {
-    cursor: pointer;
-    transition: all 0.2s;
-
-    &:hover {
-      transform: scale(1.05);
-      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
-    }
-  }
-
-  .hint-text {
-    padding: 16px;
-    color: #666;
-    font-size: 14px;
-    line-height: 1.5;
-  }
-}
-
-.json-editor {
-  position: relative;
-
-  .json-textarea {
-    width: 100%;
-    font-family: 'Monaco', 'Consolas', monospace;
-    font-size: 13px;
-    padding: 12px;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    background-color: #f8f8f8;
-    resize: vertical;
-    min-height: 120px;
-
-    &:focus {
-      outline: none;
-      border-color: #3f51b5;
-      background-color: #fff;
-    }
-  }
-
-  button {
-    margin-top: 8px;
-  }
-}
-
-.test-section {
-  .test-info {
-    margin-bottom: 24px;
-  }
-
-  .test-controls {
-    margin-bottom: 10px;
-  }
-
-  .test-result {
-    margin-top: 24px;
-
-    .result-status {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      padding: 16px;
-      border-radius: 4px;
-      margin-bottom: 16px;
-
-      &.success {
-        background-color: #e8f5e9;
-        color: #2e7d32;
-      }
-
-      &.error {
-        background-color: #ffebee;
-        color: #c62828;
-      }
-
-      mat-icon {
-        font-size: 28px;
-        width: 28px;
-        height: 28px;
-      }
-
-      .status-code,
-      .response-time {
-        margin-left: auto;
-        font-size: 14px;
-        opacity: 0.8;
-      }
-    }
-
-    .error-message {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      padding: 12px;
-      background-color: #ffebee;
-      color: #c62828;
-      border-radius: 4px;
-      margin-bottom: 16px;
-    }
-
-    .response-section {
-      margin-bottom: 16px;
-
-      h5 {
-        margin-bottom: 8px;
-        font-size: 14px;
-        font-weight: 500;
-      }
-
-      pre {
-        padding: 12px;
-        background-color: #f5f5f5;
-        border-radius: 4px;
-        overflow-x: auto;
-        font-size: 12px;
-        margin: 0;
-        white-space: pre-wrap;
-        word-break: break-word;
-      }
-    }
-  }
-
-  .test-note {
-    display: flex;
-    align-items: flex-start;
-    gap: 8px;
-    padding: 12px;
-    background-color: #e3f2fd;
-    border-radius: 4px;
-    margin-top: 16px;
-
-    mat-icon {
-      color: #1976d2;
-      font-size: 20px;
-      width: 20px;
-      height: 20px;
-    }
-
-    p {
-      margin: 0;
-      font-size: 14px;
-      color: #1976d2;
-    }
-  }
-}
-
-mat-dialog-actions {
-  padding: 16px 24px;
-  margin: 0;
-  border-top: 1px solid #e0e0e0;
-}
-
-.mat-mdc-form-field {
-  margin-bottom: 16px;
-}
-
-.mat-mdc-dialog-content {
-  padding: 0;
-  overflow: hidden;
-  min-height: 500px;
-  max-height: 80vh;
-  display: flex;
-  flex-direction: column;
-}
-
-.mat-mdc-tab-group {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-}
-
-.mat-mdc-tab-body-wrapper {
-  flex: 1;
-  overflow: auto;
-}
-
-.mat-mdc-chip-set .mat-mdc-chip {
-  margin: 0 4px 4px 0 !important;
-}
-
-.json-validation-status {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  margin-top: -12px;
-  margin-bottom: 16px;
-  font-size: 12px;
-  
-  mat-icon {
-    font-size: 16px;
-    width: 16px;
-    height: 16px;
-    
-    &.valid {
-      color: #4caf50;
-    }
-    
-    &.invalid {
-      color: #f44336;
-    }
-  }
   
-  span {
-    &.valid {
-      color: #4caf50;
-    }
-    
-    &.invalid {
-      color: #f44336;
-    }
-  }
-}
-
-.full-width {
-  &.json-valid {
-    textarea {
-      background-color: rgba(76, 175, 80, 0.05) !important;
-    }
-  }
-  
-  &.json-invalid {
-    textarea {
-      background-color: rgba(244, 67, 54, 0.05) !important;
-    }
+  .method-field {
+    flex: 0 0 150px;
   }
-}
-
-.variables-panel {
-  margin-bottom: 16px;
-  box-shadow: none;
-  border: 1px solid rgba(0, 0, 0, 0.12);
   
-  .mat-expansion-panel-header {
-    padding: 0 16px;
-    height: 40px;
-    
-    .mat-panel-title {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      font-size: 13px;
-      color: #666;
-      
-      mat-icon {
-        font-size: 18px;
-        width: 18px;
-        height: 18px;
-      }
-    }
-    
-    .mat-panel-description {
-      font-size: 12px;
-      color: #999;
-    }
+  .timeout-field {
+    flex: 1;
   }
   
-  .mat-expansion-panel-body {
-    padding: 8px 16px 16px;
+  .type-field {
+    flex: 0 0 150px;
   }
   
-  mat-chip-set {
-    mat-chip {
-      font-size: 12px;
-      min-height: 24px;
-      padding: 4px 8px;
-      cursor: pointer;
-      transition: all 0.2s;
-      
-      &:hover {
-        background-color: #e3f2fd;
-        color: #1976d2;
-      }
-    }
+  .path-field {
+    flex: 1;
   }
 }
 
+// Headers array section
 .array-section {
   .section-header {
     display: flex;
@@ -460,9 +73,8 @@ mat-dialog-actions {
       min-width: 200px;
     }
     
-    // Delete button
     > button[mat-icon-button] {
-      margin-top: 8px; // Mat-form-field ile hizalamak için
+      margin-top: 8px;
     }
   }
   
@@ -476,38 +88,111 @@ mat-dialog-actions {
   }
 }
 
-@media (max-width: 768px) {
-  .array-section {
-    .array-item {
-      flex-wrap: wrap;
+// Response mappings
+.mapping-content {
+  padding: 16px 0;
+  
+  mat-form-field {
+    display: block;
+    width: 100%;
+    margin-bottom: 16px;
+  }
+}
+
+// Retry section
+.retry-section {
+  margin-top: 24px;
+  
+  h3 {
+    margin-bottom: 16px;
+    font-size: 16px;
+  }
+}
+
+// Test section
+.test-section {
+  h3 {
+    margin-bottom: 16px;
+  }
+
+  .test-controls {
+    display: flex;
+    gap: 12px;
+    margin-bottom: 16px;
+  }
+  
+  .test-result {
+    margin-top: 24px;
+    padding: 16px;
+    border-radius: 4px;
+    
+    &.success {
+      background-color: #e8f5e9;
+      border: 1px solid #4caf50;
+    }
+    
+    &.error {
+      background-color: #ffebee;
+      border: 1px solid #f44336;
+    }
+    
+    h4 {
+      margin-top: 0;
+    }
+    
+    .result-status {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 16px;
       
-      .key-field,
-      .value-field {
-        flex: 1 1 100%;
-        min-width: unset;
+      mat-icon {
+        &.mat-icon {
+          color: inherit;
+        }
       }
     }
   }
 }
 
-.row {
-  display: flex;
-  gap: 12px;
-  align-items: flex-start;
+// Auth section
+.auth-section {
+  margin-top: 16px;
   
-  mat-form-field {
-    flex: 1;
+  h3 {
+    margin: 24px 0 16px;
+    font-size: 16px;
   }
-  
-  .type-field {
-    flex: 0 0 150px;
+}
+
+// Info text
+.info-text {
+  color: #666;
+  font-size: 14px;
+  margin-bottom: 16px;
+}
+
+// Spinning icon animation
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
   }
-  
-  .path-field {
-    flex: 1;
+  to {
+    transform: rotate(360deg);
   }
 }
 
+.spin {
+  animation: spin 1s linear infinite;
+}
+
+// Dialog actions
+mat-dialog-actions {
+  padding: 16px 24px !important;
+  margin: 0 !important;
+}
+
+// Responsive
 @media (max-width: 768px) {
   .row {
     flex-wrap: wrap;
@@ -516,17 +201,21 @@ mat-dialog-actions {
       flex: 1 1 100%;
     }
     
+    .method-field,
     .type-field {
       flex: 1 1 100%;
     }
   }
-}
-
-.code-editor {
-  font-family: 'Consolas', 'Monaco', 'Courier New', monospace !important;
-  font-size: 13px;
-  line-height: 1.5;
-  tab-size: 2;
-  -moz-tab-size: 2;
-  white-space: pre;
+  
+  .array-section {
+    .array-item {
+      flex-wrap: wrap;
+      
+      .key-field,
+      .value-field {
+        flex: 1 1 100%;
+        min-width: unset;
+      }
+    }
+  }
 }