From ec14a91d6f9460111ceaab813c1473792634dd72 Mon Sep 17 00:00:00 2001
From: "Orace.A" <orace@intside.com>
Date: Fri, 28 Mar 2025 12:50:20 +0100
Subject: [PATCH] feat: add loading state to buttons and center align
 confirmation messages

---
 src/app/(auth)/login/page.tsx |  2 +-
 src/app/admin/admins/page.tsx | 12 +++++++-----
 src/app/admin/home/page.tsx   |  2 +-
 src/app/globals.css           | 31 +++++++++++++++++++++++++++++++
 4 files changed, 40 insertions(+), 7 deletions(-)

diff --git a/src/app/(auth)/login/page.tsx b/src/app/(auth)/login/page.tsx
index d7e2105..0256b1a 100644
--- a/src/app/(auth)/login/page.tsx
+++ b/src/app/(auth)/login/page.tsx
@@ -70,7 +70,7 @@ export default function LoginPage() {
                 ]}
                 submit={mutation.mutate} 
                 schema={loginSchema}
-                child={<button type="submit" className="btn-auth mt-4">Connexion</button>}
+                child={<button disabled={mutation.isPending} type="submit" className={`${mutation.isPending ? "btn-auth-loading" : "btn-auth"} mt-4`}>{mutation.isPending ? "Chargement..." : "Connexion"}</button>}
              />
         </div>
     )
diff --git a/src/app/admin/admins/page.tsx b/src/app/admin/admins/page.tsx
index 88219a5..bb3c666 100644
--- a/src/app/admin/admins/page.tsx
+++ b/src/app/admin/admins/page.tsx
@@ -230,9 +230,10 @@ export default function Admins() {
                   child={
                     <button
                       type="submit"
-                      className="btn-auth mt-4 cursor-pointer"
+                      disabled={updateMutation.isPending}
+                      className={`${updateMutation.isPending ? "btn-auth-loading" : "btn-auth"} mt-4 cursor-pointer`}
                     >
-                      Modifier
+                      {updateMutation.isPending ? "En cours..." : "Modifier"}
                     </button>
                   }
                 />
@@ -265,7 +266,7 @@ export default function Admins() {
               title="Supprimer un admin"
               content={
                 <div>
-                  <p>Voulez-vous vraiment supprimer cet admin ?</p>
+                  <p className="text-center">Voulez-vous vraiment supprimer cet admin ?</p>
                   <div className="grid grid-cols-2 gap-3 mt-3">
                     <button
                       className="bg-blue-100 text-blue-600 py-2 px-4 rounded-full cursor-pointer"
@@ -387,9 +388,10 @@ export default function Admins() {
                     child={
                       <button
                         type="submit"
-                        className="btn-auth mt-4 cursor-pointer"
+                        disabled={createMutation.isPending}
+                        className={`${createMutation.isPending ? "btn-auth-loading" : "btn-auth"} mt-4 cursor-pointer`}
                       >
-                        Créer le compte
+                        {createMutation.isPending ? "Création de l'admin..." : "Créer le compte"}
                       </button>
                     }
                   />
diff --git a/src/app/admin/home/page.tsx b/src/app/admin/home/page.tsx
index 879891a..760bb20 100644
--- a/src/app/admin/home/page.tsx
+++ b/src/app/admin/home/page.tsx
@@ -151,7 +151,7 @@ export default function HomePage () {
               }
               content={
                 <div>
-                  <p>Voulez-vous vraiment supprimer cette organisation ?</p>
+                  <p className="text-center">Voulez-vous vraiment supprimer cette organisation ?</p>
 
                   <div className="grid grid-cols-2 gap-3 mt-3">
                     <button 
diff --git a/src/app/globals.css b/src/app/globals.css
index 6848057..018286c 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -84,6 +84,22 @@ body {
   }
 }
 
+.btn-auth-loading {
+  border-radius: 9999px;
+  background-color: #93b4f8;
+  color: white;
+  width: 100%;
+  padding: 8px;
+}
+
+.responsive-icon {
+  min-width: 16px;
+  min-height: 16px;
+  width: 24px;
+  height: 24px;
+  transition: width 0.2s, height 0.2s;
+}
+
 .cta{
   padding: 10px 24px;
   color: white;
@@ -148,3 +164,18 @@ hr{
 ::-webkit-scrollbar-thumb:hover {
   background: var(--primary);
 }
+
+
+@media (max-width: 768px) {
+  .responsive-icon {
+    width: 20px;
+    height: 20px;
+  }
+}
+
+@media (max-width: 480px) {
+  .responsive-icon {
+    width: 16px;
+    height: 16px;
+  }
+}
\ No newline at end of file