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

Author: andre-code

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>
+                    <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>
+                    ${kcSanitize(msg("termsText"))?no_esc}
+                </div>
             </div>
         </div>
     <#elseif section = "socialProviders" >

renku_theme/login/messages/messages_en.properties

@@ -3,4 +3,4 @@ loginFormLabel=Log in with your RenkuLab account
 
 # Identity provider
 identity-provider-login-label=Sign up or Log in with
-termsText=By continuing, you agree to the RenkuLab <a target="_blank" rel="noreferrer noopener" href="/help/tos">Terms of Service</a> and acknowledge that the <a target="_blank" rel="noreferrer noopener" href="/help/privacy">Privacy Policy</a> applies to you.
+termsText=By continuing, you agree to the updated <a target="_blank" rel="noreferrer noopener" href="/help/tos">RenkuLab Terms of Service</a> and acknowledge that the updated <a target="_blank" rel="noreferrer noopener" href="/help/privacy">Privacy Policy</a> applies to you. Please take a moment to review these changes.

renku_theme/login/resources/css/login.css

@@ -364,7 +364,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;
+  text-align: justify;
+  display: flex;
+  column-gap: 20px;
 }
 
 @media only screen and (max-width: 1080px) {