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

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

@@ -11,18 +11,80 @@
     flex-wrap: wrap;
     gap: 16px;
 
-    .toolbar-left 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;
+        
+        ::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;
+        }
+      }
     }
   }
 
-  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;
@@ -32,9 +94,25 @@
 
     .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; }
+      cursor: pointer;
+      
+      &: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;
@@ -42,22 +120,45 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        mat-icon { font-size: 24px; width: 24px; height: 24px; }
+        width: 40px;
+        height: 40px;
+        
+        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; 
+          }
         }
       }
 
@@ -65,7 +166,14 @@
         padding: 8px 16px;
         display: flex;
         justify-content: space-between;
-        button:last-child { margin-left: auto; }
+        flex-wrap: wrap;
+        gap: 8px;
+        
+        button {
+          &:last-child { 
+            margin-left: auto; 
+          }
+        }
       }
     }
   }
@@ -78,10 +186,32 @@
 
     .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; 
+      }
+      
+      ::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;
+        }
+      }
     }
   }
 
@@ -89,8 +219,21 @@
     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; }
+    background: white;
+    border-radius: 8px;
+    
+    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 {
@@ -102,26 +245,71 @@
 
     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; 
+        }
       }
     }
   }
 }
 
+// Material overrides for this component
+::ng-deep {
+  .mat-mdc-button-toggle-appearance-standard .mat-button-toggle-label-content {
+    line-height: 36px;
+    padding: 0 12px;
+  }
+  
+  .mat-mdc-form-field-appearance-outline .mat-mdc-form-field-infix {
+    padding: 12px 0;
+  }
+  
+  .mat-mdc-text-field-wrapper.mdc-text-field--outlined {
+    .mat-mdc-form-field-infix {
+      min-height: auto;
+    }
+  }
+  
+  .mat-mdc-card {
+    --mdc-elevated-card-container-color: white;
+    --mdc-elevated-card-container-elevation: 0 2px 4px rgba(0,0,0,0.1);
+  }
+}
+
+// Responsive adjustments
 @media (max-width: 768px) {
   .projects-container {
     .toolbar {
-      .toolbar-left, .toolbar-right { width: 100%; justify-content: center; }
-      .search-field { width: 100%; }
+      .toolbar-left, .toolbar-right { 
+        width: 100%; 
+        justify-content: center; 
+      }
+      
+      .search-field { 
+        width: 100%; 
+      }
+    }
+    
+    .projects-grid { 
+      grid-template-columns: 1fr; 
     }
-    .projects-grid { grid-template-columns: 1fr; }
   }
 }