Commit 81c06340 authored by Pavel Mishakov's avatar Pavel Mishakov

add styles

parent 9b567b33
.Header {
padding: 10px 0;
}
.Header__link { .Header__link {
border: 1px solid blueviolet;
border-radius: 10px;
padding: 10px 15px;
text-decoration: none; text-decoration: none;
color: black; color: black;
} }
\ No newline at end of file
.ProductForm {
width: 80%;
margin: 20px auto;
display: flex;
align-items: center;
flex-direction: column;
}
.ProductForm__input {
margin: 10px 0;
min-height: 20px;
border-radius: 7px;
padding: 10px;
min-width: 400px;
}
.ProductForm__button {
background: inherit;
border: 1px solid blueviolet;
padding: 10px 15px;
border-radius: 5px;
}
.ProductForm__fileInput { .ProductForm__fileInput {
display: none; display: none;
} }
\ No newline at end of file
...@@ -40,14 +40,15 @@ const ProductForm: FunctionComponent = (): ReactElement => { ...@@ -40,14 +40,15 @@ const ProductForm: FunctionComponent = (): ReactElement => {
dispatch(createProduct(formData)) dispatch(createProduct(formData))
} }
return ( return (
<div className={styles.ProductForm}> <div className={styles.ProductForm__frame}>
<form onSubmit={submitHandler}> <form className={styles.ProductForm} onSubmit={submitHandler}>
<input <input
name={'product'} name={'product'}
type="text" type="text"
placeholder="Title" placeholder="Title"
value={product.product} value={product.product}
onChange={inputHandler} onChange={inputHandler}
className={styles.ProductForm__input}
/> />
<input <input
name={'price'} name={'price'}
...@@ -55,6 +56,7 @@ const ProductForm: FunctionComponent = (): ReactElement => { ...@@ -55,6 +56,7 @@ const ProductForm: FunctionComponent = (): ReactElement => {
placeholder="Price" placeholder="Price"
value={product.price} value={product.price}
onChange={inputHandler} onChange={inputHandler}
className={styles.ProductForm__input}
/> />
<input <input
name={'description'} name={'description'}
...@@ -62,6 +64,7 @@ const ProductForm: FunctionComponent = (): ReactElement => { ...@@ -62,6 +64,7 @@ const ProductForm: FunctionComponent = (): ReactElement => {
placeholder="Description" placeholder="Description"
value={product.description} value={product.description}
onChange={inputHandler} onChange={inputHandler}
className={styles.ProductForm__input}
/> />
<label> <label>
<input <input
...@@ -76,7 +79,7 @@ const ProductForm: FunctionComponent = (): ReactElement => { ...@@ -76,7 +79,7 @@ const ProductForm: FunctionComponent = (): ReactElement => {
<span>{fileName}</span> <span>{fileName}</span>
</label> </label>
<button>SEND</button> <button className={styles.ProductForm__button}>SEND</button>
</form> </form>
</div> </div>
) )
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment