form buttons styling

This commit is contained in:
Jan Prochazka
2020-04-26 08:11:36 +02:00
parent 4e0770d1ab
commit d2887f9869
7 changed files with 96 additions and 17 deletions

View File

@@ -2,12 +2,19 @@ import React from 'react';
import styled from 'styled-components';
import { TextField, SelectField } from './inputs';
import { Field, useFormikContext } from 'formik';
import FormStyledButton from '../widgets/FormStyledButton';
export const FormRow = styled.div`
display: flex;
margin: 10px;
`;
export const FormButtonRow = styled.div`
display: flex;
// justify-content: flex-end;
margin: 10px;
`;
export const FormLabel = styled.div`
width: 10vw;
font-weight: bold;
@@ -40,10 +47,10 @@ export function FormSelectField({ label, children, ...other }) {
}
export function FormSubmit({ text }) {
return <input type="submit" value={text} />;
return <FormStyledButton type="submit" value={text} />;
}
export function FormButton({ text, onClick, ...other }) {
const { values } = useFormikContext();
return <input type="button" value={text} onClick={() => onClick(values)} {...other} />;
return <FormStyledButton type="button" value={text} onClick={() => onClick(values)} {...other} />;
}