chore(update card): improved heading and list style, fixed github link

src/components/App/UpdateCard.vue

@@ -1,6 +1,6 @@
 <template>
   <Card :is-open="isUpdateCardOpen" @toggle-card="toggleCard(false)">
-    <div class="content">
+    <div class="content" tabindex="0" ref="content">
       <h1 style="margin-bottom: 0.5em">🚀 {{ $t('update.title') }}</h1>
 
       <div class="features-body" v-if="htmlChangelog != ''" v-html="htmlChangelog"></div>
@@ -13,7 +13,14 @@
       <p class="bottom-info">
         {{ $t('update.info-1') }}
         <br />
-        <span v-html="$t('update.info-2')"></span>
+
+        <i18n-t keypath="update.info-2">
+          <template v-slot:link>
+            <a href="https://github.com/Spythere/stacjownik" target="_blank">{{
+              $t('update.info-2-link-text')
+            }}</a>
+          </template>
+        </i18n-t>
       </p>
     </div>
   </Card>
@@ -51,7 +58,7 @@ export default defineComponent({
   watch: {
     isUpdateCardOpen(val: boolean) {
       this.$nextTick(() => {
-        if (val) (this.$refs['confirm-btn'] as HTMLElement).focus();
+        if (val) (this.$refs['content'] as HTMLElement).focus();
       });
     }
   },
@@ -83,9 +90,13 @@ export default defineComponent({
   border-bottom: 1px solid #aaa;
 }
 
+::v-deep(h3) {
+  padding: 0.5em 0;
+}
+
 ::v-deep(ul) {
-  list-style: initial;
-  padding: 1em;
+  list-style: disc;
+  padding: 0 1.5em;
   line-height: 1.5em;
 }
 
@@ -117,5 +128,6 @@ p.bottom-info {
 
 a {
   text-decoration: underline;
+  color: white;
 }
 </style>

src/locales/en.json

@@ -69,7 +69,8 @@
     "confirm": "ROGER THAT!",
     "no-data": "No data about the latest app update has been found",
     "info-1": "This changelog will be available to see once again after clicking the version number in the footer",
-    "info-2": "The full app changelog available on <a href='https://github.com/Spythere/stacjownik' target='_blank'>the project's GitHub</a>"
+    "info-2": "The full app changelog available on {link}",
+    "info-2-link-text": "the project's GitHub page"
   },
   "app": {
     "sceneries": "SCENERIES",

src/locales/pl.json

@@ -68,7 +68,8 @@
     "confirm": "PRZYJĄŁEM!",
     "no-data": "Nie znaleziono informacji o ostatnich zmianach w aplikacji",
     "info-1": "Ten changelog będzie zawsze dostępny po kliknięciu numeru wersji w stopce strony",
-    "info-2": "Pełny changelog dostępny na <a href='https://github.com/Spythere/stacjownik' target='_blank'>GitHubie projektu</a>"
+    "info-2": "Pełny changelog dostępny na {link}",
+    "info-2-link-text": "GitHubie projektu"
   },
   "app": {
     "sceneries": "SCENERIE",