Skip to content

Commit 882fdbe

Browse files
emlimlfemlimlf
authored
feat: integrations UI improvement (#3775)
Signed-off-by: Efren Lim <[email protected]>
1 parent 343c4e7 commit 882fdbe

96 files changed

Lines changed: 2446 additions & 1297 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎backend/src/services/integrationService.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,8 @@ import {
2828
softDeleteRepositories,
2929
} from '@crowd/data-access-layer/src/repositories'
3030
import {
31+
getMappedAllWithSegmentName,
3132
getMappedRepos,
32-
getMappedWithSegmentName,
3333
hasMappedRepos,
3434
} from '@crowd/data-access-layer/src/segments'
3535
import {
@@ -2683,10 +2683,10 @@ export default class IntegrationService {
26832683
getMappedRepos(qx, segmentId, PlatformType.GITHUB_NANGO),
26842684
getMappedRepos(qx, segmentId, PlatformType.GITLAB),
26852685
])
2686-
const project = await getMappedWithSegmentName(qx, segmentId, githubPlatforms)
2686+
const projects = await getMappedAllWithSegmentName(qx, segmentId, githubPlatforms)
26872687

26882688
return {
2689-
project,
2689+
projects,
26902690
repositories: [...githubMappedRepos, ...githubNangoMappedRepos, ...gitlabMappedRepos],
26912691
}
26922692
}

‎frontend/config/styles/components/button.scss‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -180,6 +180,27 @@
180180
--lf-btn-secondary-ghost-loading-background: var(--lf-color-transparent);
181181
--lf-btn-secondary-ghost-loading-border: var(--lf-color-transparent);
182182

183+
/* Danger Ghost */
184+
--lf-btn-danger-ghost-text: var(--lf-color-red-500);
185+
--lf-btn-danger-ghost-background: var(--lf-color-transparent);
186+
--lf-btn-danger-ghost-border: var(--lf-color-transparent);
187+
--lf-btn-danger-ghost-shadow: var(--shadow-none);
188+
// Hover
189+
--lf-btn-danger-ghost-hover-text: var(--lf-color-red-500);
190+
--lf-btn-danger-ghost-hover-background: var(--lf-color-red-100);
191+
--lf-btn-danger-ghost-hover-border: var(--lf-color-red-100);
192+
// Active
193+
--lf-btn-danger-ghost-active-text: var(--lf-color-red-500);
194+
--lf-btn-danger-ghost-active-background: var(--lf-color-red-100);
195+
--lf-btn-danger-ghost-active-border: var(--lf-color-red-100);
196+
// Disabled
197+
--lf-btn-danger-ghost-disabled-text: var(--lf-color-red-200);
198+
--lf-btn-danger-ghost-disabled-background: var(--lf-color-transparent);
199+
--lf-btn-danger-ghost-disabled-border: var(--lf-color-transparent);
200+
// Loading
201+
--lf-btn-danger-ghost-loading-text: var(--lf-color-red-200);
202+
--lf-btn-danger-ghost-loading-background: var(--lf-color-transparent);
203+
--lf-btn-danger-ghost-loading-border: var(--lf-color-transparent);
183204

184205
/* Secondary Gray */
185206
--lf-btn-secondary-gray-text: var(--lf-color-primary-500);
@@ -272,4 +293,27 @@
272293
--lf-btn-secondary-link-loading-text: var(--lf-color-gray-400);
273294
--lf-btn-secondary-link-loading-background: var(--lf-color-transparent);
274295
--lf-btn-secondary-link-loading-border: var(--lf-color-transparent);
296+
297+
/* Outline */
298+
--lf-btn-outline-text: var(--lf-color-neutral-900);
299+
--lf-btn-outline-background: var(--lf-color-white);
300+
--lf-btn-outline-border: var(--lf-color-neutral-200);
301+
--lf-btn-outline-shadow: var(--shadow-none);
302+
// Hover
303+
--lf-btn-outline-hover-text: var(--lf-color-neutral-900);
304+
--lf-btn-outline-hover-background: var(--lf-color-neutral-50);
305+
--lf-btn-outline-hover-border: var(--lf-color-neutral-200);
306+
// Active
307+
--lf-btn-outline-active-text: var(--lf-color-neutral-900);
308+
--lf-btn-outline-active-background: var(--lf-color-neutral-50);
309+
--lf-btn-outline-active-border: var(--lf-color-neutral-200);
310+
// Disabled
311+
--lf-btn-outline-disabled-text: var(--lf-color-neutral-400);
312+
--lf-btn-outline-disabled-background: var(--lf-color-white);
313+
--lf-btn-outline-disabled-border: var(--lf-color-neutral-200);
314+
// Loading
315+
--lf-btn-outline-loading-text: var(--lf-color-neutral-400);
316+
--lf-btn-outline-loading-background: var(--lf-color-white);
317+
--lf-btn-outline-loading-border: var(--lf-color-neutral-200);
318+
275319
}

‎frontend/config/styles/components/switch.scss‎

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -24,19 +24,9 @@
2424

2525
// Disabled Unchecked
2626
--lf-switch-disabled-unchecked-handle: var(--lf-color-white);
27-
28-
// Disabled Checked
27+
--lf-switch-disabled-background: var(--lf-color-gray-200);
2928
--lf-switch-disabled-checked-handle: var(--lf-color-white);
30-
31-
/* ---------------------------------- *\
32-
Switch sizes
33-
\* ---------------------------------- */
34-
35-
/* Tiny */
36-
--lf-switch-tiny-height: #{rem(16)};
37-
--lf-switch-tiny-width: #{rem(30)};
38-
--lf-switch-tiny-font-size: #{rem(12)};
39-
--lf-switch-tiny-line-height: #{rem(15)};
29+
--lf-switch-disabled-checked-background: var(--lf-color-primary-500);
4030

4131
/* Small */
4232
--lf-switch-small-height: #{rem(20)};

‎frontend/config/styles/variables/_colors.scss‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,18 @@
3131
--lf-color-secondary-200: #99AFC9;
3232
--lf-color-secondary-100: #CCD7E4;
3333
--lf-color-secondary-50: #E6EBF2;
34+
35+
// Brand
36+
--lf-color-brand-900: #000816;
37+
--lf-color-brand-800: #002648;
38+
--lf-color-brand-700: #004880;
39+
--lf-color-brand-600: #006DBE;
40+
--lf-color-brand-500: #0094FF;
41+
--lf-color-brand-400: #54ABFF;
42+
--lf-color-brand-300: #83C1FF;
43+
--lf-color-brand-200: #ADD6FF;
44+
--lf-color-brand-100: #D6EBFF;
45+
--lf-color-brand-50: #EBF5FF;
3446

3547
// Gray
3648
--lf-color-gray-900: #111827;
@@ -45,6 +57,19 @@
4557
--lf-color-gray-100: #F3F4F6;
4658
--lf-color-gray-50: #F9FAFB;
4759

60+
// Neutral
61+
--lf-color-neutral-900: #0F172B;
62+
--lf-color-neutral-800: #1D293D;
63+
--lf-color-neutral-700: #314158;
64+
--lf-color-neutral-600: #45556C;
65+
--lf-color-neutral-500: #62748E;
66+
--lf-color-neutral-400: #90A1B9;
67+
--lf-color-neutral-300: #CAD5E2;
68+
--lf-color-neutral-250: #e6e6e6;
69+
--lf-color-neutral-200: #E2E8F0;
70+
--lf-color-neutral-100: #F1F5F9;
71+
--lf-color-neutral-50: #F8FAFC;
72+
4873
// Red
4974
--lf-color-red-900: #7F1D1D;
5075
--lf-color-red-800: #991B1B;

‎frontend/src/assets/images/integrations/git-repository-line.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎frontend/src/assets/scss/drawer.scss‎

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
.el-drawer {
22
@apply opacity-100;
3-
--el-drawer-padding-primary: 24px;
3+
--el-drawer-padding-primary: 20px 24px;
44
box-shadow: -4px 0px 10px rgba(0, 0, 0, 0.05);
5+
overflow: unset;
56

67
&__header {
78
@apply mb-4;
@@ -12,7 +13,25 @@
1213
}
1314

1415
&__footer {
15-
@apply p-6 bg-gray-50 border-t border-gray-200;
16+
@apply px-6 py-5 bg-gray-50 border-t border-gray-100 bg-white;
17+
position: relative;
18+
19+
&::before {
20+
content: '';
21+
position: absolute;
22+
top: -20px;
23+
left: 0;
24+
right: 0;
25+
height: 20px;
26+
background: linear-gradient(to top, rgba(0, 0, 0, 0.06), transparent);
27+
pointer-events: none;
28+
opacity: 0;
29+
transition: opacity 0.2s ease;
30+
}
31+
}
32+
33+
&.has-scroll .el-drawer__footer::before {
34+
opacity: 1;
1635
}
1736

1837
&__close-btn {

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,22 @@
4848
border: 1px solid var(--el-input-focus-border-color);
4949
}
5050
}
51+
52+
&.is-rounded .el-input__wrapper{
53+
@apply rounded-full;
54+
}
55+
}
56+
57+
.input-label-container {
58+
@apply border border-solid border-gray-200 rounded-full flex items-stretch;
59+
60+
span {
61+
@apply text-gray-900 text-small px-3 bg-gray-50 border-r border-r-gray-200 flex items-center
62+
rounded-l-full;
63+
}
64+
.el-input__wrapper{
65+
@apply border-none rounded-l-none rounded-r-full #{!important};
66+
}
5167
}
5268

5369
// Inner input/textarea color

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -138,3 +138,15 @@
138138
}
139139
}
140140
}
141+
142+
.el-select.el-select--pill {
143+
.el-select__wrapper {
144+
&.el-tooltip__trigger {
145+
@apply rounded-full;
146+
}
147+
148+
.el-select__suffix i{
149+
@apply text-gray-900;
150+
}
151+
}
152+
}

‎frontend/src/assets/scss/layout.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,3 +102,7 @@ input:-webkit-autofill:active {
102102
transition: background-color 5000s ease-in-out 0s;
103103
-webkit-text-fill-color: #000 !important;
104104
}
105+
106+
.el-overlay .el-splitter-panel{
107+
overflow: unset;
108+
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<lf-button
3-
type="secondary"
3+
type="outline"
44
@click="isConfluenceSettingsDrawerVisible = true"
55
>
66
<lf-icon name="link-simple" />

0 commit comments

Comments
 (0)