final by melr1ze · Pull Request #6524 · mate-academy/layout_product-cards

melr1ze · 2026-04-15T11:46:36Z

mateacademy-ai-mentor

Review Summary

I am requesting changes because a few required checklist items are not yet met, even though the card looks and behaves correctly overall.

Critical issues that must be fixed:

In src/styles/index.scss, both BEM blocks .card and .stars are defined in the same file, which violates the requirement that each block must live in its own SCSS file [CHECKLIST ITEM #1]; please move the .card styles into something like src/styles/_card.scss and the .stars styles into src/styles/_stars.scss, then import them into index.scss with @import/@use.
The stars modifiers .stars--1 … .stars--5 are written as separate top-level selectors instead of nested under the .stars block [CHECKLIST ITEM #2]; inside .stars { ... }, add nested modifier rules such as &--4 { .stars__star:nth-child(-n + 4) { ... } } so that modifiers also use SCSS nesting.
At the top of src/styles/index.scss (around lines 1–4), you define colors via CSS custom properties in :root; the checklist requires SCSS variables in a separate partial [CHECKLIST ITEM #3], so move these main values into a new src/styles/_variables.scss as SCSS variables (e.g. $main-color, $text-accent-color) and import that file, then replace all var(--...) usages with the corresponding SCSS variables.

Minor but still important: your PR description should also include the provided checklist text with - [x] marks for the items you completed, as requested in the task instructions.

Once you split the SCSS into separate block files, nest the modifiers, and introduce a variables partial with SCSS variables, your solution will fully align with the checklist, and the rest of your implementation (layout, stars behavior, hover styles, and assets) already looks solid.

✨ Please rate this review in the Platform's notification center¹. I will be grateful for your feedback! ✨

Important

Fix the issues, commit the changes, and then re-request my review using the Re-request review button² in the Reviewers tab.

Tip

If you have any comments about this review, please leave a message in the Add a comment section below and mention me with the @mateacademy-ai-mentor tag³.
I will read your message during my next review of your pull request. Please do not reply directly to my comments, as that feature is not supported yet.

Caution

Do not close the pull request until the review is complete. Closing it early can lead to unexpected behavior and disrupt the review process.

mateacademy-ai-mentor · 2026-04-15T13:34:53Z

+.card {
+  width: 200px;
+  border: 1px solid #f3f3f3;
+  border-radius: 5px;
+  padding: 32px 16px 16px;
+  background: #fff;
+  margin: 100px;
+
+  &__image {
+    display: block;
+    margin: 0 auto 40px;
+    width: 160px;
+    height: 134px;
+  }
+
+  &__title {
+    margin: 0 0 4px;
+    font-size: 12px;
+    line-height: 18px;
+    font-weight: 500;
+    color: var(--text-accent-color);
+  }
+
+  &__code {
+    margin-bottom: 16px;
+  }
+
+  &__review-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    margin-bottom: 24px;
+  }
+
+  &__review-count {
+    color: var(--text-accent-color);
+  }
+
+  &__price-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+  }
+
+  &__price-label {
+    font-size: 12px;
+    line-height: 18px;
+  }
+
+  &__price {
+    font-size: 16px;
+    line-height: 18px;
+    font-weight: bold;
+    color: var(--text-accent-color);
+  }
+
+  &__buy {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 40px;
+    border: 1px solid var(--main-color);
+    border-radius: 5px;
+    font-size: 14px;
+    line-height: 16px;
+    color: #fff;
+    font-weight: 700;
+    text-decoration: none;
+    text-transform: uppercase;
+    background-color: var(--main-color);
+    &:hover {
+      color: var(--main-color);
+      background-color: #fff;
+    }
+  }
+}
+
+.stars {
+  display: flex;
+
+  &__star {
+    width: 16px;
+    height: 16px;
+    margin-right: 4px;
+    background-image: url('../images/star.svg');
+    background-repeat: no-repeat;
+    background-position: center;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+
+.stars--1 .stars__star:nth-child(-n + 1),
+.stars--2 .stars__star:nth-child(-n + 2),
+.stars--3 .stars__star:nth-child(-n + 3),
+.stars--4 .stars__star:nth-child(-n + 4),
+.stars--5 .stars__star:nth-child(-n + 5) {
+  background-image: url('../images/star-active.svg');
+}


This violates checklist item #1: "there 2 BEM blocks card and stars each in their own file" — both the .card block (starts here) and the .stars block are defined together in src/styles/index.scss. Move each BEM block into its own SCSS file (for example _card.scss and _stars.scss) and import them.

mateacademy-ai-mentor · 2026-04-15T13:34:53Z

+
+.stars--1 .stars__star:nth-child(-n + 1),
+.stars--2 .stars__star:nth-child(-n + 2),
+.stars--3 .stars__star:nth-child(-n + 3),
+.stars--4 .stars__star:nth-child(-n + 4),
+.stars--5 .stars__star:nth-child(-n + 5) {
+  background-image: url('../images/star-active.svg');
+}


This violates checklist item #2: "SCSS Nesting is used for elements, modifiers and pseudo-classes" — the stars modifiers .stars--1...stars--5 are written as separate top-level selectors (lines below) instead of being nested as modifiers (for example: inside .stars use &--4 { .stars__star:nth-child(-n + 4) { ... } }). Please nest modifier rules under the block to satisfy the requirement.

mateacademy-ai-mentor · 2026-04-15T13:34:53Z

+:root {
+  --main-color: #00acdc;
+  --text-accent-color: #060b35;
+  --text-secondary-color: #616070;
+}


This violates checklist item #3: "SCSS Variables are used for main values and placed in a separate file" — the file uses CSS custom properties in :root (lines 1–4) inside index.scss. Replace these with SCSS variables (e.g., $main-color, $text-accent-color) placed in a separate _variables.scss partial and import it into your main stylesheet.

mateacademy-ai-mentor

Review Summary

I am requesting changes because, while the card works visually and functionally, several explicit checklist requirements are not yet satisfied.

Critical issues to fix:

In src/styles/index.scss, both BEM blocks card and stars are defined in the same file; the checklist requires each block to live in its own SCSS file. Move the card styles to something like src/styles/card.scss and the stars styles to src/styles/stars.scss, then import them from your main entry point (or wire them into the build) instead of keeping everything in index.scss.
The project uses CSS custom properties instead of SCSS variables and does not have a separate variables file; the checklist requires SCSS variables for main values in a dedicated file. Create a variables file (for example src/styles/_variables.scss) with variables like $card-width, $primary-color, $text-color, etc., import it into your block files, and replace var(--...) usages with the corresponding $variable names.
The requirement that SCSS nesting be used for modifiers is not met: modifiers such as .stars--1 to .stars--5 are declared as top-level selectors instead of being nested under .stars. Refactor this so that your modifiers are nested, e.g.:
```
.stars {
  &__star { /* base star styles */ }
  &--1 { /* rules for 1 active star */ }
  &--2 { /* rules for 2 active stars */ }
  // ...
}
```
The pull request description is missing the copied checklist with - [x] marks after the demo/test links, which is explicitly required. Edit the PR description, paste the full checklist under the links, and mark completed items with - [x] so reviewers can quickly verify what you have covered.

Minor improvements (not blockers, but worth addressing): you could further tidy structure by keeping any reset/base styles in their own partial and following a consistent partial naming/import convention, but this is secondary to the checklist fixes above. Overall, the implementation quality is good—once you split the SCSS into block and variables files, add proper modifier nesting, and update the PR description with the checklist, your solution will fully meet the project requirements.

✨ Please rate this review in the Platform's notification center¹. I will be grateful for your feedback! ✨

Important

Fix the issues, commit the changes, and then re-request my review using the Re-request review button² in the Reviewers tab.

Tip

If you have any comments about this review, please leave a message in the Add a comment section below and mention me with the @mateacademy-ai-mentor tag³.
I will read your message during my next review of your pull request. Please do not reply directly to my comments, as that feature is not supported yet.

Caution

Do not close the pull request until the review is complete. Closing it early can lead to unexpected behavior and disrupt the review process.

mateacademy-ai-mentor

Sorry, the pull request review was unsuccessful for the following reasons:

Warning

No changes were made in the pull request since the last review. Please make sure that you have added files to the pull request and committed the changes.
_{[CODE: NCM]}

If the issue is within your control, please address it.
The next review attempt will automatically launch in about 1 hour.
If you believe this is an error or need assistance, please contact the support team.

mateacademy-ai-mentor

Sorry, the pull request review was unsuccessful for the following reasons:

Warning

No changes were made in the pull request since the last review. Please make sure that you have added files to the pull request and committed the changes.
_{[CODE: NCM]}

If the issue is within your control, please address it.
The next review attempt will automatically launch in about 1 hour.
If you believe this is an error or need assistance, please contact the support team.

mateacademy-ai-mentor

Sorry, the pull request review was unsuccessful for the following reasons:

Warning

No changes were made in the pull request since the last review. Please make sure that you have added files to the pull request and committed the changes.
_{[CODE: NCM]}

If the issue is within your control, please address it.
The next review attempt will automatically launch in about 1 hour.
If you believe this is an error or need assistance, please contact the support team.

brespect

Your TEST REPORT LINK is not working

melr1ze · 2026-04-16T06:44:01Z

Что мне нужно сделать что бы пройти дальше ? чт, 16 апр. 2026 г. в 09:26, Bohdan Lesyk ***@***.***>:

…

***@***.**** requested changes on this pull request. Your TEST REPORT LINK is not working — Reply to this email directly, view it on GitHub <#6524 (review)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/B7HRYSTELMQ7S5J2NVUIR7D4WB4HVAVCNFSM6AAAAACX2D3F4OVHI2DSMVQWIX3LMV43YUDVNRWFEZLROVSXG5CSMV3GSZLXHM2DCMJYG4YDENJQGE> . You are receiving this because you authored the thread.Message ID: ***@***.***>

etojeDenys

good job

melr1ze added 3 commits April 15, 2026 10:49

fix

8c2e9a6

lastchanges

3d9301f

final

0a2cc7d

mateacademy-ai-mentor suggested changes Apr 15, 2026

View reviewed changes

melr1ze marked this pull request as draft April 15, 2026 16:39

melr1ze requested a review from mateacademy-ai-mentor April 15, 2026 16:39

mateacademy-ai-mentor reviewed Apr 15, 2026

View reviewed changes

brespect suggested changes Apr 16, 2026

View reviewed changes

etojeDenys approved these changes Apr 16, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

final#6524

final#6524
melr1ze wants to merge 3 commits intomate-academy:masterfrom
melr1ze:master

melr1ze commented Apr 15, 2026

Uh oh!

mateacademy-ai-mentor left a comment

Uh oh!

mateacademy-ai-mentor Apr 15, 2026

Uh oh!

mateacademy-ai-mentor Apr 15, 2026

Uh oh!

mateacademy-ai-mentor Apr 15, 2026

Uh oh!

mateacademy-ai-mentor left a comment

Uh oh!

mateacademy-ai-mentor left a comment

Uh oh!

mateacademy-ai-mentor left a comment

Uh oh!

mateacademy-ai-mentor left a comment

Uh oh!

brespect left a comment

Uh oh!

melr1ze commented Apr 16, 2026 via email

Uh oh!

etojeDenys left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

melr1ze commented Apr 15, 2026

Uh oh!

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Review Summary

Footnotes

Uh oh!

mateacademy-ai-mentor Apr 15, 2026

Choose a reason for hiding this comment

Uh oh!

mateacademy-ai-mentor Apr 15, 2026

Choose a reason for hiding this comment

Uh oh!

mateacademy-ai-mentor Apr 15, 2026

Choose a reason for hiding this comment

Uh oh!

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Review Summary

Footnotes

Uh oh!

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Uh oh!

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Uh oh!

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Uh oh!

brespect left a comment

Choose a reason for hiding this comment

Uh oh!

melr1ze commented Apr 16, 2026 via email

Uh oh!

etojeDenys left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants