feat: integrations UI improvement

frontend/config/styles/components/button.scss

@@ -180,6 +180,27 @@
   --lf-btn-secondary-ghost-loading-background: var(--lf-color-transparent);
   --lf-btn-secondary-ghost-loading-border: var(--lf-color-transparent);
 
+  /* Danger Ghost */
+  --lf-btn-danger-ghost-text: var(--lf-color-red-500);
+  --lf-btn-danger-ghost-background: var(--lf-color-transparent);
+  --lf-btn-danger-ghost-border: var(--lf-color-transparent);
+  --lf-btn-danger-ghost-shadow: var(--shadow-none);
+  // Hover
+  --lf-btn-danger-ghost-hover-text: var(--lf-color-red-500);
+  --lf-btn-danger-ghost-hover-background: var(--lf-color-red-100);
+  --lf-btn-danger-ghost-hover-border: var(--lf-color-red-100);
+  // Active
+  --lf-btn-danger-ghost-active-text: var(--lf-color-red-500);
+  --lf-btn-danger-ghost-active-background: var(--lf-color-red-100);
+  --lf-btn-danger-ghost-active-border: var(--lf-color-red-100);
+  // Disabled
+  --lf-btn-danger-ghost-disabled-text: var(--lf-color-red-200);
+  --lf-btn-danger-ghost-disabled-background: var(--lf-color-transparent);
+  --lf-btn-danger-ghost-disabled-border: var(--lf-color-transparent);
+  // Loading
+  --lf-btn-danger-ghost-loading-text: var(--lf-color-red-200);
+  --lf-btn-danger-ghost-loading-background: var(--lf-color-transparent);
+  --lf-btn-danger-ghost-loading-border: var(--lf-color-transparent);
 
   /* Secondary Gray */
   --lf-btn-secondary-gray-text: var(--lf-color-primary-500);
@@ -272,4 +293,23 @@
   --lf-btn-secondary-link-loading-text: var(--lf-color-gray-400);
   --lf-btn-secondary-link-loading-background: var(--lf-color-transparent);
   --lf-btn-secondary-link-loading-border: var(--lf-color-transparent);
+
+  /* Outline */
+  --lf-btn-outline-text: var(--lf-color-gray-900);
+  --lf-btn-outline-background: var(--lf-color-white);
+  --lf-btn-outline-border: var(--lf-color-gray-200);
+  --lf-btn-outline-shadow: var(--shadow-none);
+  // Active
+  --lf-btn-outline-active-text: var(--lf-color-gray-900);
+  --lf-btn-outline-active-background: var(--lf-color-white);
+  --lf-btn-outline-active-border: var(--lf-color-gray-200);
+  // Disabled
+  --lf-btn-outline-disabled-text: var(--lf-color-gray-400);
+  --lf-btn-outline-disabled-background: var(--lf-color-white);
+  --lf-btn-outline-disabled-border: var(--lf-color-gray-200);
+  // Loading
+  --lf-btn-outline-loading-text: var(--lf-color-gray-400);
+  --lf-btn-outline-loading-background: var(--lf-color-white);
+  --lf-btn-outline-loading-border: var(--lf-color-gray-200);
+
 }

frontend/config/styles/components/switch.scss

@@ -24,19 +24,9 @@
 
   // Disabled Unchecked
   --lf-switch-disabled-unchecked-handle: var(--lf-color-white);
-
-  // Disabled Checked
+  --lf-switch-disabled-background: var(--lf-color-gray-200);
   --lf-switch-disabled-checked-handle: var(--lf-color-white);
-
-  /* ---------------------------------- *\
-           Switch sizes
-  \* ---------------------------------- */
-
-  /* Tiny */
-  --lf-switch-tiny-height: #{rem(16)};
-  --lf-switch-tiny-width: #{rem(30)};
-  --lf-switch-tiny-font-size: #{rem(12)};
-  --lf-switch-tiny-line-height: #{rem(15)};
+  --lf-switch-disabled-checked-background: var(--lf-color-primary-500);
 
   /* Small */
   --lf-switch-small-height: #{rem(20)};

frontend/src/assets/scss/drawer.scss

@@ -1,7 +1,8 @@
 .el-drawer {
   @apply opacity-100;
-  --el-drawer-padding-primary: 24px;
+  --el-drawer-padding-primary: 20px 24px;
   box-shadow: -4px 0px 10px rgba(0, 0, 0, 0.05);
+  overflow: unset;
 
   &__header {
     @apply mb-4;
@@ -12,7 +13,8 @@
   }
 
   &__footer {
-    @apply p-6 bg-gray-50 border-t border-gray-200;
+    @apply px-6 py-5 bg-gray-50 border-t border-gray-100 bg-white;
+    box-shadow: 0 -4px 20px 0 rgba(0, 0, 0, 0.05);
   }
 
   &__close-btn {

frontend/src/assets/scss/form/input.scss

@@ -48,6 +48,22 @@
       border: 1px solid var(--el-input-focus-border-color);
     }
   }
+
+  &.is-rounded .el-input__wrapper{
+    @apply rounded-full;
+  }
+}
+
+.input-label-container {
+  @apply border border-solid border-gray-200 rounded-full flex items-stretch;
+
+  span {
+    @apply text-gray-900 text-small px-3 bg-gray-50 border-r border-r-gray-200 flex items-center
+    rounded-l-full;
+  }
+  .el-input__wrapper{
+    @apply border-none rounded-l-none rounded-r-full #{!important};
+  }
 }
 
 // Inner input/textarea color

frontend/src/assets/scss/form/select.scss

@@ -138,3 +138,15 @@
     }
   }
 }
+
+.el-select.el-select--pill {
+  .el-select__wrapper {
+    &.el-tooltip__trigger {
+      @apply rounded-full;
+    }
+
+    .el-select__suffix i{
+      @apply text-gray-900;
+    }
+  }
+}

frontend/src/assets/scss/layout.scss

@@ -102,3 +102,7 @@ input:-webkit-autofill:active {
   transition: background-color 5000s ease-in-out 0s;
   -webkit-text-fill-color: #000 !important;
 }
+
+.el-overlay .el-splitter-panel{
+  overflow: unset;
+}

frontend/src/config/integrations/confluence/components/confluence-connect.vue

@@ -1,6 +1,6 @@
 <template>
   <lf-button
-    type="secondary"
+    type="outline"
     @click="isConfluenceSettingsDrawerVisible = true"
   >
     <lf-icon name="link-simple" />

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

@@ -10,6 +10,9 @@
     <template #beforeTitle>
       <img class="min-w-6 h-6 mr-2" :src="logoUrl" alt="Confluence logo" />
     </template>
+    <template #belowTitle>
+      <drawer-description integration-key="confluence" />
+    </template>
     <template #content>
       <div class="text-gray-900 text-sm font-medium">
         Authentication
@@ -112,8 +115,7 @@
     <template #footer>
       <div>
         <lf-button
-          type="secondary-gray"
-          size="medium"
+          type="outline"
           class="mr-4"
           :disabled="loading"
           @click="cancel"
@@ -123,7 +125,7 @@
         <lf-button
           id="confluenceConnect"
           type="primary"
-          size="medium"
+          class="!rounded-full"
           :disabled="$v.$invalid || loading"
           :loading="loading"
           @click="connect"
@@ -153,6 +155,7 @@ import { Platform } from '@/shared/modules/platform/types/Platform';
 import LfButton from '@/ui-kit/button/Button.vue';
 import AppArrayInput from '@/shared/form/array-input.vue';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
+import DrawerDescription from '@/modules/admin/modules/integration/components/drawer-description.vue';
 
 const emit = defineEmits(['update:modelValue']);
 const props = defineProps({

frontend/src/config/integrations/confluence/config.ts

@@ -10,7 +10,7 @@ const confluence: IntegrationConfig = {
   key: 'confluence',
   name: 'Confluence',
   image,
-  description: 'Connect Confluence to sync documentation activities from your repos.',
+  description: 'Sync documentation activities from your spaces.',
   connectComponent: ConfluenceConnect,
   connectedParamsComponent: ConfluenceParams,
   dropdownComponent: ConfluenceDropdown,

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

@@ -10,6 +10,9 @@
     <template #beforeTitle>
       <img class="min-w-6 h-6 mr-2" :src="logoUrl" alt="DEV logo" />
     </template>
+    <template #belowTitle>
+      <drawer-description integration-key="devto" />
+    </template>
     <template #content>
       <el-form class="form integration-devto-form" @submit.prevent>
         <app-form-item
@@ -167,8 +170,7 @@
     <template #footer>
       <div>
         <lf-button
-          type="secondary-gray"
-          size="medium"
+          type="outline"
           class="mr-4"
           :disabled="loading"
           @click="cancel"
@@ -178,7 +180,7 @@
         <lf-button
           id="devConnect"
           type="primary"
-          size="medium"
+          class="!rounded-full"
           :disabled="
             connectDisabled || loading || !isAPIConnectionValid || isValidating
           "
@@ -214,6 +216,7 @@ import { EventType, FeatureEventKey } from '@/shared/modules/monitoring/types/ev
 import { Platform } from '@/shared/modules/platform/types/Platform';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfButton from '@/ui-kit/button/Button.vue';
+import DrawerDescription from '@/modules/admin/modules/integration/components/drawer-description.vue';
 
 const { doDevtoConnect } = mapActions('integration');
 

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

@@ -4,7 +4,7 @@
     <!--        <lf-icon name="circle-info" type="regular" />-->
     <!--        Details-->
     <!--      </lf-button>-->
-    <lf-button type="secondary" @click="isDevtoConnectDrawerVisible = true">
+    <lf-button type="outline" @click="isDevtoConnectDrawerVisible = true">
       <lf-icon name="link-simple" />
       <slot>Connect</slot>
     </lf-button>

frontend/src/config/integrations/devto/config.ts

@@ -8,7 +8,7 @@ const devto: IntegrationConfig = {
   key: 'devto',
   name: 'DEV',
   image,
-  description: 'Connect DEV to sync profile information and comments on articles.',
+  description: 'Sync profile information and comments on articles.',
   connectComponent: DevtoConnect,
   connectedParamsComponent: DevtoParams,
   showProgress: false,

frontend/src/config/integrations/discord/components/discord-connect.vue

@@ -4,7 +4,7 @@
     <!--        <lf-icon name="circle-info" type="regular" />-->
     <!--        Details-->
     <!--      </lf-button>-->
-    <lf-button type="secondary" @click="connect()">
+    <lf-button type="outline" @click="connect()">
       <lf-icon name="link-simple" />
       <slot>Connect</slot>
     </lf-button>

frontend/src/config/integrations/discord/config.ts

@@ -8,7 +8,7 @@ const discord: IntegrationConfig = {
   key: 'discord',
   name: 'Discord',
   image,
-  description: 'Connect Discord to sync messages, threads, forum channels, and new joiners.',
+  description: 'Sync messages, threads, forum channels, and new joiners.',
   connectComponent: DiscordConnect,
   connectedParamsComponent: DiscordParams,
   showProgress: false,

frontend/src/config/integrations/discourse/components/discourse-connect.vue

@@ -4,7 +4,7 @@
     <!--        <lf-icon name="circle-info" type="regular" />-->
     <!--        Details-->
     <!--      </lf-button>-->
-    <lf-button type="secondary" @click="isDiscourseConnectDrawerOpen = true">
+    <lf-button type="outline" @click="isDiscourseConnectDrawerOpen = true">
       <lf-icon name="link-simple" />
       <slot>Connect</slot>
     </lf-button>

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

@@ -16,6 +16,9 @@
         alt="Discourse logo"
       />
     </template>
+    <template #belowTitle>
+      <drawer-description integration-key="discourse" />
+    </template>
     <template #content>
       <el-form
         label-position="top"
@@ -191,8 +194,7 @@
     <template #footer>
       <div style="flex: auto">
         <lf-button
-          type="secondary-gray"
-          size="medium"
+          type="outline"
           class="mr-3"
           :disabled="loading"
           @click="handleCancel"
@@ -201,7 +203,7 @@
         </lf-button>
         <lf-button
           type="primary"
-          size="medium"
+          class="!rounded-full"
           :disabled="
             $v.$invalid
               || !hasFormChanged || loading"
@@ -235,6 +237,7 @@ import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfButton from '@/ui-kit/button/Button.vue';
 import LfCard from '@/ui-kit/card/Card.vue';
 import { ToastStore } from '@/shared/message/notification';
+import DrawerDescription from '@/modules/admin/modules/integration/components/drawer-description.vue';
 
 const { trackEvent } = useProductTracking();
 

frontend/src/config/integrations/discourse/config.ts

@@ -10,7 +10,7 @@ const discourse: IntegrationConfig = {
   key: 'discourse',
   name: 'Discourse',
   image,
-  description: 'Connect Discourse to sync topics, posts, and replies from your account forums.',
+  description: 'Sync topics, posts, and replies from your account forums.',
   connectComponent: DiscourseConnect,
   connectedParamsComponent: DiscourseParams,
   dropdownComponent: DiscourseDropdown,

frontend/src/config/integrations/gerrit/components/gerrit-connect.vue

@@ -4,7 +4,7 @@
     <!--        <lf-icon name="circle-info" type="regular" />-->
     <!--        Details-->
     <!--      </lf-button>-->
-    <lf-button type="secondary" @click="isGerritConnectDrawerOpen = true">
+    <lf-button type="outline" @click="isGerritConnectDrawerOpen = true">
       <lf-icon name="link-simple" />
       <slot>Connect</slot>
     </lf-button>