Redesign about page

aleksis/core/assets/components/about/About.vue

 <template>
   <div class="mt-4 mb-4">
-    <v-row align="stretch">
-      <v-col class="d-flex align-stretch">
+    <v-row class="mb-3">
+      <v-col cols="12">
         <v-card class="d-flex flex-column">
           <v-card-title>About AlekSIS</v-card-title>
           <v-card-text>
-            <p>
+            <p class="text-body-1">
               This platform is powered by AlekSIS®, a web-based school information system (SIS) which can be used
               to manage and/or publish organisational artifacts of educational institutions. AlekSIS is free software
               and can be used by anyone.
             </p>
-            <p>
+            <p class="text-body-1">
               AlekSIS® is a registered trademark of the AlekSIS open source project, represented by Teckids e.V.
             </p>
           </v-card-text>
@@ -19,10 +19,9 @@
             <v-btn text color="primary" href="https://aleksis.org/">Website of AlekSIS</v-btn>
             <v-btn text color="primary" href="https://edugit.org/AlekSIS/">Source code</v-btn>
           </v-card-actions>
-
         </v-card>
       </v-col>
-      <v-col class="d-flex align-stretch">
+      <v-col cols="12">
         <v-card class="d-flex flex-column">
           <v-card-title>Licence information</v-card-title>
           <v-card-text>
@@ -32,8 +31,8 @@
               licences are marked like this:
             </p>
             <p>
-              <v-chip color="green" text-color="white">Free/Open Source Licence</v-chip>
-              <v-chip color="green" text-color="white">Other Licence</v-chip>
+              <v-chip color="green" text-color="white" small>Free/Open Source Licence</v-chip>
+              <v-chip color="orange" text-color="white" small>Other Licence</v-chip>
             </p>
           </v-card-text>
           <v-spacer></v-spacer>
@@ -56,7 +55,7 @@ import InstalledAppsList from "./InstalledAppsList.vue";
 
 export default {
   name: "About",
-  components: {VCheckbox, InstalledAppsList}
+  components: {InstalledAppsList}
 }
 </script>
 

aleksis/core/assets/components/about/InstalledAppCard.vue

 <template>
-  <v-col cols="6" class="d-flex align-stretch">
+  <v-col cols="12" md="6" lg="6" xl="4" class="d-flex align-stretch">
     <v-card :id="app.name" class="d-flex flex-column flex-grow-1">
       <v-card-title>
         {{ app.verboseName }}
-        <v-chip v-if="app.licence.flags.isFsfLibre" color="green" text-color="white" class="ml-4">Free Software</v-chip>
-        <v-chip v-else-if="app.licence.flags.isOsiApproved" color="green" text-color="white" class="ml-4">Open Source
-        </v-chip>
       </v-card-title>
 
-      <v-card-subtitle>
+      <v-card-subtitle class="text-body-1 black--text">
         {{ app.version }}
       </v-card-subtitle>
 
       <v-card-text>
-        <p v-if="app.copyrights.length !== 0">
-          <span v-for="(copyright, index) in app.copyrights" :key="index">
-            Copyright © {{ copyright.years }}
-            <a :href="'mailto:' + copyright.email">{{ copyright.name }}</a>
-            <br/>
-          </span>
-        </p>
-
-        <p v-if="app.licence">
-          This app is licenced under {{ app.licence.verboseName }}.
-        </p>
-        <div v-for="licence in app.licence.licences" class="mb-2" :key="licence.name">
-          <v-chip v-if="licence.isOsiApproved || licence.isFsfLibre" color="green" text-color="green" outlined
-                  :href="licence.url">
-            {{ licence.name }}
-          </v-chip>
-          <v-chip v-else color="orange" text-color="orange" outlined :href="licence.url">
-            {{ licence.name }}
-          </v-chip>
-        </div>
+        <v-row v-if="app.licence" class="mb-2">
+          <v-col cols="6">
+            This app is licenced under <br/>
+            <strong class="text-body-1 black--text">{{ app.licence.verboseName }}</strong>
+          </v-col>
+          <v-col cols="6">
+            Licence Type <br/>
+            <v-chip v-if="app.licence.flags.isFsfLibre" color="green" text-color="white" small>
+              Free Software
+            </v-chip>
+            <v-chip v-else-if="app.licence.flags.isOsiApproved" color="green" text-color="white" small>
+              Open Source
+            </v-chip>
+            <v-chip v-else color="orange" text-color="white" small>
+              Proprietary
+            </v-chip>
+          </v-col>
+
+
+          <v-col cols="12" v-if="app.licence.licences.length !== 0">
+            The license consists of
+            <div v-for="licence in app.licence.licences" class="mb-2" :key="licence.name">
+              <v-chip v-if="licence.isOsiApproved || licence.isFsfLibre" color="green" text-color="green" outlined
+                      small
+                      :href="licence.url">
+                {{ licence.name }}
+              </v-chip>
+              <v-chip v-else color="orange" text-color="orange" outlined :href="licence.url">
+                {{ licence.name }}
+              </v-chip>
+            </div>
+          </v-col>
+
+          <v-col cols="12" v-if="app.copyrights.length !== 0">
+            <span v-for="(copyright, index) in app.copyrights" :key="index">
+              Copyright © {{ copyright.years }}
+              <a :href="'mailto:' + copyright.email">{{ copyright.name }}</a>
+              <br/>
+            </span>
+          </v-col>
+        </v-row>
+
       </v-card-text>
 
       <v-spacer></v-spacer>