refactor: update whitelabeling and CSS styles

- Added a new wrapper class for the logo to center it
- Updated the main logo CSS to allow for responsive sizing.
- Revert the use of whitelabel custom css

Author: Rakanhf

docker-app/qfieldcloud/core/staticfiles/css/qfieldcloud.css

@@ -40,8 +40,19 @@ h1, h2, h3, h4, h5, h6 {
   margin-left: 1rem;
 }
 
+.qfc-logo-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 15rem;
+  padding: 1rem 0;
+}
+
 .qfc-main-logo {
-  height: 15rem;
+  max-width: 100%;
+  max-height: 15rem;
+  width: auto;
+  height: auto;
 }
 
 .ml-5rem {

docker-app/qfieldcloud/core/templates/account/base.html

@@ -8,7 +8,7 @@
   <meta name="color-scheme" content="dark light">
 
   {% sri_static 'css/vendor.css' %}
-  {% sri_static whitelabel.custom_css %}
+  {% sri_static 'css/qfieldcloud.css' %}
   <link rel="shortcut icon" type="image/x-icon" href="{% static whitelabel.favicon %}" />
 
   <title>
@@ -37,9 +37,9 @@
       <div class="flex-shrink-0 col-12">
         <div class="row">
           <div class="col-lg-6 offset-lg-3">
-            <p class="text-center">
+            <div class="qfc-logo-wrapper">
               <img src="{% static whitelabel.logo_main %}" alt="{{ whitelabel.logo_alt }}" class="qfc-main-logo">
-            </p>
+            </div>
 
             {% block content %}{% endblock content %}
 

docker-app/qfieldcloud/core/whitelabel.py

@@ -13,8 +13,6 @@
     "logo_navbar": "logo_sidetext_white.svg",
     "logo_main": "logo_undertext.svg",
     "favicon": "favicon.ico",
-    # Styling
-    "custom_css": "css/qfieldcloud.css",
 }
 
 

docker-app/qfieldcloud/settings.py

@@ -881,5 +881,4 @@ def before_send(event, hint):
 #     "logo_main": "path/to/logo_main.svg",
 #     "logo_alt": "Your logo description",
 #     "favicon": "path/to/favicon.ico",
-#     "custom_css": "path/to/custom.css",
 # }