♻️ Update DateFieldGroup to use new Input props

LiskHQ · Sep 5, 2019 · 2d509bb · 2d509bb
1 parent d4a0225
commit 2d509bb
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 24 deletions.
diff --git a/src/components/toolbox/feedback/feedback.css b/src/components/toolbox/feedback/feedback.css
@@ -27,7 +27,7 @@
     padding: 8px 0;
   }
 
-  &.error {
+  &.error:not(:empty) {
     background: var(--error-background-color);
     color: var(--color-burnt-sienna);
     padding: 8px var(--horizontal-padding-l);

diff --git a/src/components/toolbox/inputs/input.js b/src/components/toolbox/inputs/input.js
@@ -16,7 +16,7 @@ const updateStatus = ({
   if (isLoading) {
     status = 'pending';
   }
-  if ((!value || readOnly) && status === 'ok') {
+  if (!value || readOnly) {
     status = undefined;
   }
   if (error) {

diff --git a/src/components/transactions/filters/dateFieldGroup.js b/src/components/transactions/filters/dateFieldGroup.js
@@ -11,8 +11,6 @@ import Dropdown from '../../toolbox/dropdown/dropdown';
 import Calendar from '../../toolbox/calendar/calendar';
 import Feedback from '../../toolbox/feedback/feedback';
 import keyCodes from '../../../constants/keyCodes';
-import Spinner from '../../spinner/spinner';
-import Icon from '../../toolbox/icon';
 import i18n from '../../../i18n';
 
 class DateFieldGroup extends React.Component {
@@ -223,14 +221,10 @@ class DateFieldGroup extends React.Component {
           onFocus={this.handleFocus}
           onClick={this.handleFocus}
           onKeyDown={this.handleKey}
-          className={`${styles.input} ${fields[data.name].error ? 'error' : ''} ${data.name}Input`}
-        />
-        <Spinner
-          className={`${styles.status} ${fields[data.name].loading && filters[data.name] ? styles.show : ''}`}
-        />
-        <Icon
-          className={`${styles.status} ${!fields[data.name].loading && filters[data.name] ? styles.show : ''}`}
-          name={fields[data.name].error ? 'alertIcon' : 'okIcon'}
+          className={`${styles.input} ${data.name}Input`}
+          isLoading={fields[data.name].loading}
+          status={fields[data.name].error ? 'error' : 'ok'}
+          size="xs"
         />
       </label>
     );
@@ -290,7 +284,7 @@ class DateFieldGroup extends React.Component {
           className={styles.feedback}
           show={!!this.state.feedback}
           status={this.state.feedback ? 'error' : ''}
-          showIcon={false}
+          size="xs"
         >
           { this.state.feedback }
         </Feedback>

diff --git a/src/components/transactions/filters/filters.css b/src/components/transactions/filters/filters.css
@@ -68,11 +68,6 @@
   }
 
   & .input {
-    @mixin contentNormal;
-
-    height: 32px;
-    min-height: 32px;
-    padding-right: 30px;
     resize: none;
 
     &:focus {
@@ -85,12 +80,6 @@
       }
     }
   }
-
-  & .feedback {
-    margin-top: 8px;
-    padding-left: 8px;
-    padding-right: 8px;
-  }
 }
 
 .dropdownWrapper {