apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-05-09 15:52:40 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: enhance button styles in LocalLoginForm and RegisterPage components for better loading state visibility

Browse source
This commit is contained in:
Anish Sarkar 2026-03-22 03:16:47 +05:30
parent 5b6b1e5d72
commit d20c9c2788
2 changed files with 14 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

9
surfsense_web/app/(home)/login/LocalLoginForm.tsx
View file

@ -211,9 +211,14 @@ export function LocalLoginForm() {
<button <button
type="submit" type="submit"
disabled={isLoggingIn} disabled={isLoggingIn}
className="w-full rounded-md bg-blue-600 px-4 py-1.5 md:py-2 text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition-all text-sm md:text-base flex items-center justify-center gap-2" className="relative w-full rounded-md bg-blue-600 px-4 py-1.5 md:py-2 text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition-all text-sm md:text-base flex items-center justify-center gap-2"
> >
{isLoggingIn ? <Spinner size="sm" className="text-white" /> : t("sign_in")} <span className={isLoggingIn ? "invisible" : ""}>{t("sign_in")}</span>
{isLoggingIn && (
<span className="absolute inset-0 flex items-center justify-center">
<Spinner size="sm" className="text-white" />
</span>
)}
</button> </button>
</form> </form>

16
surfsense_web/app/(home)/register/page.tsx
View file

@ -6,7 +6,7 @@ import Link from "next/link";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { toast } from "sonner"; import { toast, type ExternalToast } from "sonner";
import { registerMutationAtom } from "@/atoms/auth/auth-mutation.atoms"; import { registerMutationAtom } from "@/atoms/auth/auth-mutation.atoms";
import { Logo } from "@/components/Logo"; import { Logo } from "@/components/Logo";
import { Spinner } from "@/components/ui/spinner"; import { Spinner } from "@/components/ui/spinner";
@ -131,7 +131,7 @@ export default function RegisterPage() {
setError({ title: errorDetails.title, message: errorDetails.description }); setError({ title: errorDetails.title, message: errorDetails.description });
// Show error toast with conditional retry action // Show error toast with conditional retry action
const toastOptions: any = { const toastOptions: ExternalToast = {
description: errorDetails.description, description: errorDetails.description,
duration: 6000, duration: 6000,
}; };
@ -289,15 +289,13 @@ export default function RegisterPage() {
<button <button
type="submit" type="submit"
disabled={isRegistering} disabled={isRegistering}
className="w-full rounded-md bg-blue-600 px-4 py-1.5 md:py-2 text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition-all text-sm md:text-base flex items-center justify-center gap-2" className="relative w-full rounded-md bg-blue-600 px-4 py-1.5 md:py-2 text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition-all text-sm md:text-base flex items-center justify-center gap-2"
> >
{isRegistering ? ( <span className={isRegistering ? "invisible" : ""}>{t("register")}</span>
<> {isRegistering && (
<span className="absolute inset-0 flex items-center justify-center gap-2">
<Spinner size="sm" className="text-white" /> <Spinner size="sm" className="text-white" />
<span>{t("creating_account_btn")}</span> </span>
</>
) : (
t("register")
)} )}
</button> </button>
</form> </form>