feat: refactor button imports and usage across forms and pages for consistency
This commit is contained in:
parent
089640c4e1
commit
56402a374d
7 changed files with 42 additions and 56 deletions
|
|
@ -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}
|
|
||||||
rel="noreferrer"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
<Navigation className="size-4" />
|
<Navigation className="size-4" />
|
||||||
<span>{t.contatto.apri_nav}</span>
|
<span>{t.contatto.apri_nav}</span>
|
||||||
</a>
|
</Button>
|
||||||
|
</Link>
|
||||||
)}
|
)}
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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"
|
||||||
>
|
>
|
||||||
|
|
|
||||||
|
|
@ -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"
|
||||||
>
|
>
|
||||||
|
|
|
||||||
|
|
@ -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"
|
||||||
>
|
>
|
||||||
|
|
|
||||||
|
|
@ -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"
|
||||||
>
|
>
|
||||||
|
|
|
||||||
|
|
@ -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"
|
||||||
>
|
>
|
||||||
|
|
|
||||||
|
|
@ -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}
|
{t.acquisto_elaborazione.to_dashboard}
|
||||||
|
</Button>
|
||||||
</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}
|
{t.acquisto_elaborazione.to_chat}
|
||||||
|
</Button>
|
||||||
</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}
|
{t.acquisto_elaborazione.to_chat}
|
||||||
|
</Button>
|
||||||
</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}
|
{t.acquisto_elaborazione.to_chat}
|
||||||
|
</Button>
|
||||||
</Link>
|
</Link>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue