Replace Element plus button with custom component (#2935)

Signed-off-by: Sameh16 <sameh_mohamed16@hotmail.com>
Signed-off-by: [Your Name] <your_email@example.com>

Author: Sameh16

frontend/components.d.ts

@@ -9,8 +9,6 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
-    ElAvatar: typeof import('element-plus/es')['ElAvatar']
-    ElButton: typeof import('element-plus/es')['ElButton']
     ElCard: typeof import('element-plus/es')['ElCard']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCollapse: typeof import('element-plus/es')['ElCollapse']

frontend/config/styles/components/button.scss

@@ -88,6 +88,30 @@
   --lf-btn-secondary-loading-background: var(--lf-color-white);
   --lf-btn-secondary-loading-border: var(--lf-color-gray-200);
 
+
+  /* Bordered */
+  --lf-btn-bordered-text: var(--lf-color-gray-500);
+  --lf-btn-bordered-background: var(--lf-color-white);
+  --lf-btn-bordered-border: var(--lf-color-gray-250);
+  --lf-btn-bordered-shadow: var(--shadow-default);
+  // Hover
+  --lf-btn-bordered-hover-text: var(--lf-color-primary-500);
+  --lf-btn-bordered-hover-background: var(--lf-color-primary-125);
+  --lf-btn-bordered-hover-border: var(--lf-color-primary-150);
+  // Active
+  --lf-btn-bordered-active-text: var(--lf-color-primary-500);
+  --lf-btn-bordered-active-background: var(--lf-color-primary-125);
+  --lf-btn-bordered-active-border: var(--lf-color-primary-500);
+  // Disabled
+  --lf-btn-bordered-disabled-text: var(--lf-color-gray-400);
+  --lf-btn-bordered-disabled-background: var(--lf-color-white);
+  --lf-btn-bordered-disabled-border: var(--lf-color-gray-100);
+  // Loading
+  --lf-btn-bordered-loading-text: var(--lf-color-gray-400);
+  --lf-btn-bordered-loading-background: var(--lf-color-white);
+  --lf-btn-bordered-loading-border: var(--lf-color-gray-200);
+  
+
   /* Danger */
   --lf-btn-danger-text: var(--lf-color-white);
   --lf-btn-danger-background: var(--lf-color-red-500);
@@ -157,6 +181,30 @@
   --lf-btn-secondary-ghost-loading-border: var(--lf-color-transparent);
 
 
+  /* Secondary Gray */
+  --lf-btn-secondary-gray-text: var(--lf-color-primary-500);
+  --lf-btn-secondary-gray-background: linear-gradient(180deg, var(--lf-color-white) 0%, var(--lf-color-gray-250) 100%);
+  --lf-btn-secondary-gray-border: var(--lf-color-gray-250);
+  --lf-btn-secondary-gray-shadow: var(--shadow-none);
+  // Hover
+  --lf-btn-secondary-gray-hover-text: var(--lf-color-primary-500);
+  --lf-btn-secondary-gray-hover-background:  linear-gradient(180deg, var(--lf-color-white) 0%, var(--lf-color-gray-250) 100%);
+  --lf-btn-secondary-gray-hover-border: var(--lf-color-gray-250);
+  // Active
+  --lf-btn-secondary-gray-active-text: var(--lf-color-primary-500);
+  --lf-btn-secondary-gray-active-background: linear-gradient(180deg, var(--lf-color-white) 0%, var(--lf-color-gray-250) 100%);
+  --lf-btn-secondary-gray-active-border: var(--lf-color-gray-250);
+  // Disabled
+  --lf-btn-secondary-gray-disabled-text: var(--lf-color-gray-400);
+  --lf-btn-secondary-gray-disabled-background: linear-gradient(180deg, var(--lf-color-white) 0%, var(--lf-color-gray-100) 100%);
+  --lf-btn-secondary-gray-disabled-border: var(--lf-color-gray-100);
+  // Loading
+  --lf-btn-secondary-gray-loading-text: var(--lf-color-gray-400);
+  --lf-btn-secondary-gray-loading-background: var(--lf-color-transparent);
+  --lf-btn-secondary-gray-loading-border: var(--lf-color-transparent);
+  
+  
+
   /* Secondary Ghost Light */
   --lf-btn-secondary-ghost-light-text: var(--lf-color-gray-500);
   --lf-btn-secondary-ghost-light-background: var(--lf-color-transparent);

frontend/config/styles/variables/_colors.scss

@@ -18,6 +18,8 @@
   --lf-color-primary-400: #33A9FF;
   --lf-color-primary-300: #66BFFF;
   --lf-color-primary-200: #99D4FF;
+  --lf-color-primary-150: #c6e2ff;
+  --lf-color-primary-125: #ecf5ff;
   --lf-color-primary-100: #CCEAFF;
   --lf-color-primary-50: #E6F4FF;
   --lf-color-primary-25: #F6FAFF;
@@ -38,6 +40,7 @@
   --lf-color-gray-500: #6B7280;
   --lf-color-gray-400: #9CA3AF;
   --lf-color-gray-300: #D1D5DB;
+  --lf-color-gray-250: #e6e6e6;
   --lf-color-gray-200: #E5E7EB;
   --lf-color-gray-100: #F3F4F6;
   --lf-color-gray-50: #F9FAFB;

frontend/src/assets/scss/buttons.scss

@@ -180,9 +180,6 @@
     @apply mr-2;
   }
 
-  &.el-button + &.el-button {
-    @apply ml-0;
-  }
 }
 
 .btn-group {
@@ -192,7 +189,3 @@
 .btn-group > .btn:not(:last-child) {
   @apply -mr-0.5;
 }
-
-.el-button {
-  --el-button-outline-color: transparent !important;
-}

frontend/src/assets/scss/filter.scss

@@ -37,11 +37,11 @@
     }
   }
 
-  &-trigger.el-button,
-  &-trigger.el-button:focus:not(.is-expanded),
-  .el-input-group__append &-trigger.el-button,
+  &-trigger.c-btn,
+  &-trigger.c-btn:focus:not(.is-expanded),
+  .el-input-group__append &-trigger.c-btn,
   .el-input-group__append
-    &-trigger.el-button:focus:not(.is-expanded) {
+    &-trigger.c-btn:focus:not(.is-expanded) {
     @apply h-10 flex justify-center items-center py-0 px-4 bg-white border border-l-0 rounded-l-none border-gray-300 outline-none text-gray-600;
     transition: all 0.2s ease;
 
@@ -56,7 +56,7 @@
 .filter-list-operator {
   @apply text-xs mb-4;
 
-  &-btn.el-button {
+  &-btn.c-btn {
     @apply h-8 flex items-center p-2 bg-white border border-gray-300 outline-none text-gray-600 text-xs;
     transition: all 0.2s ease;
 

frontend/src/config/charts/helpers/tooltip.js

@@ -135,10 +135,10 @@ export const externalTooltipHandler = (
     );
 
     if (!footerBtn && tooltip.footer) {
-      footerBtn = document.createElement('el-button');
+      footerBtn = document.createElement('button');
       footerBtn.id = 'custom-tooltip-footer-btn';
       tooltip.footer.forEach((lines) => {
-        footerBtn.className = 'btn btn--sm btn--full btn--secondary mt-4';
+        footerBtn.className = 'c-btn c-btn--small w-full c-btn--secondary-gray mt-4';
         footerBtn.innerText = lines;
         tooltipEl.appendChild(footerBtn);
       });

frontend/src/config/integrations/confluence/components/confluence-settings-drawer.vue

@@ -8,7 +8,7 @@
     @close="cancel"
   >
     <template #beforeTitle>
-      <img class="w-6 h-6 mr-2" :src="logoUrl" alt="Confluence logo" />
+      <img class="min-w-6 h-6 mr-2" :src="logoUrl" alt="Confluence logo" />
     </template>
     <template #content>
       <div class="text-gray-900 text-sm font-medium">
@@ -55,22 +55,25 @@
 
     <template #footer>
       <div>
-        <el-button
-          class="btn btn--md btn--secondary mr-4"
+        <lf-button
+          type="secondary-gray"
+          size="medium"
+          class="mr-4"
           :disabled="loading"
           @click="cancel"
         >
           Cancel
-        </el-button>
-        <el-button
+        </lf-button>
+        <lf-button
           id="confluenceConnect"
+          type="primary"
+          size="medium"
           :disabled="$v.$invalid || !hasFormChanged || loading"
-          class="btn btn--md btn--primary"
           :loading="loading"
           @click="connect"
         >
           {{ integration?.settings ? 'Update' : 'Connect' }}
-        </el-button>
+        </lf-button>
       </div>
     </template>
   </app-drawer>
@@ -87,6 +90,7 @@ import { mapActions } from '@/shared/vuex/vuex.helpers';
 import useProductTracking from '@/shared/modules/monitoring/useProductTracking';
 import { EventType, FeatureEventKey } from '@/shared/modules/monitoring/types/event';
 import { Platform } from '@/shared/modules/platform/types/Platform';
+import LfButton from '@/ui-kit/button/Button.vue';
 
 const emit = defineEmits(['update:modelValue']);
 const props = defineProps({

frontend/src/config/integrations/devto/components/devto-connect-drawer.vue

@@ -8,7 +8,7 @@
     @close="cancel()"
   >
     <template #beforeTitle>
-      <img class="w-6 h-6 mr-2" :src="logoUrl" alt="DEV logo" />
+      <img class="min-w-6 h-6 mr-2" :src="logoUrl" alt="DEV logo" />
     </template>
     <template #content>
       <el-form class="form integration-devto-form" @submit.prevent>
@@ -79,27 +79,29 @@
                   />
                 </template>
               </el-input>
-              <el-button
+              <lf-button
                 v-if="!isLastOrganization"
                 :disabled="!isAPIConnectionValid"
-                class="btn btn-link btn-link--md btn-link--primary w-10 h-10"
+                type="primary-link"
+                size="medium"
+                class="w-10 h-10"
                 @click="removeOrganization(org.id)"
               >
                 <lf-icon name="trash-can" :size="20" class="text-black" />
-              </el-button>
+              </lf-button>
             </div>
             <span
               v-if="org.touched && !org.valid"
               class="el-form-item__error"
             >Organization slug is not valid</span>
           </el-form-item>
-          <el-button
-            class="btn btn-link btn-link--primary"
+          <lf-button
+            type="primary-link"
             :disabled="!isAPIConnectionValid"
             @click="addNewOrganization"
           >
             + Add organization link
-          </el-button>
+          </lf-button>
           <span class="text-sm font-medium mt-8">Track user articles</span>
           <span
             class="text-2xs font-light mb-2 text-gray-600"
@@ -136,50 +138,55 @@
                   />
                 </template>
               </el-input>
-              <el-button
+              <lf-button
                 v-if="!isLastUser"
                 :disabled="!isAPIConnectionValid"
-                class="btn btn-link btn-link--md btn-link--primary w-10 h-10"
+                type="primary-link"
+                size="medium"
+                class="w-10 h-10"
                 @click="removeUser(user.id)"
               >
                 <lf-icon name="trash-can" :size="20" class="text-black" />
-              </el-button>
+              </lf-button>
             </div>
             <span
               v-if="user.touched && !user.valid"
               class="el-form-item__error"
             >User slug is not valid</span>
           </el-form-item>
-          <el-button
-            class="btn btn-link btn-link--primary"
+          <lf-button
+            type="primary-link"
             :disabled="!isAPIConnectionValid"
             @click="addNewUser"
           >
             + Add user link
-          </el-button>
+          </lf-button>
         </div>
       </el-form>
     </template>
     <template #footer>
       <div>
-        <el-button
-          class="btn btn--md btn--secondary mr-4"
+        <lf-button
+          type="secondary-gray"
+          size="medium"
+          class="mr-4"
           :disabled="loading"
           @click="cancel"
         >
           Cancel
-        </el-button>
-        <el-button
+        </lf-button>
+        <lf-button
           id="devConnect"
-          class="btn btn--md btn--primary"
+          type="primary"
+          size="medium"
           :disabled="
             connectDisabled || loading || !isAPIConnectionValid || isValidating
           "
           :loading="loading"
           @click="save"
         >
           Connect
-        </el-button>
+        </lf-button>
       </div>
     </template>
   </app-drawer>
@@ -206,6 +213,7 @@ import useProductTracking from '@/shared/modules/monitoring/useProductTracking';
 import { EventType, FeatureEventKey } from '@/shared/modules/monitoring/types/event';
 import { Platform } from '@/shared/modules/platform/types/Platform';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
+import LfButton from '@/ui-kit/button/Button.vue';
 
 const { doDevtoConnect } = mapActions('integration');