diff --git a/src/assets/images/icon-checkmark.svg b/src/assets/images/icon-checkmark.svg new file mode 100644 index 00000000..e1a78730 --- /dev/null +++ b/src/assets/images/icon-checkmark.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/src/assets/images/icon-cross.svg b/src/assets/images/icon-cross.svg new file mode 100644 index 00000000..62fa417d --- /dev/null +++ b/src/assets/images/icon-cross.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/src/assets/images/icon-triangle.svg b/src/assets/images/icon-triangle.svg new file mode 100644 index 00000000..449b567b --- /dev/null +++ b/src/assets/images/icon-triangle.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/src/assets/images/icon-wallet.svg b/src/assets/images/icon-wallet.svg new file mode 100644 index 00000000..e8497c3b --- /dev/null +++ b/src/assets/images/icon-wallet.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/components/composed/RestoreSeedField/RestoreSeedField.css b/src/components/basic/Textarea/Textarea.css similarity index 65% rename from src/components/composed/RestoreSeedField/RestoreSeedField.css rename to src/components/basic/Textarea/Textarea.css index cb8392b5..662c68ed 100644 --- a/src/components/composed/RestoreSeedField/RestoreSeedField.css +++ b/src/components/basic/Textarea/Textarea.css @@ -1,12 +1,13 @@ -.seed-textarea { +.textarea { + width: 100%; padding: 15px; resize: none; } -.seed-textarea.seed-invalid { +.textaria-invalid { border-bottom: 2px solid rgb(var(--color-red)); } -.seed-textarea.seed-valid { +.textaria-valid { border-bottom: 2px solid rgb(var(--color-green)); } diff --git a/src/components/basic/Textarea/Textarea.js b/src/components/basic/Textarea/Textarea.js new file mode 100644 index 00000000..650ec081 --- /dev/null +++ b/src/components/basic/Textarea/Textarea.js @@ -0,0 +1,49 @@ +import React, { useEffect, useState } from 'react' +import './Textarea.css' + +const Textarea = ({ + value, + onChange, + extraClasses, + id, + size, + validity = true, + disabled, +}) => { + const [textareaVakue, setTextareaValue] = useState(value ? value : '') + + useEffect(() => { + setTextareaValue(value) + }, [value]) + + const getExtraClasses = () => { + if (value && validity) { + return 'textaria-valid' + } else if (value && !validity) { + return 'textaria-invalid' + } else { + return '' + } + } + const onChangeHandler = ({ target }) => { + onChange && onChange({ target }) + setTextareaValue(target.value) + getExtraClasses() + } + + return ( +