Update Tailwind CSS configuration after UX updates

apps/edr-passenger-api/package.json

@@ -38,6 +38,7 @@
     "bcrypt": "^5.1.1",
     "class-transformer": "^0.5.1",
     "class-validator": "^0.14.0",
+    "express": "^4.18.2",
     "jose": "^5.10.0",
     "passport": "^0.7.0",
     "passport-jwt": "^4.0.1",

apps/edr-passenger-web/backoffice/src/styles/globals.css

@@ -55,64 +55,136 @@
   }
 
   body {
-    @apply bg-background text-foreground;
+    background-color: hsl(var(--background));
+    color: hsl(var(--foreground));
   }
 }
 
 @layer components {
   .card {
-    @apply bg-card text-card-foreground rounded-lg shadow-sm border border-border p-6;
+    background-color: hsl(var(--card));
+    color: hsl(var(--card-foreground));
+    border-radius: 0.5rem;
+    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
+    border: 1px solid hsl(var(--border));
+    padding: 1.5rem;
   }
   
   .btn {
-    @apply px-4 py-2 rounded-lg font-medium transition-colors duration-200 inline-flex items-center justify-center;
+    padding: 0.5rem 1rem;
+    border-radius: 0.5rem;
+    font-weight: 500;
+    transition-property: background-color;
+    transition-duration: 200ms;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
   }
   
   .btn-primary {
-    @apply bg-[rgb(20,113,76)] text-white hover:bg-[rgb(16,90,61)] dark:bg-[rgb(20,113,76)] dark:hover:bg-[rgb(16,90,61)] shadow-md;
+    background-color: rgb(20, 113, 76);
+    color: white;
+    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+  }
+  
+  .btn-primary:hover {
+    background-color: rgb(16, 90, 61);
   }
   
   .btn-secondary {
-    @apply bg-secondary text-secondary-foreground hover:bg-secondary/80;
+    background-color: hsl(var(--secondary));
+    color: hsl(var(--secondary-foreground));
+  }
+  
+  .btn-secondary:hover {
+    background-color: hsl(var(--secondary) / 0.8);
   }
   
   .btn-danger {
-    @apply bg-[rgb(20,113,76)] text-destructive-foreground hover:bg-[rgb(16,90,61)];
+    background-color: rgb(20, 113, 76);
+    color: hsl(var(--destructive-foreground));
+  }
+  
+  .btn-danger:hover {
+    background-color: rgb(16, 90, 61);
   }
   
   .input {
-    @apply w-full px-3 py-2 border border-input rounded-lg bg-background focus:outline-none focus:ring-2 focus:ring-[rgb(20,113,76)] focus:border-transparent;
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+    border: 1px solid hsl(var(--input));
+    border-radius: 0.5rem;
+    background-color: hsl(var(--background));
+  }
+  
+  .input:focus {
+    outline: none;
+    ring: 2px hsl(var(--ring));
+    border-color: transparent;
   }
   
   .label {
-    @apply block text-sm font-medium text-foreground mb-1;
+    display: block;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: hsl(var(--foreground));
+    margin-bottom: 0.25rem;
   }
 
   .gradient-edr {
-    @apply bg-[rgb(20,113,76)];
+    background-color: rgb(20, 113, 76);
   }
 
   .gradient-edr-bg {
-    @apply bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900;
+    background: linear-gradient(to bottom, #0f172a, #1e293b, #0f172a);
   }
   
   .edr-badge {
-    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
+    display: inline-flex;
+    align-items: center;
+    padding: 0.125rem 0.625rem;
+    border-radius: 9999px;
+    font-size: 0.75rem;
+    font-weight: 500;
   }
   
   .edr-badge-success {
-    @apply bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400;
+    background-color: #dcfce7;
+    color: #166534;
+  }
+  
+  .dark .edr-badge-success {
+    background-color: rgb(6 78 59 / 0.3);
+    color: #86efac;
   }
   
   .edr-badge-warning {
-    @apply bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400;
+    background-color: #fef3c7;
+    color: #854d0e;
+  }
+  
+  .dark .edr-badge-warning {
+    background-color: rgb(120 53 15 / 0.3);
+    color: #fbbf24;
   }
   
   .edr-badge-danger {
-    @apply bg-green-100 text-[rgb(20,113,76)] dark:bg-green-900/30 dark:text-green-400;
+    background-color: #dcfce7;
+    color: rgb(20, 113, 76);
+  }
+  
+  .dark .edr-badge-danger {
+    background-color: rgb(6 78 59 / 0.3);
+    color: #86efac;
   }
   
   .edr-badge-info {
-    @apply bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400;
+    background-color: #dbeafe;
+    color: #1e40af;
+  }
+  
+  .dark .edr-badge-info {
+    background-color: rgb(30 58 138 / 0.3);
+    color: #60a5fa;
   }
 }