feat: implement horizontal footer layout with modern social media icons #763
Conversation
- Refactor footer to use consistent horizontal layout across all screen sizes - Create new Socials component with custom styled circular icons - Add interactive tooltips with platform-specific hover colors - Update Cypress tests to include social media icon testing - Add CSS styles for tooltip animations and hover effects - Replace image-based icons with inline SVG for better performance Changes: - components/Footer/footer.tsx: horizontal layout with flex-wrap - components/Footer/socials.tsx: new component with LinkedIn, GitHub, Twitter, YouTube - cypress/e2e/Footer.cy.ts: enhanced test suite with social media tests - styles/globals.css: tooltip styles and hover animations
Recxsmacx
requested review from
AceTheCreator,
Mayaleeeee,
ashmit-coder and
thulieblack
as code owners
✅ Deploy Preview for peaceful-ramanujan-288045 ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify project configuration. |
- Add .show-for-test class support to make tooltips visible during testing - Use !important to override default opacity: 0 for test scenarios - All 12 Cypress tests now passing including tooltip visibility tests
AceTheCreator
left a comment
AceTheCreator
left a comment
There was a problem hiding this comment.
Looks really, @Recxsmacx. Can you make it responsive on small screen?
AceTheCreator
left a comment
AceTheCreator
left a comment
There was a problem hiding this comment.
@Recxsmacx, what I meant by making it responsive is simply adjusting the footer layout to collapse from a row into a column on smaller screens, not just making the text smaller.
@AceTheCreator I kept it the old way on smaller screens the code of conduct button vanishes to keep the footer look clean and not messy wdyt? |
AceTheCreator
left a comment
AceTheCreator
left a comment
There was a problem hiding this comment.
Remove unnecessary code formatter changes in this file
|
Kindly resolve the conflicts, so we can merge it |
AceTheCreator
left a comment
AceTheCreator
left a comment
There was a problem hiding this comment.
discard changes made under cypress/download
- Resolved conflicts in footer.tsx by keeping Socials component while using master's import style - Resolved conflicts in Footer.cy.ts by integrating close-button clicks from master with social media tooltip tests - All functionality preserved from both branches
- Fix TypeScript error in socials.tsx by importing JSX - Install @types/react-dom to resolve popup component build error - Maintain functionality while ensuring type safety
- Add conf 2025.pdf to cypress/Downloads directory - Document contains conference information and schedule - Referenced in Cypress tests for download functionality
|
@Recxsmacx can i work on this issue if u are not working on it ? |
AceTheCreator
left a comment
AceTheCreator
left a comment
There was a problem hiding this comment.
Left you some reviews @Recxsmacx
| @@ -1,14 +1,14 @@ | |||
| describe('Footer links', () => { | |||
There was a problem hiding this comment.
These changes are not related to your PR. This is probably caused by some formatter in your IDE. ensure only changes related to your PR are pushed
…nce-website into Footer-socials
…nce-website into Footer-socials
|
@AceTheCreator can you check?? |
|
@AceTheCreator from my side its done please merge this pr! |
3 participants
Related to #659
Enhance the social section of the website to improve user engagement and interactivity.
Footer Component Changes:
Replace the hardcoded social media links with a new Socials component.
Add hover effects and tooltips for social media icons.
Add onClick event handlers to redirect users to respective social media pages.
Increase the gap between the "Code of Conduct" link and the line in the footer by adding margin to the a element.
Socials Component:
Create a new Socials component to handle social media icons.
Add LinkedIn, GitHub, Twitter, and YouTube icons with respective onClick event handlers.
Add tooltips for each social media icon to provide additional context.
Add hover effects to make the icons more visually appealing.