add task solution#5415
Conversation
aiz-777
commented
Apr 26, 2026
aiz-777
commented
- DEMO LINK
- TEST REPORT LINK
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
Your implementation has critical issues that need fixing before approval. The main problem is the absolute image path /src/images/Search.svg in both src/style.css and src/index.html — this won't work in production. Since your CSS is in src/, use a relative path like ../images/Search.svg from the CSS file, or ./images/Search.svg from HTML. Without this fix, the search icon won't display. Additionally, the small input has an incorrect data-qa="hover" attribute which violates the requirements — only data-qa="big", data-qa="small", and data-qa="keypress" are specified. Also note that inputs override the body's font-weight: 300 with 400, which contradicts the default font-weight requirement. Please fix these path and attribute issues and resubmit.
✨ Please rate this review in the Platform's notification center1. 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 button2 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 tag3.
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.
Footnotes
| width: 100%; | ||
| border: 1px solid #e1e7ed; | ||
| border-radius: 4px; | ||
|
|
There was a problem hiding this comment.
The image path uses an absolute path /src/images/Search.svg which will not work correctly. Since style.css is in the src directory, use a relative path like ../images/Search.svg to correctly reference the images folder.
| padding-left: 62px; | ||
| background-position: center left 26px; | ||
| background-size: 19px 19px; | ||
| font-size: 16px; |
There was a problem hiding this comment.
The data-qa="hover" attribute is unnecessary. The checklist only requires data-qa="keypress" on the big input. Hover state testing is typically done via CSS :hover pseudo-class, not data attributes.
| data-qa="big" | ||
| > | ||
| <input | ||
| class="search-bar__input search-bar__input--big" |
There was a problem hiding this comment.
The background-image path is absolute (/src/images/Search.svg) but should be relative. Since CSS is in src/style.css and images are in src/images/, use ./images/Search.svg instead.
| > | ||
| <input | ||
| class="search-bar__input search-bar__input--small" | ||
| type="text" |
There was a problem hiding this comment.
Incorrect data-qa="hover" attribute on the small search form's input. The requirements only specify data-qa="big" and data-qa="small" - this attribute should be removed.
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
Your implementation is nearly complete, but there's one critical issue that must be fixed before approval. The task explicitly requires default font-weight must be 300, yet both search bar inputs override this with font-weight: 400. Specifically: - In src/style.css: The .search-bar__input rule sets font-weight: 400, which overrides the body's font-weight: 300 - In src/index.html: The input elements have inline font-weight: 400 styles. To fix this, change both the CSS rule and any inline styles from font-weight: 400 to font-weight: 300. This will make the inputs respect the required default font-weight of 300. Note that the focus state font-weight changes (like font-weight: 400 or font-weight: 900 for focus states) are acceptable since those are intentional state changes, not the default. All other aspects are correct—proper form structure, BEM naming, relative image paths, data-qa attributes, and the three input states are all implemented properly.
✨ Please rate this review in the Platform's notification center1. 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 button2 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 tag3.
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.
Footnotes
|
|
||
| .search-bar__input { | ||
| box-sizing: border-box; | ||
| width: 100%; | ||
| border: 1px solid #e1e7ed; | ||
| border-radius: 4px; | ||
|
|
||
| background-image: url(./images/Search.svg); | ||
| background-repeat: no-repeat; | ||
|
|
||
| font-family: Avenir-Book, sans-serif; | ||
| line-height: 100%; | ||
| letter-spacing: 0; | ||
| font-weight: 400; |
There was a problem hiding this comment.
This violates the requirement 'default font-weight must be 300'. The body's font-weight: 300 is overridden by this font-weight: 400 on the input element. Either remove this line or change it to 300.
| data-qa="keypress" | ||
| /> | ||
| </form> | ||
|
|
There was a problem hiding this comment.
This violates the task requirement: 'default font-weight must be 300'. This input rule sets font-weight to 400, overriding body's 300. Either remove this line or change to 300 to match the requirement.
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
Your implementation is complete and correct. All requirements have been met—both search bars use proper semantic HTML with form elements, data-qa attributes are correctly applied (big, small, and keypress), and the default font-weight: 300 is properly inherited without any overrides. The three input states (default, hover, focus) are implemented correctly, spacing is accurate (20px between bars, 20px top indent), and the search icons are rendered via background-image. Code style follows all guidelines: BEM naming conventions, 2-space indentation, no tag selectors, and proper @font-face declarations with fallbacks. Excellent work resolving the font-weight issue and implementing all features cleanly!
✨ Please rate this review in the Platform's notification center1. I will be grateful for your feedback! ✨
Footnotes
2 participants
