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 committed by Ruben
parent 14483200ea
commit ec14a91d6f
4 changed files with 40 additions and 7 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}
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>
)

12
src/app/admin/admins/page.tsx
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>
}
/>

2
src/app/admin/home/page.tsx
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

31
src/app/globals.css
View File

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