+
-
+
Click to get webhook details
Get webhook url and sample JSON to be used in external CI service.
-
-
-
- Show webhook details
-
-
+
+
diff --git a/src/components/workflowEditor/workflowEditor.scss b/src/components/workflowEditor/workflowEditor.scss
index d67b5f74b0..4fc1698b0d 100644
--- a/src/components/workflowEditor/workflowEditor.scss
+++ b/src/components/workflowEditor/workflowEditor.scss
@@ -98,7 +98,7 @@
}
.webhook-tippy-card-container {
.webhook-tippy-card {
- background-color: var(--N900);
+ background-color: var(--bg-toast);
position: fixed;
z-index: 6;
right: 20px;
@@ -106,13 +106,13 @@
}
.webhook-icon-white {
path[fill='#4A4A4A'] {
- fill: var(--N0);
+ fill: var(--white);
}
}
.arrow-down {
border-left: 12px solid transparent;
border-right: 12px solid transparent;
- border-top: 12px solid var(--N900);
+ border-top: 12px solid var(--bg-toast);
right: 50%;
position: fixed;
top: 85px;
diff --git a/src/css/application.scss b/src/css/application.scss
index bab132d573..c24ae7cf6b 100644
--- a/src/css/application.scss
+++ b/src/css/application.scss
@@ -2,6 +2,7 @@
@import './colorPalette.scss';
@import './patternfly.scss';
@import './normalize.scss';
+@import 'iconTheming.scss';
@import './themeUtils.scss';
@import './base.scss';
@import './formulae.scss';
diff --git a/src/css/base.scss b/src/css/base.scss
index 13fb490f02..cdd6e4a01a 100644
--- a/src/css/base.scss
+++ b/src/css/base.scss
@@ -848,8 +848,11 @@ button.anchor {
&.f-progressing,
&.f-inprogress,
- &.f-unknown,
&.initiated {
+ color: var(--O500);
+ }
+
+ &.f-unknown {
color: var(--Y500);
}
@@ -1596,29 +1599,40 @@ button.anchor {
right: 10px !important;
}
-.shimmer {
- background: linear-gradient(90deg, var(--N100) 30%, var(--N0) 60%, var(--N100) 100%);
- background-repeat: no-repeat;
- background-size: 800px 104px;
- display: inline-block;
- position: relative;
- animation-duration: 1s;
- animation-fill-mode: forwards;
- animation-iteration-count: infinite;
- animation-name: placeholderShimmer;
- animation-timing-function: linear;
-}
-
-@keyframes placeholderShimmer {
+@keyframes shimmer-loading {
0% {
- background-position: -468px 0;
+ background-position: 0% 0%;
+ }
+
+ 25% {
+ background-position: 50% 0%;
+ }
+
+ 50% {
+ background-position: 100% 0%;
+ }
+
+ 75% {
+ background-position: 50% 0%;
}
100% {
- background-position: 468px 0;
+ background-position: 0% 0%;
}
}
+.shimmer, .show-shimmer-loading .child-shimmer-loading, .shimmer-loading {
+ background: var(--bg-shimmer-loader);
+ border-radius: 4px;
+ opacity: 0.5;
+ background-repeat: no-repeat;
+ background-size: 200% 100%;
+ display: inline-block;
+ position: relative;
+ animation: shimmer-loading 1s infinite linear;
+ min-height: 16px;
+}
+
.dc__resizable-textarea {
resize: none;
border-radius: 4px;
@@ -4628,44 +4642,6 @@ textarea::placeholder {
z-index: 20;
}
-.show-shimmer-loading {
- .child-shimmer-loading {
- animation-duration: 2s;
- animation-fill-mode: forwards;
- animation-iteration-count: infinite;
- animation-name: shimmer-loading;
- animation-timing-function: linear;
- background: linear-gradient(90deg, var(--N100) 30%, var(--N0) 60%, var(--N100) 100%);
- background-size: 800px 104px;
- position: relative;
- height: 16px;
- border-radius: 2px;
- margin-top: 4px;
- }
-}
-
-.shimmer-loading {
- animation-duration: 2s;
- animation-fill-mode: forwards;
- animation-iteration-count: infinite;
- animation-name: shimmer-loading;
- animation-timing-function: linear;
- background: linear-gradient(90deg, var(--N100) 30%, var(--N0) 60%, var(--N100) 100%);
- background-size: 800px 104px;
- position: relative;
- border-radius: 2px;
-}
-
-@keyframes shimmer-loading {
- 0% {
- background-position: -800px 0;
- }
-
- 100% {
- background-position: 800px 0;
- }
-}
-
.dc__place-abs-shimmer-center {
position: absolute;
top: 50%;
@@ -4858,25 +4834,6 @@ textarea::placeholder {
top: 0;
text-align: center;
}
-
- &.cd-trigger-announcement {
- .info-bar-container {
- .announcement-bar {
- border-radius: 0;
- border: none;
- border-bottom: 1px solid var(--Y700);
- }
- }
- }
-}
-
-.announcement-bar {
- background-color: var(--Y500);
- border: 1px solid var(--Y700);
- border-top: none;
- padding: 8px 12px !important;
- border-top-left-radius: 0;
- border-top-right-radius: 0;
}
// End: accouncement banner
diff --git a/src/css/colorPalette.scss b/src/css/colorPalette.scss
index 14f740500b..ef673618df 100644
--- a/src/css/colorPalette.scss
+++ b/src/css/colorPalette.scss
@@ -72,6 +72,7 @@
--Y300: #ffd597;
--Y200: #ffe5be;
--Y100: #fff5e5;
+ --Y50: #fff8ed;
--R700: #b21212;
--R600: #c73232;
--R500: #f33e3e;
@@ -88,14 +89,13 @@
--O50: #fcf3f0;
// Custom colors
- --bg-window: #f2f4f7;
--bg-pipeline-trigger-type: #a5a7bf;
--bg-bulk-selection-widget: #f0f7ffb8;
// Color Tokens
--bg-primary: var(--N0);
--bg-secondary: var(--N50);
- --bg-tertiary: var(--bg-window);
+ --bg-tertiary: #f2f4f7;
--bg-overlay: var(--N0);
--bg-menu: var(--N0);
--bg-modal: var(--N0);
@@ -103,6 +103,7 @@
--bg-tooltip-black: var(--N900);
--bg-toast: var(--N800);
--bg-sidebar: #0066cc;
+ --bg-shimmer-loader: linear-gradient(90deg, var(--N200) 0%, var(--N50) 50%, var(--N200) 80%);
}
&__dark {
@@ -110,74 +111,76 @@
--V700: #CABFFF;
--V500: #a695ff;
- --V200: #423c66;
- --V100: #211e33;
+ --V200: #4f4979;
+ --V100: #322f4c;
--B700: #acd3ff;
--B600: #90c4ff;
--B500: #74B5FF;
- --B400: #5d91cc;
- --B300: #466d99;
- --B200: #2e4866;
- --B100: #172433;
- --B50: #0c121a;
+ --B400: #6195d2;
+ --B300: #4e76a5;
+ --B200: #3b5679;
+ --B100: #28364c;
+ --B50: #1e2635;
--N900: #f8f8f9;
--N800: #e4e5e6;
--N700: #c8cbce;
--N600: #9fa4a9;
--N500: #767d84;
- --N400: #61676f;
- --N300: #4c515a;
- --N200: #373b46;
- --N100: #222531;
- --N50: #181a26;
- --N0: #0d0f1c;
+ --N400: #636870;
+ --N300: #4f545c;
+ --N200: #3c3f47;
+ --N100: #282b33;
+ --N50: #1f2029;
+ --N0: #15161f;
--G700: #afddb3;
--G600: #95d199;
--G500: #7ac680;
- --G400: #629e66;
- --G300: #49774d;
- --G200: #314f33;
- --G100: #18281a;
- --G50: #0c140d;
- --Y800: #ffe1b6;
- --Y700: #ffd392;
- --Y600: #ffc46d;
- --Y500: #ffb549;
- --Y400: #cc913a;
- --Y300: #996d2c;
- --Y200: #66481d;
- --Y100: #33240f;
+ --G400: #66a36d;
+ --G300: #528059;
+ --G200: #3d5c46;
+ --G100: #293932;
+ --G50: #212b2b;
+ --Y800: #fbe3c1;
+ --Y700: #f8d6a1;
+ --Y600: #f6c882;
+ --Y500: #f4ba63;
+ --Y400: #c79955;
+ --Y300: #9b7848;
+ --Y200: #6e5838;
+ --Y100: #42372d;
+ --Y50: #2b2626;
--R700: #ff9ea0;
--R600: #ff7d80;
--R500: #ff5d60;
- --R400: #cc4a4d;
- --R300: #99383a;
- --R200: #662526;
- --R100: #331313;
- --R50: #1a090a;
+ --R400: #d04f53;
+ --R300: #a14146;
+ --R200: #733239;
+ --R100: #44242c;
+ --R50: #311f27;
--O700: #ffb29d;
--O600: #ff987c;
--O500: #ff7e5b;
- --O200: #663224;
- --O100: #331912;
- --O50: #1a0d09;
+ --O200: #734037;
+ --O100: #442b2b;
+ --O50: #2c2025;
// Custom colors
- --bg-window: #1d1f2c;
--bg-pipeline-trigger-type: #44465a;
--bg-bulk-selection-widget: #141c26b8;
// Color Tokens
- --bg-primary: var(--bg-window);
- --bg-secondary: var(--N50);
- --bg-tertiary: var(--N0);
- --bg-overlay: #2d303b;
- --bg-menu: #2d303b;
- --bg-modal: #2d303b;
+ --bg-primary: #1E1F28;
+ --bg-secondary: #1A1B23;
+ // Ensure to update in index.css at the root level as well
+ --bg-tertiary: #15161F;
+ --bg-overlay: #31323a;
+ --bg-menu: #31323a;
+ --bg-modal: #31323a;
--bg-tooltip-black: var(--N200);
--bg-toast: var(--N300);
--bg-sidebar: #2E3142;
+ --bg-shimmer-loader: linear-gradient(90deg, var(--N50) 0%, var(--N200) 50%, var(--N50) 80%);
}
}
}
diff --git a/src/css/forms.scss b/src/css/forms.scss
index 7460418a9b..f66f8dccbe 100644
--- a/src/css/forms.scss
+++ b/src/css/forms.scss
@@ -324,6 +324,11 @@ p.sentence-case:first-letter {
background-size: contain;
background-repeat: no-repeat;
background-image: url('../assets/icons/ic-checkbox-unselected.svg');
+ transition: background-image 0.17s;
+
+ &:hover {
+ background-image: url('../assets/icons/ic-checkbox-hover.svg');
+ }
}
.form__checkbox:checked[value='INTERMEDIATE'] ~ .form__checkbox-container {
diff --git a/src/css/formulae.scss b/src/css/formulae.scss
index ea934d5856..2977881ade 100644
--- a/src/css/formulae.scss
+++ b/src/css/formulae.scss
@@ -414,7 +414,7 @@ $color-suffix: 00;
&:active,
&:focus {
- @include cta(var(--transparent), var(--N0), transparent);
+ @include cta(var(--transparent), var(--N700), var(--N300));
}
}
@@ -427,7 +427,7 @@ $color-suffix: 00;
&:active,
&:focus {
- @include cta(var(--transparent), var(--N0), transparent, pointer, false);
+ @include cta(var(--transparent), var(--N700), var(--N300), pointer, false);
}
}
}
diff --git a/src/css/iconTheming.scss b/src/css/iconTheming.scss
new file mode 100644
index 0000000000..b0aa5f7d13
--- /dev/null
+++ b/src/css/iconTheming.scss
@@ -0,0 +1,120 @@
+// This file is a hack that should be removed once the icons are cleaned up
+
+$svg-stroke-hex-to-var: (
+ "#FFBF00": --Y500,
+ "white": --white,
+ "#FF5656": --R500,
+ "#596168": --N700,
+ "#fff": --white,
+ "#0066CC": --B500,
+ "#3B444C": --N700,
+ "#000A14": --N900,
+ "#664BEE": --V500,
+ "#1DAD70": --G500,
+ "#959BA1": --N400,
+ "#D0D4D9": --N200,
+ "#767D84": --N500,
+ "#404040": --N700,
+ "#F33E3E": --R500,
+ "#06C": --B500,
+ "#F32E2E": --R500,
+ "#5865F2": --V500,
+ "#B1B7BC": --N300,
+ "#C58D36": --Y600,
+ "#8C6324": --Y700,
+ "#423BD1": --V600,
+ "#D2D2D2": --N200,
+ "#FDE7E7": --R100,
+ "#FF7E5B": --O500,
+ "#231F20": --N900,
+ "#AFAFAF": --N300,
+ "#ABCFF3": --B200,
+ "#E6EEFC": --N100,
+ "#1D2730": --N800,
+ "#106240": --G700,
+ "#B21212": --R700,
+ "#B23412": --O700,
+ "#FF9900": --Y500,
+ "#3989D9": --B400,
+ "#FFB549": --Y500,
+ "#E9FBF4": --G100,
+);
+
+$svg-fill-hex-to-var: (
+ "#0F1689": --B700,
+ "#1A1919": --N800,
+ "#D0D4D9": --N200,
+ "#E5F2FF": --B100,
+ "#72ACE6": --B300,
+ "#ABCFF3": --B200,
+ "#3989D9": --B400,
+ "#0066CC": --B500,
+ "#596168": --N600,
+ "#4A4A4A": --N700,
+ "#959BA1": --N400,
+ "#F33E3E": --R500,
+ "#E6F5F8": --B100,
+ "#767D84": --N500,
+ "#000A14": --N800,
+ "#1D2730": --N800,
+ "#8C6324": --Y700,
+ "#3B444C": --N700,
+ "#F7FAFC": --N50,
+ "#1DAD70": --G500,
+ "#EBE8F8": --V50,
+ "#664BEE": --V500,
+ "#EDF1F5": --N100,
+ "#E6EEFF": --B100,
+ "#B1B7BC": --N300,
+ "#FFB549": --Y500,
+ "#FFFFFF": --white,
+ "#FF7E5B": --O500,
+ "#F3F0FF": --V100,
+ "#E9FBF4": --G100,
+ "#9FA4A9": --N600,
+ "#080A2D": --N800,
+);
+
+// Using where to have lowest specificity (0,0,0)
+:where(svg:not([data-style-override="false"])) {
+ @each $hex, $var in $svg-stroke-hex-to-var {
+ :where([stroke="#{$hex}" i]) {
+ stroke: var($var);
+ }
+ }
+
+ @each $hex, $var in $svg-fill-hex-to-var {
+ :where([fill="#{$hex}" i]) {
+ fill: var($var);
+ }
+ }
+}
+
+// These are just hack, not to be further extended
+.theme {
+ &__dark {
+ .github {
+ background-image: url('../assets/icons/dark/ic-github.svg') !important;
+ }
+
+ .form__checkbox-container {
+ background-image: url('../assets/icons/dark/ic-checkbox-unselected.svg');
+
+ &:hover {
+ background-image: url('../assets/icons/dark/ic-checkbox-hover.svg');
+ }
+ }
+
+ .form__checkbox:checked[value='INTERMEDIATE']~.form__checkbox-container {
+ background-image: url('../assets/icons/dark/ic-checkbox-intermediate.svg');
+ }
+
+ .form__checkbox:checked[value='CHECKED']~.form__checkbox-container {
+ background-image: url('../assets/icons/dark/ic-checkbox-selected.svg');
+ }
+
+ .form__checkbox:checked[value='BULK_CHECKED']~.form__checkbox-container {
+ background-image: url('../assets/icons/dark/ic-bulk-check.svg');
+ }
+ }
+}
diff --git a/src/css/themeUtils.scss b/src/css/themeUtils.scss
index 5990e2631c..1d2d450dfb 100644
--- a/src/css/themeUtils.scss
+++ b/src/css/themeUtils.scss
@@ -28,6 +28,14 @@
&__white {
color: var(--white);
}
+
+ &__black {
+ color: var(--black);
+
+ &--imp {
+ color: var(--black) !important;
+ }
+ }
}
.icon-fill {
diff --git a/yarn.lock b/yarn.lock
index 0709d89933..09efa8b87e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -981,10 +981,10 @@
dependencies:
"@jridgewell/trace-mapping" "0.3.9"
-"@devtron-labs/devtron-fe-common-lib@1.5.1":
- version "1.5.1"
- resolved "https://registry.yarnpkg.com/@devtron-labs/devtron-fe-common-lib/-/devtron-fe-common-lib-1.5.1.tgz#b05c4e7e4110042c89b55604ef79f00d95b35bb4"
- integrity sha512-oYXL8L1CZO56uYEwCNx7h36D05Lg/zkAmqllV11YUZI7rAK5SGx8lByVOAKajWJccItUjfz6r1133n1Gj4IvSw==
+"@devtron-labs/devtron-fe-common-lib@1.5.2":
+ version "1.5.2"
+ resolved "https://registry.yarnpkg.com/@devtron-labs/devtron-fe-common-lib/-/devtron-fe-common-lib-1.5.2.tgz#cabaf2eedaf1a31f28e20f7384f5969eb31a12ff"
+ integrity sha512-X6bjVnHDtHSOmgH2BBM5j81K3ueFN4rITsW2ghsZ29MBQ9WVc/X7Vhg8k/6c7J5yp9r/CKvzzN+vyVv6fsotOg==
dependencies:
"@types/react-dates" "^21.8.6"
ansi_up "^5.2.1"