Redesign new Vuetify footer to use theme colors

aleksis/core/templates/core/partials/vue_footer_menu.html

 {# -*- engine:django -*- #}
 
 {% for item in FOOTER_MENU.items.all %}
-  <v-btn plain tile href="{{ item.url }}" color="primary">
+  <v-btn text rounded href="{{ item.url }}" color="white" class="ma-2">
     {% if item.icon %}
       <v-icon left>mdi-{{ item.icon }}</v-icon>
     {% endif %}

aleksis/core/templates/core/vue_base.html

@@ -98,7 +98,8 @@
       </v-toolbar-title>
 
       <v-spacer></v-spacer>
-      <language-form action="{% url "set_language" %}" csrf_value={{ csrf_token }} next_url={{ request.get_full_path }}></language-form>
+      <language-form action="{% url "set_language" %}"
+                     csrf_value={{ csrf_token }} next_url={{ request.get_full_path }}></language-form>
       {% if user.is_authenticated %}
         <v-menu offset-y>
           <template v-slot:activator="{ on, attrs }">
@@ -168,36 +169,53 @@
       </v-container>
     </v-main>
 
-    <v-footer app absolute inset class="white--text">
-      <v-container>
-        <v-row>
-          <v-col cols="12" lg="6">
-            {% include "core/partials/vue_footer_menu.html" %}
-          </v-col>
-          <v-col cols="12" >
+    <v-footer app absolute inset dark class="pa-0 d-flex" color="primary lighten-1">
+      <v-card
+        flat
+        tile
+        class="primary  white--text flex-grow-1"
+      >
+        {% if FOOTER_MENU.items.all %}
+          <v-card-text class="pa-0">
+            <v-container class="px-6">
+              <v-row
+                justify="center"
+                no-gutters
+              >
+                {% include "core/partials/vue_footer_menu.html" %}
+              </v-row>
+            </v-container>
+          </v-card-text>
+          <v-divider></v-divider>
+        {% endif %}
+
+        <v-card-text class="pa-0">
+          <v-container class="px-6">
             <v-row>
-              <v-btn plain rounded href="{% url "about_aleksis" %}" color="white">
-                {% trans "About AlekSIS® — The Free School Information System" %}
-              </v-btn>
-              <span>© The AlekSIS Team</span>
-              <v-spacer></v-spacer>
-              {% if request.site.preferences.footer__imprint_url %}
-                <v-btn plain rounded href="{{ request.site.preferences.footer__imprint_url }}" color="white">
-                  {% trans "Imprint" %}
-                </v-btn>
-              {% endif %}
-              {% if request.site.preferences.footer__privacy_url and request.site.preferences.footer__imprint_url %}
-                ·
-              {% endif %}
-              {% if request.site.preferences.footer__privacy_url %}
-                <v-btn plain rounded href="{{ request.site.preferences.footer__privacy_url }}" color="white">
-                  {% trans "Privacy Policy" %}
-                </v-btn>
-              {% endif %}
+              <v-col class="white--text d-flex align-center subtitle-2">
+                <div>
+                  <a href="{% url "about_aleksis" %}" class="white--text text-decoration-none">
+                    {% trans "About AlekSIS® — The Free School Information System" %}
+                  </a>
+                  <span>© The AlekSIS Team</span>
+                </div>
+              </v-col>
+              <v-col class="d-flex justify-end">
+                {% if request.site.preferences.footer__imprint_url %}
+                  <v-btn small text href="{{ request.site.preferences.footer__imprint_url }}" color="white">
+                    {% trans "Imprint" %}
+                  </v-btn>
+                {% endif %}
+                {% if request.site.preferences.footer__privacy_url %}
+                  <v-btn small text href="{{ request.site.preferences.footer__privacy_url }}" color="white">
+                    {% trans "Privacy Policy" %}
+                  </v-btn>
+                {% endif %}
+              </v-col>
             </v-row>
-          </v-col>
-        </v-row>
-      </v-container>
+          </v-container>
+        </v-card-text>
+      </v-card>
     </v-footer>
   </v-app>
 </main>