Congratulations 🎉

Amazing results

Amazing work, specifically with using the if statements and pushing items into the array. Why don't you try to make it more interesting by using higher-order functions like map instead of creating an array and then using a for loop to push items into it?

it would be super easier

Good job overall, the code is getting better. There is no need to create a component just to render an input field. The input can be used directly like this: ``` <input className="text-field" placeholder=''blah blah" value="Name" /> ``` Instead of using an opening and closing input tag. What you did with the Buttons is correct, so follow the same approach for the inputs. A better way to send the props for the two buttons is as follows: <Button text="Sign Up" /> <Button text="Sign In" isLight /> If the isLight prop is not sent, it defaults to false. Sending it as isLight means it is set to true.

- Defining constants at the top of the code is not optimal. It's better to place them close to where they are needed/used. - When a prop is passed as a string, such as <TextField text={"Name"} />, there's no need to use {}. Instead, use <TextField text="Name" />. function TextLine(props) { return <p className={props.name}>{props.text}</p>; } function TextField(props) { return <input className="textField" placeholder={props.text}></input>; } - I understand you did this to improve the structure of your code, but the question is whether these minor adjustments are worth creating separate components for. Styles, as in <div className={${socialButton}}>, should be directly applied without storing them in a variable first. - You've created GoogleIcon, TwitterIcon, and FacebookIcon, which is not ideal. Consider making a generic component that can display any icon based on a prop, rather than creating a separate component for each icon. If you have 10 icons, will you create 10 components?

Also, please tag me in future PRs