From 86c12cc57cb83dc48a69ee36ea35c06a81e88f08 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C5=BEe=20Fortun?= <joze.fortun@gmail.com>
Date: Thu, 28 Sep 2023 15:17:01 +0200
Subject: [PATCH] Sync how permissions buttons UI/UX looks

---
 .../admin/src/components/Apigw/CRouteList.vue    |  4 ++--
 .../admin/src/views/Federation/Nodes/List.vue    |  5 ++++-
 .../admin/src/views/System/AuthClient/List.vue   |  6 ++++--
 .../src/components/Admin/Module/FieldRowEdit.vue |  5 +++--
 .../web/compose/src/views/Admin/Pages/Edit.vue   |  5 +++--
 .../permissions/CPermissionsButton.vue           | 16 ++++------------
 6 files changed, 20 insertions(+), 21 deletions(-)

diff --git a/client/web/admin/src/components/Apigw/CRouteList.vue b/client/web/admin/src/components/Apigw/CRouteList.vue
index 7835f5ce5..105f5cf62 100644
--- a/client/web/admin/src/components/Apigw/CRouteList.vue
+++ b/client/web/admin/src/components/Apigw/CRouteList.vue
@@ -63,8 +63,8 @@
           v-if="canGrant"
           data-test-id="button-permissions"
           resource="corteza::system:apigw-route/*"
-          button-variant="link text-decoration-none text-dark regular-font rounded-0"
-          class="text-dark d-print-none border-0"
+          button-variant="light"
+          class="ml-1 text-dark d-print-none"
         >
           <font-awesome-icon :icon="['fas', 'lock']" />
           {{ $t('permissions') }}
diff --git a/client/web/admin/src/views/Federation/Nodes/List.vue b/client/web/admin/src/views/Federation/Nodes/List.vue
index 96f2ed91f..55c25054d 100644
--- a/client/web/admin/src/views/Federation/Nodes/List.vue
+++ b/client/web/admin/src/views/Federation/Nodes/List.vue
@@ -62,10 +62,13 @@
             />
           </template>
 
-          <b-dropdown-item>
+          <b-dropdown-item
+            link-class="p-0"
+          >
             <b-button
               size="sm"
               variant="link"
+              class="text-decoration-none"
               @click="openConfirmPending(n)"
             >
               <font-awesome-icon
diff --git a/client/web/admin/src/views/System/AuthClient/List.vue b/client/web/admin/src/views/System/AuthClient/List.vue
index 78a86ca29..5ed6872b8 100644
--- a/client/web/admin/src/views/System/AuthClient/List.vue
+++ b/client/web/admin/src/views/System/AuthClient/List.vue
@@ -86,12 +86,13 @@
 
           <b-dropdown-item
             v-if="a.authClientID && canGrant"
+            link-class="p-0"
           >
             <c-permissions-button
               :title="a.meta.name || a.handle || a.authClientID"
               :target="a.meta.name || a.handle || a.authClientID"
               :resource="`corteza::system:auth-client/${a.authClientID}`"
-              button-variant="link text-decoration-none text-dark regular-font rounded-0"
+              button-variant="link dropdown-item text-decoration-none text-dark regular-font rounded-0"
               class="text-dark d-print-none border-0"
             >
               <font-awesome-icon :icon="['fas', 'lock']" />
@@ -101,12 +102,13 @@
 
           <b-dropdown-item
             v-if="!a.isDefault && a.canDeleteAuthClient"
+            link-class="p-0"
           >
             <c-input-confirm
               borderless
               variant="link"
               size="md"
-              button-class="text-decoration-none text-dark regular-font rounded-0"
+              button-class="dropdown-item text-decoration-none text-dark regular-font rounded-0"
               class="w-100"
               @confirmed="handleDelete(a)"
             >
diff --git a/client/web/compose/src/components/Admin/Module/FieldRowEdit.vue b/client/web/compose/src/components/Admin/Module/FieldRowEdit.vue
index 3b78af801..989c8afff 100644
--- a/client/web/compose/src/components/Admin/Module/FieldRowEdit.vue
+++ b/client/web/compose/src/components/Admin/Module/FieldRowEdit.vue
@@ -97,12 +97,13 @@
     >
       <c-permissions-button
         v-if="canGrant && exists"
-        class="text-dark px-0 mr-2"
-        button-variant="link"
+        button-variant="outline-light"
+        size="sm"
         :title="value.label || value.name || value.fieldID"
         :target="value.label || value.name || value.fieldID"
         :tooltip="$t('permissions:resources.compose.module-field.tooltip')"
         :resource="`corteza::compose:module-field/${module.namespaceID}/${module.moduleID}/${value.fieldID}`"
+        class="text-dark border-0 mr-2"
       />
 
       <c-input-confirm
diff --git a/client/web/compose/src/views/Admin/Pages/Edit.vue b/client/web/compose/src/views/Admin/Pages/Edit.vue
index 54f74324c..b53f7ba0a 100644
--- a/client/web/compose/src/views/Admin/Pages/Edit.vue
+++ b/client/web/compose/src/views/Admin/Pages/Edit.vue
@@ -343,12 +343,13 @@
                     >
                       <c-permissions-button
                         v-if="page.canGrant && layout.pageLayoutID !== '0'"
-                        button-variant="link"
+                        button-variant="outline-light"
+                        size="sm"
                         :title="layout.meta.title || layout.handle || layout.pageLayoutID"
                         :target="layout.meta.title || layout.handle || layout.pageLayoutID"
                         :tooltip="$t('permissions:resources.compose.page-layout.tooltip')"
                         :resource="`corteza::compose:page-layout/${layout.namespaceID}/${layout.pageID}/${layout.pageLayoutID}`"
-                        class="text-dark px-0 mr-3"
+                        class="text-dark border-0 mr-2"
                       />
 
                       <c-input-confirm
diff --git a/lib/vue/src/components/permissions/CPermissionsButton.vue b/lib/vue/src/components/permissions/CPermissionsButton.vue
index 45b618d3c..581e60d8f 100644
--- a/lib/vue/src/components/permissions/CPermissionsButton.vue
+++ b/lib/vue/src/components/permissions/CPermissionsButton.vue
@@ -1,18 +1,9 @@
 <template>
-  <a
-    v-if="link"
-    data-test-id="link-permissions"
-    class="pointer"
-    :title="tooltip"
-    @click="onClick"
-  >
-    <font-awesome-icon :icon="['fas', 'lock']" />
-  </a>
   <b-button
-    v-else
     data-test-id="button-permissions"
     :title="tooltip"
     :variant="buttonVariant"
+    :size="size"
     @click="onClick"
   >
     <slot>
@@ -32,8 +23,9 @@ library.add(faLock)
 
 export default {
   props: {
-    link: {
-      type: Boolean,
+    size: {
+      type: String,
+      default: 'md',
     },
 
     buttonVariant: {