feat: refactor button imports and usage across forms and pages for consistency

This commit is contained in:
Marco Pedone 2026-03-18 18:01:02 +01:00
parent 089640c4e1
commit 56402a374d
7 changed files with 42 additions and 56 deletions

View file

@ -2,7 +2,6 @@ import { CircleUser, Navigation, Phone, TriangleAlert } from "lucide-react";
import Link from "next/link"; import Link from "next/link";
import { useMemo, useState } from "react"; import { useMemo, useState } from "react";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
import { cn } from "~/lib/utils";
import { useTranslation } from "~/providers/I18nProvider"; import { useTranslation } from "~/providers/I18nProvider";
import { useServizio, useServizioAnnuncio } from "~/providers/ServizioProvider"; import { useServizio, useServizioAnnuncio } from "~/providers/ServizioProvider";
import type { UsersStorageUserStorageId } from "~/schemas/public/UsersStorage"; import type { UsersStorageUserStorageId } from "~/schemas/public/UsersStorage";
@ -21,7 +20,7 @@ import {
} from "../custom_ui/credenza"; } from "../custom_ui/credenza";
import { LoadingPage } from "../loading"; import { LoadingPage } from "../loading";
import { WhatsAppIcon2 } from "../svgs"; import { WhatsAppIcon2 } from "../svgs";
import { Button, buttonVariants } from "../ui/button"; import { Button } from "../ui/button";
export const ContattiProprietarioModal = () => { export const ContattiProprietarioModal = () => {
const { servizio } = useServizio(); const { servizio } = useServizio();
@ -343,15 +342,12 @@ const PostUnlock = () => {
{propData.comune} ({propData.provincia}) {propData.comune} ({propData.provincia})
</p> </p>
{navigationUrl && ( {navigationUrl && (
<a <Link href={navigationUrl} rel="noreferrer" target="_blank">
className={cn(buttonVariants({ variant: "info" }))} <Button variant="info">
href={navigationUrl} <Navigation className="size-4" />
rel="noreferrer" <span>{t.contatto.apri_nav}</span>
target="_blank" </Button>
> </Link>
<Navigation className="size-4" />
<span>{t.contatto.apri_nav}</span>
</a>
)} )}
</section> </section>

View file

@ -149,7 +149,7 @@ export const ChangePasswordForm = () => {
aria-controls="password" aria-controls="password"
aria-label={isVisible ? "Hide password" : "Show password"} aria-label={isVisible ? "Hide password" : "Show password"}
aria-pressed={isVisible} aria-pressed={isVisible}
className="absolute end-0 top-1 flex size-9 items-center justify-center rounded-e-lg text-muted-foreground/80 transition-shadow hover:text-foreground focus-visible:border focus-visible:border-ring focus-visible:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50" className="absolute end-0 top-1 flex size-9 cursor-pointer items-center justify-center rounded-e-lg text-muted-foreground/80 transition-shadow hover:text-foreground focus-visible:border focus-visible:border-ring focus-visible:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
onClick={toggleVisibility} onClick={toggleVisibility}
type="button" type="button"
> >

View file

@ -10,7 +10,7 @@ import {
FormMessage, FormMessage,
} from "~/components/custom_ui/form"; } from "~/components/custom_ui/form";
import { PhoneInput } from "~/components/phone-input"; import { PhoneInput } from "~/components/phone-input";
import { Button, buttonVariants } from "~/components/ui/button"; import { Button } from "~/components/ui/button";
import Input from "~/components/ui/input"; import Input from "~/components/ui/input";
import { useStrongPassword } from "~/hooks/useStrongPassword"; import { useStrongPassword } from "~/hooks/useStrongPassword";
import { generatePassword } from "~/lib/basicPwGenerator"; import { generatePassword } from "~/lib/basicPwGenerator";
@ -152,21 +152,18 @@ export const FormNewUser = ({
<FormLabel htmlFor="password"> <FormLabel htmlFor="password">
{t.auth.signup.password} {t.auth.signup.password}
</FormLabel>{" "} </FormLabel>{" "}
<button <Button
className={cn( className="bg-card"
buttonVariants({
size: "sm",
variant: "outline",
}),
)}
onClick={async () => { onClick={async () => {
form.setValue("password", generatePassword()); form.setValue("password", generatePassword());
await form.trigger("password"); await form.trigger("password");
}} }}
size="sm"
type="button" type="button"
variant="outline"
> >
genera password genera password
</button> </Button>
</div> </div>
<FormMessage <FormMessage
@ -197,7 +194,7 @@ export const FormNewUser = ({
aria-controls="password" aria-controls="password"
aria-label={isVisible ? "Hide password" : "Show password"} aria-label={isVisible ? "Hide password" : "Show password"}
aria-pressed={isVisible} aria-pressed={isVisible}
className="absolute end-0 top-1 flex size-9 items-center justify-center rounded-e-lg text-muted-foreground/80 transition-shadow hover:text-foreground focus-visible:border focus-visible:border-ring focus-visible:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50" className="absolute end-0 top-1 flex size-9 cursor-pointer items-center justify-center rounded-e-lg text-muted-foreground/80 transition-shadow hover:text-foreground focus-visible:border focus-visible:border-ring focus-visible:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
onClick={toggleVisibility} onClick={toggleVisibility}
type="button" type="button"
> >

View file

@ -10,7 +10,7 @@ import {
FormLabel, FormLabel,
FormMessage, FormMessage,
} from "~/components/custom_ui/form"; } from "~/components/custom_ui/form";
import { Button, buttonVariants } from "~/components/ui/button"; import { Button } from "~/components/ui/button";
import { import {
Dialog, Dialog,
DialogContent, DialogContent,
@ -150,21 +150,18 @@ export const OverridePasswordForm = ({ id }: { id: UsersId }) => {
<FormLabel htmlFor="password"> <FormLabel htmlFor="password">
{t.auth.signup.password} {t.auth.signup.password}
</FormLabel>{" "} </FormLabel>{" "}
<button <Button
className={cn( className="bg-card"
buttonVariants({
size: "sm",
variant: "outline",
}),
)}
onClick={async () => { onClick={async () => {
form.setValue("password", generatePassword()); form.setValue("password", generatePassword());
await form.trigger("password"); await form.trigger("password");
}} }}
size="sm"
type="button" type="button"
variant="outline"
> >
genera password genera password
</button> </Button>
</div> </div>
<FormMessage <FormMessage
@ -194,7 +191,7 @@ export const OverridePasswordForm = ({ id }: { id: UsersId }) => {
aria-controls="password" aria-controls="password"
aria-label={isVisible ? "Hide password" : "Show password"} aria-label={isVisible ? "Hide password" : "Show password"}
aria-pressed={isVisible} aria-pressed={isVisible}
className="absolute end-0 top-1 flex size-9 items-center justify-center rounded-e-lg text-muted-foreground/80 transition-shadow hover:text-foreground focus-visible:border focus-visible:border-ring focus-visible:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50" className="absolute end-0 top-1 flex size-9 cursor-pointer items-center justify-center rounded-e-lg text-muted-foreground/80 transition-shadow hover:text-foreground focus-visible:border focus-visible:border-ring focus-visible:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
onClick={toggleVisibility} onClick={toggleVisibility}
type="button" type="button"
> >

View file

@ -152,7 +152,7 @@ export const FormRstPwFromToken = (props: { token: string }) => {
aria-controls="password" aria-controls="password"
aria-label={isVisible ? "Hide password" : "Show password"} aria-label={isVisible ? "Hide password" : "Show password"}
aria-pressed={isVisible} aria-pressed={isVisible}
className="absolute end-0 top-1 flex size-9 items-center justify-center rounded-e-lg text-muted-foreground/80 transition-shadow hover:text-foreground focus-visible:border focus-visible:border-ring focus-visible:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50" className="absolute end-0 top-1 flex size-9 cursor-pointer items-center justify-center rounded-e-lg text-muted-foreground/80 transition-shadow hover:text-foreground focus-visible:border focus-visible:border-ring focus-visible:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
onClick={toggleVisibility} onClick={toggleVisibility}
type="button" type="button"
> >

View file

@ -154,7 +154,7 @@ const AcceptInvitePage: NextPageWithLayout<InviteTokenProps> = ({
aria-controls="password" aria-controls="password"
aria-label={isVisible ? "Hide password" : "Show password"} aria-label={isVisible ? "Hide password" : "Show password"}
aria-pressed={isVisible} aria-pressed={isVisible}
className="absolute end-0 top-1 flex size-9 items-center justify-center rounded-e-lg text-muted-foreground/80 transition-shadow hover:text-foreground focus-visible:border focus-visible:border-ring focus-visible:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50" className="absolute end-0 top-1 flex size-9 cursor-pointer items-center justify-center rounded-e-lg text-muted-foreground/80 transition-shadow hover:text-foreground focus-visible:border focus-visible:border-ring focus-visible:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
onClick={toggleVisibility} onClick={toggleVisibility}
type="button" type="button"
> >

View file

@ -4,9 +4,9 @@ import Link from "next/link";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import PaymentStatus from "~/components/payment_status"; import PaymentStatus from "~/components/payment_status";
import { ProgressRedirect } from "~/components/progress_redirect"; import { ProgressRedirect } from "~/components/progress_redirect";
import { Button, buttonVariants } from "~/components/ui/button"; import { Button } from "~/components/ui/button";
import stripe from "~/lib/stripe"; import stripe from "~/lib/stripe";
import { cn, redirectTo500 } from "~/lib/utils"; import { redirectTo500 } from "~/lib/utils";
import { useTranslation } from "~/providers/I18nProvider"; import { useTranslation } from "~/providers/I18nProvider";
import OrderTypeEnum from "~/schemas/public/OrderTypeEnum"; import OrderTypeEnum from "~/schemas/public/OrderTypeEnum";
import PaymentStatusEnum from "~/schemas/public/PaymentStatusEnum"; import PaymentStatusEnum from "~/schemas/public/PaymentStatusEnum";
@ -120,11 +120,10 @@ export default function AcquistoProcessing({
status="processing" status="processing"
title={t.acquisto_elaborazione.processing_title} title={t.acquisto_elaborazione.processing_title}
/> />
<Link <Link href="/area-riservata/dashboard">
className={cn("w-full", buttonVariants({ variant: "info" }))} <Button className="w-full" variant="info">
href="/area-riservata/dashboard" {t.acquisto_elaborazione.to_dashboard}
> </Button>
{t.acquisto_elaborazione.to_dashboard}
</Link> </Link>
</> </>
)} )}
@ -135,11 +134,10 @@ export default function AcquistoProcessing({
status="error" status="error"
title={t.acquisto_elaborazione.failed_title} title={t.acquisto_elaborazione.failed_title}
/> />
<Link <Link href="/area-riservata/chat">
className={cn("w-full", buttonVariants({ variant: "default" }))} <Button className="w-full">
href="/area-riservata/chat" {t.acquisto_elaborazione.to_chat}
> </Button>
{t.acquisto_elaborazione.to_chat}
</Link> </Link>
</> </>
)} )}
@ -150,11 +148,10 @@ export default function AcquistoProcessing({
status="error" status="error"
title={t.acquisto_elaborazione.internal_error_title} title={t.acquisto_elaborazione.internal_error_title}
/> />
<Link <Link href="/area-riservata/chat">
className={cn("w-full", buttonVariants({ variant: "default" }))} <Button className="w-full">
href="/area-riservata/chat" {t.acquisto_elaborazione.to_chat}
> </Button>
{t.acquisto_elaborazione.to_chat}
</Link> </Link>
</> </>
)} )}
@ -173,11 +170,10 @@ export default function AcquistoProcessing({
<ArrowLeft /> <ArrowLeft />
{t.indietro} {t.indietro}
</Button> </Button>
<Link <Link href="/area-riservata/chat">
className={cn("w-full", buttonVariants({ variant: "default" }))} <Button className="w-full">
href="/area-riservata/chat" {t.acquisto_elaborazione.to_chat}
> </Button>
{t.acquisto_elaborazione.to_chat}
</Link> </Link>
</> </>
)} )}