From 9bb3dc43df1eb31e5764ec7af57c0b4e652fcdb4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gustavo=20Bascop=C3=A9?= <gustavo.bascope@processmaker.com>
Date: Tue, 4 Jun 2024 11:59:12 -0400
Subject: [PATCH 1/2] changed the ellipsis menu style in Tables

---
 .../js/components/shared/EllipsisMenu.vue     | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/shared/EllipsisMenu.vue b/resources/js/components/shared/EllipsisMenu.vue
index 7499234d74..e395187b13 100644
--- a/resources/js/components/shared/EllipsisMenu.vue
+++ b/resources/js/components/shared/EllipsisMenu.vue
@@ -1,11 +1,13 @@
 <template>
   <b-dropdown
     v-if="filterActions.length > 0"
+    v-b-tooltip.hover="{ placement: 'bottom', title: 'Options', variant: 'secondary', customClass: 'ellipsis-tooltip' }"
     :variant="variant ? variant : 'outlined-secondary'"
     toggle-class="static-header"
     no-flip
     lazy
     right
+    no-caret
     offset="0"
     class="ellipsis-dropdown-main static-header"
     :popper-opts="{ placement: 'bottom-end' }"
@@ -26,8 +28,7 @@
     </template>
     <template v-else #button-content>
       <span class="text-capitalize screen-toolbar-button">
-        <i class="fas fa-cog" />
-        {{ $t("Options") }}
+        <i class="fas fa-ellipsis-h ellipsis-menu-icon p-0" />
       </span>
     </template>
     <div v-if="divider === true">
@@ -292,5 +293,19 @@ export default {
 <style>
 .static-header {
   position: static !important;
+  width: 40px;
+  height: 40px;
+  box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.15);
+  border-radius: 4px;
+  background-color: #FFFFFF;
+}
+.static-header:hover {
+  background-color: #EBEEF2;
+}
+.ellipsis-tooltip {
+  border-radius: 4px;
+}
+.ellipsis-tooltip .arrow {
+  display: none;
 }
 </style>

From 28cb7d52789604f816fad7dc14f01542ec15c8b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gustavo=20Bascop=C3=A9?= <gustavo.bascope@processmaker.com>
Date: Wed, 5 Jun 2024 09:05:35 -0400
Subject: [PATCH 2/2] add new ellipsis style in launchpad

---
 .../js/components/shared/EllipsisMenu.vue     | 20 +++++++++++++++++--
 .../components/scss/processes.css             |  7 +------
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/resources/js/components/shared/EllipsisMenu.vue b/resources/js/components/shared/EllipsisMenu.vue
index e395187b13..2fe28d9926 100644
--- a/resources/js/components/shared/EllipsisMenu.vue
+++ b/resources/js/components/shared/EllipsisMenu.vue
@@ -3,7 +3,7 @@
     v-if="filterActions.length > 0"
     v-b-tooltip.hover="{ placement: 'bottom', title: 'Options', variant: 'secondary', customClass: 'ellipsis-tooltip' }"
     :variant="variant ? variant : 'outlined-secondary'"
-    toggle-class="static-header"
+    :toggle-class="['static-header', { 'contracted-menu': !lauchpad }, { 'expanded-menu': lauchpad }]"
     no-flip
     lazy
     right
@@ -24,7 +24,10 @@
       </span>
     </template>
     <template v-else-if="lauchpad" #button-content>
-      <i class="fas fa-ellipsis-h ellipsis-menu-icon p-0" />
+      <i class="fas fa-ellipsis-v ellipsis-menu-icon p-0 ellipsis-icon-v" />
+      <span>
+        {{ $t('Options') }}
+      </span>
     </template>
     <template v-else #button-content>
       <span class="text-capitalize screen-toolbar-button">
@@ -293,6 +296,8 @@ export default {
 <style>
 .static-header {
   position: static !important;
+}
+.contracted-menu {
   width: 40px;
   height: 40px;
   box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.15);
@@ -301,6 +306,17 @@ export default {
 }
 .static-header:hover {
   background-color: #EBEEF2;
+  border-radius: 4px;
+}
+.expanded-menu {
+  color: #556271;
+  text-transform: none;
+  border-radius: 4px;
+  font-size: 16px;
+}
+.ellipsis-icon-v {
+  height: 16px;
+  width: 16px;
 }
 .ellipsis-tooltip {
   border-radius: 4px;
diff --git a/resources/js/processes-catalogue/components/scss/processes.css b/resources/js/processes-catalogue/components/scss/processes.css
index 60277d471b..de034f18be 100644
--- a/resources/js/processes-catalogue/components/scss/processes.css
+++ b/resources/js/processes-catalogue/components/scss/processes.css
@@ -44,12 +44,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: white;
-  border: 1px solid #CDDDEE;
-  border-radius: 19px;
-  width: 32px;
-  height: 32px;
-  margin: 0px 8px;
+  margin-right: 5px;
 }
 .ellipsis-border .dropdown-toggle::after {
     display:none;