Update color scheme and refactor styles for design uniformity

[eva-lng]

Description

New color scheme was implemented into the app design. Styling of various components, such as forms, buttons, listed items etc. was updated to ensure consistent design throughout the app. Some styles that were used repeatedly were moved into custom classes to simplify reusing them and improve the maintainability and readability of the codebase. Old unused stylesheets were deleted. A bug that prevented users to scroll the main content out of the navbar is fixed.

Related Issue

closes #59
closes #58

Acceptance Criteria

Acceptance criteria

• A consistent color scheme is applied across the entire app for both light and dark mode
• Inconsistent styles are adjusted to ensure uniformity in design in all components and pages
• Repeated styles are refactored into custom classes to ensure easier maintainability and readability of code
• Any styling issues negatively impacting the user experience should be resolved

Type of Changes

enhancement

Updates

Design for different views

Testing Steps / QA Criteria

npm start
navigate to browser, resize the window to test the app's responsiveness

[github-actions]

Visit the preview URL for this PR (updated for commit 2025a68):

https://tcl-78-smart-shopping-list--pr60-el-style-refactor-wj3lz9li.web.app

_{(expires Wed, 16 Oct 2024 17:38:42 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: c781903507c1507075d7a974036959ddeec29c0a}

[GrannyYetta]

Awesome job, Eva! The app certainly looks a great deal better and it works well for me in dark mode.

I do have one suggestion: the sign in button at the beginning is aligned to the left and it is twice in the landing page. I suggest we center it and present it only once rather than twice on the page.

[vivitt]

Looking great 💥
The app looks really nice and I love the chosen color scheme.
You did a great work using the @apply directive to extract classes and also deleting the unused CSS.

I noticed that the navigation bar overlaps with the list when it has many items:

I think this might affect usability and just wanted to make sure you were aware, especially in dark mode where some links may disappear into the item's background color: