Fix hard coded strings & illegible text - Closes #315

resources/js/assets/app.scss

@@ -1119,6 +1119,11 @@ footer.main .field.is-grouped {
   background-color: $warning;
   vertical-align: middle;
   margin: 0 5px;
+  box-shadow: 0px 0px 2px black;
+}
+:root[data-theme="dark"] .release-flag {
+  background-color: $warning;
+  box-shadow: none;
 }
 
 .about-logo {

resources/js/components/VersionChecker.vue

@@ -1,6 +1,7 @@
 <script setup>
     import systemService from '@/services/systemService'
     import { useAppSettingsStore } from '@/stores/appSettings'
+    import { UseColorMode } from '@vueuse/components'
 
     const appSettings = useAppSettingsStore()
     const isScanning = ref(false)
@@ -27,18 +28,20 @@
 <template>
     <div class="columns is-mobile is-vcentered">
         <div class="column is-narrow">
-            <button type="button" :class="isScanning ? 'is-loading' : ''" class="button is-link is-rounded is-small" @click="getLatestRelease">Check now</button>
+            <button type="button" :class="isScanning ? 'is-loading' : ''" class="button is-link is-rounded is-small" @click="getLatestRelease">{{ $t('admin.check_now') }}</button>
         </div>
         <div class="column">
-            <span v-if="appSettings.latestRelease" class="mt-2 has-text-warning">
-                <span class="release-flag"></span>{{ appSettings.latestRelease }} is available <a class="is-size-7" href="https://github.com/Bubka/2FAuth/releases">View on Github</a>
-            </span>
-            <span v-if="isUpToDate" class="has-text-grey">
-                <FontAwesomeIcon :icon="['fas', 'check']" class="mr-1 has-text-success" /> {{ $t('commons.you_are_up_to_date') }}
-            </span>
-            <span v-else-if="isUpToDate === null" class="has-text-grey">
-                <FontAwesomeIcon :icon="['fas', 'times']" class="mr-1 has-text-danger" />{{ $t('errors.check_failed_try_later') }}
-            </span>
+            <UseColorMode v-slot="{ mode }">
+                <span v-if="appSettings.latestRelease" class="mt-2" :class="mode == 'dark' ? 'has-text-warning' : 'has-text-warning-dark'">
+                    <span class="release-flag"></span>{{ $t('admin.x_is_available', { version: appSettings.latestRelease }) }}&nbsp;<a class="is-size-7" href="https://github.com/Bubka/2FAuth/releases">{{ $t('admin.view_on_github') }}</a>
+                </span>
+                <span v-if="isUpToDate" class="has-text-grey">
+                    <FontAwesomeIcon :icon="['fas', 'check']" class="mr-1 has-text-success" /> {{ $t('commons.you_are_up_to_date') }}
+                </span>
+                <span v-else-if="isUpToDate === null" class="has-text-grey">
+                    <FontAwesomeIcon :icon="['fas', 'times']" class="mr-1 has-text-danger" />{{ $t('errors.check_failed_try_later') }}
+                </span>
+            </UseColorMode>
         </div>
     </div>
 </template>

resources/lang/en/admin.php

@@ -63,6 +63,9 @@ return [
     'user_role_updated' => 'User role updated',
     'pats_succesfully_revoked' => 'User\'s PATs successfully revoked',
     'security_devices_succesfully_revoked' => 'User\'s security devices successfully revoked',
+    'check_now' => 'Check now',
+    'view_on_github' => 'View on Github',
+    'x_is_available' => ':version is available',
     'forms' => [
         'use_encryption' => [
             'label' => 'Protect sensitive data',