UI Fixes

[mishra-khushboo]

Related Issue

Some issues in footer #137 Login and title overlapping in mobile screens #128 Enhance the Login Page #113 Register page UI #99

Description

This request improves the user experience on both registration and login screens by adding real-time validation feedback and enhancing input usability. Key changes include:

register.jsx

• Display Validation Messages: Conditional rendering of validation error messages for each input field informs users of specific issues, enhancing clarity and guidance during the registration process.
• Reusable Input and File Components: Created reusable components for input and file fields to maintain DRY code principles and streamline error handling across the app.
• File Validation for Avatar and Resume Fields: Implemented validation logic to restrict file uploads to acceptable types, ensuring non-image files cannot be uploaded by mistake.

login.jsx

• State Management for Error Tracking: Introduced an errors state to capture and display validation messages, guiding users to address input issues before submission.
• Enhanced Validation Logic: validateForm now performs checks on all fields, ensuring accurate form submission only when validation passes.
• Conditional Form Submission: loginHandler now submits only if validateForm returns true, preventing incomplete or incorrect data from being processed.
• Enhanced Password Toggle Logic: Refactored password toggle functionality into the input component, streamlining the UI and improving usability for password entry.

Navbar

• Improved Responsiveness and Layout: The navbar now adapts more effectively to different screen sizes, offering a compact, centered menu on desktops and better-aligned profile and login/register buttons.
• Mobile-Friendly Design: Introduces a clean, easy-to-navigate dropdown toggle for mobile screens, ensuring an organized and consistent experience across devices.

footer.jsx

• Responsive Grid Layout: Divides content into four responsive columns to organize brand info, quick links, social media icons, and a newsletter subscription, enhancing readability.
• Simplified Quick Links: Utilizes a loop to manage quick links (Home, Jobs, About, Contact), simplifying link management and enabling future additions with ease.
• Enhanced Social Media Section: Adds accessible labels to social media icons and updates them for brand consistency, covering platforms like Facebook, Twitter, Instagram, and LinkedIn.
• Newsletter Subscription Form: Incorporates a subscription input field with a hover-transition button to boost user engagement.
• Footer Bottom: Cleans up the bottom section by dynamically generating the current year and includes copyright info with updated developer credits

  CSS Enhancements

• Error Message Styling: Applied specific CSS styles to highlight error messages in red, improving visibility and user feedback for validation errors.

Type of PR

• [X] Feature enhancement

Screenshots / videos (if applicable)

[Attach any relevant screenshots or videos showing the changes in action.]

Checklist:

• [X] I have performed a self-review of my code.
• [X] I have read and followed the Contribution Guidelines.
• [X] I have tested the changes thoroughly before submitting this pull request.
• [X] I have provided relevant issue numbers, screenshots, and videos after making the changes.
• [X] I have commented my code, particularly in hard-to-understand areas.

Additional context:

This update enhances user interaction by providing clear validation feedback and more streamlined input components, contributing to an overall more intuitive and visually consistent user experience.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
joblane	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 29, 2024 5:05am

[github-actions[bot]]

Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. In the meantime, please ensure that your changes align with our CONTRIBUTING.md. If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊