diff --git a/src/components/Textarea/index.js b/src/components/Textarea/index.js index 36abbf27..314dd400 100644 --- a/src/components/Textarea/index.js +++ b/src/components/Textarea/index.js @@ -2,23 +2,34 @@ import React from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; import colors from 'config/colors'; -import { FONT_SIZE, FONT_WEIGHT } from 'config/variables'; +import { FONT_SIZE, FONT_WEIGHT, FONT_FAMILY } from 'config/variables'; const Wrapper = styled.div` width: 100%; + display: flex; + flex-direction: column; + justify-content: flex-start; +`; + +const Label = styled.span` + padding-bottom: 4px; + color: ${colors.TEXT_SECONDARY}; `; const disabledColor = colors.TEXT_PRIMARY; const TextArea = styled.textarea` width: 100%; - padding: 5px 10px; + padding: 6px 12px; box-sizing: border-box; min-height: 25px; - border: ${props => (props.isError ? `1px solid ${colors.ERROR_PRIMARY}` : `1px solid ${colors.TEXT_PRIMARY}`)}; + border: ${props => (props.isError ? `1px solid ${colors.ERROR_PRIMARY}` : `1px solid ${colors.DIVIDER}`)}; + border-radius: 2px; resize: none; outline: none; - background: transparent; + font-family: ${FONT_FAMILY.MONOSPACE}; + color: ${colors.TEXT_PRIMARY}; + background: ${colors.WHITE}; font-weight: ${FONT_WEIGHT.BASE}; font-size: ${FONT_SIZE.BASE}; white-space: pre-wrap; /* css-3 */ @@ -73,34 +84,33 @@ const TextArea = styled.textarea` opacity: 1; } } - - &:hover:not(:disabled), - &:focus:not(:disabled) { - border: 1px solid ${colors.TEXT_SECONDARY}; - } `; const Textarea = ({ className, placeholder = '', - value = '', + value, customStyle = {}, onFocus, onBlur, - disabled, + isDisabled, onChange, isError, + label, }) => ( + {label && ( + + )}