copy the same error style as numeric input on focu

Author: VeraZab

src/components/widgets/DateTimePicker.js

@@ -23,10 +23,10 @@ export default class DateTimePicker extends Component {
       calendarOpen: false,
       dateInputClassName: isValidDate
         ? 'datetimepicker-container-date-input'
-        : 'datetimepicker-container-date-input--error',
+        : 'datetimepicker-container-date-input +error',
       timeInputClassName: isValidTime
         ? 'datetimepicker-container-time-input'
-        : 'datetimepicker-container-time-input--error',
+        : 'datetimepicker-container-time-input +error',
       timeValue: time,
       dateValue: date,
     };
@@ -144,7 +144,7 @@ export default class DateTimePicker extends Component {
 
     if (!isValidTime) {
       this.setState({
-        timeInputClassName: 'datetimepicker-container-time-input--error',
+        timeInputClassName: 'datetimepicker-container-time-input +error',
         timeValue: value,
       });
     }
@@ -179,7 +179,7 @@ export default class DateTimePicker extends Component {
     if (!isValidDate) {
       this.setState({
         dateValue: value,
-        dateInputClassName: 'datetimepicker-container-date-input--error',
+        dateInputClassName: 'datetimepicker-container-date-input +error',
       });
     }
   }

src/styles/_helpers.scss

@@ -8,25 +8,30 @@
   color: var(--color-text-active);
 }
 
-@function spacing($name, $true-val:false) {
+.\+error {
+  border-color: var(--color-sienna) !important;
+  outline-color: var(--color-sienna) !important;
+}
+
+@function spacing($name, $true-val: false) {
   @if $true-val == true {
-    @return map-get($spacings,$name);
+    @return map-get($spacings, $name);
   } @else {
     @return var(--spacing-#{$name});
   }
 }
 
-@function font($name, $true-val:false) {
+@function font($name, $true-val: false) {
   @if $true-val == true {
-    @return map-get($fonts,$name);
+    @return map-get($fonts, $name);
   } @else {
     @return var(--font-#{$name});
   }
 }
 
-@function color($name, $true-val:false) {
+@function color($name, $true-val: false) {
   @if $true-val == true {
-    @return map-get($colors,$name);
+    @return map-get($colors, $name);
   } @else {
     @return var(--color-#{$name});
   }

src/styles/components/widgets/_datetimepicker.scss

@@ -24,15 +24,6 @@
   margin-top: -20px;
 }
 
-.datetimepicker-container-date-input--error {
-  margin-top: -20px;
-  border-color: var(--color-sienna);
-}
-
-.datetimepicker-container-time-input--error {
-  border-color: var(--color-sienna);
-}
-
 .datetimepicker-container-icons {
   display: inline-block;
   margin-top: 2px;

src/styles/components/widgets/_text-input.scss

@@ -32,5 +32,4 @@
   font-size: inherit;
   color: inherit;
   font-family: inherit;
-  outline: none;
 }