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

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

@@ -15,6 +15,12 @@
       display: flex;
       gap: 8px;
       align-items: center;
+
+      h2 {
+        margin: 0;
+        font-size: 24px;
+        font-weight: 400;
+      }
     }
 
     .toolbar-right {
@@ -37,6 +43,11 @@
     margin-bottom: 20px;
   }
 
+  .content {
+    flex: 1;
+    overflow: auto;
+  }
+
   .projects-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
@@ -67,6 +78,15 @@
       .project-icon {
         background-color: #3f51b5;
         color: white;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        mat-icon {
+          font-size: 24px;
+          width: 24px;
+          height: 24px;
+        }
       }
 
       mat-card-title {
@@ -114,11 +134,10 @@
   }
 
   .table-container {
-    flex: 1;
-    overflow: auto;
     background: white;
     border-radius: 8px;
     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    overflow: hidden;
 
     .projects-table {
       width: 100%;
@@ -137,6 +156,11 @@
 
       mat-chip {
         font-size: 12px;
+        margin: 2px;
+      }
+
+      mat-chip-list {
+        margin: 0;
       }
     }
   }
@@ -151,6 +175,7 @@
       height: 64px;
       width: 64px;
       margin-bottom: 16px;
+      color: #e0e0e0;
     }
 
     p {
@@ -158,6 +183,44 @@
       margin: 0 0 24px 0;
     }
   }
+
+  .message-container {
+    position: fixed;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 1000;
+
+    mat-card {
+      min-width: 300px;
+      
+      &.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;
+        }
+      }
+    }
+  }
 }
 
 @media (max-width: 768px) {