Skip to content

Conversation

@Chanu716
Copy link
Contributor

Fix: Contact Page UI & Button Positioning

Description

Improved contact page visibility, fixed button overlap, and cleaned up unused code.

Changes

Contact Page

  • Made icons visible in both light/dark modes (black on yellow background)
  • Center-aligned all card text (email, phone, address)
  • Enhanced light mode with gradients and better shadows
  • Improved typography and spacing

Button Positioning

  • Moved scroll-to-top button to the LEFT of chatbot button
  • Both buttons now at bottom: 20px with proper spacing
  • No more overlap issues

Code Cleanup

  • Removed unused imports from Footer.js and Description.js
  • Fixed all eslint warnings (no-unused-vars)
  • Removed unused context and variables

Testing

  • ✅ Works in light and dark modes
  • ✅ Buttons properly positioned
  • ✅ No compilation warnings
  • ✅ Responsive on mobile

Files Changed

  • client/src/routes/ContactUs.css
  • client/src/routes/ContactUs.js
  • client/src/components/Chatbot/Chatbot.css
  • client/src/components/Footer/Footer.css
  • client/src/components/Footer/Footer.js
  • client/src/components/Item/Description/Description.js

##Screenshots
image
image
image

##Related Issues
#321

- Make contact card and form icons visible in both light and dark modes with black color on yellow background
- Enhance light mode UI with gradient backgrounds and better shadows
- Improve card hover effects with top border animation
- Update form section with better contrast and styling
- Reposition chatbot button above scroll-to-top button to prevent overlap
- Change chatbot position from right: 90px to bottom: 90px for better UX
- Improve typography with better fonts, letter-spacing, and line-height
- Add rounded corners to input icons (12px instead of full circle)
- Remove hardcoded colors from MUI icons to use CSS styling
- Update contact card fonts to be bold and more readable
- Position scroll-to-top button to the left of chatbot (right: 95px) at same bottom level
- Update inline styles in Footer.js to position button correctly (removed hardcoded position)
- Center-align contact card text (email, phone, address) in light mode
- Remove unused imports from Footer.js (TwitterIcon, SendIcon, Cart)
- Remove unused context imports from Description.js (CartItemsContext, WishItemsContext)
- Fix all eslint warnings for unused variables
- Update responsive styles for button positioning on mobile
@vercel
Copy link

vercel bot commented Oct 29, 2025

@Chanu716 is attempting to deploy a commit to the agamjotsingh18's projects Team on Vercel.

A member of the Team first needs to authorize it.

@github-actions
Copy link

Thanks for creating a PR for your Issue! ☺️

We'll review it as soon as possible.
In the meantime, please double-check the file changes and ensure that all commits are accurate.

If there are any unresolved review comments, feel free to resolve them. 🙌🏼

@agamjotsingh18 agamjotsingh18 merged commit d41a11d into agamjotsingh18:main Oct 29, 2025
2 of 3 checks passed
@Chanu716 Chanu716 deleted the fix/contact-page-improvements branch October 29, 2025 17:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug] : arrow in right bottom,Icons on contact us, Trendhora icon

2 participants