-
Notifications
You must be signed in to change notification settings - Fork 4.3k
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
Solution #5031
base: master
Are you sure you want to change the base?
Solution #5031
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.
Thank you for your hard work on this project! 😊 While your code meets most of the task requirements, there are a couple of critical issues that need to be addressed before we can approve the pull request:
-
SCSS Variables: The task requires SCSS variables to be used for main values and placed in a separate file. Currently, there is no evidence of a separate file for SCSS variables in the provided files. Please create a separate file for SCSS variables and ensure they are used appropriately.
-
Image Path Verification: Although the image paths in
stars.scss
seem correct, please double-check that they are indeed relative toindex.scss
as required.
Once these issues are resolved, your code will be in great shape! Keep up the excellent work, and don't hesitate to reach out if you need any assistance. 🚀
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
🔄 Fix the issues, commit the changes, and then re-request my review using the Re-request review
button in the Reviewers tab.
src/styles/index.scss
Outdated
@import './card'; | ||
@import './stars'; |
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.
Consider using @use
or @forward
instead of @import
as @import
is deprecated in newer versions of Sass. This change can improve performance and maintainability.
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 effort on your project! 🎉 While the code is well-structured and organized, there are a few areas that need attention to enhance maintainability and consistency:
-
SCSS Variables: It's crucial to define SCSS variables for repeated values such as colors, dimensions, and image paths. This will ensure consistency and make future updates easier. Consider creating a separate SCSS file for these variables and importing it into your main stylesheets.
-
Stylesheet Link: Ensure that the
href
attribute in your HTML file points to a compiled.css
file instead of a.scss
file. This is essential for the browser to correctly apply the styles.
These improvements will not only meet the task requirements but also help you develop better coding practices. Keep up the good work, and make sure to address these issues in future projects to avoid similar problems. Your progress is impressive, and I'm confident you'll continue to improve! 🚀
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
@@ -11,8 +11,52 @@ | |||
rel="stylesheet" | |||
href="./styles/index.scss" |
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 href
attribute should point to a .css
file instead of a .scss
file. Ensure that the SCSS is compiled to CSS and update the link accordingly.
.card { | ||
max-width: 200px; | ||
min-height: 408px; | ||
background-color: #fff; |
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.
Consider using SCSS variables for the background color (#fff
) to improve maintainability. Define a variable in a separate SCSS file and import it here.
max-width: 200px; | ||
min-height: 408px; | ||
background-color: #fff; | ||
border: 1px 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.
The border color (#f3f3f3
) should be defined as an SCSS variable. This will make it easier to update the color scheme in the future.
font-weight: 500; | ||
font-size: 12px; | ||
line-height: 18px; | ||
color: #060b35; |
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 color (#060b35
) is used multiple times. Consider defining it as an SCSS variable for consistency and easier maintenance.
font-weight: 400; | ||
font-size: 10px; | ||
line-height: 14px; | ||
color: #616070; |
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 color (#616070
) should be defined as an SCSS variable. This will help maintain consistency across the styles.
color: #fff; | ||
background-color: #00acdc; |
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 color (#00acdc
) is used in multiple places. Define it as an SCSS variable to ensure consistency and ease of updates.
@use './card'; | ||
@use './stars'; |
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.
Consider importing a separate SCSS file for variables to ensure that all main values are consistent and easily maintainable across different style files.
width: 16px; | ||
height: 16px; |
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.
Consider defining SCSS variables for the width and height (16px
) to ensure consistency and ease of updates.
width: 16px; | ||
height: 16px; | ||
margin-right: 4px; | ||
background-image: url(../images/star.svg); |
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 image path (../images/star.svg
) could be defined as an SCSS variable for better maintainability, especially if the path changes or is used in multiple places.
} | ||
|
||
&:nth-child(-n + 4) { | ||
background-image: url(../images/star-active.svg); |
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.
Similarly, consider defining a variable for the active star image path (../images/star-active.svg
) to maintain consistency and ease of updates.
No description provided.