Sprint-4 basket page layout#45
Conversation
e-commerce-app/package.json
Outdated
| "@mui/icons-material": "^5.14.3", | ||
| "@mui/material": "^5.14.4", | ||
| "@reduxjs/toolkit": "^1.9.5", | ||
| "@types/react-redux": "^7.1.26", |
There was a problem hiding this comment.
we don't need react-redux types, we use RTK
| sx={{ backgroundColor: 'yellowgreen', color: 'green', mt: '5%' }} | ||
| > | ||
| <KeyboardBackspaceIcon width="20" /> | ||
| <Box component="span" onClick={() => navigate('/products')}> |
There was a problem hiding this comment.
It.s better to use onClick action on Button component
| export const BasketPage: FC = () => { | ||
| const navigate = useNavigate(); | ||
| return ( | ||
| <Container className="container" sx={{ textAlign: 'center', mt: '5%' }}> |
There was a problem hiding this comment.
what's the reason of useing className? there are no styles imported
in case of styles in another scss file it's better to import styles file as module and use dynamic styles as className={styles.container}. so we can reuse the same classnames all over the application with different styles in different components. And on production components will have different classNames
| sx={{ border: '1px solid grey', fontSize: '10px' }} | ||
| > | ||
| <KeyboardBackspaceIcon width="20" /> | ||
| <Box component="span" onClick={() => navigate('/products')}> |
There was a problem hiding this comment.
same.
use action onClick on button, its's better way
| <Grid item className="cart-product-quantity" xs={2.8} alignSelf="center" display="flex"> | ||
| <Button sx={{ minWidth: 'min-content', backgroundColor: 'lightgrey' }}>-</Button> | ||
| <Typography className="count" padding="0.7rem 0"> | ||
| 1 |
There was a problem hiding this comment.
You need to use variables instead of using "magic numbers"
3 participants
Sprint [sprint #4]
Task
Trello task link1
Trello task link2
Trello task link3
Trello task link4
Summary
Changelog
Screenshot