Redesign Sign-In Page to match figma design and Refactor file location

[BigBen-7]

Description:
We need to redesign our sign-in page to align with the new Figma design. The existing implementation uses Formik and Yup for validation. This issue requires removing the current code and implementing the new design while ensuring responsiveness and usability.

Additionally, the new sign-in form should be moved to a separate component:

• Create a SignInForm.jsx file inside frontend/components/.
• Import and use the SignInForm component inside frontend/(auth)/signup/page.jsx to handle routing and rendering.

Tasks:

1. Remove the existing sign-in form implementation.
2. Implement the new design as per the Figma file.
3. Ensure full responsiveness across different screen sizes.
4. Maintain proper accessibility and usability.
5. Create a new signIn.jsx file in frontend/components/.
6. Import and use SignInForm in frontend/app/(auth)/signIn/page.jsx.

Acceptance Criteria:

• The new sign-In page should match the Figma design pixel-perfectly.
• It should be fully responsive on mobile, tablet, and desktop views.
• The user experience should be smooth, with no broken styles or interactions.
• The SignInForm.jsx component should be properly structured and imported in frontend/app/(auth)/signin/page.jsx.

[Luluameh]

I’d love to work on this issue. I have 3+ years of experience in frontend development, specializing in React, Next.js, Tailwind CSS, and Formik. I’ll ensure the new sign-in page aligns pixel-perfectly with the Figma design and is fully responsive across devices.

My Plan:
Implement the new UI as per the Figma design.
Ensure smooth UX, responsiveness, and accessibility.
Refactor the sign-in form into a reusable component.
Follow best practices for structure and maintainability.
TG: Lulu Greg
ETA:6hrs

[Agbeleshe]

I am a front-end developer with over three years of experience, specializing in building responsive and user-friendly web applications.

To address this issue, I will remove the existing sign-in page implementation and replace it with a new design that aligns with the provided Figma file. I will create a separate SignInForm.jsx component for better structure and maintainability, ensuring it is correctly imported and used in the appropriate routes. The new page will be fully responsive across all screen sizes.

ETA: 24 hours.
TG: @Bioba_dan

[nnodim]

Hi, I’d love to take on this issue! I have experience working with React, Formik, Yup, and responsive UI design.

For this task, I will:
• Remove the existing sign-in form implementation.
• Implement the new design as per the Figma file, ensuring a pixel-perfect match.
• Ensure full responsiveness.
• Maintain proper accessibility and usability.
• Create the SignInForm.jsx component inside frontend/components/.
• Import and integrate SignInForm in frontend/app/(auth)/signin/page.jsx.

ETA: I expect to complete this within 1-2 days,

[Luluameh]

I'd love to work on implementing Formik & Yup validations for the Sign Up and Sign In pages. With my 3+ years of React & Next.js experience, I can ensure the validation logic is robust, user-friendly, and meets best practices.

My Approach:
Sign Up Validations:
Full Name: Minimum 3 characters
Email: Valid email format
Password: Minimum 8 characters; must include 1 number & 1 special character
Confirm Password: Must match Password field
Sign In Validations:
Email: Valid email format
Password: Required
Implement Formik & Yup for structured validation
Display inline validation messages for better UX
Ensure error messages appear only after user interaction
Record a Loom video showcasing the validations in action
ETA:8-10hrs
I’ve also joined the FreightFlow TG group. My handle: @lulugreg.

[Verifieddanny]

As a Frontend developer, I can get this done within 16 hours after being assigned

[cristianFleita]

I’m Cristian, a developer with 6 years of experience, including 2 years working on Web3 projects (both frontend and backend). I have solid experience with React and TypeScript and always focus on making sure features work smoothly.

I'll update the sign-in page to match the Figma design pixel-perfectly, keep accessibility and usability in check, and refactor the form into a separate component as required.

[Jethrolopwus]

Let me handle this issue!

[blessingbytes]

I will love to take up this task

[bakarezainab]

Hi, I'm a Frontend engineer with 2+ years of creating pixel-perfect UI. I am a first time contributor on OnlyDust. am confident in my ability to redesign and implement the new sign-in page based on the provided Figma design. I would love to tackle this issue.

ETA: 24-48 hours

[lucidfort]

I’m Epiphanus, a front-end developer with expertise in React, Next.js, and UI/UX best practices. I have experience working around forms and ensuring responsiveness and accessibility in modern web applications.

Plan to Address the Issue:

Code Refactoring: I will remove the existing sign-in form and implement the new design based on the Figma file.

Componentization: I will create a SignInForm.jsx inside frontend/components/ and ensure it is properly structured for reusability.

Integration: I will update frontend/app/(auth)/signIn/page.jsx to import and render SignInForm, ensuring it functions correctly.

Validation & Accessibility: Quick question: Since I'll be refactoring the whole code, will I retain Formik and Yup for validation or do you want to use new validators? I have also worked with Zod for validation

Responsiveness: I will apply flexible layout techniques (CSS Grid/Flexbox, media queries) to ensure the form adapts well to all screen sizes.

Estimated Completion Time:

24 hours, including testing for responsiveness and usability.

Looking forward to your response! Thank you

Best regards,
[Your Name]
[Your Contact Information]
[Your Portfolio (if applicable)]

[Shalomnze]

I am Nze Shalom, a full stack developer with strong foundation in modern web development frameworks and technologies. My expertise includes: Nuxt.js, Next.js and Tailwind CSS with a bit of knowledge in Cairo. I am Experienced in crafting responsive, visually appealing designs using Tailwind CSS, ensuring consistency and efficiency in the development process. I have gone through the contributors guide and the figma file. I would love to contribute to this project. ETA is 24hrs

[Pvsaint]

Can I handle this task?

[nnennaokoye]

I am a first time contributor, and i'm excited to contribute to OnlyDust Open source.