Develop by shadow-sourse · Pull Request #6140 · mate-academy/layout_catalog

shadow-sourse · 2026-03-25T19:43:58Z

mateacademy-ai-mentor

Review Summary

Great job on the overall structure and the responsive grid layout! However, this requires changes as several key requirements haven't been met, which is causing the automated tests to fail.

Here are the main points to address:

Smooth Transitions: Several hover effects are not smooth. Please add a 300ms transition to the card scaling (.card), the button's background color (.card__button), and its text color (.card__button-link). [CHECKLIST ITEM #5]
Missing Hover Effect: The requirement to change the card title's color to #34568b on hover is missing. This new color should also be added as a variable. [CHECKLIST ITEM #2]
Incorrect Class Names: The active navigation link needs the class is-active (not nav__link--active), and the logo's class should be site-header__logo to follow BEM conventions. [CHECKLIST ITEM #1]

Fixing these issues should get your tests passing. Keep up the great work!

✨ 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-03-25T19:46:49Z

+  }
+
+  &__link {
+    position: relative;


This class name logo does not follow BEM naming conventions. Since the logo is part of the site-header block, its class should be site-header__logo. This violates checklist item #1: 'All components follow BEM and use SCSS'. You'll also need to update the selector in header.scss.

mateacademy-ai-mentor · 2026-03-25T19:46:49Z

@@ -0,0 +1,74 @@
+body {


To make the card scaling on hover smooth, you need to add the transition property to the .card block. The requirement specifies a 300ms duration. This violates checklist item #5: 'All changes on :hover are smooth'.

mateacademy-ai-mentor · 2026-03-25T19:46:49Z

+
+  &__link {
+    position: relative;
+


The requirement to change the title color to #34568b when the card is hovered is missing. You need to add a new style rule for this state (e.g., within the .card block: &:hover &__title { ... }). Also, remember to add a transition property to this &__title element to make the color change smooth, as per the requirements.

mateacademy-ai-mentor · 2026-03-25T19:46:49Z

+      color: $blue-accent;
+    }
+
+    &--active {


The task requires using the class is-active for the active navigation link. This selector &--active corresponds to the BEM modifier nav__link--active. Please update the selector to target .is-active (e.g., &.is-active) and adjust the class name in your index.html file accordingly.

mateacademy-ai-mentor · 2026-03-25T19:46:50Z

@@ -0,0 +1,74 @@
+body {


The task requires changing the card title's color to #34568b on hover. According to checklist item #2, 'Repeated sizes and special colors are put to variables', so this color should be defined as a variable in this file.

mateacademy-ai-mentor · 2026-03-25T19:46:50Z

+          <li class="nav__item">
+            <a
+              href="#..."
+              class="nav__link nav__link--active"


The task requirement specifies adding the class is-active to the active navigation link. While using a BEM modifier like nav__link--active is good practice, please adhere to the specific instructions provided in the task description.

mateacademy-ai-mentor · 2026-03-25T19:46:50Z

@@ -0,0 +1,29 @@
+main {


The card scaling on hover is not smooth. According to the task requirements, all hover changes must happen over 300ms. You need to add a transition property to the .card selector to animate the transform property. This violates checklist item #5: 'All changes on :hover are smooth'.

mateacademy-ai-mentor · 2026-03-25T19:46:50Z

+  gap:46px 48px;
+  justify-content: center;
+
+}


The requirement to change the card title's text color to #34568b on hover is missing. You should add a rule for .card__title inside this :hover block. Also, remember to add this new color to your _variable.scss file as per checklist item #2: 'Repeated sizes and special colors are put to variables'.

mateacademy-ai-mentor · 2026-03-25T19:46:50Z

+@import 'blocks/card';
+@import 'blocks/stars';
+@import 'blocks/header';
+@import'blocks/catalog';


There should be a space between @import and the file path to maintain a consistent code style, as shown in the project's code style rules. This violates checklist item #6: 'Code follows all the [Code Style Rules ❗️]'.

mateacademy-ai-mentor · 2026-03-25T19:46:50Z

+$main-accent: #060b35;
+$secondary-accent: #616070;
+$blue-accent: #00acdc;
+$white: #fff;
+$background: #f3f3f3;


The task requires changing the card title's color to #34568b on hover. According to checklist item #2, 'Repeated sizes and special colors are put to variables', this color should be defined as a variable in this file.

mateacademy-ai-mentor

Review Summary

Great job addressing the previous feedback on BEM and HTML structure! However, changes are needed as a key requirement is still missing and the automated tests are failing.

The main issue is that the hover effect on the 'Buy' button is not smooth. This violates a core requirement of the task. To fix this, please go to src/styles/blocks/card.scss and:

Add transition: background-color 300ms; to the .card__button selector.
Add transition: color 300ms; to the .card__button-link selector.

Additionally, the visual regression tests are failing. Please download the report artifact from the 'Checks' tab to see a side-by-side comparison of your work and the design, which will help you fix any layout or styling discrepancies. Once these issues are resolved, your solution should be perfect!

✨ 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-03-25T20:38:45Z

+
+    color: $main-accent;
+  }
+  &__button {


This hover effect isn't smooth as required. Please add a transition for the background-color property to make the change happen over 300ms. This is part of checklist item #5.

mateacademy-ai-mentor · 2026-03-25T20:38:45Z

+
+    }
+  }
+  &__button-link {


The text color change on hover also needs to be smooth. You're missing a transition for the color property here. This also relates to checklist item #5.

mateacademy-ai-mentor

Review Summary

Excellent work on this project! I am approving your solution as an educational override so you can move forward, but there are a few important points to review for your next tasks.

You've done a fantastic job with the BEM structure, smooth transitions, and the responsive grid. However, the automated visual tests have failed, which means there are some visual differences between your page and the design. Please download the report artifact from the build (20.x) check to see the exact mismatches.

Here are a couple of smaller SCSS improvements:

In src/styles/blocks/stars.scss, please move repeated values like 4px and 16px into variables as required by the checklist. [CHECKLIST ITEM #2]
The global body styles in src/styles/blocks/header.scss would be better placed in a more general file like _base.scss to keep components self-contained.

Keep up the great effort, and remember to check the visual test reports carefully!

✨ 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-03-26T11:50:34Z

+body {
+  margin: 0;
+  padding: 0;
+
+  font-family: Roboto, sans-serif;
+  font-weight: 500;
+  font-style: normal;
+}


According to the 'One file — one component' principle from the code style rules, styles for the body tag should not be in the file for the site-header component. It's better to move these global styles to a more general file, for example, a new _base.scss or _scaffolding.scss file, and import it in index.scss.

mateacademy-ai-mentor · 2026-03-26T11:50:34Z

+    margin-right: 4px;
+    background-image: url('../images/star.svg');
+    width: 16px;
+    height: 16px;


This violates checklist item #2: 'Repeated sizes and special colors are put to variables'. The values 4px and 16px are used in multiple places across your project files (e.g., in card.scss and header.scss). To improve maintainability and consistency, please define them as variables in src/styles/variable.scss and use those variables here.

brespect

Good progress, but try to pass all tests before requesting the next review

vitalii-bondarenko-ua

Good job.

fampik added 3 commits March 25, 2026 21:36

add solution

e49bc34

fix import link

df6c799

add link in reade.me

1d64ceb

mateacademy-ai-mentor suggested changes Mar 25, 2026

View reviewed changes

add solution 2.0

a355ad7

shadow-sourse requested a review from mateacademy-ai-mentor March 25, 2026 20:36

mateacademy-ai-mentor suggested changes Mar 25, 2026

View reviewed changes

fampik added 3 commits March 25, 2026 22:51

fix transition

3b757b7

fix index.html

f61ec06

fix card.scss

1d20634

shadow-sourse requested a review from mateacademy-ai-mentor March 26, 2026 11:47

mateacademy-ai-mentor suggested changes Mar 26, 2026

View reviewed changes

fampik added 2 commits March 26, 2026 13:56

trigger CI

0183180

fix variable

78fb5d4

shadow-sourse requested a review from mateacademy-ai-mentor March 26, 2026 12:12

brespect suggested changes Mar 26, 2026

View reviewed changes

fix variable2.0

601e7fd

vitalii-bondarenko-ua approved these changes Mar 27, 2026

View reviewed changes

Conversation

shadow-sourse commented Mar 25, 2026

Uh oh!

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Review Summary

Footnotes

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

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!

Choose a reason for hiding this comment

Uh oh!

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!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

brespect left a comment

Choose a reason for hiding this comment

Uh oh!

vitalii-bondarenko-ua left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants