Develop #4880
Develop #4880
Conversation
There was a problem hiding this comment.
It looks like there are several critical issues related to missing units in CSS properties, which can significantly impact the layout and styling of the application. Please address these to ensure the code functions as expected. Keep up the great work, and once these are fixed, your code will be even better! 😊
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
src/styles/index.scss
Outdated
| body { | ||
| margin: 0; | ||
| padding: 20; |
There was a problem hiding this comment.
The padding value should have a unit. Consider using 'px' or another appropriate unit for the padding value.
src/styles/parts/card.scss
Outdated
| flex-direction: column; | ||
| align-items: center; | ||
| padding: 32px 16px 16px; | ||
| border: 1 solid #f3f3f3; |
There was a problem hiding this comment.
There is a missing unit for the border width. It should be specified, for example, as '1px solid #f3f3f3'.
src/styles/parts/card.scss
Outdated
| align-items: center; | ||
| padding: 32px 16px 16px; | ||
| border: 1 solid #f3f3f3; | ||
| border-radius: 5; |
There was a problem hiding this comment.
The border-radius value is missing a unit. It should be specified, for example, as '5px'.
src/styles/parts/card.scss
Outdated
| border-radius: 5; | ||
|
|
||
| &__image { | ||
| height: 134; |
There was a problem hiding this comment.
The height value is missing a unit. It should be specified, for example, as '134px'.
src/styles/parts/card.scss
Outdated
| &__image { | ||
| height: 134; | ||
| width: 160; | ||
| margin-bottom: 40; |
There was a problem hiding this comment.
The margin-bottom value is missing a unit. It should be specified, for example, as '40px'.
src/styles/parts/card.scss
Outdated
| height: 40; | ||
| border-radius: 5; | ||
| border: 1 solid #00acdc; | ||
| font-size: 14; |
There was a problem hiding this comment.
The font-size value is missing a unit. It should be specified, for example, as '14px'.
src/styles/parts/card.scss
Outdated
| border-radius: 5; | ||
| border: 1 solid #00acdc; | ||
| font-size: 14; | ||
| line-height: 16; |
There was a problem hiding this comment.
The line-height value is missing a unit. It should be specified, for example, as '16px'.
src/styles/parts/stars.scss
Outdated
| display: flex; | ||
|
|
||
| &__star { | ||
| height: 16; |
There was a problem hiding this comment.
There is a missing unit for the height property. It should be specified, for example, as '16px'.
src/styles/utils/mixins.scss
Outdated
| @@ -0,0 +1,9 @@ | |||
| @mixin font { | |||
There was a problem hiding this comment.
The mixin name 'font' is too generic. Consider using a more descriptive name to indicate what the mixin is specifically for, such as 'roboto-font'.
| font-family: Roboto, serif; | ||
| } | ||
|
|
||
| @mixin display-position { |
There was a problem hiding this comment.
The mixin name 'display-position' could be more descriptive. Consider renaming it to something like 'flex-center' to better convey its purpose.
There was a problem hiding this comment.
It looks like there are several issues related to CSS properties that need to be addressed. These include incorrect font-weight values and missing units for font-size and margin-bottom. Additionally, adhering to the recommended code style for using 0 instead of 0px would improve the code quality. Please make these changes to ensure the code meets the required standards. Keep up the good work, and you're almost there! 😊
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
src/styles/index.scss
Outdated
| body { | ||
| margin: 0; | ||
| margin: 0px; |
There was a problem hiding this comment.
According to the Code Style Rules ❗️, it is recommended to use 0 instead of 0px for the margin property.
| // } | ||
|
|
||
| &__title { | ||
| font-weight: 500px; |
There was a problem hiding this comment.
There is a typo in the font-weight value. It should be a number (e.g., 500) instead of '500px'.
src/styles/parts/card.scss
Outdated
| &__code { | ||
| color: #616070; | ||
| font-weight: 400; | ||
| font-size: 10; |
There was a problem hiding this comment.
The font-size value is missing a unit. It should be specified in 'px', 'em', etc.
| } | ||
|
|
||
| &__reviews-value { | ||
| font-weight: 400px; |
There was a problem hiding this comment.
There is a typo in the font-weight value. It should be a number (e.g., 400) instead of '400px'.
| } | ||
|
|
||
| &__price-value { | ||
| font-weight: 700; |
There was a problem hiding this comment.
The font-size value is missing a unit. It should be specified in 'px', 'em', etc.
src/styles/parts/card.scss
Outdated
| font-weight: 700; | ||
| font-size: 16; | ||
| line-height: 18px; | ||
| margin-bottom: 16; |
There was a problem hiding this comment.
The margin-bottom value is missing a unit. It should be specified in 'px', 'em', etc.
| border: 1px solid #00acdc; | ||
| font-size: 14px; | ||
| line-height: 16px; | ||
| font-weight: 700px; |
There was a problem hiding this comment.
There is a typo in the font-weight value. It should be a number (e.g., 700) instead of '700px'.
There was a problem hiding this comment.
Great job on structuring your SCSS files and using BEM methodology! 🎉 While there are a few minor issues with the 'font-weight' values, which should be numeric (e.g., '700' instead of '700px'), your overall approach is solid. Please review the comments to improve your code. Keep up the good work and continue learning from these experiences!
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
| // } | ||
|
|
||
| &__title { | ||
| font-weight: 500px; |
There was a problem hiding this comment.
The value for 'font-weight' should be a numeric value, not '500px'. It should be '500'.
|
|
||
| &__code { | ||
| color: #616070; | ||
| font-weight: 400px; |
There was a problem hiding this comment.
The value for 'font-weight' should be a numeric value, not '400px'. It should be '400'.
| } | ||
|
|
||
| &__reviews-value { | ||
| font-weight: 400px; |
There was a problem hiding this comment.
The value for 'font-weight' should be a numeric value, not '400px'. It should be '400'.
|
|
||
| &__price-title { | ||
| color: #616070; | ||
| font-weight: 400px; |
There was a problem hiding this comment.
The value for 'font-weight' should be a numeric value, not '400px'. It should be '400'.
| border: 1px solid #00acdc; | ||
| font-size: 14px; | ||
| line-height: 16px; | ||
| font-weight: 700px; |
There was a problem hiding this comment.
The value for 'font-weight' should be a numeric value, not '700px'. It should be '700'.
DEMO LINK