From ee8ecd4b9dcb028f8971ef9f4a99998d92b74032 Mon Sep 17 00:00:00 2001
From: Tommy Mikkelsen <tm@orstrand.dk>
Date: Mon, 4 Jul 2022 19:50:54 +0200
Subject: [PATCH] #521 About

---
 src/components/modules/Main/About.vue | 52 ++++++++++++++-------------
 1 file changed, 27 insertions(+), 25 deletions(-)

diff --git a/src/components/modules/Main/About.vue b/src/components/modules/Main/About.vue
index d1cdec7..52e2374 100644
--- a/src/components/modules/Main/About.vue
+++ b/src/components/modules/Main/About.vue
@@ -1,25 +1,27 @@
 <template>
-  <b-container fluid>
-    <div class="col-lg-9 col-md-12 col-xs-12">
-
-    <h2>{{ $t("Modules.About.Name") }}</h2>    
-    <h3>{{ $t("Modules.About.MainDevelopers") }}</h3>
-    <p>{{ $t("Modules.About.Devdane22") }}</p>
-    <p>{{ $t("Modules.About.DevCPSO") }}</p>
-    <br>
-    <h3>{{ $t("Modules.About.WikiDevelopers") }}</h3>
-    <p>{{ $t("Modules.About.Wikitrumpy81") }}</p>
-    <h3>
-      {{ $t("Modules.About.TranslationBetaTestersTitle") }} <br>
-      <small>{{ $t("Modules.About.TranslationBetaTestersText") }}</small>
-    </h3>      
-    <div>
-      <ul class="list-inline">
-          <li class="list-inline-item" v-for="(po, index) in poeTranslators" :key="po.name">{{ po.name }}<span v-if="index != (poeTranslators.length - 1)">,</span></li>
-      </ul>
-    </div>
-    <br> 
-    <h6>{{ $t("Modules.About.PlexPoCredits") }}</h6>
+  <b-container class="m-2 mt-2">
+    <div>   <!-- Title and desc -->
+      <h2>
+        {{ $t(`Modules.About.Name`) }}
+      </h2>
+      <h5>{{ $t(`Modules.About.MainDevelopers`) }}</h5>
+      <p>{{ $t("Modules.About.Devdane22") }}</p>
+      <p>{{ $t("Modules.About.DevCPSO") }}</p>
+      <br>
+      <h5>{{ $t("Modules.About.WikiDevelopers") }}</h5>
+      <p>{{ $t("Modules.About.Wikitrumpy81") }}</p>
+      <br>
+      <h5>
+        {{ $t("Modules.About.TranslationBetaTestersTitle") }} <br>
+        <small>{{ $t("Modules.About.TranslationBetaTestersText") }}</small>
+      </h5>
+      <div>
+        <ul class="list-inline">
+            <li class="list-inline-item" v-for="(po, index) in poeTranslators" :key="po.name">{{ po.name }}<span v-if="index != (poeTranslators.length - 1)">,</span></li>
+        </ul>
+      </div>
+      <br>
+      <p>{{ $t("Modules.About.PlexPoCredits") }}</p>
     </div>
   </b-container>
 </template>
@@ -27,18 +29,18 @@
 <script>
 const log = require('electron-log');
 console.log = log.log;
-export default {  
+export default {
   data() {
     return {
-      poeTranslators: []                
+      poeTranslators: []
     }
   },
   async created() {
     await this.$store.dispatch('fetchPOEContrib');
-    this.poeTranslators = await this.$store.getters.getContrib;    
+    this.poeTranslators = await this.$store.getters.getContrib;
   },
   mounted() {
-    log.info("About Created");
+    log.info(`[About.vue] (mounted) - About Created`);
   }
 }