Added custom radius, tweaked design to look more like website.

src/login/Template.tsx

@@ -104,7 +104,8 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
                 token: {
                     colorPrimary: "rgba(212, 0, 255, 1)",
                     colorLink: "#6E00FF",
-                    colorLinkHover: "#b175ff"
+                    colorLinkHover: "#b175ff",
+                    borderRadius: 15
                 },
                 algorithm: darkMode ? theme.darkAlgorithm : theme.defaultAlgorithm
             }}
@@ -119,17 +120,19 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
                 <Content
                     style={{
                         background: "#f5f5f5",
-                        display: "flex",
+             
-                        alignItems: "center",
-                        justifyContent: "center"
                     }}
-                ><Card style={{ borderRadius: isMobile ? "0px" : "20px", width: isMobile ? "100vw" : "500px", zIndex: 1, height: isMobile ? "100vh" : "unset", padding: "40px", boxShadow: "0px 5px 15px 5px rgb(0 0 0 / 25%)", paddingRight: "20px"
+
+                >
+                    <Flex vertical align="center" justify="center" style={{width: '100vw', height: "var(--unit-100vh)"}} gap={'50px'}>
+                    {!isMobile && <img src="https://cdn.tombutcher.work/logos/logo-horizontal.svg" alt="Logo" style={{ height: "65px", padding: "0 30px", zIndex: 1 }} /> }
+                    <Card style={{ borderRadius: isMobile ? "0px" : "20px", width: isMobile ? "100vw" : "450px", zIndex: 1, height: isMobile ? "100vh" : "unset", padding: "30px 15px", boxShadow: "0px 5px 15px 5px rgb(0 0 0 / 10%)",
                         }} variant="borderless" styles={{body: {
                             padding: 0
                         }}}><div style={{ height: "100%" }}>
-                        <div style={{height: "100%", marginRight: "20px"}}>
+                        <div style={{height: "100%", margin: "0 15px"}}>
+                           {isMobile && <><img src="https://cdn.tombutcher.work/logos/logo-auth.png" alt="Logo" style={{ width: "70%", margin: "0" }} /> <Divider style={{ margin: "24px 0" }} /></>}
                             
-                            <img src="https://cdn.tombutcher.work/logos/logo-auth-horizontal.png" alt="Logo" style={{ width: "100%", margin: "0" }} /> <Divider style={{ margin: "24px 0" }} />
                          
                             
 
@@ -165,14 +168,15 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
 
                                     if (displayRequiredFields) {
                                         return (
-                                            <div>
+                                            <>
+                                                
+                                                {node}
                                                 <div style={{ marginBottom: "12px" }}>
                                                     <Text type="secondary">
                                                         <span style={{ color: "#ff4d4f" }}>*</span> {msg("requiredFields")}
                                                     </Text>
                                                 </div>
-                                                {node}
+                                            </>
-                                            </div>
                                         );
                                     }
 
@@ -198,7 +202,7 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
                                 />
                             )}
                         </div>
-                        <div style={{ overflowY: "auto", height: isMobile ? "100%" : "unset", maxHeight: isMobile ? "100%" : "calc(100vh / 2.25)",  paddingRight: "20px" }}>
+                        <div style={{ overflowY: "auto", height: isMobile ? "100%" : "unset", maxHeight: isMobile ? "100%" : "calc(100vh / 2.25)",  padding: "0 15px" }}>
                             {children}
                             {auth !== undefined && auth.showTryAnotherWayLink && (
                                 <form id="kc-select-try-another-way-form" action={url.loginAction} method="post">
@@ -220,7 +224,7 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
                         </div>
 
                         {enabledLanguages.length > 1 && (
-                            <div style={{ marginRight: "20px"}}>
+                            <div style={{ margin: "0 15px"}}>
                                 <Divider style={{ margin: "24px 0" }} />
                                 <Dropdown menu={languageItems} trigger={["click"]}>
                                     <Button style={{ width: "100%", textAlign: "left" }}>
@@ -232,7 +236,7 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
                                 </Dropdown>
                             </div>
                         )}
-                    </div></Card></Content>
+                    </div></Card></Flex></Content>
             </Layout>
         </ConfigProvider>
     );

src/login/custom.css

@@ -124,7 +124,6 @@ a.ant-typography,
     border-style: solid;
     border-color: #d9d9d9;
     padding: 4px 11px;
-    border-radius: 6px;
     transition: all 0.2s;
     line-height: 1.5714285714285714;
     border-width: 1px;
@@ -213,3 +212,7 @@ input:-webkit-autofill:active {
     z-index: 2;
     position: fixed;
 }
+
+.ant-alert {
+    margin-bottom: 5px;
+}

src/login/fonts.css

@@ -282,7 +282,7 @@ h2 span * {
     font-family: "Grold-Rounded-Slim" !important;
     text-transform: uppercase;
     font-weight: 700;
-    font-size: 38px;
+    font-size: 40px;
     line-height: 0.9px;
     letter-spacing: 0.02em;
 }

src/login/pages/FrontchannelLogout.tsx

@@ -31,6 +31,7 @@ export default function FrontchannelLogout(props: PageProps<Extract<KcContext, {
 
                 <List
                     dataSource={logout.clients}
+                    bordered
                     renderItem={client => (
                         <List.Item>
                             <Typography.Text>{client.name}</Typography.Text>

src/login/pages/SamlPostForm.tsx

@@ -5,7 +5,7 @@ import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "../KcContext";
 import type { I18n } from "../i18n";
 
-const { Paragraph } = Typography;
+const { Text } = Typography;
 
 export default function SamlPostForm(props: PageProps<Extract<KcContext, { pageId: "saml-post-form.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
@@ -38,10 +38,10 @@ export default function SamlPostForm(props: PageProps<Extract<KcContext, { pageI
 
     return (
         <Template kcContext={kcContext} i18n={i18n} doUseDefaultCss={doUseDefaultCss} classes={classes} headerNode={msg("saml.post-form.title")}>
-            <Flex align="middle" justify="start" style={{ marginBottom: 24 }} gap={"middle"}>
+            <Flex align="middle" justify="start" gap={"middle"}>
                 <Spin indicator={antIcon} />
 
-                <Paragraph style={{ margin: 0 }}>{msg("saml.post-form.message")}</Paragraph>
+                <Text style={{ margin: 0 }}>{msg("saml.post-form.message")}</Text>
             </Flex>
 
             <form name="saml-post-binding" method="post" action={samlPost.url} ref={setHtmlFormElement} style={{ display: "none" }}>
@@ -49,7 +49,7 @@ export default function SamlPostForm(props: PageProps<Extract<KcContext, { pageI
                 {samlPost.SAMLResponse && <input type="hidden" name="SAMLResponse" value={samlPost.SAMLResponse} />}
                 {samlPost.relayState && <input type="hidden" name="RelayState" value={samlPost.relayState} />}
                 <noscript>
-                    <Paragraph>{msg("saml.post-form.js-disabled")}</Paragraph>
+                    <Text>{msg("saml.post-form.js-disabled")}</Text>
                     <input type="submit" value={msgStr("doContinue")} />
                 </noscript>
             </form>

src/login/pages/SelectAuthenticator.tsx

@@ -38,11 +38,12 @@ export default function SelectAuthenticator(props: PageProps<Extract<KcContext,
                 <List
                     dataSource={auth.authenticationSelections}
                     itemLayout="horizontal"
+                    bordered
                     renderItem={authenticationSelection => (
                         <List.Item
                             style={{
                                 padding: 0,
-                                borderBottom: "none"
+            
                             }}
                         >
                             <Button

src/login/pages/WebauthnAuthenticate.tsx

@@ -78,7 +78,7 @@ export default function WebauthnAuthenticate(props: PageProps<Extract<KcContext,
                             <Title level={3}>{msg("webauthn-login-title")}</Title>
                         </Space>
                     ) : (
-                        null
+                        <Title level={3}>{msg("webauthn-login-title")}</Title>
                     )}
                 </>
             }