From 6e41e284b56c794727dd1edd627cf15c50a2d868 Mon Sep 17 00:00:00 2001
From: Bubka <858858+Bubka@users.noreply.github.com>
Date: Tue, 16 Apr 2024 11:02:38 +0200
Subject: [PATCH] Fix light theme

---
 resources/js/assets/app.scss                 |  7 ++++
 resources/js/components/AccessLogViewer.vue  | 37 +++++++++++---------
 resources/js/components/QrContentDisplay.vue |  5 +--
 resources/js/views/Start.vue                 |  5 +--
 resources/lang/en/admin.php                  |  6 ++--
 5 files changed, 32 insertions(+), 28 deletions(-)

diff --git a/resources/js/assets/app.scss b/resources/js/assets/app.scss
index a4b8259f..74bcfad5 100644
--- a/resources/js/assets/app.scss
+++ b/resources/js/assets/app.scss
@@ -1390,4 +1390,11 @@ footer.main .field.is-grouped {
   top: 4px;
   width: 29px;
   height: 29px;
+}
+
+.light-or-darker {
+  color: $grey-darker;
+}
+:root[data-theme="dark"] .light-or-darker {
+  color: $grey-light;
 }
\ No newline at end of file
diff --git a/resources/js/components/AccessLogViewer.vue b/resources/js/components/AccessLogViewer.vue
index 21747d4b..245652f8 100644
--- a/resources/js/components/AccessLogViewer.vue
+++ b/resources/js/components/AccessLogViewer.vue
@@ -4,6 +4,7 @@
     import Spinner from '@/components/Spinner.vue'
     import { useNotifyStore } from '@/stores/notify'
     import { FontAwesomeLayers } from '@fortawesome/vue-fontawesome'
+    import { UseColorMode } from '@vueuse/components'
 
     const notify = useNotifyStore()
 
@@ -153,26 +154,28 @@
     </nav>
     <div v-if="visibleAuthentications.length > 0">
         <div v-for="authentication in visibleAuthentications" :key="authentication.id" class="list-item is-size-6 is-size-7-mobile has-text-grey is-flex is-justify-content-space-between">
-            <div>
+            <UseColorMode v-slot="{ mode }">
                 <div>
-                    <span v-if="isFailedEntry(authentication)" v-html="$t('admin.failed_login_on', { login_at: authentication.login_at })" />
-                    <span v-else-if="isSuccessfulLogout(authentication)" v-html="$t('admin.successful_logout_on', { login_at: authentication.logout_at })" />
-                    <span v-else v-html="$t('admin.successful_login_on', { login_at: authentication.login_at })" />
+                    <div>
+                        <span v-if="isFailedEntry(authentication)" v-html="$t('admin.failed_login_on', { login_at: authentication.login_at })" />
+                        <span v-else-if="isSuccessfulLogout(authentication)" v-html="$t('admin.successful_logout_on', { login_at: authentication.logout_at })" />
+                        <span v-else v-html="$t('admin.successful_login_on', { login_at: authentication.login_at })" />
+                    </div>
+                    <div>
+                        {{ $t('commons.IP') }}: <span class="light-or-darker">{{ authentication.ip_address }}</span> -
+                        {{ $t('commons.browser') }}: <span class="light-or-darker">{{ authentication.browser }}</span> -
+                        {{ $t('commons.operating_system_short') }}: <span class="light-or-darker">{{ authentication.platform }}</span>
+                    </div>
                 </div>
-                <div>
-                    {{ $t('commons.IP') }}: <span class="has-text-grey-light">{{ authentication.ip_address }}</span> -
-                    {{ $t('commons.browser') }}: <span class="has-text-grey-light">{{ authentication.browser }}</span> -
-                    {{ $t('commons.operating_system_short') }}: <span class="has-text-grey-light">{{ authentication.platform }}</span>
+                <div :class="mode == 'dark' ? 'has-text-grey-darker' : 'has-text-grey-lighter'" class="is-align-self-center ">
+                    <font-awesome-layers class="fa-2x">
+                        <FontAwesomeIcon :icon="['fas', deviceIcon(authentication.device)]" transform="grow-6" fixed-width />
+                        <FontAwesomeIcon :icon="['fas', isFailedEntry(authentication) ? 'times' : 'check']"
+                            :transform="'shrink-7' + (authentication.device == 'desktop' ? ' up-2' : '')"
+                            :class="isFailedEntry(authentication) ? 'has-text-danger' + (mode == 'dark' ? '-dark' : '') : 'has-text-success' + (mode == 'dark' ? '-dark' : '')" fixed-width />
+                    </font-awesome-layers>
                 </div>
-            </div>
-            <div class="is-align-self-center has-text-grey-darker">
-                <font-awesome-layers class="fa-2x">
-                    <FontAwesomeIcon :icon="['fas', deviceIcon(authentication.device)]" transform="grow-6" fixed-width />
-                    <FontAwesomeIcon :icon="['fas', isFailedEntry(authentication) ? 'times' : 'check']"
-                        :transform="'shrink-7' + (authentication.device == 'desktop' ? ' up-2' : '')"
-                        :class="isFailedEntry(authentication) ? 'has-text-danger-dark' : 'has-text-success-dark'" fixed-width />
-                </font-awesome-layers>
-            </div>
+            </UseColorMode>
         </div>
     </div>
     <div v-else-if="authentications.length == 0" class="mt-4">
diff --git a/resources/js/components/QrContentDisplay.vue b/resources/js/components/QrContentDisplay.vue
index 23a80791..27b6fd16 100644
--- a/resources/js/components/QrContentDisplay.vue
+++ b/resources/js/components/QrContentDisplay.vue
@@ -1,7 +1,6 @@
 <script setup>
     const { copy } = useClipboard({ legacy: true })
     import { useNotifyStore } from '@/stores/notify'
-    import { UseColorMode } from '@vueuse/components'
     
     const notify = useNotifyStore()
 
@@ -48,9 +47,7 @@
     <div class="block">
         {{ $t('errors.data_of_qrcode_is_not_valid_URI') }}
     </div>
-    <UseColorMode v-slot="{ mode }">
-        <div class="block mb-6" :class="mode == 'dark' ? 'has-text-light':'has-text-grey-dark'">{{ qrContent ? qrContent : '[' + trans('commons.nothing') + ']' }}</div>
-    </UseColorMode>
+    <div class="block mb-6 light-or-darker">{{ qrContent ? qrContent : '[' + trans('commons.nothing') + ']' }}</div>
     <!-- Copy to clipboard -->
     <div class="block has-text-link" v-if="qrContent">
         <button class="button is-link is-outlined is-rounded" @click.stop="copyToClipboard(qrContent)">
diff --git a/resources/js/views/Start.vue b/resources/js/views/Start.vue
index dbdde8b6..7bec1ec2 100644
--- a/resources/js/views/Start.vue
+++ b/resources/js/views/Start.vue
@@ -3,7 +3,6 @@
     import { useUserStore } from '@/stores/user'
     import { useBusStore } from '@/stores/bus'
     import { useNotifyStore } from '@/stores/notify'
-    import { UseColorMode } from '@vueuse/components'
     import { useTwofaccounts } from '@/stores/twofaccounts'
 
     const router = useRouter()
@@ -85,9 +84,7 @@
             </div>
             <!-- alternative methods -->
             <div class="column is-full">
-                <UseColorMode v-slot="{ mode }">
-                    <div class="block" :class="mode == 'dark' ? 'has-text-light':'has-text-grey-dark'">{{ $t('twofaccounts.forms.alternative_methods') }}</div>
-                </UseColorMode>
+                <div class="block light-or-darker">{{ $t('twofaccounts.forms.alternative_methods') }}</div>
                 <!-- upload a qr code -->
                 <div class="block has-text-link" v-if="!user.preferences.useBasicQrcodeReader">
                     <label role="button" tabindex="0" class="button is-link is-outlined is-rounded" ref="qrcodeInputLabel" @keyup.enter="qrcodeInputLabel.click()">
diff --git a/resources/lang/en/admin.php b/resources/lang/en/admin.php
index 149ea9ed..89301e89 100644
--- a/resources/lang/en/admin.php
+++ b/resources/lang/en/admin.php
@@ -68,9 +68,9 @@
     'check_now' => 'Check now',
     'view_on_github' => 'View on Github',
     'x_is_available' => ':version is available',
-    'successful_login_on' => 'Successful login on <span class="has-text-grey-light">:login_at</span>',
-    'successful_logout_on' => 'Successful logout on <span class="has-text-grey-light">:login_at</span>',
-    'failed_login_on' => 'Failed login on <span class="has-text-grey-light">:login_at</span>',
+    'successful_login_on' => 'Successful login on <span class="light-or-darker">:login_at</span>',
+    'successful_logout_on' => 'Successful logout on <span class="light-or-darker">:login_at</span>',
+    'failed_login_on' => 'Failed login on <span class="light-or-darker">:login_at</span>',
     'last_accesses' => 'Last accesses',
     'see_full_log' => 'See full log',
     'browser_on_platform' => ':browser on :platform',