901
REComment "React" and I'll send you the full roadmap 🚀
Your form looks like a government website. Grey borders. System fonts. That default browser styling that screams "nobody cared enough to design this."
You built a beautiful container. White card. Rounded corners. Soft shadow. Looking modern and clean. Then you look inside. The input field? Default. The button? Default. It's like wrapping a gift beautifully then putting garbage inside. The contrast makes it worse.
Time to fix the guts.
First step: give your elements classNames to target. In App.js, the input gets className "input". The button gets className "button". Simple descriptive names. Now CSS can find them.
Open App.css. Target dot input. Width 100 percent so it fills the container. Padding 10 pixels vertically, 14 horizontally. Comfortable space for typing. Border 1 pixel solid light grey. Subtle but defined. Border-radius 8 pixels to match our rounded container aesthetic.
Font-size 16 pixels. Anything smaller feels cramped. Outline none removes that harsh blue glow browsers add on focus. Box-sizing border-box is crucial. Makes the 100% width include padding, not add to it. Without this, your input would overflow.
Now the button. Padding for comfortable clicking area. Background colour something bold. A nice indigo purple. Stands out. Invites clicks. Color white for the text. High contrast against that purple background.
Border none removes default button borders. Border-radius 8 pixels keeps the rounded theme consistent. Font-size 16 to match the input.
Here's a massive UX detail: cursor pointer. When users hover over the button, their cursor changes to a hand. Universal signal for "this is clickable." Default buttons show an arrow cursor. Users have to guess it's clickable. Pointer removes all doubt.
Save both files. Check the browser.
Now we're talking. Clean input field. Bold purple button. Rounded edges matching the container. Professional. Cohesive. The outside and inside finally match.
But scroll down. Those todo items still have ugly bullet points. School worksheet energy. Next target.
This reel is just the trailer. Full lesson 👉 www.projectschool.dev
@reactlessons
