769-refactor: Mentorship post release updates: Typography #770
Conversation
github-actions
bot
changed the title
|
Lighthouse Report:
|
There was a problem hiding this comment.
Copilot reviewed 26 out of 45 changed files in this pull request and generated no comments.
Files not reviewed (19)
- src/app/docs/components/docs-menu/docs-menu.module.scss: Language not supported
- src/app/docs/components/search/search.module.scss: Language not supported
- src/core/base-layout/components/header/burger/burger.module.scss: Language not supported
- src/core/base-layout/components/header/dropdown/dropdown-wrapper.module.scss: Language not supported
- src/core/base-layout/components/header/header.module.scss: Language not supported
- src/core/base-layout/components/header/nav-item/nav-item.module.scss: Language not supported
- src/core/styles/_constants.scss: Language not supported
- src/core/styles/_mixins.scss: Language not supported
- src/core/styles/index.scss: Language not supported
- src/entities/course/ui/course-card/course-card.module.scss: Language not supported
- src/entities/course/ui/course-item/course-item.module.scss: Language not supported
- src/entities/event/ui/event-card/event-card.module.scss: Language not supported
- src/entities/mentor/ui/mentor-feedback-card/mentor-feedback-card.module.scss: Language not supported
- src/entities/trainer/ui/trainers-card/trainer-card.module.scss: Language not supported
- src/shared/ui/date-lang/date-lang.module.scss: Language not supported
- src/shared/ui/link-custom/link-custom.module.scss: Language not supported
- src/shared/ui/list/list.module.scss: Language not supported
- src/shared/ui/modal/modal.module.scss: Language not supported
- src/shared/ui/paragraph/paragraph.module.scss: Language not supported
Quiddlee
changed the title
|
Lighthouse Report:
|
SpaNb4
requested review from
andron13,
dzmitry-varabei,
ansivgit and
natanchik
as code owners
📝 WalkthroughWalkthroughThis pull request refactors various SCSS files and a few TSX components without altering underlying functionality. Most changes involve reorganizing CSS properties—such as borders, border-radius, padding, box-shadow, and color—and consolidating redundant declarations. A new color variable has been introduced, and numerous selectors have been updated to use the darker shade. Additionally, the LinkCustom component now accepts an optional boolean Changes
Sequence Diagram(s)sequenceDiagram
participant LC as LinkCustom Component
participant P as Props (highContrast)
participant CN as Computed ClassName
LC->>P: Check if "highContrast" prop is true
alt highContrast is true
LC->>CN: Append "high-contrast" CSS class
else
LC->>CN: Do not append "high-contrast"
end
LC->>UI: Render link with applied styling
Assessment against linked issues
Suggested reviewers
📜 Recent review detailsConfiguration used: .coderabbit.yaml 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
⏰ Context from checks skipped due to timeout of 90000ms (2)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
src/widgets/member-activity/ui/stage-card/step/step.scss (1)
17-18: Enhanced Styling for Stage-Number
The added border (1px solid #fff2d9) and border-radius (50%) provide a refined, rounded look that aligns well with the updated typography design. Consider using a SCSS variable for the border color if it will be reused in multiple places to maintain consistency.src/shared/ui/modal/modal.module.scss (1)
68-68: Minor Redundancy: Reintroducing “border: none;” in the modal-close-button is harmless but may be redundant if already declared elsewhere.src/core/base-layout/components/header/nav-item/nav-item.module.scss (1)
53-55: Visual Consistency: Resetting the .dropdown-arrow’s border and background (to “none” and “transparent”) ensures consistency with the updated design language.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (46)
src/app/docs/components/docs-menu/docs-menu.module.scss(1 hunks)src/app/docs/components/search/search.module.scss(1 hunks)src/core/base-layout/components/header/burger/burger.module.scss(1 hunks)src/core/base-layout/components/header/dropdown/dropdown-wrapper.module.scss(1 hunks)src/core/base-layout/components/header/header.module.scss(1 hunks)src/core/base-layout/components/header/nav-item/nav-item.module.scss(2 hunks)src/core/styles/_constants.scss(1 hunks)src/core/styles/_mixins.scss(1 hunks)src/core/styles/index.scss(3 hunks)src/entities/course/ui/course-card/course-card.module.scss(2 hunks)src/entities/course/ui/course-item/course-item.module.scss(0 hunks)src/entities/event/ui/event-card/event-card.module.scss(3 hunks)src/entities/mentor/ui/mentor-feedback-card/mentor-feedback-card.module.scss(2 hunks)src/entities/trainer/ui/trainers-card/trainer-card.module.scss(1 hunks)src/shared/ui/date-lang/date-lang.module.scss(0 hunks)src/shared/ui/link-custom/link-custom.module.scss(4 hunks)src/shared/ui/link-custom/link-custom.tsx(4 hunks)src/shared/ui/list/list.module.scss(0 hunks)src/shared/ui/modal/modal.module.scss(2 hunks)src/shared/ui/paragraph/paragraph.module.scss(1 hunks)src/shared/ui/section-label/section-label.module.scss(0 hunks)src/shared/ui/social-media-item/social-media-item.module.scss(1 hunks)src/shared/ui/social-media-item/social-media-item.tsx(1 hunks)src/shared/ui/subtitle/subtitle.module.scss(1 hunks)src/shared/ui/video-playlist-with-player/playlist/playlist.module.scss(1 hunks)src/shared/ui/widget-title/widget-title.module.scss(1 hunks)src/views/mentorship/mentorship-hero/ui/mentorship-hero.module.scss(1 hunks)src/views/mentorship/ui/mentor-activities/ui/activity-card/activity-card.module.scss(2 hunks)src/views/mentorship/ui/mentor-activities/ui/activity-card/activity-card.tsx(1 hunks)src/widgets/about-course/ui/about-course-grid/about-course-grid.module.scss(1 hunks)src/widgets/about-video/ui/about-video.module.scss(0 hunks)src/widgets/benefits/ui/benefits/benefits.module.scss(2 hunks)src/widgets/breadcrumbs/ui/breadcrumbs.module.scss(0 hunks)src/widgets/communication/ui/communication.module.scss(1 hunks)src/widgets/faq/ui/faq.module.scss(0 hunks)src/widgets/general/ui/general.module.scss(0 hunks)src/widgets/member-activity/ui/stage-card/stage-card.scss(0 hunks)src/widgets/member-activity/ui/stage-card/step/step.scss(1 hunks)src/widgets/mentors-docs/ui/doc-detail/ui/doc-detail.tsx(1 hunks)src/widgets/mentors-docs/ui/onboard-links/onboard-links.module.scss(0 hunks)src/widgets/mentors-register/ui/mentors-register.module.scss(0 hunks)src/widgets/mobile-view/ui/mobile-view.module.scss(1 hunks)src/widgets/numbers/ui/info-cell/info-cell.module.scss(0 hunks)src/widgets/places/ui/places/places.module.scss(0 hunks)src/widgets/principles/ui/principle-card/principle-card.module.scss(3 hunks)src/widgets/school-menu/ui/school-item/school-item.module.scss(1 hunks)
💤 Files with no reviewable changes (13)
- src/widgets/mentors-register/ui/mentors-register.module.scss
- src/widgets/about-video/ui/about-video.module.scss
- src/shared/ui/list/list.module.scss
- src/shared/ui/section-label/section-label.module.scss
- src/widgets/faq/ui/faq.module.scss
- src/widgets/member-activity/ui/stage-card/stage-card.scss
- src/shared/ui/date-lang/date-lang.module.scss
- src/entities/course/ui/course-item/course-item.module.scss
- src/widgets/places/ui/places/places.module.scss
- src/widgets/breadcrumbs/ui/breadcrumbs.module.scss
- src/widgets/mentors-docs/ui/onboard-links/onboard-links.module.scss
- src/widgets/general/ui/general.module.scss
- src/widgets/numbers/ui/info-cell/info-cell.module.scss
✅ Files skipped from review due to trivial changes (12)
- src/shared/ui/paragraph/paragraph.module.scss
- src/core/base-layout/components/header/dropdown/dropdown-wrapper.module.scss
- src/widgets/about-course/ui/about-course-grid/about-course-grid.module.scss
- src/shared/ui/video-playlist-with-player/playlist/playlist.module.scss
- src/widgets/communication/ui/communication.module.scss
- src/core/base-layout/components/header/burger/burger.module.scss
- src/entities/event/ui/event-card/event-card.module.scss
- src/shared/ui/social-media-item/social-media-item.module.scss
- src/views/mentorship/mentorship-hero/ui/mentorship-hero.module.scss
- src/entities/course/ui/course-card/course-card.module.scss
- src/app/docs/components/docs-menu/docs-menu.module.scss
- src/core/styles/_mixins.scss
🔇 Additional comments (31)
src/widgets/benefits/ui/benefits/benefits.module.scss (2)
13-14: Consistent Border Styling for Grid Items
The addition of a 1px solid $color-yellow-100 border and a 12px border-radius to .grid-item improves visual separation and consistency.
66-67: Uniform Border Enhancement for Flex Items
Adding the same border and border-radius to .flex-item ensures cohesive styling across different layout presentations.src/core/styles/index.scss (3)
15-17: Enhanced Typography Rendering in Body
The new font-smoothing properties along with the updated text color ($color-black-900) should improve legibility and match the refreshed design.
67-75: Refined Content Padding for Better Layout
The updated padding values for .content—including adjustments in media queries—help achieve a more balanced layout at various breakpoints. Double-check these values ensure they meet the design specifications consistently.
129-132: Consistent Carousel Control Styling
The border-radius of 8px on carousel controls provides a subtle, modern look. Ensure that this styling choice aligns with the overall component design, especially if other instances differ.src/entities/trainer/ui/trainers-card/trainer-card.module.scss (2)
50-54: Removed Color Property Check:
The absence of a color property in .card-content is now consistent with the design update.
9-11: 🛠️ Refactor suggestionBorder-Radius vs. Box-Shadow Update:
The new box-shadow is applied well, but the border-radius property still appears at line 9. Confirm whether rounded corners should be removed per the updated design guidelines.src/entities/mentor/ui/mentor-feedback-card/mentor-feedback-card.module.scss (2)
11-13: 🛠️ Refactor suggestionCard-Wrapper Style Adjustment:
The addition of the box-shadow is good; however, the border-radius property at line 11 remains even though the new style removes it. Please verify if the border-radius should be omitted to align with the design’s shift toward shadow effects.
87-87: undefinedsrc/shared/ui/link-custom/link-custom.tsx (1)
21-21: LGTM! Well-structured implementation of the black variant.The black variant is properly typed and integrated with cva, with appropriate defaults.
Also applies to: 33-36, 53-53, 76-76
src/shared/ui/social-media-item/social-media-item.tsx (1)
22-22: LGTM! Consistent usage of black variant.The black prop is correctly applied to LinkCustom.
src/widgets/mentors-docs/ui/doc-detail/ui/doc-detail.tsx (1)
30-30: LGTM! Consistent usage of black variant.The black prop is correctly applied to LinkCustom.
src/views/mentorship/ui/mentor-activities/ui/activity-card/activity-card.tsx (2)
31-31: LGTM! Consistent usage of black variant.The black prop is correctly applied to LinkCustom.
30-34:⚠️ Potential issueFix potential runtime error with optional chaining.
The current implementation could throw a runtime error if
linksis undefined, asundefined.map()would be called.Apply this diff to fix the issue:
- {links?.length && links.map(({ href, linkTitle }) => ( + {links?.map(({ href, linkTitle }) => ( <LinkCustom href={href} key={linkTitle} data-testid="activity-card-link" black> {linkTitle} </LinkCustom> ))}Likely invalid or redundant comment.
src/widgets/mobile-view/ui/mobile-view.module.scss (1)
27-29: Typography - Updated Dark Color:
Changed the.darkclass color to$color-black-900to align with the new design scheme. Looks good.src/app/docs/components/search/search.module.scss (1)
11-14: Refined Input Styling:
Replacing the traditional border withoutline-offset: -2pxcreates a cleaner focus effect. Please double-check that the border removal (if intentional) doesn’t negatively impact the input’s visual boundaries across browsers.src/shared/ui/widget-title/widget-title.module.scss (1)
1-4: Widget Title Enhancement:
Bolding the title and applying$color-black-900strengthens the typographic hierarchy and aligns with the new color palette.src/views/mentorship/ui/mentor-activities/ui/activity-card/activity-card.module.scss (2)
8-11: Visual Update - Activity Card:
Replacing the solid border with a subtle box-shadow introduces modern depth. Please verify the shadow effect meets the design intent in various contexts.
25-33: Icon Accent Refinement:
Restoringborder-radius: 100%;for the.icon-accentensures a perfectly circular look, which is consistent with the updated design language.src/widgets/school-menu/ui/school-item/school-item.module.scss (1)
12-14: Consistent Dark Variant:
Updated the.title.darkcolor to$color-black-900to maintain typographic consistency across components.src/shared/ui/subtitle/subtitle.module.scss (1)
3-3: Typography Update: The subtitle’s color is now set to $color-black-900 for improved contrast and design consistency.src/shared/ui/modal/modal.module.scss (1)
11-12: Style Reinforcement: Adding “line-height: 24px;” enhances text spacing within the modal.src/core/base-layout/components/header/nav-item/nav-item.module.scss (1)
40-42: Color Update: Updating the .label color to $color-black-900 improves readability and aligns with the new theme.src/shared/ui/link-custom/link-custom.module.scss (3)
17-23: Border Styling (Secondary): Applying “border: 2px solid $color-black” for secondary buttons adheres to the updated style guidelines.
34-48: Primary Button Enhancement: The primary button now has “border: 2px solid $color-black” with a hover state switching to $color-gray-600; verify this contrast still meets accessibility standards.
96-98: New Utility Class: The newly added .black class, which sets color to $color-black-900, provides a handy utility for consistent text coloring.src/core/base-layout/components/header/header.module.scss (1)
29-32: Navbar White Variant Update: Explicitly setting opacity, background-color, and adding a box-shadow in the .navbar.white class refines the navbar’s visual hierarchy.src/widgets/principles/ui/principle-card/principle-card.module.scss (3)
16-17: Background Color Reordering.
The added background color using$color-yellow-50clearly aligns with the updated design guidelines.
27-27: Enhanced ::after Styling.
Includingborder-radius: 100%on the::afterpseudo-element reinforces the circular, soft design accents.
73-76: Improved Icon Decoration.
Addingborder-radius: 100%to the.icon::beforepseudo-element ensures that all circular elements remain consistent with the new typography updates.src/core/styles/_constants.scss (1)
23-23: New Dark Shade Variable Introduced.
The addition of$color-black-900: hsl(210deg 7.4% 10.6%); // #191b1denhances the color palette, supporting a modern, high-contrast typography scheme.
src/core/base-layout/components/header/nav-item/nav-item.module.scss
Outdated
Show resolved
Hide resolved
|
Lighthouse Report:
|
|
Lighthouse Report:
|
|
Lighthouse Report:
|
What type of PR is this? (select all that apply)
Description
Related Tickets & Documents
Screenshots, Recordings
Before:
After:
Added/updated tests?
[optional] Are there any post deployment tasks we need to perform?
[optional] What gif best describes this PR or how it makes you feel?
Summary by CodeRabbit