Enhancing the Shortlist Modal in Recruitify

Issue Overview

I recently worked on an issue in the Recruitify project that focused on enhancing the appearance and usability of the Shortlist Modal. The goal was to improve the user experience by updating the styling, layout, and visual effects within the modal. You can find the original issue here: Recruitify Issue #41.

What Was the Issue About?

The issue requested improvements to the modal's UI, specifically asking for:

• Consistent padding and spacing between elements
• Better button styling with hover effects
• Enhanced modal appearance with shadow/blur effects and rounded corners
• A more vibrant color scheme with high contrast

The objective was to make the modal look cleaner and more accessible, while also improving its interactivity and focus.

Preparing for the Fix

Before jumping into the fix, I needed to set up the Recruitify project on my local machine and ensure both the frontend and backend components were running smoothly. This involved configuring MongoDB, Redis, and other dependencies in .env files. Setting up the project took a bit of time as I encountered some issues with MongoDB authentication and Redis connection, which I managed to resolve after a few trials.

Learning Requirements

To complete this fix, I needed to:

1. Familiarize myself with Recruitify’s existing code structure, especially how modals were implemented.
2. Understand CSS modules and how to create modular styling in React applications.
3. Apply knowledge of UX/UI principles to improve accessibility and visual appeal.
4. Learn about React Router for adding a test route (/modal-sandbox) to easily access and test the modal changes.

Code Explanation and Fix

The main changes were made in modal.module.css, which styles the ShortlistModal component. Here’s a breakdown of the improvements:

1. Overlay Styling:
   • I added a semi-transparent background overlay with a slight blur effect to make the modal stand out and provide a clearer focal point.

   .modalOverlay {
     background: rgba(0, 0, 0, 0.7);
     backdrop-filter: blur(3px);
   }

1. Modal Content Box:
   • To give the modal a more professional look, I applied rounded corners, a subtle shadow, and a smooth fade-in animation. This makes the modal appear less rigid and more approachable.

   .modalContent {
     background: #ffffff;
     padding: 30px;
     border-radius: 12px;
     box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.3);
     animation: fadeIn 0.3s ease;
   }

1. Button Styling:
   • The "Submit" button was given a vibrant blue color, while the "Cancel" button was styled with a soft grey. Hover effects were added to make the buttons more interactive, scaling them up slightly when hovered.

   button[type="submit"] {
     background-color: #4A90E2;
     color: #ffffff;
   }
   button[type="button"] {
     background-color: #CCCCCC;
     color: #333333;
   }

1. Input Field:
   • I styled the input field with consistent padding, a soft border, and a focus effect. This makes it more accessible and visually pleasing.

Before and After

Before:

The modal had minimal styling, with no shadow or rounded corners. Buttons lacked hover effects, and the overall look was plain.

After:

• Consistent spacing between elements makes the layout cleaner.
• Shadow and rounded corners give the modal a polished look.
• Button hover effects improve interactivity.
• Color scheme enhances accessibility, with vibrant colors and good contrast.

Research and Challenges

I did some research on modal accessibility, specifically how to create a visually appealing modal that remains functional and accessible. I also reviewed CSS best practices for animations and hover effects.

The biggest challenge was configuring the Recruitify project locally, as it required connecting to both MongoDB and Redis services. MongoDB’s authentication errors initially prevented me from running the backend, but I resolved this by checking the database credentials and permissions.

Another challenge was ensuring the modal looked good across different screen sizes. I added responsive adjustments and tested the modal on various devices.

Interaction with Project Maintainers

Since I was delayed in responding to the issue due to midterms, I posted an update apologizing for the delay and notifying the maintainer about my PR. They were understanding and provided positive feedback on my progress.

Difficulties and Solutions

The most difficult part was configuring the project environment to run smoothly. By reading MongoDB and Redis documentation and experimenting with different configurations, I was able to resolve the issues. I also added a test route (/modal-sandbox) to make it easier to access the modal without needing the full backend setup.

Link to Pull Request

Here’s the link to my pull request, which contains the updated modal styling: Recruitify PR #67

Overall, this issue helped me improve my CSS skills and learn about modal accessibility. It was a valuable experience, and I’m looking forward to making more contributions in the future!