rebase ig

package.json

@@ -23,6 +23,7 @@
     "keycloak-angular": "^16.1.0",
     "rxjs": "~7.8.1",
     "tailwind": "4.0.0",
+    "tailwindcss": "^3.4.17",
     "tslib": "^2.8.1",
     "zone.js": "~0.15.0"
   },
@@ -31,12 +32,14 @@
     "@angular/cli": "^19.0.5",
     "@angular/compiler-cli": "^19.0.4",
     "@types/jasmine": "~5.1.5",
+    "autoprefixer": "^10.4.20",
     "jasmine-core": "~5.2.0",
     "karma": "~6.4.4",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.1",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
+    "postcss": "^8.4.49",
     "typescript": "~5.5.4"
   }
 }

src/app/employee-list/employee-list.component.css

@@ -0,0 +1,73 @@
+:host ::ng-deep {
+  .mat-mdc-card {
+    --mdc-elevated-card-container-color: transparent;
+    @apply !shadow-none !rounded-xl;
+  }
+
+  .mat-mdc-button-base {
+    --mat-mdc-button-persistent-ripple-color: currentColor;
+    @apply !rounded-lg;
+  }
+
+  .mat-mdc-progress-spinner {
+    --mdc-circular-progress-active-indicator-color: #2563eb;
+  }
+
+  .mdc-data-table__header-cell {
+    @apply !text-gray-600 !font-semibold !text-sm !py-4 !px-6;
+  }
+
+  .mat-mdc-table {
+    @apply !bg-transparent !border-separate !border-spacing-y-2;
+
+    .mat-mdc-row {
+      @apply !bg-white !rounded-xl !shadow-sm !transition-all !duration-200;
+
+      &:hover {
+        @apply !bg-gray-50 !shadow-md !transform !scale-[1.01];
+      }
+
+      .mat-mdc-cell {
+        @apply !border-b-0 !py-4 !px-6 first:!rounded-l-xl last:!rounded-r-xl;
+      }
+    }
+
+    .mat-mdc-header-row {
+      @apply !bg-transparent;
+
+      .mat-mdc-header-cell {
+        @apply !border-b-0;
+      }
+    }
+  }
+
+  .mat-mdc-menu-panel {
+    @apply !rounded-xl !shadow-lg;
+  }
+
+  .mat-mdc-menu-item {
+    @apply !rounded-lg !mx-1 !my-0.5;
+  }
+
+  .mdc-button {
+    @apply !font-medium;
+
+    &.mat-primary {
+      @apply !bg-blue-600 !text-white hover:!bg-blue-700;
+    }
+
+    &.mat-warn {
+      @apply !bg-red-600 !text-white hover:!bg-red-700;
+    }
+  }
+
+  .mat-mdc-snack-bar-container {
+    &.error-snackbar {
+      @apply !rounded-xl;
+
+      .mdc-snackbar__surface {
+        @apply !bg-red-50 !text-red-900 !border !border-red-100;
+      }
+    }
+  }
+}

src/app/employee-list/employee-list.component.html

@@ -13,7 +13,6 @@
         @if (employees) {
           <div class="!overflow-x-auto !rounded-lg !bg-gray-50 !p-4">
             <table mat-table [dataSource]="employees" matSort class="!w-full">
-              <!-- Name Column -->
               <ng-container matColumnDef="name">
                 <th mat-header-cell *matHeaderCellDef class="!text-left"> Name </th>
                 <td mat-cell *matCellDef="let employee" class="!py-4">
@@ -32,7 +31,6 @@
                 </td>
               </ng-container>
 
-              <!-- Actions Column -->
               <ng-container matColumnDef="actions">
                 <th mat-header-cell *matHeaderCellDef class="!text-right"> Actions </th>
                 <td mat-cell *matCellDef="let employee" class="!text-right !py-4">

src/app/employee-list/employee-list.component.ts

@@ -38,7 +38,7 @@ import { MatSortModule } from '@angular/material/sort';
   styleUrl: './employee-list.component.css'
 })
 export class EmployeeListComponent {
-  private static readonly EMPLOYEES_ENDPOINT = '/backend/employees';
+  private static readonly EMPLOYEES_ENDPOINT = 'http://localhost:8089/employees';
   private static readonly MAX_RETRIES = 3;
   public employees$: Observable<Employee[]>;
   public readonly displayedColumns: string[] = ['name', 'actions'];

src/app/services/auth-guard.service.ts

@@ -16,6 +16,7 @@ export class AuthGuardService {
 
       return false;
     }
+
     return true;
   }
 }

src/styles.css

@@ -1,4 +1,3 @@
-/* You can add global styles to this file, and also import other style files */
 @tailwind base;
 @tailwind components;
 @tailwind utilities;