From 5d01685ae185ae040a0f40b8d7835db4cfed2a86 Mon Sep 17 00:00:00 2001
From: Bubka <858858+Bubka@users.noreply.github.com>
Date: Tue, 13 Feb 2024 09:34:08 +0100
Subject: [PATCH] Fix issues on Light theme

---
 resources/js/assets/app.scss              |  4 ++++
 resources/js/views/admin/Users.vue        | 26 +++++++++++------------
 resources/js/views/admin/users/Manage.vue | 13 +++++-------
 3 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/resources/js/assets/app.scss b/resources/js/assets/app.scss
index d0747da6..75ddb5c7 100644
--- a/resources/js/assets/app.scss
+++ b/resources/js/assets/app.scss
@@ -712,6 +712,10 @@ button.is-main {
   box-shadow: $button-focus-box-shadow-size $button-focus-box-shadow-color;
 }
 
+.button.has-normal-radius {
+  border-radius: $radius !important;
+}
+
 .file[role=button]:focus-visible {
   border-radius: $radius;
 }
diff --git a/resources/js/views/admin/Users.vue b/resources/js/views/admin/Users.vue
index f0f36556..3e82142b 100644
--- a/resources/js/views/admin/Users.vue
+++ b/resources/js/views/admin/Users.vue
@@ -155,20 +155,20 @@
                             <!-- admin tag -->
                             <span class="is-block has-ellipsis is-family-primary is-size-6 is-size-7-mobile has-text-grey">{{ user.email }}</span>
                             <!-- tag -->
-                            <div class="tags mt-2">
-                                <span v-if="user.is_admin" class="tag is-rounded has-background-black-bis has-text-warning-dark">admin</span>
-                                <span v-if="user.oauth_provider" class="tag is-rounded has-background-black-bis has-text-grey">oauth: {{ user.oauth_provider }}</span>
-                            </div>
+                            <UseColorMode v-slot="{ mode }">
+                                <div class="tags mt-2">
+                                    <span v-if="user.is_admin" class="tag is-rounded has-text-warning-dark" :class="mode == 'dark' ? 'has-background-black-bis' : 'has-background-grey-lighter'" >admin</span>
+                                    <span v-if="user.oauth_provider" class="tag is-rounded  has-text-grey" :class="mode == 'dark' ? 'has-background-black-bis' : 'has-background-grey-lighter'" >oauth: {{ user.oauth_provider }}</span>
+                                </div>
+                            </UseColorMode>
                         </div>
-                        <div>
-                            <div class="tags ml-3">
-                                <UseColorMode v-slot="{ mode }">
-                                    <!-- manage link -->
-                                    <RouterLink :to="{ name: 'admin.users.manage', params: { userId: user.id }}" class="button tag is-pulled-right" :class="mode == 'dark' ? 'is-dark' : 'is-white'" :title="$t('commons.manage')">
-                                        {{ $t('commons.manage') }}
-                                    </RouterLink>
-                                </UseColorMode>
-                            </div>
+                        <div class="ml-3">
+                            <UseColorMode v-slot="{ mode }">
+                                <!-- manage link -->
+                                <RouterLink :to="{ name: 'admin.users.manage', params: { userId: user.id }}" class="button is-small has-normal-radius is-pulled-right" :class="{'is-dark' : mode == 'dark'}" :title="$t('commons.manage')">
+                                    {{ $t('commons.manage') }}
+                                </RouterLink>
+                            </UseColorMode>
                         </div>
                     </div>
                     <!-- <div class="mt-2 is-size-7 is-pulled-right">
diff --git a/resources/js/views/admin/users/Manage.vue b/resources/js/views/admin/users/Manage.vue
index fa194b9f..aea0f88e 100644
--- a/resources/js/views/admin/users/Manage.vue
+++ b/resources/js/views/admin/users/Manage.vue
@@ -181,7 +181,6 @@
         <h1 class="title has-text-grey-dark mb-6">
             {{ $t('admin.user_management') }}
         </h1>
-        <!-- <button class="button is-text is-pulled-right" @click="getUser()">.</button> -->
         <!-- loader -->
         <div v-if="isFetching || ! managedUser" class="has-text-centered">
             <span class="is-size-4">
@@ -196,6 +195,7 @@
                 </UseColorMode>
                 <p class="subtitle is-6 block">{{ managedUser.info.email }}</p>
             </div>
+            <!-- oauth banner -->
             <div v-if="managedUser.info.oauth_provider" class="notification is-dark is-size-7-mobile has-text-centered">
                 {{ $t('admin.account_bound_to_x_via_oauth', { provider: managedUser.info.oauth_provider }) }}
             </div>
@@ -214,11 +214,11 @@
                             <div class="tags ml-3 is-right">
                                 <UseColorMode v-slot="{ mode }">
                                     <!-- resend email button -->
-                                    <button v-if="managedUser.password_reset" class="button tag is-pulled-right has-background-link" :class="mode == 'dark' ? 'is-dark' : 'is-white'" @click="resendPasswordEmail" :title="$t('admin.resend_email_title')">
+                                    <button v-if="managedUser.password_reset" class="button tag is-pulled-right" :class="mode == 'dark' ? 'is-dark has-background-link' : 'is-white'" @click="resendPasswordEmail" :title="$t('admin.resend_email_title')">
                                         {{ $t('admin.resend_email') }}
                                     </button>
                                     <!-- reset password button -->
-                                    <button class="button tag is-pulled-right has-background-link" :class="mode == 'dark' ? 'is-dark' : 'is-white'" @click="resetPassword" :title="$t('admin.reset_password_title')">
+                                    <button class="button tag is-pulled-right " :class="mode == 'dark' ? 'is-dark has-background-link' : 'is-white'" @click="resetPassword" :title="$t('admin.reset_password_title')">
                                         {{ $t('admin.reset_password') }}
                                     </button>
                                 </UseColorMode>
@@ -243,7 +243,7 @@
                         <div class="tags ml-3 is-right">
                             <UseColorMode v-slot="{ mode }">
                                 <!-- manage link -->
-                                <button class="button tag is-pulled-right has-background-link" :class="mode == 'dark' ? 'is-dark' : 'is-white'" @click="revokePATs" :title="$t('admin.revoke_all_pat_for_user')">
+                                <button class="button tag is-pulled-right" :class="mode == 'dark' ? 'is-dark has-background-link' : 'is-white'" @click="revokePATs" :title="$t('admin.revoke_all_pat_for_user')">
                                     {{ $t('settings.revoke') }}
                                 </button>
                             </UseColorMode>
@@ -261,7 +261,7 @@
                         <div class="tags ml-3 is-right">
                             <UseColorMode v-slot="{ mode }">
                                 <!-- manage link -->
-                                <button class="button tag is-pulled-right has-background-link" :class="mode == 'dark' ? 'is-dark' : 'is-white'" :title="$t('admin.revoke_all_devices_for_user')">
+                                <button class="button tag is-pulled-right" :class="mode == 'dark' ? 'is-dark has-background-link' : 'is-white'" :title="$t('admin.revoke_all_devices_for_user')">
                                     {{ $t('settings.revoke') }}
                                 </button>
                             </UseColorMode>
@@ -271,9 +271,6 @@
             </div>
             <h2 class="title is-4 has-text-grey-light">{{ $t('settings.preferences') }}</h2>
             <div class="about-debug box is-family-monospace is-size-7">
-                <!-- <button id="btnCopyUserPreferences" :aria-label="$t('commons.copy_to_clipboard')" class="button is-like-text is-pulled-right is-small is-text" @click.stop="copyToClipboard(listUserPreferences.innerText)">
-                    <FontAwesomeIcon :icon="['fas', 'copy']" />
-                </button> -->
                 <CopyButton id="btnCopyEnvVars" :token="listUserPreferences?.innerText" />
                 <ul ref="listUserPreferences" id="listUserPreferences">
                     <li v-for="(value, preference) in managedUser.info.preferences" :value="value" :key="preference">