Newsletter Sign Up Form With Success Message

What are you most proud of, and what would you do differently next time?

I am proud of how I structured my state management and components. I used two components for the Form and Success Message.

And kept track of two state variables. one keeps track of which state we're showing to the user. e.g. initial or error or success. in the initial state we show our form component and we also show it in the error state but we add the modifier class form--error to style it. in the success state we show the Thank You Message component passing it the email.

Another piece of state is the email itself. our input is controlled. so whenever the user is typing the email stored in react updates to match it.

I used BEM to assign classes to my components. and style in them in one file using CSS Nesting. I might try out a different approach of styling next time.

What challenges did you encounter, and how did you overcome them?

My main challenge was with styling the project. my first problem was how to handle the svgs illustrations. my first thought was to put them both inline and use the display property to hide one and show one using media queries. however for some reason with this approach the second one loses all colours. I have no idea why that happens. if someone knows why please let me know.

So I removed them. and used them as background images instead. I had no idea on how to style the project between the mobile size and desktop size so I just made the image stretch. not totally happy with that. but it seemed good enough.

What specific areas of your project would you like help with?

As always I'd like to know if my code is readable and understandable.

Any feedback is of course welcomed!

Thank you for viewing my solution!