Need to add in icons (dropped a few comments for you in Figma @jyng ), remove 'success' messaging, fine tune styles.
Nice part about styled-components is that you can now use the as prop to create different DOM elements with the same styles. So we don't need a <Textarea/> component that is essentially the same as a <FieldInput/>. Instead, we can do <FieldInput as="textarea" />. We can also reuse things like Span to be labels by doing Span as="label" />.
First pass at some of the inputs.
Need to add in icons (dropped a few comments for you in Figma @jyng ), remove 'success' messaging, fine tune styles.
Nice part about styled-components is that you can now use the
asprop to create different DOM elements with the same styles. So we don't need a<Textarea/>component that is essentially the same as a<FieldInput/>. Instead, we can do<FieldInput as="textarea" />. We can also reuse things likeSpanto be labels by doingSpan as="label" />.Should check my example here: https://github.com/urbit/indigo-react/pull/4/files#diff-0712b3b827cab2aafa061d6952e2f384R11 Personally, I wouldn't tightly couple the input elements much more. Use a library like formik (which is now React's official recommendation for form management) to pass in error/touched/submitting/success etc etc.