Contact-Us UI #467

cherylpinto · 2025-10-05T05:01:39Z

name: Pull Request
about: Submit changes to the Sugar Labs website for review

📝 Description

This PR adds a fully designed, dark-mode-compatible Contact Us page to the Sugar Labs website.
The page includes:

Introductory section with animated heading, description, and illustration.
Contact cards for Mail, Phone, and Email.
"Connect With Our Community" section displaying all social media links.
A Matrix Chat call-to-action card.
Smooth and optimized animations using Framer Motion.
Responsive design with consistent Header, Footer, and socialLinks integration.
Full support for dark mode

This enhances usability, accessibility, and visual consistency across light and dark themes.

🔗 Related Issue

Fixes #446

🔄 Type of Change

📱 New Feature (new page, component, or functionality)
🎨 UI/UX Update (visual changes, styling improvements)
🌙 Dark Mode Compatibility
🐛 Bug Fix
♿ Accessibility Enhancement
🔒 Security Update
📦 Dependency Update
🧹 Code Refactoring
🧪 Test Updates

📷 Visual Changes

Screenshots

💻 Desktop – Light Mode

🌙 Desktop – Dark Mode

📱 Mobile View

🧪 Testing Performed

📱 Browser Compatibility

🖥️ Responsive Design

Desktop (1200px+)
Tablet (768px - 1199px)
Mobile (320px - 767px)

✅ Test Cases

Verified Mail, Phone, and Email cards render correctly and links function.
Confirmed all social links open in new tabs.
Checked Matrix chat button navigation.
Tested light/dark mode transitions and color contrast.
Ensured animations perform smoothly on all screen sizes.

♿ Accessibility

Proper heading hierarchy maintained
Alt text for all icons/images
Dark mode colors meet contrast ratios
Keyboard navigation works correctly
Screen reader testing performed

📋 PR Checklist

My code follows the project's coding style guidelines
I have tested these changes locally
I have verified dark mode compatibility
My changes generate no new warnings or console errors
All existing tests pass successfully
I have validated all links and icons

💭 Additional Notes

Open to feedback

📚 Reviewer Resources

Thank you for reviewing this PR! 🎉

…into feat/issue-446

github-actions · 2025-10-05T05:02:24Z

🎉 All Checks Passed!

Status: ✅ Ready to merge

✅ Completed Workflows

Workflow	Status	Details
🔨 Continuous Integration	✅ Passed	Build completed successfully
📝 Code Linting	✅ Passed	All formatting and style checks passed

🚀 This PR is ready for review and can be safely merged to main branch!

Great work! Your code meets all quality standards. 👏

cherylpinto · 2025-10-05T13:15:46Z

Hi @sa-fw-an can you review my work.

sa-fw-an · 2025-10-05T16:25:03Z

@cherylpinto It would be better if you attach screenshots from next time :)

cherylpinto · 2025-10-05T16:26:14Z

@sa-fw-an they are there in the pr under visual changes

Its a dropdown under VISUAL CHANGES HEADING

If you want, I can send them again!

sa-fw-an · 2025-10-05T16:28:13Z

@sa-fw-an they are there in the pr under visual changes

its a dropdown

Ah, My bad.. Looks Great by the way, it would be better if the Text is Red in color instead of Blue I guess.

cherylpinto · 2025-10-05T16:29:17Z

Okay will do it, and update the PR.

cherylpinto · 2025-10-05T16:31:03Z

So just wanted to confirm you want me to change the entire theme of this page from blue to red? Like the Leadership page? @sa-fw-an

sa-fw-an · 2025-10-05T16:33:09Z

So just wanted to confirm you want me to change the entire theme of this page from blue to red? Like the Leadership page?

Yes, I guess that would look good. Not sure how it would look tho, I suggest attach screenshots of how it would look if its Red in Color, if it looks good you can push the change, else keep the Blue theme itself.

cherylpinto · 2025-10-05T17:42:22Z

Hi @sa-fw-an , I changed the theme from blue to red. Attached are the screenshots of the website. Kindly Review the same, so that I can update the PR accordingly

Light Mode:

Dark Mode:

sa-fw-an · 2025-10-06T13:31:08Z

@cherylpinto Looks good, Please push the code so that I can merge it :)

github-actions · 2025-10-06T14:32:49Z

🎉 All Checks Passed!

Status: ✅ Ready to merge

✅ Completed Workflows

Workflow	Status	Details
🔨 Continuous Integration	✅ Passed	Build completed successfully
📝 Code Linting	✅ Passed	All formatting and style checks passed

🚀 This PR is ready for review and can be safely merged to main branch!

Great work! Your code meets all quality standards. 👏

github-actions · 2025-10-06T15:08:12Z

🎉 All Checks Passed!

Status: ✅ Ready to merge

✅ Completed Workflows

Workflow	Status	Details
🔨 Continuous Integration	✅ Passed	Build completed successfully
📝 Code Linting	✅ Passed	All formatting and style checks passed

🚀 This PR is ready for review and can be safely merged to main branch!

Great work! Your code meets all quality standards. 👏

sa-fw-an · 2025-10-06T15:18:54Z

Can you try making these svgs more consistent in the color scheme. Here the linkedin svg is colored and the rest are in black.

Please try making them consistent by just rendering those svgs in black color like in the image below:

github-actions · 2025-10-06T15:20:13Z

❌ Checks Failed

Status: 🚫 Not ready to merge

Please fix the following issues before merging:

📝 Code Linting Failed

Issue: Code formatting or style violations detected.

Specific problems:

• Code formatting issues detected

How to fix:

Platform	Command	Description
🐧 Unix/macOS/Linux	`npm run format`	Auto-fix all formatting issues
🪟 Windows	`npm run format:file <filename>`	Fix specific files
🔍 Check Only	`npm run format:check`	Check formatting without fixing

Need help with linting? Check out the Linting Guide for Windows Users for detailed instructions.

🛠️ Next Steps

Fix the issues mentioned above
Test locally to ensure everything works
Push your fixes to this branch
Wait for re-check - This bot will automatically run again

🤖 This comment will be updated automatically when you push new commits

github-actions · 2025-10-06T15:25:05Z

🎉 All Checks Passed!

Status: ✅ Ready to merge

✅ Completed Workflows

Workflow	Status	Details
🔨 Continuous Integration	✅ Passed	Build completed successfully
📝 Code Linting	✅ Passed	All formatting and style checks passed

🚀 This PR is ready for review and can be safely merged to main branch!

Great work! Your code meets all quality standards. 👏

cherylpinto · 2025-10-06T15:25:55Z

Yes i have done it

that happened since someone just changed the linkedin svg(that was blue) and since I pulled the changes, it took that svg.
I have updated it.

sa-fw-an · 2025-10-06T15:26:54Z

Great work @cherylpinto , Looks Good :)

cherylpinto added 4 commits October 5, 2025 10:02

changed contact-us ui to match website theme

7675939

fixed merge conflicts

3d0aec4

minor fixes

8075e79

Merge branch 'feat/issue-446' of https://github.com/cherylpinto/www-v2 …

49340e5

…into feat/issue-446

cherylpinto changed the title ~~Feat/issue 446~~ Contact-Us UI Oct 5, 2025

cherylpinto added 2 commits October 6, 2025 19:45

changed theme from blue to red

d4df585

Merge branch 'main' into feat/issue-446

c891f46

retained svgs

7c089e8

minor changes

74e5472

changed size of social links

d189153

sa-fw-an merged commit 8d810e3 into sugarlabs:main Oct 6, 2025
3 checks passed

sa-fw-an mentioned this pull request Oct 6, 2025

Contact us #463

Closed

Contact-Us UI #467

Contact-Us UI #467

Uh oh!

Conversation

cherylpinto commented Oct 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

name: Pull Request about: Submit changes to the Sugar Labs website for review

📝 Description

🔗 Related Issue

🔄 Type of Change

📷 Visual Changes

💻 Desktop – Light Mode

🌙 Desktop – Dark Mode

📱 Mobile View

🧪 Testing Performed

📱 Browser Compatibility

🖥️ Responsive Design

✅ Test Cases

♿ Accessibility

📋 PR Checklist

💭 Additional Notes

📚 Reviewer Resources

Uh oh!

github-actions bot commented Oct 5, 2025

🎉 All Checks Passed!

✅ Completed Workflows

Uh oh!

cherylpinto commented Oct 5, 2025

Uh oh!

sa-fw-an commented Oct 5, 2025

Uh oh!

cherylpinto commented Oct 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sa-fw-an commented Oct 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cherylpinto commented Oct 5, 2025

Uh oh!

cherylpinto commented Oct 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sa-fw-an commented Oct 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cherylpinto commented Oct 5, 2025

Uh oh!

sa-fw-an commented Oct 6, 2025

Uh oh!

github-actions bot commented Oct 6, 2025

🎉 All Checks Passed!

✅ Completed Workflows

Uh oh!

github-actions bot commented Oct 6, 2025

🎉 All Checks Passed!

✅ Completed Workflows

Uh oh!

sa-fw-an commented Oct 6, 2025

Uh oh!

github-actions bot commented Oct 6, 2025

❌ Checks Failed

📝 Code Linting Failed

🛠️ Next Steps

Uh oh!

github-actions bot commented Oct 6, 2025

🎉 All Checks Passed!

✅ Completed Workflows

Uh oh!

cherylpinto commented Oct 6, 2025

Uh oh!

sa-fw-an commented Oct 6, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

cherylpinto commented Oct 5, 2025 •

edited

Loading

name: Pull Request
about: Submit changes to the Sugar Labs website for review

cherylpinto commented Oct 5, 2025 •

edited

Loading

sa-fw-an commented Oct 5, 2025 •

edited

Loading

cherylpinto commented Oct 5, 2025 •

edited

Loading

sa-fw-an commented Oct 5, 2025 •

edited

Loading