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

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

@@ -1,76 +1,36 @@
 .projects-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 20px;
+
   .toolbar {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 20px;
+    gap: 20px;
     flex-wrap: wrap;
-    gap: 16px;
 
-    .toolbar-left h2 { 
-      margin: 0; 
-      font-size: 24px; 
-      font-weight: 400; 
+    .toolbar-left {
+      display: flex;
+      align-items: center;
+      gap: 16px;
     }
-    
+
     .toolbar-right {
       display: flex;
-      gap: 16px;
       align-items: center;
-      flex-wrap: wrap;
-      
-      .search-field { 
-        width: 300px;
-        
-        ::ng-deep {
-          .mat-mdc-text-field-wrapper {
-            background-color: white;
-          }
-          
-          .mat-mdc-form-field-subscript-wrapper {
-            display: none;
-          }
-        }
-      }
-      
-      .view-toggle { 
-        background-color: white;
-        border: 1px solid #e0e0e0; 
-        border-radius: 4px;
-        overflow: hidden;
-        
-        ::ng-deep {
-          .mat-button-toggle-group {
-            border: none;
-          }
-          
-          .mat-button-toggle {
-            border: none;
-            
-            &.mat-button-toggle-checked {
-              background-color: #e3f2fd;
-              
-              .mat-icon {
-                color: #1976d2;
-              }
-            }
-          }
-          
-          .mat-icon {
-            font-size: 20px;
-            width: 20px;
-            height: 20px;
-            line-height: 20px;
-          }
-        }
-      }
-      
-      ::ng-deep .mat-mdc-checkbox {
-        .mdc-form-field {
-          font-size: 14px;
-          color: #666;
-        }
-      }
+      gap: 16px;
+    }
+
+    .search-field {
+      width: 300px;
+    }
+
+    .view-toggle {
+      border: 1px solid rgba(0, 0, 0, 0.12);
+      border-radius: 4px;
     }
   }
 
@@ -155,86 +115,65 @@
             font-size: 18px; 
             width: 18px; 
             height: 18px; 
-            color: #999; 
+            color: #999;
+            vertical-align: middle;
           }
           
-          span { 
-            font-size: 14px; 
+          .info-label {
+            font-size: 13px;
+            vertical-align: middle;
+            line-height: 18px;
           }
-        }
-      }
-
-      mat-card-actions {
-        padding: 12px 16px;
-        display: flex;
-        justify-content: space-between;
-        flex-wrap: wrap;
-        gap: 8px;
-        border-top: 1px solid #e0e0e0;
-        
-        button {
-          &:last-child { 
-            margin-left: auto; 
+          
+          mat-checkbox {
+            margin-left: 4px;
+            vertical-align: middle;
+            
+            ::ng-deep .mat-mdc-checkbox-touch-target {
+              height: 18px;
+            }
+          }
+          
+          .time-text {
+            font-size: 12px;
+            color: #999;
           }
         }
       }
     }
   }
 
-  .table-container {
-    background: white;
-    border-radius: 8px;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-    overflow: hidden;
-
-    .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; 
-      }
+  .projects-table { 
+    overflow: auto; 
+    
+    mat-checkbox {
+      vertical-align: middle;
+    }
+    
+    .action-buttons {
+      display: flex;
+      gap: 8px;
       
-      ::ng-deep {
-        .mat-mdc-chip-set {
-          display: inline-flex;
-          min-height: auto;
-        }
-        
-        .mat-mdc-chip {
-          font-size: 12px;
-          min-height: 24px;
-          padding: 4px 12px;
-          margin: 2px;
-        }
+      button {
+        min-width: auto;
       }
     }
   }
 
-  .no-data {
+  .empty-state {
     text-align: center;
     padding: 60px 20px;
-    color: #999;
-    background: white;
-    border-radius: 8px;
     
     mat-icon { 
       font-size: 64px; 
-      height: 64px; 
       width: 64px; 
+      height: 64px; 
+      color: #ccc; 
       margin-bottom: 16px; 
-      color: #e0e0e0; 
     }
     
-    p { 
-      font-size: 16px; 
+    h3 { 
+      color: #666; 
       margin: 0 0 24px 0; 
     }
   }