feat: use latest Renku theme (#38)

* feat: Update terms and condition text and styles in login form

---------

Co-authored-by: Chandrasekhar Ramakrishnan <ciyer@users.noreply.github.com>
Co-authored-by: Rok Roškar <rok.roskar@sdsc.ethz.ch>
Co-authored-by: Andrea Cordoba <43388408+andre-code@users.noreply.github.com>

Author: 4 people

renku_theme/login/login.ftl

@@ -4,7 +4,12 @@
         ${msg("loginAccountTitle")}
         <div id="renku-login-terms-container">
             <div id="renku-login-terms-text">
-                ${kcSanitize(msg("termsText"))?no_esc}
+                <div id="renku-login-terms-icon">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="32" height="32" fill="currentColor"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"></path><path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"></path></svg>
+                </div>
+                <div>
+                    ${msg("termsText")?no_esc}
+                </div>
             </div>
         </div>
     <#elseif section = "socialProviders" >

renku_theme/login/register.ftl

@@ -4,7 +4,12 @@
         ${msg("registerTitle")}
         <div id="renku-login-terms-container">
             <div id="renku-login-terms-text">
-                ${kcSanitize(msg("termsText"))?no_esc}
+                <div id="renku-login-terms-icon">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="32" height="32" fill="currentColor"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"></path><path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"></path></svg>
+                </div>
+                <div>
+                    ${msg("termsText")?no_esc}
+                </div>
             </div>
         </div>
     <#elseif section = "form">

renku_theme/login/resources/css/login.css

@@ -365,7 +365,18 @@ div#renku-login-terms-container {
 }
 
 div#renku-login-terms-text {
-  max-width: 400px;
+  max-width: 600px;
+  font-size: 16px;
+  background-color: rgb(209, 236, 241);
+  border-color: #a2dae3;
+  border-width: 1px;
+  border-radius: 5px;
+  color: rgb(9, 65, 74);
+  padding: 16px;
+  line-height: 24px;
+  column-gap: 20px;
+  display: flex;
+  text-align: justify;
 }
 
 @media only screen and (max-width: 1080px) {
@@ -388,4 +399,7 @@ div#renku-login-terms-text {
   div#kc-social-providers ul a {
     margin: 0;
   }
+  div#renku-login-terms-icon {
+    display: none;
+  }
 }

renku_theme/login/terms.ftl

@@ -5,7 +5,7 @@
     <#elseif section = "form">
         <div id="renku-terms-wrapper">
         <div id="kc-terms-text">
-            ${kcSanitize(msg("termsText"))?no_esc}
+            ${msg("termsText")?no_esc}
         </div>
         <form class="form-actions" action="${url.loginAction}" method="POST">
             <input class="${properties.kcButtonClass!} ${properties.kcButtonDefaultClass!} ${properties.kcButtonLargeClass!}" name="cancel" id="kc-decline" type="submit" value="${msg("doDecline")}"/>