feat: integrate shadcn/ui with Tailwind v4

src/login/pages/QrLoginScan.tsx

@@ -2,10 +2,9 @@ import { useEffect, useRef, useState } from "react";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "../KcContext";
 import type { I18n } from "../i18n";
+import { Button } from "@/components/ui/button";
 
-export default function QrLoginScan(
-    props: PageProps<Extract<KcContext, { pageId: "qr-login-scan.ftl" }>, I18n>
-) {
+export default function QrLoginScan(props: PageProps<Extract<KcContext, { pageId: "qr-login-scan.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
     const { url, QRauthImage, QRauthExecId, QRauthToken, tabId, alignment, ShortCode, ShortCodeLink, refreshRate = 15 } = kcContext;
 
@@ -73,8 +72,9 @@ export default function QrLoginScan(
 
                 {ShortCode && (
                     <p id="com-hadleyso-qr-auth-short-zone" className="kcQrShortCodeZone">
-                        <a
-                            href="#"
+                        <Button
+                            variant="link"
+                            size="sm"
                             id="com-hadleyso-qr-auth-short-start"
                             onClick={event => {
                                 setShowShortCode(true);
@@ -82,9 +82,11 @@ export default function QrLoginScan(
                             }}
                         >
                             {msg("CannotScan")}
-                        </a>{" "}
+                        </Button>{" "}
                         |{" "}
-                        <a href={ShortCodeLink}>{msg("UseShortCode")}</a>
+                        <Button variant="link" size="sm" asChild>
+                            <a href={ShortCodeLink}>{msg("UseShortCode")}</a>
+                        </Button>
                     </p>
                 )}
 
@@ -105,11 +107,9 @@ export default function QrLoginScan(
                     method="post"
                 >
                     <input type="hidden" name="authenticationExecution" value={QRauthExecId ?? ""} />
-                    <input
-                        type="submit"
-                        value={msgStr("doLogIn")}
-                        className={`${classes?.kcButtonClass ?? ""} ${classes?.kcButtonPrimaryClass ?? ""} ${classes?.kcButtonLargeClass ?? ""}`}
-                    />
+                    <Button type="submit" size="lg">
+                        {msgStr("doLogIn")}
+                    </Button>
                 </form>
             </div>
         </Template>