feat: integrate shadcn/ui with Tailwind v4

src/login/pages/QrLoginVerify.tsx

@@ -1,10 +1,10 @@
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "../KcContext";
 import type { I18n } from "../i18n";
+import { Button } from "@/components/ui/button";
+import { Alert, AlertTitle } from "@/components/ui/alert";
 
-export default function QrLoginVerify(
-    props: PageProps<Extract<KcContext, { pageId: "qr-login-verify.ftl" }>, I18n>
-) {
+export default function QrLoginVerify(props: PageProps<Extract<KcContext, { pageId: "qr-login-verify.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
     const { ua_device, ua_os, ua_agent, local_localized, tabId, approveURL, rejectURL } = kcContext;
 
@@ -20,11 +20,13 @@ export default function QrLoginVerify(
             headerNode={msg("doQrCodeVerify")}
         >
             <div id="kc-qr-verify-form" className={classes?.kcFormClass}>
-                <p className="kcQrWarningClass">{msg("doQrCodeWarning")}</p>
+                <Alert variant="destructive" className="kcQrWarningClass mb-4">
+                    <AlertTitle>{msg("doQrCodeWarning")}</AlertTitle>
+                </Alert>
 
                 <p className="kcQrDeviceInfoClass">
-                    You are authorizing a session on a <b>{ua_device}</b> running <b>{ua_os}</b> / <b>{ua_agent}</b> in
-                    locale <b>{local_localized}</b>.
+                    You are authorizing a session on a <b>{ua_device}</b> running <b>{ua_os}</b> / <b>{ua_agent}</b> in locale{" "}
+                    <b>{local_localized}</b>.
                 </p>
 
                 {tabId && (
@@ -34,20 +36,12 @@ export default function QrLoginVerify(
                 )}
 
                 <div className="kcQrVerifyButtonsClass">
-                    <a
-                        href={approveURL}
-                        type="button"
-                        className={`${classes?.kcButtonClass ?? ""} ${classes?.kcButtonPrimaryClass ?? ""} ${classes?.kcButtonLargeClass ?? ""}`}
-                    >
-                        {msg("doAccept")}
-                    </a>
-                    <a
-                        href={rejectURL}
-                        type="button"
-                        className={`${classes?.kcButtonClass ?? ""} ${classes?.kcButtonDefaultClass ?? ""} ${classes?.kcButtonLargeClass ?? ""}`}
-                    >
-                        {msg("doDecline")}
-                    </a>
+                    <Button asChild size="lg">
+                        <a href={approveURL}>{msg("doAccept")}</a>
+                    </Button>
+                    <Button variant="secondary" asChild size="lg">
+                        <a href={rejectURL}>{msg("doDecline")}</a>
+                    </Button>
                 </div>
             </div>
         </Template>