Better login page styles and incentive

Fixes https://github.com/umap-project/umap-dsfr/issues/21

Rel. 24f23874f7

umap/static/umap/content.css

@@ -24,11 +24,11 @@ input:-moz-placeholder, :-moz-placeholder {
 body.login {
     width:  320px;
     margin: auto;
-    text-align: center;
+    background-color: var(--color-lighterGray);
+    color: var(--color-darkerGray);
 }
 body.login header {
     display: flex;
-    justify-content: center;
 }
 .login-grid {
     display: grid;

umap/static/umap/vars.css

@@ -2,6 +2,7 @@
     /* Colors. */
     --color-waterMint: #B9F5D2;
     --color-darkBlue: #263B58;
+    --color-lighterGray: #f6f6f6;
     --color-lightGray: #ddd;
     --color-mediumGray: #3e4444;
     --color-darkGray: #323737;

umap/templates/registration/login.html

@@ -19,10 +19,11 @@
     <header class="umap-nav">
       {% include "umap/branding.html" %}
     </header>
+    <h2>{% trans "To save and easily find your maps, identify yourself." %}</h2>
     {% if ENABLE_ACCOUNT_LOGIN %}
-      <h2>
-        {% trans "Please log in with your account" %}
-      </h2>
+      <h3>
+        {% trans "Please log in with your account:" %}
+      </h3>
       <div>
         {% if form.non_field_errors %}
           <ul class="form-errors">
@@ -47,9 +48,9 @@
       </div>
     {% endif %}
     {% if backends.backends|length %}
-      <h2>
-        {% trans "Please choose a provider" %}
-      </h2>
+      <h3>
+        {% trans "Please choose a provider:" %}
+      </h3>
       <div>
         <ul class="login-grid block-grid">
           {% for name in backends.backends %}