Angular upgrade
- Upgraded Angular from 14 to 15 version.
Change-Id: I2339a04020153cbc9ed7a14bfe8e0aa265e507da
Signed-off-by: SANDHYA.JS <sandhya.j@tataelxsi.co.in>
diff --git a/src/assets/scss/app.scss b/src/assets/scss/app.scss
index abb0be9..031608d 100644
--- a/src/assets/scss/app.scss
+++ b/src/assets/scss/app.scss
@@ -31,6 +31,16 @@
.btn-danger:focus {
@include box-shadow(0, 0, 0, 0.2rem, lighten($danger, 30%) !important);
}
+.btn-success {
+ --bs-btn-hover-bg: #198754;
+}
+.btn-danger {
+ --bs-btn-hover-bg: #cb3424;
+ --bs-btn-color: #fff;
+ --bs-btn-hover-color: #fff;
+ --bs-btn-active-bg: #cb3424;
+ --bs-btn-active-color: #fff;
+}
body,
.list-overflow,
.scroll-box,
@@ -70,6 +80,7 @@
@include background(null, $theme-bg-color !important, null, null, null);
}
a {
+ text-decoration: none;
color: $primary;
&:hover,
&:focus {
@@ -110,6 +121,7 @@
}
&:disabled {
cursor: not-allowed;
+ background-color: grey;
}
}
}
@@ -126,11 +138,15 @@
);
}
.form-control {
+ color: #4f5467;
+ border-radius: 4px;
+ background-color: $white;
@include roundedCorners(4);
@include font(null, 12px, null);
&::placeholder {
color: $gray-400;
}
+ background-color: $white;
}
.header-style {
@include font(null, 1.2rem, 700);
@@ -143,7 +159,7 @@
.cursor-pointer {
cursor: pointer;
}
- .mr-top-5 {
+ .me-top-5 {
@include margin-value-percentage(5px, auto, auto, auto);
}
.padLeft0 {
@@ -172,18 +188,31 @@
}
.close {
opacity: 1 !important;
+ background-color: transparent;
+ border: 0;
+ position: absolute;
+ right: 10px;
+ font-size: 1.3125rem;
}
.closeVersion {
text-shadow: none;
}
.roles-section {
.card {
+ .card-body {
+ background-color: #fff;
+ }
.bg-secondary {
+ padding: 11px;
@include background(null, $gray-400 !important, null, null, null);
}
}
}
.juju-section {
+ .col-form-label {
+ position: relative;
+ bottom: 3px;
+ }
.card {
@include roundedCorners(4);
margin-bottom: 0.25rem;
@@ -195,7 +224,13 @@
color: $white;
}
}
+ .card-header {
+ padding: 0.75rem 1.25rem;
+ border-top-left-radius: 4px;
+ border-top-right-radius: 4px;
+ }
.card-body {
+ border-radius: 2px;
.seconds-btn-group .active {
color: $white;
@include background(null, $primary !important, null, null, null);
@@ -204,14 +239,20 @@
@include padding-value(5, 5, 5, 5);
border-top: 0;
table {
+ th,
+ td {
+ color: $body-color;
+ }
thead th {
font-size: 12px;
+ color: $body-color;
}
tbody th i.active-icon {
font-size: 10px;
}
}
}
+ background-color: #fff;
}
}
.card {
@@ -222,6 +263,7 @@
@include roundedCorners(3);
.custom-card-body {
@include padding-value(15, 15, 15, 15);
+ background-color: #fff;
}
}
table-cell-default-editor select-editor select {
@@ -242,7 +284,17 @@
@include roundedCorners(3);
}
/** Model Popup-Design **/
+ .modal-header {
+ .close {
+ top: 10px;
+ }
+ }
+ .modal-content {
+ background-color: #fff;
+ }
.modal-body-custom-height {
+ background-color: #fff !important;
+ color: $body-color;
max-height: 65vh;
overflow-y: auto;
}
@@ -256,30 +308,37 @@
}
/** Popover Header **/
.popover-header {
+ margin-top: 7px;
color: $primary;
@include background(null, $theme-bg-color, null, null, null);
}
/** Vim Show running instance Details **/
.runninginstances {
width: 200px;
+ margin-top: 10px;
.popover-body {
max-height: 200px;
overflow-y: scroll;
+ background-color: $white !important;
}
}
.resources-chart-popover {
+ margin-top: 4px;
max-width: 60% !important;
width: 600px !important;
@include font-family("Roboto");
.popover-body {
max-height: 60vh;
overflow-y: scroll;
+ background-color: #fff !important;
}
}
/****************************************************************************/
/************************** Smart table custom design ***********************/
/****************************************************************************/
ng2-smart-table {
+ background-color: #fff;
+ background-color: none;
@include font(null, 15px, null);
color: $gray-700;
.form-control {
@@ -349,15 +408,29 @@
}
}
.ng2-smart-filter {
+ background-color: #fff;
@include wh-value(null, calc(2rem + 2px) !important);
@include font(null, 12px, null);
margin-top: 6px;
}
+ input {
+ background-color: #fff !important;
+ }
table.list-data {
tr td,
tr th {
@include padding-value(2, 10, 2, 10);
vertical-align: middle !important;
+ background-color: #fff;
+ color: grey;
+ }
+ input[type="checkbox"] {
+ padding: 6px 6px;
+ border-color: rgba(0, 0, 0, 0.5);
+ &:checked {
+ background-color: $blue !important;
+ border: black;
+ }
}
tbody {
tr.selected {
@@ -368,6 +441,7 @@
default-table-filter {
select-filter {
select.form-control {
+ background-color: #fff !important;
@include flexbox(inline-block, null, null, null, null, null);
@include wh-value(null, calc(1.5rem + 2px) !important);
vertical-align: middle;
@@ -392,9 +466,11 @@
}
input-filter {
input[type="text"] {
+ background-color: #fff;
@include position_value(relative, null, null, null, null);
}
&:after {
+ color: #afb5c1;
@include position_value(relative, -26px, null, null, 100%);
content: "\f002";
@include font("Font Awesome 5 Free", 10px, null);
@@ -415,6 +491,8 @@
}
}
.ng2-smart-page-link {
+ background-color: #fff;
+ box-shadow: none;
@include font(null, 12px !important, null);
&.page-link {
text-align: center;
@@ -472,12 +550,15 @@
/*********************** List Action Dropdown section ***********************/
/****************************************************************************/
.list-action-dropdown {
+ background-color: #fff;
@include border(all, 1, solid, $primary);
@include padding-value(0, 0, 0, 0);
+ margin-top: 3px;
button.btn.btn-primary {
@include background(null, transparent, null, null, null);
@include padding-value(8, 8, 8, 8);
@include roundedCorners(0);
+ background-color: #fff;
color: $primary;
&:hover {
@include background(null, $primary, null, null, null);
@@ -492,12 +573,14 @@
/*********************** Custom tabel design in topology ********************/
/****************************************************************************/
.custom-table {
+ border: 1px solid rgba(0, 0, 0, 0.1);
td:first-child {
@include font(null, null, bold);
text-align: right;
}
th,
td {
+ border: 1px solid rgba(0, 0, 0, 0.1);
@include padding-value(5, 7, 5, 7);
@include font(null, 10px, null);
@include line-height(15px);
@@ -528,6 +611,7 @@
/******************** Custom nav section for default status *****************/
/****************************************************************************/
.list-utilites-actions {
+ margin-left: 10px;
@include flexbox(flex, null, row, null, center, null);
nav.custom-items-config {
@include position_value(relative, null, null, null, null);
@@ -552,6 +636,22 @@
/****************************************************************************/
/************************* File upload custom design ************************/
/****************************************************************************/
+ .fileupload {
+ border: 1px solid;
+ border: 1px solid;
+ border-color: #054c8c;
+ border-radius: 4px;
+ }
+ input[type="file"] {
+ width: 100%;
+ }
+ input[type="file"]::file-selector-button {
+ border: none;
+ background: #054c8c;
+ padding: 7px 10px;
+ border-radius: 2px;
+ color: #fff;
+ }
.custom-file-label {
color: $primary;
@include roundedCorners(4);
@@ -613,6 +713,7 @@
@include flexbox(flex, null, null, null, center, null);
border: none;
.span-overflow-text {
+ color: $black;
@include wh-value(90%, null);
white-space: nowrap;
overflow: hidden;
@@ -665,6 +766,7 @@
fieldset {
@include border(all, 1, solid, $primary);
legend {
+ float: none;
@include padding-value(0, 5, 0, 5);
@include font(null, 15px, null);
color: $primary;
@@ -676,6 +778,9 @@
@include wh-value(25%, null);
}
}
+ .font-weight-bold {
+ font-weight: 700 !important;
+ }
}
.btn-icon {
@include wh-value(36px, 36px);
@@ -867,6 +972,17 @@
}
}
+.custom-select {
+ background-color: #fff !important;
+ padding: 0.375rem 1.75rem 0.375rem 0.75rem;
+ @include background(
+ url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='100' height='10' viewBox='0 0 10 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e"),
+ var(--input-bg-color),
+ null,
+ no-repeat,
+ 0px 10px
+ );
+}
/****************************************************************************/
/************************** HEALING STYLE ***********************************/
/****************************************************************************/
@@ -887,6 +1003,9 @@
.form-group {
margin-bottom: 1px;
+ .row {
+ margin-bottom: 16px;
+ }
}
.col-sm-1 {
@@ -897,3 +1016,22 @@
left: 79px;
}
}
+
+.table thead th {
+ vertical-align: bottom;
+ border-bottom: 2px solid rgba(0, 0, 0, 0.1);
+}
+.table th,
+.table td {
+ background-color: #fff;
+ padding: 5px;
+ vertical-align: top;
+ border-top: 1px solid rgba(0, 0, 0, 0.1);
+ border-bottom: transparent;
+}
+.table b {
+ background: none;
+ color: $body-color;
+ padding-right: 0px;
+ padding-left: 0px;
+}
diff --git a/src/assets/scss/style.scss b/src/assets/scss/style.scss
index 40c5e16..f2ad391 100644
--- a/src/assets/scss/style.scss
+++ b/src/assets/scss/style.scss
@@ -45,4 +45,4 @@
@import "../../../node_modules/angular-notifier/styles/types/type-default.scss";
@import "../../../node_modules/angular-notifier/styles/types/type-info.scss";
/*toastr styles*/
-@import '~ngx-toastr/toastr.css';
\ No newline at end of file
+@import '/node_modules/ngx-toastr/toastr';
\ No newline at end of file
diff --git a/src/assets/scss/variable.scss b/src/assets/scss/variable.scss
index 3af9d3b..5fcb793 100644
--- a/src/assets/scss/variable.scss
+++ b/src/assets/scss/variable.scss
@@ -124,6 +124,7 @@
$cyan: #4fc3f7 !default;
$grayish-red: #c1bfbf !default;
$white-smoke: #f1f1f1 !default;
+$paleblue: #c8e1f9 !default;
$text-muted: $gray-500 !default;
$colors: (
"blue": $blue,