From 2e28565b2a8c2fd63cbfdafa7d126597bf92a451 Mon Sep 17 00:00:00 2001
From: Arthur Belleville <arthur.belleville@datadoghq.com>
Date: Thu, 10 Jul 2025 10:16:59 +0200
Subject: [PATCH] Improve login/signup

---
 ui/src/pages/login.tsx  | 12 ++++++------
 ui/src/pages/signup.tsx | 16 ++++++++--------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/ui/src/pages/login.tsx b/ui/src/pages/login.tsx
index 2c3d884..1e7fd34 100644
--- a/ui/src/pages/login.tsx
+++ b/ui/src/pages/login.tsx
@@ -30,11 +30,11 @@ export function LoginPage() {
   };
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-emerald-100 via-green-100 to-white dark:bg-gradient-to-br dark:from-[#0a1f0a] dark:via-[#051505] dark:to-black">
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-950 via-blue-800 to-blue-400 dark:bg-gradient-to-br dark:from-slate-900 dark:via-blue-950 dark:via-blue-900 dark:to-blue-800">
       <div
         className={twMerge(
           "w-full max-w-lg p-8 bg-white dark:bg-slate-800/50 backdrop-blur-lg rounded-2xl",
-          "border border-emerald-200 dark:border-emerald-900/30",
+          "border border-blue-200 dark:border-blue-900/30",
           "shadow-xl"
         )}
         onClick={(e) => e.stopPropagation()}
@@ -81,7 +81,7 @@ export function LoginPage() {
 
             <div className="flex items-center justify-between">
               <Link to="/reset-password">
-                <a className="text-sm text-emerald-600 hover:text-emerald-500">
+                <a className="text-sm text-blue-600 hover:text-blue-500">
                   Mot de passe oublié ?
                 </a>
               </Link>
@@ -89,8 +89,8 @@ export function LoginPage() {
 
             <Button
               className={twMerge(
-                "w-full bg-emerald-700 text-white",
-                "hover:bg-emerald-600"
+                "w-full bg-blue-700 text-white",
+                "hover:bg-blue-600"
               )}
               type="submit"
               pendingLabel="Connexion..."
@@ -125,7 +125,7 @@ export function LoginPage() {
           <p className="text-center text-sm text-slate-600 dark:text-slate-400">
             Pas encore de compte ?{" "}
             <Link to="/signup">
-              <a className="text-emerald-600 hover:text-emerald-500 font-medium">
+              <a className="text-blue-600 hover:text-blue-500 font-medium">
                 S&apos;inscrire
               </a>
             </Link>
diff --git a/ui/src/pages/signup.tsx b/ui/src/pages/signup.tsx
index a953cca..68c64d3 100644
--- a/ui/src/pages/signup.tsx
+++ b/ui/src/pages/signup.tsx
@@ -75,13 +75,13 @@ export function SignUpPage() {
 
   return (
     <div
-      className="min-h-screen flex items-center justify-center bg-gradient-to-br from-emerald-100 via-green-100 to-white dark:bg-gradient-to-br dark:from-[#0a1f0a] dark:via-[#051505] dark:to-black"
+      className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-950 via-blue-800 to-blue-400 dark:bg-gradient-to-br dark:from-slate-900 dark:via-blue-950 dark:via-blue-900 dark:to-blue-800"
       onClick={() => navigate("/")}
     >
       <div
         className={twMerge(
           "w-full max-w-xl p-8 bg-white dark:bg-slate-800/50 backdrop-blur-lg rounded-2xl",
-          "border border-emerald-200 dark:border-emerald-900/30",
+          "border border-blue-200 dark:border-blue-900/30",
           "shadow-xl"
         )}
         onClick={(e) => e.stopPropagation()}
@@ -197,7 +197,7 @@ export function SignUpPage() {
               <Input
                 type="checkbox"
                 id="terms"
-                className="mt-1 mr-2 h-4 w-4 text-emerald-600 focus:ring-emerald-500 border-slate-300 rounded"
+                className="mt-1 mr-2 h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 rounded"
                 required
               />
               <Label
@@ -205,11 +205,11 @@ export function SignUpPage() {
                 className="text-sm text-slate-700 dark:text-slate-300"
               >
                 J&apos;accepte les{" "}
-                <a href="#" className="text-emerald-600 hover:text-emerald-500">
+                <a href="#" className="text-blue-600 hover:text-blue-500">
                   conditions d&apos;utilisation
                 </a>{" "}
                 et la{" "}
-                <a href="#" className="text-emerald-600 hover:text-emerald-500">
+                <a href="#" className="text-blue-600 hover:text-blue-500">
                   politique de confidentialité
                 </a>
               </Label>
@@ -217,8 +217,8 @@ export function SignUpPage() {
 
             <Button
               className={twMerge(
-                "w-full bg-emerald-700 text-white",
-                "hover:bg-emerald-600"
+                "w-full bg-blue-700 text-white",
+                "hover:bg-blue-600"
               )}
               type="submit"
               isPending={isPending}
@@ -254,7 +254,7 @@ export function SignUpPage() {
           <p className="text-center text-sm text-slate-600 dark:text-slate-400">
             Déjà un compte ?{" "}
             <Link to="/login">
-              <a className="text-emerald-600 hover:text-emerald-500 font-medium">
+              <a className="text-blue-600 hover:text-blue-500 font-medium">
                 Se connecter
               </a>
             </Link>