diff --git a/packages/client/src/components/Input.tsx b/packages/client/src/components/Input.tsx index 83273b7..a1694db 100644 --- a/packages/client/src/components/Input.tsx +++ b/packages/client/src/components/Input.tsx @@ -1,6 +1,6 @@ import React from 'react' -import {Control, Field, Input as I, Heading} from 'bloomer' import {IconType} from 'react-icons' +import styled from 'styled-components' export interface InputProps { name: string @@ -14,6 +14,39 @@ export interface InputProps { required?: boolean } +const Field = styled.div` + margin-bottom: 1em; +` + +const Label = styled('label')` + text-transform: uppercase; + font-size: 11px; +` + +const Control = styled.div` + position: relative; +` + +const I = styled.span` + position: absolute; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + + left: 0; + top: 0; + bottom: 0; + width: 2.5rem; +` + +const TextInput = styled.input<{hasIconLeft?: boolean}>` + padding: 0.5rem 0.75rem; + padding-left: ${props => props.hasIconLeft ? '2.5rem' : '0.75rem'} + width: 100%; +` + export class Input extends React.PureComponent { handleChange = (e: React.ChangeEvent) => { if (this.props.onChange) { @@ -24,10 +57,10 @@ export class Input extends React.PureComponent { const {Icon} = this.props return ( - {this.props.label} - - {this.props.label} + + { readOnly={!!this.props.readOnly} required={this.props.required} /> - {Icon && - - } + {Icon && } )