reduce changes

Author: dan13ram

apps/web/src/components/Fields/Date.tsx

@@ -30,20 +30,22 @@ interface DateProps {
   disabled?: boolean
 }
 
-const Date: React.FC<DateProps> = ({
-  inputLabel,
-  formik,
-  id,
-  errorMessage,
-  autoSubmit,
-  value,
-  placeholder,
-  altFormat,
-  enableTime = false,
-  dateFormat = 'Y-m-d',
-  disabled = false,
-  helperText,
-}) => {
+const Date: React.FC<DateProps> = (
+  {
+    inputLabel,
+    formik,
+    id,
+    errorMessage,
+    helperText,
+    autoSubmit,
+    value,
+    placeholder,
+    altFormat,
+    enableTime = false,
+    dateFormat = 'Y-m-d',
+    disabled = false,
+  }
+) => {
   const ref = React.useRef(null)
 
   React.useEffect(() => {
@@ -69,6 +71,17 @@ const Date: React.FC<DateProps> = ({
   return (
     <Box as="fieldset" mb={'x8'} p={'x0'} className={defaultFieldsetStyle}>
       {inputLabel && <label className={defaultInputLabelStyle}>{inputLabel}</label>}
+      {errorMessage && (
+        <Box
+          right={'x2'}
+          top={'x15'}
+          pt={'x4'}
+          fontSize={14}
+          className={defaultInputErrorMessageStyle}
+        >
+          {errorMessage as string}
+        </Box>
+      )}
       <input
         className={!!errorMessage ? defaultInputErrorStyle : defaultInputStyle}
         ref={ref}
@@ -90,17 +103,6 @@ const Date: React.FC<DateProps> = ({
           {helperText}
         </Box>
       )}
-      {errorMessage && (
-        <Box
-          right={'x2'}
-          top={'x15'}
-          pt={'x4'}
-          fontSize={14}
-          className={defaultInputErrorMessageStyle}
-        >
-          {errorMessage as string}
-        </Box>
-      )}
     </Box>
   )
 }

apps/web/src/components/Fields/SmartInput.tsx

@@ -113,7 +113,17 @@ const SmartInput: React.FC<SmartInputProps> = ({
   return (
     <Box as="fieldset" mb={'x8'} p={'x0'} className={defaultFieldsetStyle}>
       {inputLabel && <label className={defaultInputLabelStyle}>{inputLabel}</label>}
-
+      {errorMessage && (
+        <Box
+          position={'absolute'}
+          right={'x2'}
+          top={'x10'}
+          fontSize={12}
+          className={defaultInputErrorMessageStyle}
+        >
+          {errorMessage}
+        </Box>
+      )}
       <input
         id={id}
         type={type}
@@ -136,18 +146,6 @@ const SmartInput: React.FC<SmartInputProps> = ({
             : undefined
         }
       />
-
-      {errorMessage && (
-        <Box
-          right={'x2'}
-          top={'x15'}
-          pt={'x4'}
-          fontSize={14}
-          className={defaultInputErrorMessageStyle}
-        >
-          {errorMessage}
-        </Box>
-      )}
       {isAddress && !!value.toString().length && !errorMessage && (
         <Flex
           align={'center'}