fix[#1730, #1742] fixed datepicker clear btn and increased theslightly the fields contrast

ui/src/components/records/fields/DateField.svelte

@@ -8,6 +8,8 @@
     export let field = new SchemaField();
     export let value = undefined;
 
+    let pickerValue = value;
+
     // strip ms and zone for backwards compatibility with the older format
     // and because flatpickr currently doesn't have integrated
     // zones support and requires manual parsing and formatting
@@ -15,6 +17,10 @@
         value = value.substring(0, 19);
     }
 
+    $: if (pickerValue != value) {
+        pickerValue = value;
+    }
+
     // ensure that value is set even on manual input edit
     function onClose(e) {
         if (e.detail && e.detail.length == 3) {
@@ -44,7 +50,7 @@
     <Flatpickr
         id={uniqueId}
         options={CommonHelper.defaultFlatpickrOptions()}
-        {value}
+        bind:value={pickerValue}
         bind:formattedValue={value}
         on:close={onClose}
     />

ui/src/scss/_form.scss

@@ -136,7 +136,7 @@ button {
     &.btn-outline {
         box-shadow: none;
         color: var(--txtPrimaryColor);
-        @include btnOpacity(0, 0.25, 0.35);
+        @include btnOpacity(0, 0.3, 0.45);
         &:before {
             background: var(--baseAlt3Color);
         }
@@ -160,7 +160,7 @@ button {
         }
     }
     &.btn-secondary {
-        @include btnOpacity(0.3, 0.5, 0.7);
+        @include btnOpacity(0.35, 0.5, 0.7);
         @each $name, $color in $variationsMap {
             &.btn-#{$name} {
                 @include btnOpacity(0.15, 0.25, 0.3);

ui/src/scss/_vars.scss

@@ -12,10 +12,10 @@
     --bodyColor: #f8f9fa;
 
     --baseColor:     #ffffff;
-    --baseAlt1Color: #ebeff2;
-    --baseAlt2Color: #dee3e8;
-    --baseAlt3Color: #d1d7db;
-    --baseAlt4Color: #848d94;
+    --baseAlt1Color: #e4e9ec;
+    --baseAlt2Color: #d7dde4;
+    --baseAlt3Color: #c6cdd7;
+    --baseAlt4Color: #abb5c4;
 
     --infoColor:       #3da9fc;
     --infoAltColor:    #d8eefe;
@@ -26,7 +26,7 @@
     --warningColor:    #ff8e3c;
     --warningAltColor: #ffe7d6;
 
-    --overlayColor:   rgba(60, 70, 105, 0.25);
+    --overlayColor:   rgba(53, 71, 104, 0.25);
     --tooltipColor:   rgba(0, 0, 0, 0.85);
     --shadowColor:    rgba(0, 0, 0, 0.06);