UI: Develop Sign Up page

[mtreacy002]

Description

As a maintainer,
I need to see BIT Sign Up page gets redesigned,
so that I can make sure they meet AnitaB guidelines.

Mocks

Approved design idea for Sign Up page (Designer Gloria Osoro)

Acceptance Criteria

Update [Required]

• Implement the design above in the section it is intended in the design above.

Enhancement to Update [Optional]

NA

Definition of Done

• All of the required items are completed.
• Approval by 1 mentor.

Estimation

1 day

Additional Note
Image and design metrics can be found on Figma file under high_fidelity tab.

[aakankshaagr]

@mtreacy002 Can I work on this issue?

[mtreacy002]

sure, @aakankshaagr . I'll assign you to this now. Thanks for picking up the issue 😉

[vj-codes]

@aakankshaagr any updates here?

[aakankshaagr]

@vj-codes It's almost done. I am facing some issues. After solving them I will create a PR. ,probably within 2 days. I saw that there is some issues with navigation bar that's why I didn't make a PR earlier.

[mtreacy002]

@aakankshaagr , can you please give us update on this?

[aakankshaagr]

Sorry @mtreacy002 I was sick due to vaccination and I completely forgot about linking PR. I will make a PR by tmr.
I didn't find left image in image section so earlier I took snap from figma and adjusted that, later I forgot to ask about this.
Can you please tell me what's the destination of image?

[mtreacy002]

Sorry to hear you had reactions to the vaccine. Hope you're all well now, @aakankshaagr. As for the image, it can be found on the figma file under the high_fidelity section which has all designs from Sign-In/Sign-Up and Homepage.

[aakankshaagr]

Thanks @mtreacy002 I have linked PR for follow up. There are some changes yet to be done

1. Show password icon
2. terms and conditions,mentor,mentees availability and checkboxes layout
3. Responsive page
   4.side-image

I have tried 3 methods to load side_image but still it's not showing up.Can you please point out where I am going wrong?
1.Using background-image in css
2. Importing image in register.jsx and
3. specifying path in img src.