feat(ui) - filters duration

frontend/app/components/shared/Filters/FilterDuration/FilterDuration.css

@@ -1,8 +1,10 @@
 .wrapper {  
   display: flex;
   justify-content: space-between;
+  align-items: center;
 
   & input {
+    height: 26px;
     max-width: 85px !important;
     font-size: 13px !important;
     font-weight: 400 !important;
@@ -10,9 +12,11 @@
   }
   
   & > div {
-    &:first-child {
+    /* &:first-child { */
       margin-right: 10px;
-    }
+      height: 26px;
+      /* padding: 5px !important; */
+    /* } */
   }
 }
 
@@ -20,5 +24,11 @@
   font-size: 13px !important;
   font-weight: 400 !important;
   color: $gray-medium !important;
+  padding: 0px 5px !important;
+  line-height: 1.9 !important;
+  /* height: 26px;
+  display: flex;
+  align-items: center;
+  justify-content: center; */
 }
 

frontend/app/components/shared/Filters/FilterDuration/FilterDuration.js

@@ -37,7 +37,7 @@ export default class FilterDuration extends React.PureComponent {
           name="minDuration"
           value={ fromMs(minDuration) }
           onChange={ this.onChange }
-          className="customInput"
+          // className="customInput"
           onKeyPress={ this.onKeyPress }
           onFocus={() => this.setState({ focused: true })}
           onBlur={this.props.onBlur}
@@ -52,7 +52,7 @@ export default class FilterDuration extends React.PureComponent {
           name="maxDuration"
           value={ fromMs(maxDuration) }
           onChange={ this.onChange }
-          className="customInput"
+          // className="customInput"
           onKeyPress={ this.onKeyPress }
           onFocus={() => this.setState({ focused: true })}
           onBlur={this.props.onBlur}

frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx

@@ -10,7 +10,7 @@ interface Props {
 }
 function FilterValue(props: Props) {
   const { filter } = props;
-  const [durationValues, setDurationValues] = useState({ minDuration: 0, maxDuration: 0 });
+  const [durationValues, setDurationValues] = useState({ minDuration: filter.value[0], maxDuration: filter.value[1] });
 
   const onAddValue = () => {
     const newValues = filter.value.concat("")
@@ -100,8 +100,8 @@ function FilterValue(props: Props) {
             onChange={ onDurationChange }
             // onEnterPress={ this.handleClose }
             onBlur={handleBlur}
-            minDuration={ filter.value[0] }
-            maxDuration={ filter.value[1] }
+            minDuration={ durationValues.minDuration }
+            maxDuration={ durationValues.maxDuration }
           />
         )
       case FilterType.NUMBER: