Add styling for all forms

[tataw-cl]

Description

Basic form styling is added to all forms in the app as well as a border to make them more visible throughout the application

Related Issue

closes #53

Acceptance Criteria

• All forms in components should be differentiable from the rest of the site elements.
• All form inputs should have a light border outline so they can be easily identified for input when a user lands on a page.
• Use minimal color related styling for backgrounds since the app background is still pending.

Type of Changes

enhancement

Updates

Before

After

Testing Steps / QA Criteria

• switch to the branch by running git checkout tc-form-styling
• run npm start
• Navigate to the pages of the applicating and check out the forms and looks on each.

[github-actions]

Visit the preview URL for this PR (updated for commit 96293ee):

https://tcl-78-smart-shopping-list--pr54-tc-form-styling-2hnko95z.web.app

_{(expires Sat, 12 Oct 2024 14:25:24 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: c781903507c1507075d7a974036959ddeec29c0a}

[eva-lng]

Works fine for now as a first styling. In the future issues, we will need to address the general layout of the forms (e.g. positions of inputs and buttons, spacing, handling of labels etc.) to make them them visually consistent

[Amaka202]

Works fine for now as a first styling. In the future issues, we will need to address the general layout of the forms (e.g. positions of inputs and buttons, spacing, handling of labels etc.) to make them them visually consistent

Ok then this puts alot of perspective to it. Also the texts needs some more alignments too. Well done so far team!💥💥

[Amaka202]

Well done on the work so far! ✅