From d58645f65a0bb9b52a4662e379401ffa86ff5313 Mon Sep 17 00:00:00 2001
From: Bubka <858858+Bubka@users.noreply.github.com>
Date: Wed, 22 Nov 2023 10:43:11 +0100
Subject: [PATCH] Enhance various elements styling with light theme On

---
 resources/js_vue3/assets/app.scss                | 16 +++++++++++++++-
 resources/js_vue3/views/settings/OAuth.vue       |  2 +-
 .../js_vue3/views/twofaccounts/CreateUpdate.vue  |  2 +-
 resources/js_vue3/views/twofaccounts/Import.vue  |  8 ++++++--
 4 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/resources/js_vue3/assets/app.scss b/resources/js_vue3/assets/app.scss
index aded7cda..ff470115 100644
--- a/resources/js_vue3/assets/app.scss
+++ b/resources/js_vue3/assets/app.scss
@@ -431,7 +431,7 @@ figure.no-icon {
 }
 
 .dots li[data-is-active]~li {
-  background: $grey;
+  background: $grey-light;
 }
 :root[data-theme="dark"] .dots li[data-is-active]~li {
   background: $black-bis;
@@ -448,6 +448,9 @@ figure.no-icon {
 }
 
 .dots.off li {
+  background: $grey-light;
+}
+:root[data-theme="dark"] .dots.off li {
   background: $black-bis;
 }
 
@@ -1296,15 +1299,26 @@ footer.main .field.is-grouped {
 	border-width: 0 0 1px;
 }
 
+.card {
+	background-color: none;
+	border: 1px solid $grey-lighter;
+  box-shadow: none;
+}
 :root[data-theme="dark"] .card {
 	background-color: $black-ter;
 	border: 1px solid $grey-darker;
 }
 
+.card-footer {
+	border-top: 1px solid $grey-lighter;
+}
 :root[data-theme="dark"] .card-footer {
 	border-top: 1px solid $grey-darker;
 }
 
+.card-footer-item:not(:last-child) {
+	border-right: 1px solid $grey-lighter;
+}
 :root[data-theme="dark"] .card-footer-item:not(:last-child) {
 	border-right: 1px solid $grey-darker;
 }
\ No newline at end of file
diff --git a/resources/js_vue3/views/settings/OAuth.vue b/resources/js_vue3/views/settings/OAuth.vue
index e852e3d6..6cc70d9b 100644
--- a/resources/js_vue3/views/settings/OAuth.vue
+++ b/resources/js_vue3/views/settings/OAuth.vue
@@ -185,7 +185,7 @@
                 </VueFooter>
             </FormWrapper>
         </div>
-        <div v-if="createPATModalIsVisible" class="is-overlay has-background-black-ter modal-otp">
+        <div v-if="createPATModalIsVisible" class="is-overlay modal-otp modal-background">
             <main class="main-section">
                 <FormWrapper title="settings.forms.new_token">
                     <form @submit.prevent="generatePAToken" @keydown="form.onKeydown($event)">
diff --git a/resources/js_vue3/views/twofaccounts/CreateUpdate.vue b/resources/js_vue3/views/twofaccounts/CreateUpdate.vue
index f5efb3fa..692a673b 100644
--- a/resources/js_vue3/views/twofaccounts/CreateUpdate.vue
+++ b/resources/js_vue3/views/twofaccounts/CreateUpdate.vue
@@ -425,7 +425,7 @@
                 <!-- qcode fileupload -->
                 <div v-if="!isEditMode" class="field is-grouped">
                     <div class="control">
-                        <div role="button" tabindex="0" class="file is-black is-small" @keyup.enter="qrcodeInputLabel.click()">
+                        <div role="button" tabindex="0" class="file is-small" @keyup.enter="qrcodeInputLabel.click()">
                             <label class="file-label" :title="$t('twofaccounts.forms.use_qrcode.title')" ref="qrcodeInputLabel">
                                 <input aria-hidden="true" tabindex="-1" class="file-input" type="file" accept="image/*" v-on:change="uploadQrcode" ref="qrcodeInput">
                                 <span class="file-cta">
diff --git a/resources/js_vue3/views/twofaccounts/Import.vue b/resources/js_vue3/views/twofaccounts/Import.vue
index 8c5a564f..739ded75 100644
--- a/resources/js_vue3/views/twofaccounts/Import.vue
+++ b/resources/js_vue3/views/twofaccounts/Import.vue
@@ -243,7 +243,9 @@
                                     <div class="media">
                                         <div class="media-left">
                                             <figure class="image is-32x32">
-                                                <FontAwesomeIcon :icon="['fas', 'qrcode']" size="2x" class="has-text-grey-darker" />
+                                                <UseColorMode v-slot="{ mode }">
+                                                    <FontAwesomeIcon :icon="['fas', 'qrcode']" size="2x" :class="mode == 'dark' ? 'has-text-grey-darker' : 'has-text-grey-lighter'" />
+                                                </UseColorMode>
                                             </figure>
                                         </div>
                                         <div class="media-content">
@@ -270,7 +272,9 @@
                                     <div class="media">
                                         <div class="media-left">
                                             <figure class="image is-32x32">
-                                                <FontAwesomeIcon :icon="['fas', 'file-lines']" size="2x" class="has-text-grey-darker" />
+                                                <UseColorMode v-slot="{ mode }">
+                                                    <FontAwesomeIcon :icon="['fas', 'file-lines']" size="2x" :class="mode == 'dark' ? 'has-text-grey-darker' : 'has-text-grey-lighter'" />
+                                                </UseColorMode>
                                             </figure>
                                         </div>
                                         <div class="media-content">