-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Develop #4880
base: master
Are you sure you want to change the base?
Develop #4880
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The value for 'font-weight' should be a numeric value, not '700px'. It should be '700'.
DEMO LINK