File tree Expand file tree Collapse file tree 3 files changed +8
-8
lines changed Expand file tree Collapse file tree 3 files changed +8
-8
lines changed Original file line number Diff line number Diff line change 1
1
import React , { useState } from 'react' ;
2
2
import PropTypes from 'prop-types' ;
3
- // import styles from './ContactForm.module.css';
3
+ import styles from './ContactForm.module.css'
4
4
5
5
const ContactForm = ( { onAddContact } ) => {
6
6
const [ name , setName ] = useState ( '' ) ;
@@ -23,8 +23,8 @@ const ContactForm = ({ onAddContact }) => {
23
23
} ;
24
24
25
25
return (
26
- < form onSubmit = { handleSubmit } >
27
- < label >
26
+ < form onSubmit = { handleSubmit } className = { styles . form } >
27
+ < label className = { styles . label } >
28
28
Name:
29
29
< input
30
30
type = "text"
@@ -48,7 +48,7 @@ const ContactForm = ({ onAddContact }) => {
48
48
onChange = { handleChange }
49
49
/>
50
50
</ label >
51
- < button type = "submit" > Add Contact</ button >
51
+ < button type = "submit" className = { styles . addContact } > Add Contact</ button >
52
52
</ form >
53
53
) ;
54
54
} ;
Original file line number Diff line number Diff line change 1
1
2
- form {
2
+ . form {
3
3
display : flex;
4
4
flex-direction : column;
5
5
gap : 15px ;
6
6
margin-top : 30px ;
7
7
}
8
8
9
- button {
9
+ . addContact {
10
10
background-color : # 000000 ;
11
11
border : none;
12
12
color : white;
@@ -22,7 +22,7 @@ button {
22
22
transition : background-color 0.3s ease;
23
23
}
24
24
25
- button : hover {
25
+ . addContact : hover {
26
26
background-color : # 5a5a5a ;
27
27
}
28
28
@@ -47,7 +47,7 @@ button {
47
47
outline : none;
48
48
}
49
49
50
- label {
50
+ . label {
51
51
font-family : Dancing Script;
52
52
font-size : 20px ;
53
53
}
You can’t perform that action at this time.
0 commit comments