fixed inputs

src/components/input/Button/styles.module.scss

@@ -24,7 +24,7 @@
   margin: 0;
 
   background: $button_bg_color;
-  border-radius: $input_radius;
+  border-radius: $radius;
 
   fill: white;
   stroke: white;

src/components/input/ButtonGroup/styles.module.scss

@@ -9,7 +9,7 @@
     box-shadow: transparentize($color: #000000, $amount: 0.1) 1px 0;
 
     &:last-child {
-      border-radius: 0 $input_radius $input_radius 0;
+      border-radius: 0 $radius $radius 0;
 
       &.small {
         border-radius: 0 3px 3px 0;
@@ -17,7 +17,7 @@
     }
 
     &:first-child {
-      border-radius: $input_radius 0 0 $input_radius;
+      border-radius: $radius 0 0 $radius;
     }
   }
 }

src/components/input/Info/style.scss

@@ -2,7 +2,7 @@
 
 .container {
   min-height: $info_height;
-  border-radius: $input_radius;
+  border-radius: $radius;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -26,4 +26,3 @@
     background: transparentize($red, 0.5);
   }
 }
-

src/components/input/InputText/index.tsx

@@ -1,27 +1,24 @@
-import React, { ChangeEvent, FC, useCallback, useEffect, useState } from 'react';
+import React, { ChangeEvent, FC, useCallback, useState } from 'react';
 import classNames from 'classnames';
-import styles from '~/styles/common/inputs.module.scss';
-import { Icon } from '~/components/input/Icon';
 import { IInputTextProps } from '~/redux/types';
-import { LoaderCircle } from '~/components/input/LoaderCircle';
 import { useTranslatedError } from '~/hooks/data/useTranslatedError';
+import { InputWrapper } from '~/components/input/InputWrapper';
+import styles from './styles.module.scss';
+import { Icon } from '~/components/input/Icon';
+import { useFocusEvent } from '~/hooks/dom/useFocusEvent';
 
 const InputText: FC<IInputTextProps> = ({
-  wrapperClassName,
   className = '',
   handler,
   required = false,
-  status,
   title,
   error,
   value = '',
-  onRef,
-  is_loading,
-  after,
+  suffix,
   ...props
 }) => {
-  const [focused, setFocused] = useState(false);
-  const [inner_ref, setInnerRef] = useState<HTMLInputElement | null>(null);
+  const { focused, onFocus, onBlur } = useFocusEvent();
+  const [revealed, setRevealed] = useState(false);
 
   const onInput = useCallback(
     ({ target }: ChangeEvent<HTMLInputElement>) => {
@@ -34,69 +31,35 @@ const InputText: FC<IInputTextProps> = ({
     [handler]
   );
 
-  const onFocus = useCallback(() => setFocused(true), []);
-  const onBlur = useCallback(() => setFocused(false), []);
+  const toggleRevealed = useCallback(() => setRevealed(!revealed), [setRevealed, revealed]);
 
   const translatedError = useTranslatedError(error);
 
-  useEffect(() => {
-    if (onRef) onRef(inner_ref);
-  }, [inner_ref, onRef]);
+  const type = props.type === 'password' && revealed ? 'text' : props.type;
 
   return (
-    <div
-      className={classNames(styles.input_text_wrapper, wrapperClassName, {
-        [styles.required]: required,
-        [styles.focused]: focused,
-        [styles.has_status]: !!status || !!error,
-        [styles.has_value]: !!value,
-        [styles.has_error]: !!error,
-        [styles.has_loader]: is_loading,
-      })}
-    >
-      <div className={styles.input}>
+    <InputWrapper title={title} error={translatedError} focused={focused} notEmpty={!!value}>
+      <div className={classNames(styles.input, { [styles.has_error]: !!error })}>
         <input
-          type="text"
-          onChange={onInput}
-          className={classNames(styles.input_text, className)}
+          {...props}
           onFocus={onFocus}
           onBlur={onBlur}
+          type={type}
+          onChange={onInput}
+          className={classNames(styles.input_text, className)}
           value={value || ''}
-          ref={setInnerRef}
-          {...props}
         />
+
+        {(!!suffix || props.type === 'password') && (
+          <div className={styles.suffix}>
+            {suffix}
+            {props.type === 'password' && (
+              <Icon icon="eye" onClick={toggleRevealed} className={styles.reveal} />
+            )}
+          </div>
+        )}
       </div>
-
-      <div className={styles.status}>
-        <div className={classNames(styles.success_icon, { active: status === 'success' })}>
-          <Icon icon="check" size={20} />
-        </div>
-
-        <div className={classNames(styles.error_icon, { active: status === 'error' || !!error })}>
-          <Icon icon="close" size={20} />
-        </div>
-      </div>
-
-      <div className={styles.loader}>
-        <div className={classNames({ active: is_loading })}>
-          <LoaderCircle size={20} />
-        </div>
-      </div>
-
-      {title && (
-        <div className={classNames(styles.title)}>
-          <span>{title}</span>
-        </div>
-      )}
-
-      {!!translatedError && (
-        <div className={styles.error}>
-          <span>{translatedError}</span>
-        </div>
-      )}
-
-      {!!after && <div className={styles.after}>{after}</div>}
-    </div>
+    </InputWrapper>
   );
 };
 

src/components/input/InputText/styles.module.scss

@@ -0,0 +1,39 @@
+@import "~/styles/variables";
+
+.input {
+  display: flex;
+  align-items: center;
+  color: inherit;
+
+  &.has_error {
+    color: $red;
+  }
+
+  input {
+    height: $input_height;
+    border: none;
+    flex: 1;
+    outline: none;
+    color: inherit;
+    min-width: 0;
+    background: none;
+    padding: 0 $gap 0 $gap;
+    font: $font_14_semibold;
+    border-radius: $radius;
+  }
+}
+
+.suffix {
+  fill: currentColor;
+  stroke: currentColor;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: $input_grey_color;
+  padding: 0 $gap;
+}
+
+.reveal {
+  cursor: pointer;
+}

src/components/input/InputWrapper/index.tsx

@@ -0,0 +1,26 @@
+import React, { FC } from 'react';
+import styles from './styles.module.scss';
+import classNames from 'classnames';
+
+interface InputWrapperProps {
+  title?: string;
+  error?: string;
+  focused: boolean;
+  notEmpty: boolean;
+}
+
+const InputWrapper: FC<InputWrapperProps> = ({ children, notEmpty, title, focused, error }) => (
+  <div
+    className={classNames(styles.content, {
+      [styles.has_error]: !!error,
+      [styles.focused]: focused,
+      [styles.not_empty]: notEmpty,
+    })}
+  >
+    {!!title && <div className={styles.title}>{title}</div>}
+    {children}
+    {!!error && <div className={styles.error}>{error}</div>}
+  </div>
+);
+
+export { InputWrapper };

src/components/input/InputWrapper/styles.module.scss

@@ -0,0 +1,62 @@
+@import '~/styles/variables';
+
+.content {
+  @include inner_shadow;
+
+  background: $input_bg_color;
+  min-height: $input_height;
+  border-radius: $radius;
+  position: relative;
+  color: $input_text_color;
+  font: $input_font;
+
+  ::placeholder {
+    font: $input_placeholder_font;
+    color: $input-grey_color;
+    text-transform: uppercase;
+  }
+
+  &.has_error {
+    box-shadow: inset $red 0 0 0 1px;
+  }
+}
+
+.error {
+  position: absolute;
+  font: $font_12_semibold;
+  padding: 0 $gap / 2;
+  border-radius: 4px;
+  color: white;
+  background-color: $red;
+  bottom: 0;
+  right: $gap / 2;
+  transform: translate(0, 50%);
+  pointer-events: none;
+  touch-action: none;
+}
+
+.title {
+  position: absolute;
+  top: $gap;
+  left: $gap / 2;
+  padding: 0 $gap / 2;
+  transform: translate(0, 0) scale(1);
+  font: $input_font;
+  transition: transform 0.25s;
+  transform-origin: 0 50%;
+  border-radius: 6px;
+  background-color: $input_bg_color;
+  color: $input_grey_color;
+  text-transform: uppercase;
+  pointer-events: none;
+  touch-action: none;
+
+  .focused &, .not_empty & {
+    transform: translate(0, -100%) scale(0.75);
+  }
+
+  .focused.has_error &, .not_empty.has_error & {
+    color: white;
+    background-color: $red;
+  }
+}

src/components/input/Textarea/index.tsx

@@ -10,44 +10,35 @@ import React, {
 } from 'react';
 import classNames from 'classnames';
 import autosize from 'autosize';
+import styles from './styles.module.scss';
 
-import styles from '~/styles/common/inputs.module.scss';
-import { Icon } from '../Icon';
+import { InputWrapper } from '~/components/input/InputWrapper';
 
 type IProps = DetailedHTMLProps<
   TextareaHTMLAttributes<HTMLTextAreaElement>,
   HTMLTextAreaElement
 > & {
-  value: string;
-  placeholder?: string;
-  rows?: number;
-  className?: string;
   minRows?: number;
   maxRows?: number;
+  error?: string;
+  value: string;
+  className?: string;
   handler: (value: string) => void;
-  required?: boolean;
-  status?: 'error' | 'success' | '';
   title?: string;
-  seamless?: boolean;
-  setRef?: (r: HTMLTextAreaElement) => void;
 };
 
 const Textarea = memo<IProps>(
   ({
     placeholder,
-    className,
+    error,
     minRows = 3,
     maxRows = 30,
+    className,
     handler,
-    required = false,
     title = '',
-    status = '',
-    seamless,
     value,
-    setRef,
     ...props
   }) => {
-    const [rows, setRows] = useState(minRows || 1);
     const [focused, setFocused] = useState(false);
     const ref = useRef<HTMLTextAreaElement>(null);
 
@@ -60,17 +51,10 @@ const Textarea = memo<IProps>(
     const onBlur = useCallback(() => setFocused(false), [setFocused]);
 
     useEffect(() => {
-      const target = ref?.current;
-      if (!target) return;
-
-      autosize(target);
-
-      if (setRef) {
-        setRef(target);
-      }
-
-      return () => autosize.destroy(target);
-    }, [ref, setRef]);
+      if (!ref?.current) return;
+      autosize(ref.current);
+      return () => autosize.destroy(ref.current);
+    }, [ref]);
 
     useEffect(() => {
       if (!ref.current) return;
@@ -79,48 +63,22 @@ const Textarea = memo<IProps>(
     }, [value]);
 
     return (
-      <div
-        className={classNames(styles.input_text_wrapper, styles.textarea_wrapper, {
-          [styles.required]: required,
-          [styles.focused]: focused,
-          [styles.has_status]: !!status,
-          [styles.has_value]: !!value,
-          [styles.seamless]: !!seamless,
-        })}
-      >
-        <div className={styles.input}>
-          <textarea
-            rows={rows}
-            value={value || ''}
-            placeholder={placeholder}
-            className={classNames(styles.textarea, className)}
-            onChange={onInput}
-            ref={ref}
-            onFocus={onFocus}
-            onBlur={onBlur}
-            style={{
-              // maxHeight: maxRows * 20,
-              minHeight: minRows * 20,
-            }}
-            {...props}
-          />
-        </div>
-
-        <div className={styles.status}>
-          <div className={classNames({ active: status === 'success' })}>
-            <Icon icon="check" size={20} />
-          </div>
-          <div className={classNames({ active: status === 'error' })}>
-            <Icon icon="hide" size={20} />
-          </div>
-        </div>
-
-        {title && (
-          <div className={styles.title}>
-            <span>{title}</span>
-          </div>
-        )}
-      </div>
+      <InputWrapper title={title} error={error} focused={focused} notEmpty={!!value}>
+        <textarea
+          {...props}
+          style={{
+            ...props.style,
+            minHeight: minRows * 20,
+          }}
+          value={value || ''}
+          placeholder={placeholder}
+          className={classNames(styles.textarea, className)}
+          onChange={onInput}
+          ref={ref}
+          onFocus={onFocus}
+          onBlur={onBlur}
+        />
+      </InputWrapper>
     );
   }
 );

src/components/input/Textarea/styles.module.scss

@@ -0,0 +1,12 @@
+@import "~/styles/variables";
+
+.textarea {
+  background: none;
+  color: inherit;
+  font: inherit;
+  width: 100%;
+  border: none;
+  padding: $gap;
+  outline: none;
+  resize: none;
+}