Skip to content

feat(CardPage): add Slot Finder logo with responsive styling and NavLink navigation - #1172

Open
GuillaumeKESTEMAN wants to merge 2 commits into
developfrom
feature/add-slotfinder-logo-into-card-page
Open

feat(CardPage): add Slot Finder logo with responsive styling and NavLink navigation#1172
GuillaumeKESTEMAN wants to merge 2 commits into
developfrom
feature/add-slotfinder-logo-into-card-page

Conversation

@GuillaumeKESTEMAN

Copy link
Copy Markdown
Collaborator

Title: Add Slot Finder logo to CardPage with responsive styling and NavLink on header logo

Type of Pull Request:

  • New feature
  • Bug fix
  • Documentation
  • Other (specify):

Associated Issue:
N/A

Context:
Enhance user navigation and branding by displaying the Slot Finder logo on card-based pages and making the header logo interactive. Users can now click the logo to return to the home page from authentication and slot finder card pages.

Proposed Changes:

  • Added black logo asset (black_logo_without_background.png) for display on CardPage
  • CardPage component:
    • New optional prop isIconDisplayed (defaults to true) to control logo visibility
    • Logo rendered as NavLink to home with responsive width (48px mobile, 64px tablet+)
    • Updated SCSS with BEM naming (&__logo, &__title) and CSS custom properties for responsive sizing
  • Header component:
    • Wrapped logo image in NavLink to home, making it clickable for navigation
    • Added imports for NavLink and appRoutes
  • Tests: Updated CardPage and Header tests to:
    • Wrap components in BrowserRouter for proper NavLink functionality
    • Verify logo link renders with correct href to home route
    • Test isIconDisplayed flag toggles logo visibility

Checklist:

  • I have verified that my changes work as expected
  • I have updated the documentation if necessary
  • I have thought to rebase my branch
  • I have applied the correct label according to the type of PR (bug/feature/documentation)

Additional Information:

  • Improves user experience with clear navigation back to home from auth/card pages
  • Maintains responsive design across all breakpoints (mobile, tablet, desktop)
  • No accessibility issues introduced; logo alt text and link semantics properly defined

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR enhances branding and navigation by adding a Slot Finder logo to CardPage and making the header logo clickable, both linking back to the home route.

Changes:

  • Wrapped the Header logo in a NavLink to navigate back to the home page.
  • Added an optional isIconDisplayed prop to CardPage (default true) and rendered a home-link logo above the title.
  • Updated styling/tests to support the new logo link and responsive sizing.

Reviewed changes

Copilot reviewed 5 out of 6 changed files in this pull request and generated 1 comment.

Show a summary per file
File Description
front/src/components/Layout/Header/Header.tsx Wraps the header logo with a NavLink to home.
front/src/components/Layout/Header/tests/Header.test.tsx Updates assertions to validate the logo is a link to home.
front/src/components/CardPage/CardPage.tsx Adds optional logo rendering as a home NavLink via isIconDisplayed.
front/src/components/CardPage/CardPage.scss Adds responsive logo sizing and logo/title BEM styling.
front/src/components/CardPage/tests/CardPage.test.tsx Adds coverage for logo link rendering and isIconDisplayed={false} behavior.

Comment thread front/src/components/CardPage/CardPage.scss
Include a logo link that navigates to the home route. The logo is conditionally rendered based on the isIconDisplayed prop. Update styles to accommodate the new logo.
@GuillaumeKESTEMAN
GuillaumeKESTEMAN force-pushed the feature/add-slotfinder-logo-into-card-page branch from 8a502d0 to faba70c Compare July 25, 2026 15:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request front

Projects

Status: In review

Development

Successfully merging this pull request may close these issues.

2 participants