Mini challenge5 #62
Mini challenge5 #62
Conversation
| @@ -0,0 +1 @@ | |||
| REACT_APP_API_KEY = AIzaSyCvXyI17JpqteOyWUvL_w7gjwXKOZXnbaI | |||
There was a problem hiding this comment.
Normally this type of secret needs to be added to the .gitignore file for security reasons.
| const ModalFavorite = styled.div` | ||
| width: 30%; | ||
| height: 100%; | ||
| background-color: white; |
There was a problem hiding this comment.
If you defined a theme, maybe you could pull the color values from it.
| padding: 10px; | ||
| height: 50px; | ||
| border-bottom-style: solid; | ||
| border-bottom-color: #e6e6e6; |
There was a problem hiding this comment.
Pull color value from theme.
| `; | ||
|
|
||
| const ModalContent = styled.div` | ||
| background-color: #fefefe; |
There was a problem hiding this comment.
Pull color value from theme.
| @@ -14,7 +14,7 @@ html { | |||
| box-sizing: inherit; | |||
| } | |||
|
|
|||
| body { | |||
| /* body { | |||
There was a problem hiding this comment.
There is no need for a global.css file if you are using styled-components. In that case, what you can do is create a global stylesheet via styled-components.
Reference: https://styled-components.com/docs/api#createglobalstyle
| @@ -1,5 +1,7 @@ | |||
| .homepage { | |||
| text-align: center; | |||
| overflow: scroll; | |||
There was a problem hiding this comment.
You can avoid mixing css files and styled-components files.
There was a problem hiding this comment.
Looking good! Left some comments.
Overall this is solid! My advice would be to avoid mixing CSS and CSS-in-JS. Use one or the other. I think in this case CSS-in-JS (styled-components) would be better since the bootcamp covered it. Use the APIs that it gives you to the fullest, global styles, theme provider, etc.
No description provided.