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

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

@@ -11,42 +11,18 @@
     flex-wrap: wrap;
     gap: 16px;
 
-    .toolbar-left {
-      display: flex;
-      gap: 8px;
-      align-items: center;
-
-      h2 {
-        margin: 0;
-        font-size: 24px;
-        font-weight: 400;
-      }
-    }
-
+    .toolbar-left h2 { margin: 0; font-size: 24px; font-weight: 400; }
     .toolbar-right {
       display: flex;
       gap: 16px;
       align-items: center;
-
-      .search-field {
-        width: 300px;
-      }
-
-      .view-toggle {
-        border: 1px solid #e0e0e0;
-        border-radius: 4px;
-      }
+      .search-field { width: 300px; }
+      .view-toggle { border: 1px solid #e0e0e0; border-radius: 4px; }
     }
   }
 
-  mat-progress-bar {
-    margin-bottom: 20px;
-  }
-
-  .content {
-    flex: 1;
-    overflow: auto;
-  }
+  mat-progress-bar { margin-bottom: 20px; }
+  .content { flex: 1; overflow: auto; }
 
   .projects-grid {
     display: grid;
@@ -56,24 +32,9 @@
 
     .project-card {
       transition: all 0.3s ease;
-
-      &:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
-      }
-
-      &.disabled {
-        opacity: 0.7;
-
-        .project-icon {
-          background-color: #999 !important;
-        }
-      }
-
-      &.deleted {
-        opacity: 0.5;
-        background-color: #fafafa;
-      }
+      &:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.15); }
+      &.disabled { opacity: 0.7; .project-icon { background-color: #999 !important; } }
+      &.deleted { opacity: 0.5; background-color: #fafafa; }
 
       .project-icon {
         background-color: #3f51b5;
@@ -81,43 +42,22 @@
         display: flex;
         align-items: center;
         justify-content: center;
-
-        mat-icon {
-          font-size: 24px;
-          width: 24px;
-          height: 24px;
-        }
+        mat-icon { font-size: 24px; width: 24px; height: 24px; }
       }
 
-      mat-card-title {
-        font-size: 18px;
-        font-weight: 500;
-      }
-
-      mat-card-subtitle {
-        margin-top: 4px;
-      }
+      mat-card-title { font-size: 18px; font-weight: 500; }
+      mat-card-subtitle { margin-top: 4px; }
 
       .project-info {
         margin-top: 16px;
-
         .info-item {
           display: flex;
           align-items: center;
           gap: 8px;
           margin-bottom: 8px;
           color: #666;
-
-          mat-icon {
-            font-size: 18px;
-            width: 18px;
-            height: 18px;
-            color: #999;
-          }
-
-          span {
-            font-size: 14px;
-          }
+          mat-icon { font-size: 18px; width: 18px; height: 18px; color: #999; }
+          span { font-size: 14px; }
         }
       }
 
@@ -125,10 +65,7 @@
         padding: 8px 16px;
         display: flex;
         justify-content: space-between;
-
-        button:last-child {
-          margin-left: auto;
-        }
+        button:last-child { margin-left: auto; }
       }
     }
   }
@@ -141,27 +78,10 @@
 
     .projects-table {
       width: 100%;
-
-      .deleted-icon {
-        color: #f44336;
-        font-size: 16px;
-        vertical-align: middle;
-        margin-left: 8px;
-      }
-
-      .deleted-row {
-        opacity: 0.5;
-        background-color: #fafafa;
-      }
-
-      mat-chip {
-        font-size: 12px;
-        margin: 2px;
-      }
-
-      mat-chip-list {
-        margin: 0;
-      }
+      .deleted-icon { color: #f44336; font-size: 16px; vertical-align: middle; margin-left: 8px; }
+      .deleted-row { opacity: 0.5; background-color: #fafafa; }
+      mat-chip { font-size: 12px; margin: 2px; }
+      mat-chip-list { margin: 0; }
     }
   }
 
@@ -169,19 +89,8 @@
     text-align: center;
     padding: 60px 20px;
     color: #999;
-
-    mat-icon {
-      font-size: 64px;
-      height: 64px;
-      width: 64px;
-      margin-bottom: 16px;
-      color: #e0e0e0;
-    }
-
-    p {
-      font-size: 16px;
-      margin: 0 0 24px 0;
-    }
+    mat-icon { font-size: 64px; height: 64px; width: 64px; margin-bottom: 16px; color: #e0e0e0; }
+    p { font-size: 16px; margin: 0 0 24px 0; }
   }
 
   .message-container {
@@ -193,31 +102,15 @@
 
     mat-card {
       min-width: 300px;
-      
-      &.success {
-        mat-card-content {
-          color: #4caf50;
-        }
-      }
-
-      &.error {
-        mat-card-content {
-          color: #f44336;
-        }
-      }
-
+      &.success mat-card-content { color: #4caf50; }
+      &.error mat-card-content { color: #f44336; }
       mat-card-content {
         display: flex;
         align-items: center;
         gap: 12px;
         padding: 12px 16px;
         margin: 0;
-
-        mat-icon {
-          font-size: 20px;
-          width: 20px;
-          height: 20px;
-        }
+        mat-icon { font-size: 20px; width: 20px; height: 20px; }
       }
     }
   }
@@ -226,19 +119,9 @@
 @media (max-width: 768px) {
   .projects-container {
     .toolbar {
-      .toolbar-left,
-      .toolbar-right {
-        width: 100%;
-        justify-content: center;
-      }
-
-      .search-field {
-        width: 100%;
-      }
-    }
-
-    .projects-grid {
-      grid-template-columns: 1fr;
+      .toolbar-left, .toolbar-right { width: 100%; justify-content: center; }
+      .search-field { width: 100%; }
     }
+    .projects-grid { grid-template-columns: 1fr; }
   }
 }