Week 6

Goals

• Wrap up last week's component
• Complete this week's challenge

Your Objective

Your goal is to style the KudosForm.tsx component by adding CSS rules to the KudosForm.css file. We've already set up all the className attributes you'll need in the component.

Your job is to target those classes and bring the app to life!

Try to create a design that is:

• Clean and readable: Users should easily understand what to do.
• Modern: Think soft shadows, rounded corners, and good spacing.
• Interactive: The form should give visual feedback when a user interacts with it (like clicking an input or hovering over the button).

Task Outline

Here's a breakdown of the elements to style:

1. The Main Container (.kudos-form)

   • Make the form stand out from the background. It should look like a distinct "card." How can you give it some depth and defined edges?

2. The Title (.form-title)

   • The title "Give Kudos" should be a clear and prominent header for the form. How can you make it the focal point?

3. Field Groups (.form-group)

   • Currently, all the labels and inputs are squished together. Add some vertical spacing between each field group to let the form breathe.

4. Field Labels (.form-group label)

   • Style the labels (To:, Message:, etc.) so they are clear and distinct from the input fields they describe. They should sit neatly above their respective inputs.

5. Inputs, Textareas, & Selects

   • Target .form-group input, .form-group textarea, and .form-group select all at once.
   • Give them a consistent look. They should have clean borders, nice internal padding, and stretch to the full width of the form.

6. The Focus State (:focus)

   • This is a key part of user experience! When a user clicks into an input field, it should be visually obvious which one is active. How can you change the border or add a glow effect?

7. The Submit Button (.submit-button)

   • Make it look like the primary action on the form. Think about its color, font size, and shape.

Some Hints...

Here are a few CSS properties that might help you out:

• For the card effect: Look into box-shadow and border-radius.
• For spacing: Your best friends are margin and padding. Remember, margin is for space outside an element, and padding is for space inside.
• To make the button feel "clickable": Use cursor: pointer; to change the mouse icon, and for the "press down" effect, check out transform: translateY(1px); in an :active state.

If you do get stuck, feel free to refer back to last week's session where we discussed CSS styling!

Here is an example of what your cards could look like (ignore dark mode):