Mini Challenge 1 #1
Conversation
package.json
Outdated
| "react-scripts": "3.4.3" | ||
| "react-scripts": "3.4.3", | ||
| "styled-components": "^5.2.1", | ||
| "yarn": "^1.22.10" |
There was a problem hiding this comment.
yarn should not be installed as a project dependency
|
|
||
| const Header = styled.header` | ||
| color: #fff; | ||
| background-color: #1c5476; |
There was a problem hiding this comment.
I recommend handling the colors with a theme provider, so changing colors with the light and dark theme becomes easier:
| font-size: 1rem; | ||
| box-sizing: border-box; | ||
| align-items: center; | ||
| font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif; |
There was a problem hiding this comment.
I see that you are repeating font-size a lot, you can use global styles to define a font family for the whole application: https://styled-components.com/docs/api#createglobalstyle
| justify-content: center; | ||
| align-items: center; | ||
| margin-top: -3rem; | ||
| @media (min-width: 1135px) |
There was a problem hiding this comment.
You can also use media queries with styled-components (:
|
|
||
| const Container = styled.div` | ||
| width: 345px; | ||
| height: 345px; |
There was a problem hiding this comment.
I suggest you use relative units like rem. This helps you achieve a more responsive application. Ideally, you should only use pixels for font sizes, borders, and small stuff.
| margin: 0; | ||
| padding: 0; | ||
| text-rendering: optimizeLegibility; | ||
| /* text-rendering: optimizeLegibility; |
There was a problem hiding this comment.
You can also handle globals with styled-components: https://styled-components.com/docs/api#createglobalstyle
| margin: 0; | ||
| padding: 0; | ||
| text-rendering: optimizeLegibility; | ||
| /* text-rendering: optimizeLegibility; |
No description provided.