From 93f384a3ecbf8f1745e9ec1993aca0e4efd5b172 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Thu, 16 Dec 2021 13:00:55 +0530
Subject: [PATCH] enhancement: Changes button design for tables in settings
 page (#3553)

* enhancement: Changes button design for tables in settings page

* Minor fixes

* Review fixes
---
 .../assets/scss/_foundation-custom.scss          |  2 +-
 .../routes/dashboard/settings/agents/Index.vue   | 12 +++++++-----
 .../settings/attributes/CustomAttribute.vue      | 12 +++++++-----
 .../routes/dashboard/settings/canned/Index.vue   | 13 +++++++------
 .../routes/dashboard/settings/inbox/Index.vue    | 12 +++++++-----
 .../integrationapps/MultipleIntegrationHooks.vue |  7 ++++---
 .../dashboard/settings/integrations/Webhook.vue  | 16 +++++++++++-----
 .../routes/dashboard/settings/labels/Index.vue   | 12 +++++++-----
 .../routes/dashboard/settings/teams/Index.vue    | 12 +++++++-----
 9 files changed, 58 insertions(+), 40 deletions(-)

diff --git a/app/javascript/dashboard/assets/scss/_foundation-custom.scss b/app/javascript/dashboard/assets/scss/_foundation-custom.scss
index 1cfd002cf6aa..3b7eca0f7d5d 100644
--- a/app/javascript/dashboard/assets/scss/_foundation-custom.scss
+++ b/app/javascript/dashboard/assets/scss/_foundation-custom.scss
@@ -12,7 +12,7 @@
   padding: var(--space-normal);
 }
 
-.button-wrapper .button.link.grey-btn {
+.button-wrapper .button.grey-btn {
   margin-left: var(--space-normal);
 }
 
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
index 307fe9c7d92b..c3a75b0f6fd7 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
@@ -57,24 +57,26 @@
                   <div class="button-wrapper">
                     <woot-button
                       v-if="showEditAction(agent)"
-                      variant="link"
+                      v-tooltip.top="$t('AGENT_MGMT.EDIT.BUTTON_TEXT')"
+                      variant="smooth"
+                      size="tiny"
                       color-scheme="secondary"
                       icon="edit"
                       class-names="grey-btn"
                       @click="openEditPopup(agent)"
                     >
-                      {{ $t('AGENT_MGMT.EDIT.BUTTON_TEXT') }}
                     </woot-button>
                     <woot-button
                       v-if="showDeleteAction(agent)"
-                      variant="link"
-                      color-scheme="secondary"
+                      v-tooltip.top="$t('AGENT_MGMT.DELETE.BUTTON_TEXT')"
+                      variant="smooth"
+                      color-scheme="alert"
+                      size="tiny"
                       icon="dismiss-circle"
                       class-names="grey-btn"
                       :is-loading="loading[agent.id]"
                       @click="openDeletePopup(agent, index)"
                     >
-                      {{ $t('AGENT_MGMT.DELETE.BUTTON_TEXT') }}
                     </woot-button>
                   </div>
                 </td>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue b/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue
index 62e79a2c140d..1153490a9707 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue
@@ -50,22 +50,24 @@
               </td>
               <td class="button-wrapper">
                 <woot-button
-                  variant="link"
+                  v-tooltip.top="$t('ATTRIBUTES_MGMT.LIST.BUTTONS.EDIT')"
+                  variant="smooth"
+                  size="tiny"
                   color-scheme="secondary"
                   class-names="grey-btn"
                   icon="edit"
                   @click="openEditPopup(attribute)"
                 >
-                  {{ $t('ATTRIBUTES_MGMT.LIST.BUTTONS.EDIT') }}
                 </woot-button>
                 <woot-button
-                  variant="link"
-                  color-scheme="secondary"
+                  v-tooltip.top="$t('ATTRIBUTES_MGMT.LIST.BUTTONS.DELETE')"
+                  variant="smooth"
+                  color-scheme="alert"
+                  size="tiny"
                   icon="dismiss-circle"
                   class-names="grey-btn"
                   @click="openDelete(attribute)"
                 >
-                  {{ $t('ATTRIBUTES_MGMT.LIST.BUTTONS.DELETE') }}
                 </woot-button>
               </td>
             </tr>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
index 83adcd099a69..29e388e6c56b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
@@ -50,23 +50,24 @@
               <!-- Action Buttons -->
               <td class="button-wrapper">
                 <woot-button
-                  variant="link"
+                  v-tooltip.top="$t('CANNED_MGMT.EDIT.BUTTON_TEXT')"
+                  variant="smooth"
+                  size="tiny"
                   color-scheme="secondary"
                   icon="edit"
-                  class-names="grey-btn"
                   @click="openEditPopup(cannedItem)"
                 >
-                  {{ $t('CANNED_MGMT.EDIT.BUTTON_TEXT') }}
                 </woot-button>
                 <woot-button
-                  variant="link"
-                  color-scheme="secondary"
+                  v-tooltip.top="$t('CANNED_MGMT.DELETE.BUTTON_TEXT')"
+                  variant="smooth"
+                  color-scheme="alert"
+                  size="tiny"
                   icon="dismiss-circle"
                   class-names="grey-btn"
                   :is-loading="loading[cannedItem.id]"
                   @click="openDeletePopup(cannedItem, index)"
                 >
-                  {{ $t('CANNED_MGMT.DELETE.BUTTON_TEXT') }}
                 </woot-button>
               </td>
             </tr>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
index c53f697016ef..07edeee1540d 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
@@ -68,25 +68,27 @@
                   >
                     <woot-button
                       v-if="isAdmin"
+                      v-tooltip.top="$t('INBOX_MGMT.SETTINGS')"
+                      variant="smooth"
+                      size="tiny"
                       icon="settings"
-                      variant="link"
                       color-scheme="secondary"
                       class-names="grey-btn"
                     >
-                      {{ $t('INBOX_MGMT.SETTINGS') }}
                     </woot-button>
                   </router-link>
 
                   <woot-button
                     v-if="isAdmin"
-                    variant="link"
-                    color-scheme="secondary"
+                    v-tooltip.top="$t('INBOX_MGMT.DELETE.BUTTON_TEXT')"
+                    variant="smooth"
+                    color-scheme="alert"
+                    size="tiny"
                     class-names="grey-btn"
                     :is-loading="loading[item.id]"
                     icon="dismiss-circle"
                     @click="openDelete(item)"
                   >
-                    {{ $t('INBOX_MGMT.DELETE.BUTTON_TEXT') }}
                   </woot-button>
                 </div>
               </td>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrationapps/MultipleIntegrationHooks.vue b/app/javascript/dashboard/routes/dashboard/settings/integrationapps/MultipleIntegrationHooks.vue
index 085ce63ebab5..c19f52793e50 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrationapps/MultipleIntegrationHooks.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrationapps/MultipleIntegrationHooks.vue
@@ -24,13 +24,14 @@
             </td>
             <td class="button-wrapper">
               <woot-button
-                variant="link"
-                color-scheme="secondary"
+                v-tooltip.top="$t('INTEGRATION_APPS.LIST.DELETE.BUTTON_TEXT')"
+                variant="smooth"
+                color-scheme="alert"
+                size="tiny"
                 icon="dismiss-circle"
                 class-names="grey-btn"
                 @click="$emit('delete', hook)"
               >
-                {{ $t('INTEGRATION_APPS.LIST.DELETE.BUTTON_TEXT') }}
               </woot-button>
             </td>
           </tr>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhook.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhook.vue
index 38e198cee34f..2c489585caed 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhook.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhook.vue
@@ -43,20 +43,26 @@
               </td>
               <td class="button-wrapper">
                 <woot-button
-                  variant="link"
+                  v-tooltip.top="
+                    $t('INTEGRATION_SETTINGS.WEBHOOK.EDIT.BUTTON_TEXT')
+                  "
+                  variant="smooth"
+                  size="tiny"
                   color-scheme="secondary"
                   icon="edit"
                   @click="openEditPopup(webHookItem)"
                 >
-                  {{ $t('INTEGRATION_SETTINGS.WEBHOOK.EDIT.BUTTON_TEXT') }}
                 </woot-button>
                 <woot-button
-                  variant="link"
+                  v-tooltip.top="
+                    $t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.BUTTON_TEXT')
+                  "
+                  variant="smooth"
+                  color-scheme="alert"
+                  size="tiny"
                   icon="dismiss-circle"
-                  color-scheme="secondary"
                   @click="openDeletePopup(webHookItem, index)"
                 >
-                  {{ $t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.BUTTON_TEXT') }}
                 </woot-button>
               </td>
             </tr>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue
index 712d801e7b18..19fde4428788 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue
@@ -44,24 +44,26 @@
               </td>
               <td class="button-wrapper">
                 <woot-button
-                  variant="link"
+                  v-tooltip.top="$t('LABEL_MGMT.FORM.EDIT')"
+                  variant="smooth"
+                  size="tiny"
                   color-scheme="secondary"
                   class-names="grey-btn"
                   :is-loading="loading[label.id]"
                   icon="edit"
                   @click="openEditPopup(label)"
                 >
-                  {{ $t('LABEL_MGMT.FORM.EDIT') }}
                 </woot-button>
                 <woot-button
-                  variant="link"
-                  color-scheme="secondary"
+                  v-tooltip.top="$t('LABEL_MGMT.FORM.DELETE')"
+                  variant="smooth"
+                  color-scheme="alert"
+                  size="tiny"
                   icon="dismiss-circle"
                   class-names="grey-btn"
                   :is-loading="loading[label.id]"
                   @click="openDeletePopup(label, index)"
                 >
-                  {{ $t('LABEL_MGMT.FORM.DELETE') }}
                 </woot-button>
               </td>
             </tr>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue
index f55169672a95..5eefe008f482 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue
@@ -27,24 +27,26 @@
                   >
                     <woot-button
                       v-if="isAdmin"
-                      variant="link"
+                      v-tooltip.top="$t('TEAMS_SETTINGS.LIST.EDIT_TEAM')"
+                      variant="smooth"
+                      size="tiny"
                       color-scheme="secondary"
                       class-names="grey-btn"
                       icon="settings"
                     >
-                      {{ $t('TEAMS_SETTINGS.LIST.EDIT_TEAM') }}
                     </woot-button>
                   </router-link>
                   <woot-button
                     v-if="isAdmin"
-                    variant="link"
-                    color-scheme="secondary"
+                    v-tooltip.top="$t('TEAMS_SETTINGS.DELETE.BUTTON_TEXT')"
+                    variant="smooth"
+                    color-scheme="alert"
+                    size="tiny"
                     icon="dismiss-circle"
                     class-names="grey-btn"
                     :is-loading="loading[item.id]"
                     @click="openDelete(item)"
                   >
-                    {{ $t('TEAMS_SETTINGS.DELETE.BUTTON_TEXT') }}
                   </woot-button>
                 </div>
               </td>