mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-05-23 19:05:16 +02:00
refactor: replace button elements with Button component for consistent styling across various UI components
This commit is contained in:
Anish Sarkar
parent
88f9c3353c
commit
198c38b335
13 changed files with 234 additions and 180 deletions
|
|
@ -7,6 +7,7 @@ import { useRouter } from "next/navigation";
|
|||
import { useTranslations } from "next-intl";
|
||||
import { useState } from "react";
|
||||
import { loginMutationAtom } from "@/atoms/auth/auth-mutation.atoms";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Spinner } from "@/components/ui/spinner";
|
||||
import { getAuthErrorDetails, isNetworkError } from "@/lib/auth-errors";
|
||||
import { AUTH_TYPE } from "@/lib/env-config";
|
||||
|
|
@ -120,11 +121,13 @@ export function LocalLoginForm() {
|
|||
<p className="text-sm font-semibold mb-1">{error.title}</p>
|
||||
<p className="text-sm text-destructive">{error.message}</p>
|
||||
</div>
|
||||
<button
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => {
|
||||
setError({ title: null, message: null });
|
||||
}}
|
||||
className="flex-shrink-0 text-destructive hover:text-destructive/90 transition-colors"
|
||||
className="size-6 flex-shrink-0 text-destructive hover:bg-transparent hover:text-destructive/90"
|
||||
aria-label="Dismiss error"
|
||||
type="button"
|
||||
>
|
||||
|
|
@ -143,7 +146,7 @@ export function LocalLoginForm() {
|
|||
<line x1="18" y1="6" x2="6" y2="18" />
|
||||
<line x1="6" y1="6" x2="18" y2="18" />
|
||||
</svg>
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
|
@ -191,21 +194,23 @@ export function LocalLoginForm() {
|
|||
}`}
|
||||
disabled={isLoggingIn}
|
||||
/>
|
||||
<button
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => setShowPassword((prev) => !prev)}
|
||||
className="absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground hover:text-foreground"
|
||||
className="absolute inset-y-0 right-0 h-full w-10 text-muted-foreground hover:bg-transparent hover:text-foreground"
|
||||
aria-label={showPassword ? t("hide_password") : t("show_password")}
|
||||
>
|
||||
{showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={isLoggingIn}
|
||||
className="relative w-full rounded-md bg-primary px-4 py-1.5 md:py-2 text-primary-foreground shadow-sm hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-primary 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 h-auto w-full px-4 py-1.5 text-sm md:py-2 md:text-base"
|
||||
>
|
||||
<span className={isLoggingIn ? "invisible" : ""}>{t("sign_in")}</span>
|
||||
{isLoggingIn && (
|
||||
|
|
@ -213,7 +218,7 @@ export function LocalLoginForm() {
|
|||
<Spinner size="sm" className="text-primary-foreground" />
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
{authType === "LOCAL" && (
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import { useTranslations } from "next-intl";
|
|||
import { Suspense, useEffect, useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { Logo } from "@/components/Logo";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useGlobalLoadingEffect } from "@/hooks/use-global-loading";
|
||||
import { getAuthErrorDetails, shouldRetry } from "@/lib/auth-errors";
|
||||
import { setRedirectPath } from "@/lib/auth-utils";
|
||||
|
|
@ -154,10 +155,12 @@ function LoginContent() {
|
|||
<p className="text-sm font-semibold mb-1">{urlError.title}</p>
|
||||
<p className="text-sm text-red-700 dark:text-red-300">{urlError.message}</p>
|
||||
</div>
|
||||
<button
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => setUrlError(null)}
|
||||
className="flex-shrink-0 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-200 transition-colors"
|
||||
className="size-6 flex-shrink-0 text-red-500 hover:bg-transparent hover:text-red-700 dark:text-red-400 dark:hover:text-red-200"
|
||||
aria-label="Dismiss error"
|
||||
>
|
||||
<svg
|
||||
|
|
@ -175,7 +178,7 @@ function LoginContent() {
|
|||
<line x1="18" y1="6" x2="6" y2="18" />
|
||||
<line x1="6" y1="6" x2="18" y2="18" />
|
||||
</svg>
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ import { useEffect, useState } from "react";
|
|||
import { type ExternalToast, toast } from "sonner";
|
||||
import { registerMutationAtom } from "@/atoms/auth/auth-mutation.atoms";
|
||||
import { Logo } from "@/components/Logo";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Spinner } from "@/components/ui/spinner";
|
||||
import { getAuthErrorDetails, isNetworkError, shouldRetry } from "@/lib/auth-errors";
|
||||
import { getBearerToken } from "@/lib/auth-utils";
|
||||
|
|
@ -199,11 +200,13 @@ export default function RegisterPage() {
|
|||
<p className="text-sm font-semibold mb-1">{error.title}</p>
|
||||
<p className="text-sm text-red-700 dark:text-red-300">{error.message}</p>
|
||||
</div>
|
||||
<button
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => {
|
||||
setError({ title: null, message: null });
|
||||
}}
|
||||
className="flex-shrink-0 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-200 transition-colors"
|
||||
className="size-6 flex-shrink-0 text-red-500 hover:bg-transparent hover:text-red-700 dark:text-red-400 dark:hover:text-red-200"
|
||||
aria-label="Dismiss error"
|
||||
type="button"
|
||||
>
|
||||
|
|
@ -222,7 +225,7 @@ export default function RegisterPage() {
|
|||
<line x1="18" y1="6" x2="6" y2="18" />
|
||||
<line x1="6" y1="6" x2="18" y2="18" />
|
||||
</svg>
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
|
@ -295,18 +298,18 @@ export default function RegisterPage() {
|
|||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={isRegistering}
|
||||
className="relative w-full rounded-md bg-primary px-4 py-1.5 md:py-2 text-primary-foreground shadow-sm hover:bg-primary/90 focus:outline-none focus:ring-1 focus:ring-primary/40 disabled:cursor-not-allowed disabled:opacity-50 transition-all text-sm md:text-base flex items-center justify-center gap-2"
|
||||
className="relative h-auto w-full px-4 py-1.5 text-sm md:py-2 md:text-base"
|
||||
>
|
||||
<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-primary-foreground" />
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
<div className="mt-4 text-center text-sm">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue