1 files changed, 71 insertions, 39 deletions

diff --git a/openecomp-ui/resources/scss/onboarding.scss b/openecomp-ui/resources/scss/onboarding.scss
index d7d4586354..94dc223be3 100644
--- a/openecomp-ui/resources/scss/onboarding.scss
+++ b/openecomp-ui/resources/scss/onboarding.scss
@@ -12,53 +12,73 @@
 div[data-reactroot].customized-date-picker-calendar {
   @import "common/variables";
   @import "common/typography";
-  border-radius: 2px;
   border-color: $light-gray;
   margin-top: -8px;
+	color: $black;
   .react-datepicker__triangle {
       margin-top: 0px;
   }
   .react-datepicker__navigation--previous {
-      border: none;      
-      width: 15px;
-      height: 15px; 
+      border: none;
+      width: 12px;
+      height: 12px;
       margin-top: 2px;
-      content: url(../images/angle-left.svg);               
+      content: url(../../node_modules/sdc-ui/assets/icons/angleLeft.svg);
   }
   .react-datepicker__navigation--next {
-      border: none;      
-      width: 15px;
-      height: 15px;
-      margin-top: 2px;      
-      content: url(../images/angle-right.svg);      
+      border: none;
+      width: 12px;
+      height: 12px;
+      margin-top: 2px;
+      content: url(../../node_modules/sdc-ui/assets/icons/angleRight.svg);
   }
-  .react-datepicker__month-container {    
+  .react-datepicker__month-container {
 		.react-datepicker__header {
 			background-color: $background-gray;
       border-bottom: none;
       .react-datepicker__current-month {
-        @extend .heading-5;
+        @extend .body-1-semibold;
         background-color: $background-gray;
-        margin-bottom: 10px;         
+        margin-bottom: 10px;
       }
       .react-datepicker__day-names {
-        @extend .heading-5;
+        @extend .body-1;
         background-color: $white;
       }
 		}
-    .react-datepicker__day--selected {
-      @extend .heading-5;
-      border-radius: 20px;
+    .react-datepicker__day--selected, .react-datepicker__day--keyboard-selected {
+      @extend .body-1;
       background-color: $blue;
-      &:hover {
-        background-color: $dark-blue;
-      }
+			color: $white;
     }
     .react-datepicker__day {
-      @extend .heading-5;
-      &:hover {
-        border-radius: 20px;
-      }
+			border-radius: 0px;
+			margin: 0;
+			flex: 1;
+      @extend .body-1;
+    }
+
+		.react-datepicker__day--in-range, .react-datepicker__day--in-selecting-range {
+			background-color: $tlv-hover;
+			color: $black;
+			&.react-datepicker__day--selected, &.react-datepicker__day--keyboard-selected, &.react-datepicker__day--range-start, &.react-datepicker__day--range-end  {
+				background-color: $blue;
+				color: $white;
+			}
+			&.react-datepicker__day--selecting-range-start, &.react-datepicker__day--selecting-range-end {
+				background-color: lighten($blue, 40%);
+				color: $black;
+			}
+			&.react-datepicker__day--selecting-range-start.react-datepicker__day--range-start,
+			&.react-datepicker__day--selecting-range-end.react-datepicker__day--range-end,
+			&.react-datepicker__day--selecting-range-start.react-datepicker__day--keyboard-selected {
+				background-color: $blue;
+				color: $white;
+			}
+		}
+
+		.react-datepicker__week {
+			display: flex;
     }
 	}
 }
@@ -69,7 +89,7 @@ div[data-reactroot].tooltip {
   @import "common/typography";
 
   &.in {
-	opacity: 1;
+  	opacity: 1;
   }
   &.validation-error-message {
     &.bottom {
@@ -94,28 +114,33 @@ div[data-reactroot].tooltip {
     }
   }
   &.bottom {
-	.tooltip-arrow {
-	  border-bottom-color: $dark-gray !important;
-	}
+    .tooltip-arrow {
+      border-bottom-color: $dark-gray !important;
+    }
   }
   &.top {
-	.tooltip-arrow {
-	  border-top-color: $dark-gray !important;
-	}
+    .tooltip-arrow {
+      border-top-color: $dark-gray !important;
+    }
   }
   .tooltip-inner {
-	max-width: 100%;
-	background-color: $dark-gray;
+    @extend .body-1;
+    max-width: 100%;
+    background-color: $dark-gray;
+    padding: 6px 9px;
+    &:first-letter {
+      text-transform: capitalize;
+    }
   }
 
   // activity log tooltip
   &.activity-log-message-tooltip {
-	@include base-font-regular;
-	font-size: $body-font-2;
-	.message-block {
-	  text-align: left;
-	  padding: 3px 12px;
-	}
+	  @include base-font-regular;
+    font-size: $body-font-2;
+    .message-block {
+      text-align: left;
+      padding: 3px 12px;
+    }
   }
   //dependency table error tooltip
   &.select-action-table-error-tooltip{
@@ -136,4 +161,11 @@ div[data-reactroot].tooltip {
       font-size: $body-font-2;
     }
   }
+
+  // for read-only mode, vendor description in VLM overview
+  &.vendor-description-tooltip {
+    .tooltip-inner {
+      max-width: 600px;
+    }
+  }
 }