Use CI image for keycloak button

src/servala/frontend/templates/account/login.html

@@ -16,10 +16,10 @@
                     {% csrf_token %}
                     {{ redirect_field }}
                     <button href="{{ href }}"
-                            class="btn btn-warning btn-lg icon icon-left"
+                            class="btn btn-warning btn-lg icon icon-left btn-keycloak"
                             title="{{ provider.name }}">
                         <img src="{% static 'img/keycloak.svg' %}" style="height: 30px">
-                        <span class="mx-1">{% translate "Sign in with your" %} {{ provider.name }}</span>
+                        <span class="ms-2">{% translate "Sign In" %}</span>
                     </button>
                 </form>
             {% endfor %}

src/servala/frontend/templates/frontend/profile.html

@@ -115,15 +115,16 @@
                                     You are logged in with your VSHN user account. Change your password and other account data here:
                                 {% endblocktranslate %}
                             </p>
-                            <a href="{{ account_href }}"
+                            <div>
-                               class="btn btn-warning btn-lg icon icon-left">
+                                <a href="{{ account_href }}"
-                                <img src="{% static 'img/keycloak.svg' %}" style="height: 30px">
+                                   class="btn btn-warning btn-lg icon icon-left btn-keycloak">
-                                <span class="mx-1">{% translate "VSHN Account" %}</span>
+                                    <img src="{% static 'img/keycloak.svg' %}" style="height: 30px">
-                            </a>
+                                    <span class="mx-1">{% translate "Account" %}</span>
+                                </a>
+                            </div>
                         </div>
                     </div>
                 </div>
             </div>
-        </div>
+        </section>
-    </section>
+    {% endblock content %}
-{% endblock content %}

src/servala/static/css/servala.css

@@ -78,3 +78,10 @@ html[data-bs-theme="dark"] .btn-outline-primary, .btn-outline-primary {
         display: inline-block;
     }
 }
+.btn-keycloak {
+    display: flex;
+    align-items: center;
+}
+a.btn-keycloak {
+    display: inline-flex;
+}

src/servala/static/img/keycloak.svg

@@ -1,6 +1 @@
-<svg width="107" height="60" fill="none" xmlns="http://www.w3.org/2000/svg" class="image" aria-hidden="true">
+<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1271.63 301.28"><defs><style>.cls-1{fill:#444;}.cls-2{fill:#4081cb;}</style></defs><polyline class="cls-1" points="164.16 264.17 0 169.29 0 128.63 163.16 33.24 162.55 75.49 34.64 149.71 164.34 222.5 164.16 264.17"/><path class="cls-2" d="M469.84,75.53v38.41s-40.79-30-90.18-30C326.23,83.89,266.52,123,266.52,123V80.84c41.3-22.09,77.94-33.31,113.59-33.31,43.55,0,89.73,28,89.73,28" transform="translate(-103.97 -47.53)"/><path class="cls-2" d="M381,295.1A99.55,99.55,0,1,0,381,96c-55.12,0-99.81,44.57-99.81,99.54A99.68,99.68,0,0,0,381,295.1" transform="translate(-103.97 -47.53)"/><polyline class="cls-1" points="389.91 36.82 554.07 131.7 554.07 172.36 390.91 267.75 391.51 225.5 519.43 151.28 389.73 78.49 389.91 36.82"/><path class="cls-2" d="M292.1,320.8V282.39s40.8,30.05,90.19,30.05c53.43,0,113.13-39.13,113.13-39.13v42.18c-41.29,22.09-77.94,33.31-113.58,33.31-43.55,0-89.74-28-89.74-28" transform="translate(-103.97 -47.53)"/><path class="cls-1" d="M727.16,119.64h44.32l39.38,114.07,39.6-114.07h42.3L831.11,277.37H788.36Z" transform="translate(-103.97 -47.53)"/><path class="cls-1" d="M989.39,155q-14.28-4.72-24-4.73-7.65,0-12,2.81a9.17,9.17,0,0,0-4.38,8.22,11.24,11.24,0,0,0,3.82,8.66,29.27,29.27,0,0,0,9.45,5.62q5.63,2.14,16.65,5.52a216.24,216.24,0,0,1,27.11,9.45A47.34,47.34,0,0,1,1024.38,205q7.65,9.78,7.65,25.54t-8.32,26.88q-8.33,11.15-22.84,16.76a88.72,88.72,0,0,1-32.29,5.63,116.87,116.87,0,0,1-39-6.86,107,107,0,0,1-33.63-18.79l16-32.17a99.35,99.35,0,0,0,28.24,17.32q16.3,6.75,28.91,6.75,9.22,0,14.51-3.38a11,11,0,0,0,5.29-9.89,11.66,11.66,0,0,0-3.94-9,28.76,28.76,0,0,0-9.9-5.74q-6-2.15-16.76-5.06a205.9,205.9,0,0,1-26.77-9.12,47.28,47.28,0,0,1-18.12-14q-7.53-9.33-7.53-24.86a43.39,43.39,0,0,1,7.76-25.65q7.75-11,22-17t33.19-6a120.31,120.31,0,0,1,33.75,4.84,111.4,111.4,0,0,1,29.25,12.94l-15.53,32.85A138.22,138.22,0,0,0,989.39,155Z" transform="translate(-103.97 -47.53)"/><path class="cls-1" d="M1053,119.64h41.17V184h63.68V119.64H1199V277.37h-41.17V216.84h-63.68v60.53H1053Z" transform="translate(-103.97 -47.53)"/><path class="cls-1" d="M1337.35,119.64h38.25V277.37h-36l-71.55-94.28v94.28h-38.47V119.64h36.22l71.78,95Z" transform="translate(-103.97 -47.53)"/></svg>
-    <circle cx="53.002" cy="30" r="19" fill="#4CC3FF"></circle>
-    <path opacity="0.25" d="M67.833 41.874A18.92 18.92 0 0071.999 30c0-10.493-8.506-19-19-19a18.932 18.932 0 00-12.868 5.021c14.446.554 26.182 11.675 27.702 25.853z" fill="#000D1A"></path>
-    <path d="M31.594 6.491v8.571l5.217-3.173a31.165 31.165 0 0132.426 0l.622.378v.006l.14.078v-8.39l-.137-.07a38.382 38.382 0 00-36.807 1.712l-1.461.888zM74.436 53.508v-8.57l-5.218 3.173a31.165 31.165 0 01-32.425 0l-.625-.38v-.005L36 47.64v8.39l.168.079a38.382 38.382 0 0036.807-1.712l1.461-.889z" fill="#4CC3FF"></path>
-    <path d="M31.571 15.063v-8.57L0 25.694v8.614L31.571 53.51v-8.57L7.011 30l24.56-14.938zM74.432 53.511l31.571-19.202v-8.614L74.432 6.492v8.571l24.56 14.939-24.56 14.938v8.571z" fill="#000D1A"></path>
-</svg>