549-refactor: Widget mentors

[tanykos]

What type of PR is this? (select all that apply)

• 🍕 Feature
• 🐛 Bug Fix
• 🚧 Breaking Change
• 🧑‍💻 Code Refactor
• 📝 Documentation Update

Description

1. mentors.scss
   • Refactor mentors.tsx's scss to scss modules
   • remove all parent selectors.
   • replace all element selectors by tag with class selector img -> .image
   • add items gap on mobile
2. mentors.tsx
   • move mentors.test.tsx to ui folder
   • replace div's with HTML5 tags
3. mentoring.test.tsx
   • replace become mentor hardcoded link with constant

Related Tickets & Documents

• Related Issue FSD: Widget Mentors #549
• Closes FSD: Widget Mentors #549

Added/updated tests?

• 👌 Yes
• 🙅‍♂️ No, because they aren't needed
• 🙋‍♂️ No, because I need help

Summary by CodeRabbit

• New Features

  • Introduced a new constant MENTORS_WANTED for improved URL management.
  • Enhanced the Mentors UI with a new SCSS file for better styling and responsiveness.
  • Added a dynamic registration link for the "Become a mentor" button.

• Bug Fixes

  • Improved styling encapsulation by transitioning from traditional CSS to CSS modules.

• Chores

  • Updated tests to reflect changes in the Mentors component and improved test structure.

[github-actions]

Lighthouse Report:

• Performance: 96 / 100
• Accessibility: 100 / 100
• Best Practices: 100 / 100
• SEO: 100 / 100

View detailed report

[github-actions]

Lighthouse Report:

• Performance: 80 / 100
• Accessibility: 100 / 100
• Best Practices: 100 / 100
• SEO: 100 / 100

View detailed report

[github-actions]

Lighthouse Report:

• Performance: 87 / 100
• Accessibility: 100 / 100
• Best Practices: 100 / 100
• SEO: 100 / 100

View detailed report

[KristiBo]

Please specify which browser and version has this problem? I have everything fine on Chrome Version 129.0.6668.101.

Hmm... looked again and now it's ok

[github-actions]

Lighthouse Report:

• Performance: 93 / 100
• Accessibility: 100 / 100
• Best Practices: 100 / 100
• SEO: 100 / 100

View detailed report

[coderabbitai]

Actionable comments posted: 0

🧹 Outside diff range and nitpick comments (2)

src/widgets/mentors/ui/mentors.module.scss (1)

15-20: Approved: Mascot sizing for tablets.

The .sloth-mascot rule correctly sizes the mascot for tablets.

Consider adding styles for other screen sizes to ensure consistent appearance across all devices.

src/app/const/index.ts (1)

4-4: LGTM. Consider adding a comment.

The new constant is well-placed and follows the existing naming convention.

Add a brief comment explaining the purpose of MENTORS_WANTED:

 export const ANCHORS = {
   ABOUT_COMMUNITY: 'about-community',
   ABOUT_SCHOOL: 'about-school',
+  // Anchor for the section where mentors can register
   MENTORS_WANTED: 'mentors-wanted',
 };

📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL

📥 Commits

Files that changed from the base of the PR and between ef9e059 and 6f1ea11.

📒 Files selected for processing (5)

• src/app/const/index.ts (1 hunks)
• src/widgets/mentors/ui/mentors.module.scss (1 hunks)
• src/widgets/mentors/ui/mentors.test.tsx (1 hunks)
• src/widgets/mentors/ui/mentors.tsx (2 hunks)
• src/widgets/school-menu/ui/school-menu.tsx (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (2)

• src/widgets/mentors/ui/mentors.test.tsx
• src/widgets/mentors/ui/mentors.tsx

🧰 Additional context used

🔇 Additional comments (4)

src/widgets/mentors/ui/mentors.module.scss (3)

1-6: Approved: Responsive layout structure.

The container and content styling provide a solid foundation for responsive design.

Also applies to: 22-26

---

7-13: Approved: Responsive width for info section.

The .mentors-info rule adapts well to different screen sizes.

---

1-27: Approved: Well-structured SCSS module.

The file demonstrates proper use of SCSS nesting and media queries, enhancing maintainability.

src/widgets/school-menu/ui/school-menu.tsx (1)

21-21: Good use of constant for URL.

Replacing hardcoded URL with ANCHORS.MENTORS_WANTED improves maintainability.

[SpaNb4]

please pull the changes from the main branch to fix the failing test in CI/CD

[github-actions]

Lighthouse Report:

• Performance: 98 / 100
• Accessibility: 100 / 100
• Best Practices: 100 / 100
• SEO: 100 / 100

View detailed report

[github-actions]

Lighthouse Report:

• Performance: 97 / 100
• Accessibility: 100 / 100
• Best Practices: 100 / 100
• SEO: 100 / 100

View detailed report