Merge pull request #19 from Ilhasoft/fix/design-review

Fix/design review
weni-ai · Jan 7, 2022 · 0d299ba · 0d299ba
2 parents 1c2e96b + d5865f6
commit 0d299ba
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 6 deletions.
diff --git a/themes/ilhasoft/login/login-idp-link-confirm.ftl b/themes/ilhasoft/login/login-idp-link-confirm.ftl
@@ -0,0 +1,13 @@
+<#import "template.ftl" as layout>
+<@layout.registrationLayout; section>
+    <#if section = "header">
+        ${msg("confirmLinkIdpTitle")}
+    <#elseif section = "form">
+        <form id="kc-register-form" action="${url.loginAction}" method="post">
+            <div class="${properties.kcFormGroupClass!}">
+                <button type="submit" class="${properties.kcButtonClass!} ${properties.kcButtonSecondaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}" name="submitAction" id="updateProfile" value="updateProfile">${msg("confirmLinkIdpReviewProfile")}</button>
+                <button type="submit" class="${properties.kcButtonClass!} ${properties.kcButtonTertiaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}" name="submitAction" id="linkAccount" value="linkAccount">${msg("confirmLinkIdpContinue", idpDisplayName)}</button>
+            </div>
+        </form>
+    </#if>
+</@layout.registrationLayout>
diff --git a/themes/ilhasoft/login/register.ftl b/themes/ilhasoft/login/register.ftl
@@ -183,7 +183,7 @@
             </div>
 
             <div id="kc-info-wrapper" class="back-link">
-                <div class="terms-use"> ${msg("registerAcceptTerms")} <a href="${url.loginUrl}"> ${msg("termsOfUse")} </a> ${msg("and")} <a target="_blank" href="${properties.urlPrivacyPolicy!}"> ${msg("privacyPolicy")} </a> </div>
+                <div class="terms-use"> <span>${msg("registerAcceptTerms")}</span> <a href="${url.loginUrl}">${msg("termsOfUse")}</a> <span>${msg("and")}</span> <a target="_blank" href="${properties.urlPrivacyPolicy!}"> ${msg("privacyPolicy")} </a> </div>
 
                 <div class="back-to-login">
                     ${msg("alreadyAccount")}

diff --git a/themes/ilhasoft/login/resources/css/login.css b/themes/ilhasoft/login/resources/css/login.css
@@ -323,6 +323,39 @@ button, .btn, .bt-lg {
     cursor: not-allowed;
 }
 
+.btn-secondary {
+    background-color: rgba(#E2E6ED, 0.16);
+    color: var(--unnic-color-neutral-dark);
+    border: var(--unnic-border-width-thinner) solid var(--unnic-color-neutral-clean);
+}
+
+.btn-secondary:hover{
+    border: none;
+}
+
+.btn-secondary:disabled {
+    background-color: var(--unnic-color-neutral-light);
+    color: var(--unnic-color-neutral-cloudy);
+    border: var(--unnic-border-width-thinner) dashed var(--unnic-color-neutral-clean);
+}
+
+.btn-tertiary {
+    background-color: rgba(0,0,0,0);
+    color: var(--unnic-color-neutral-dark);
+}
+
+.btn-tertiary:hover{
+    border: var(--unnic-border-width-thinner) solid var(--unnic-color-neutral-soft);
+}
+
+.btn-tertiary:disabled {
+    background-color: var(--unnic-color-neutral-light);
+    color: var(--unnic-color-neutral-cloudy);
+}
+
+#kc-form-wrapper #kc-register-form .form-group .btn-tertiary{
+    margin-top: var(--unnic-spacing-stack-sm);
+}
 
 #separator-group {
     display: flex;
@@ -460,6 +493,10 @@ footer {
     line-height: 20px;
 }
 
+.input-message label {
+    color: var(--unnic-color-neutral-dark);
+}
+
 .remember-me {
     display: flex;
     align-items: center;
@@ -476,7 +513,7 @@ footer {
 }
 
 #kc-form-options .forgot-password a{
-    color: var(--unnic-color-neutral-darkest);
+    color: var(--unnic-color-neutral-dark);
     text-decoration: none;
     font-weight: var(--unnic-font-weight-normal);
 }
@@ -487,14 +524,17 @@ footer {
 
 .terms-use {
     line-height: 20px;
-    font-size: var(--unnic-font-size-body-md);
+    font-size: var(--unnic-font-size-body-gt);
     color: var(--unnic-color-neutral-cloudy);
     text-align: center;
+    text-align: justify;
+    text-align-last: center;
 }
 
 .terms-use a {
-    color: var(--unnic-color-neutral-cloudy);
-    font-weight: var(--unnic-font-weight-bold);
+    color: var(--unnic-color-neutral-cloudy) !important;
+    font-weight: var(--unnic-font-weight-bold) !important;
+    text-decoration: underline !important;
 }
 
 .input-control.error .icon {

diff --git a/themes/ilhasoft/login/resources/css/password-update.css b/themes/ilhasoft/login/resources/css/password-update.css
@@ -11,4 +11,8 @@
 
 .password-back-link {
     margin-top: var(--unnic-spacing-stack-awesome);
+}
+
+#kc-reset-password-form #kc-form-buttons{
+    margin-top: var(--unnic-spacing-stack-md);
 }
diff --git a/themes/ilhasoft/login/template.ftl b/themes/ilhasoft/login/template.ftl
@@ -88,7 +88,7 @@
                 </div>
             </div>
         </#if>
-        <a href="${properties.backUrl!}"><img class="brand-title" src="${url.resourcesPath}/img/login/brand.svg" ></a>
+        <a href="${url.loginUrl}"><img class="brand-title" src="${url.resourcesPath}/img/login/brand.svg" ></a>
         <p class="title-md"> ${msg("headerTitleText")} </p>
         <p class="title-sm"> <@msg("headerTitleSubtext")?interpret /> </p>
         <p class="text-body-gt"> ${msg("brandsTitle")} </p>

diff --git a/themes/ilhasoft/login/theme.properties b/themes/ilhasoft/login/theme.properties
@@ -49,6 +49,8 @@ kcInfoAreaClass=col-xs-12 col-sm-4 col-md-4 col-lg-5 details
 kcButtonClass=btn
 # classes defining priority of the button - primary or default (there is typically only one priority button for the form)
 kcButtonPrimaryClass=btn-primary
+kcButtonSecondaryClass=btn-secondary
+kcButtonTertiaryClass=btn-tertiary
 kcButtonDefaultClass=btn-default
 # classes defining size of the button
 kcButtonLargeClass=btn-lg