ristoo/privatedocs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/(auth)/login/page.tsx
View File

@ -70,7 +70,7 @@ export default function LoginPage() {
]} ]}
submit={mutation.mutate} submit={mutation.mutate}
schema={loginSchema} 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> </div>
) )

12
src/app/admin/admins/page.tsx
View File

@ -230,9 +230,10 @@ export default function Admins() {
child={ child={
<button <button
type="submit" 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> </button>
} }
/> />
@ -265,7 +266,7 @@ export default function Admins() {
title="Supprimer un admin" title="Supprimer un admin"
content={ content={
<div> <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"> <div className="grid grid-cols-2 gap-3 mt-3">
<button <button
className="bg-blue-100 text-blue-600 py-2 px-4 rounded-full cursor-pointer" className="bg-blue-100 text-blue-600 py-2 px-4 rounded-full cursor-pointer"
@ -387,9 +388,10 @@ export default function Admins() {
child={ child={
<button <button
type="submit" 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> </button>
} }
/> />

2
src/app/admin/home/page.tsx
View File

@ -151,7 +151,7 @@ export default function HomePage () {
} }
content={ content={
<div> <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"> <div className="grid grid-cols-2 gap-3 mt-3">
<button <button

7
src/app/admin/organizations/page.tsx
View File

@ -276,7 +276,7 @@ export default function Organizations() {
title="Supprimer une organisation" title="Supprimer une organisation"
content={ content={
<div> <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"> <div className="grid grid-cols-2 gap-3 mt-3">
<button <button
className="bg-blue-100 text-blue-600 py-2 px-4 rounded-full cursor-pointer" className="bg-blue-100 text-blue-600 py-2 px-4 rounded-full cursor-pointer"
@ -412,9 +412,10 @@ export default function Organizations() {
child={ child={
<button <button
type="submit" 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> </button>
} }
/> />

8
src/app/globals.css
View File

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