fix: color scheme in keycloak templates (wundergraph#279)

keycloak/theme/src/main/resources/theme/cosmo/login/info.ftl

@@ -13,15 +13,15 @@
         <#else>
             <#if pageRedirectUri?has_content>
                 <a href="${pageRedirectUri}"
-                    class="mt-4 flex h-10 w-full text-base justify-center items-center space-x-3 rounded-md border font-semibold focus:outline-none focus:ring-2 focus:ring-sky-900 transition disabled:cursor-not-allowed text-white bg-sky-600 border-sky-500 hover:bg-sky-500 hover:border-sky-400 hover:no-underline hover:text-white"
+                    class="mt-4 flex h-10 w-full text-base justify-center items-center space-x-3 rounded-md border font-semibold focus:outline-none focus:ring-2 focus:ring-pink-900 transition disabled:cursor-not-allowed text-white bg-pink-600 border-pink-500 hover:bg-pink-500 hover:border-pink-400 hover:no-underline hover:text-white"
                     role="button">&laquo; Back to Application</a>
             <#elseif actionUri?has_content>
                 <a href="${actionUri}"
-                    class="mt-4 flex h-10 w-full text-base justify-center items-center space-x-3 rounded-md border font-semibold focus:outline-none focus:ring-2 focus:ring-sky-900 transition disabled:cursor-not-allowed text-white bg-sky-600 border-sky-500 hover:bg-sky-500 hover:border-sky-400 hover:no-underline hover:text-white"
+                    class="mt-4 flex h-10 w-full text-base justify-center items-center space-x-3 rounded-md border font-semibold focus:outline-none focus:ring-2 focus:ring-pink-900 transition disabled:cursor-not-allowed text-white bg-pink-600 border-pink-500 hover:bg-pink-500 hover:border-pink-400 hover:no-underline hover:text-white"
                     role="button">${kcSanitize(msg("proceedWithAction"))?no_esc}</a>
             <#else>
                 <a href="${properties.logoUrl}"
-                    class="mt-4 flex h-10 w-full text-base justify-center items-center space-x-3 rounded-md border font-semibold focus:outline-none focus:ring-2 focus:ring-sky-900 transition disabled:cursor-not-allowed text-white bg-sky-600 border-sky-500 hover:bg-sky-500 hover:border-sky-400 hover:no-underline hover:text-white"
+                    class="mt-4 flex h-10 w-full text-base justify-center items-center space-x-3 rounded-md border font-semibold focus:outline-none focus:ring-2 focus:ring-pink-900 transition disabled:cursor-not-allowed text-white bg-pink-600 border-pink-500 hover:bg-pink-500 hover:border-pink-400 hover:no-underline hover:text-white"
                     role="button">${msg("backToApplication")}</a>
             </#if>
         </#if>

keycloak/theme/src/main/resources/theme/cosmo/login/layout-cloud-iam.ftl

@@ -42,7 +42,13 @@
         <div class="${properties.kcFormCardClass!}">
             <div id="kc-header" class="${properties.kcHeaderClass!}">
                 <div id="kc-header-wrapper"
-                     class="${properties.kcHeaderWrapperClass!}">${kcSanitize(msg("loginTitleHtml",(realm.displayNameHtml!'')))?no_esc}</div>
+                     class="${properties.kcHeaderWrapperClass!}">
+                     <div class="logo">
+                        <img id="kc-header-logo" class="${properties.kcHeaderLogoClass!}"
+                         src="${url.resourcesPath}/img/logo-dark.svg" alt="${msg("loginTitle",(realm.displayName!''))}"/>
+                        <span>${kcSanitize(msg("loginTitleHtml",(realm.displayNameHtml!'')))?no_esc}</span>
+                     </div>
+                </div>
             </div>
             <header class="${properties.kcFormHeaderClass!}">
                 <#if realm.internationalizationEnabled  && locale.supported?size gt 1>

keycloak/theme/src/main/resources/theme/cosmo/login/login-idp-link-confirm.ftl

@@ -5,8 +5,8 @@
     <#elseif section = "form">
         <form id="kc-register-form" action="${url.loginAction}" method="post">
             <div id="kc-form-buttons" class="flex flex-col gap-y-4">
-                <button type="submit" class="flex h-10 w-full text-base justify-center items-center space-x-3 rounded-md border font-semibold focus:outline-none focus:ring-2 focus:ring-sky-900 transition disabled:cursor-not-allowed text-white bg-sky-600 border-sky-500 hover:bg-sky-500 hover:border-sky-400" name="submitAction" id="linkAccount" value="linkAccount">${msg("confirmLinkIdpContinue", idpDisplayName)}</button>
-                <button type="submit" class="flex h-10 w-full text-base justify-center items-center space-x-3 rounded-md border font-semibold focus:outline-none focus:ring-2 focus:ring-sky-900 transition disabled:cursor-not-allowed text-white bg-sky-600 border-sky-500 hover:bg-sky-500 hover:border-sky-400" name="submitAction" id="updateProfile" value="updateProfile">${msg("confirmLinkIdpReviewProfile")}
+                <button type="submit" class="flex h-10 w-full text-base justify-center items-center space-x-3 rounded-md border font-semibold focus:outline-none focus:ring-2 focus:ring-pink-900 transition disabled:cursor-not-allowed text-white bg-pink-600 border-pink-500 hover:bg-pink-500 hover:border-pink-400" name="submitAction" id="linkAccount" value="linkAccount">${msg("confirmLinkIdpContinue", idpDisplayName)}</button>
+                <button type="submit" class="flex h-10 w-full text-base justify-center items-center space-x-3 rounded-md border font-semibold focus:outline-none focus:ring-2 focus:ring-pink-900 transition disabled:cursor-not-allowed text-white bg-pink-600 border-pink-500 hover:bg-pink-500 hover:border-pink-400" name="submitAction" id="updateProfile" value="updateProfile">${msg("confirmLinkIdpReviewProfile")}
                 </button>
             </div>
         </form>

keycloak/theme/src/main/resources/theme/cosmo/login/login-oauth-grant.ftl

@@ -33,8 +33,8 @@
             <form class="form-actions" action="${url.oauthAction}" method="POST">
                 <input type="hidden" name="code" value="${oauth.code}">
                 <div id="kc-form-buttons" class="flex gap-x-2 my-4">
-                    <input tabindex="4" class="flex h-10 w-full text-base justify-center items-center space-x-3 rounded-md border font-semibold focus:outline-none focus:ring-2 focus:ring-sky-900 transition disabled:cursor-not-allowed text-white bg-sky-600 border-sky-500 hover:bg-sky-500 hover:border-sky-400" name="accept" id="kc-login" type="submit" value="${msg("doYes")}"/>
-                    <input tabindex="4" class="flex h-10 w-full text-base justify-center items-center space-x-3 rounded-md border font-semibold focus:outline-none focus:ring-2 focus:ring-sky-900 transition disabled:cursor-not-allowed text-white bg-sky-600 border-sky-500 hover:bg-sky-500 hover:border-sky-400" name="cancel" id="kc-cancel" type="submit" value="${msg("doNo")}"/>
+                    <input tabindex="4" class="flex h-10 w-full text-base justify-center items-center space-x-3 rounded-md border font-semibold focus:outline-none focus:ring-2 focus:ring-pink-900 transition disabled:cursor-not-allowed text-white bg-pink-600 border-pink-500 hover:bg-pink-500 hover:border-pink-400" name="accept" id="kc-login" type="submit" value="${msg("doYes")}"/>
+                    <input tabindex="4" class="flex h-10 w-full text-base justify-center items-center space-x-3 rounded-md border font-semibold focus:outline-none focus:ring-2 focus:ring-pink-900 transition disabled:cursor-not-allowed text-white bg-pink-600 border-pink-500 hover:bg-pink-500 hover:border-pink-400" name="cancel" id="kc-cancel" type="submit" value="${msg("doNo")}"/>
                 </div>
             </form>
             <div class="clearfix"></div>

keycloak/theme/src/main/resources/theme/cosmo/login/login.ftl

@@ -18,7 +18,6 @@
                     </#list>
                 </div>
             </#if>
-            <hr class="border-gray-700 my-8"/>
             <div id="kc-form-wrapper">
                 <#if realm.password>
                     <form id="kc-form-login" onsubmit="login.disabled = true; return true;" action="${url.loginAction}"
@@ -82,7 +81,7 @@
                             <input type="hidden" id="id-hidden-input" name="credentialId"
                                    <#if auth.selectedCredential?has_content>value="${auth.selectedCredential}"</#if>/>
                             <input tabindex="4"
-                                   class="flex h-10 w-full text-base justify-center items-center space-x-3 rounded-md border font-semibold focus:outline-none focus:ring-2 focus:ring-sky-900 transition disabled:cursor-not-allowed text-white bg-sky-600 border-sky-500 hover:bg-sky-500 hover:border-sky-400"
+                                   class="flex h-10 w-full text-base justify-center items-center space-x-3 rounded-md border font-semibold focus:outline-none focus:ring-2 focus:ring-pink-900 transition disabled:cursor-not-allowed text-white bg-pink-600 border-pink-500 hover:bg-pink-500 hover:border-pink-400"
                                    name="login" id="kc-login" type="submit" value="${msg("doLogIn")}"/>
                         </div>
                     </form>

keycloak/theme/src/main/resources/theme/cosmo/login/messages/messages_en.properties

@@ -1,5 +1,5 @@
 doRegister=Sign Up
 termsText=<p>Thank you for using WunderGraph Cosmo! We''re happy you''re here.<br/><br/>Please read our <a href="https://cosmo.wundergraph.com/cosmo-managed-solution-terms" target="_blank">Terms of Use </a> and <a href="https://wundergraph.com/privacy-policy" target="_blank">Privacy Policy</a> carefully before accessing or using WunderGraph Cosmo. By proceeding, you are agreeing to these terms.</p>
-loginAccountTitle= Sign in to Cosmo
+loginAccountTitle= Sign in
 emailInstruction=Enter your email address and we will send you instructions on how to create a new password.
 oauthGrantRequest=Do you want to grant access to cosmo-cli?

keycloak/theme/src/main/resources/theme/cosmo/login/register.ftl

@@ -131,7 +131,7 @@
 
             <div class="col-span-full space-y-8">
                 <div id="kc-form-buttons">
-                    <input class="flex h-10 w-full text-base justify-center items-center space-x-3 rounded-md border font-semibold focus:outline-none focus:ring-2 focus:ring-sky-900 transition disabled:cursor-not-allowed text-white bg-sky-600 border-sky-500 hover:bg-sky-500 hover:border-sky-400"
+                    <input class="flex h-10 w-full text-base justify-center items-center space-x-3 rounded-md border font-semibold focus:outline-none focus:ring-2 focus:ring-pink-900 transition disabled:cursor-not-allowed text-white bg-pink-600 border-pink-500 hover:bg-pink-500 hover:border-pink-400"
                            type="submit" value="${msg("doRegister")}"/>
                 </div>
                 <div id="kc-form-options">