feat: add loading state to buttons and center align confirmation messages

This commit is contained in:
Orace.A 2025-03-28 12:50:20 +01:00
parent db20a23f6a
commit 8e182b4601
5 changed files with 21 additions and 10 deletions

View File

@ -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>
)

View File

@ -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>
}
/>

View File

@ -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

View File

@ -276,7 +276,7 @@ export default function Organizations() {
title="Supprimer une organisation"
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
className="bg-blue-100 text-blue-600 py-2 px-4 rounded-full cursor-pointer"
@ -412,9 +412,10 @@ export default function Organizations() {
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 l'organisation
{createMutation.isPending ? "En cours..." : "Créer l'organisation"}
</button>
}
/>

View File

@ -81,3 +81,11 @@ body {
background-color: rgb(22, 77, 185);
}
}
.btn-auth-loading {
border-radius: 9999px;
background-color: #93b4f8;
color: white;
width: 100%;
padding: 8px;
}