Styling

[GrannyYetta]

Description

The code now includes the base for the styling. Icons and fonts have been added and tailwind css has been initalized.

Related Issue

closes #36

Acceptance Criteria

• Add the following icons:
  • One for Manage List
  • One for List
  • One for Home
  • One for About
  • One for the logo
• Include the fonts to be used by the app
• Initialize TailwindCSS installation
  • Create tailwind.config.js file in the project root directory.

Type of Changes

Layout.jsx

In the navigation, the words "Home", "List", "Manage List" and "About" were replaced with react icons.

Additionally, the tab no longer shows the react icon, but a shopping cart icon.

index.css

The Tailwind directives were added to the main CSS file, however commented out since the team still has to decide upon styles.

Tailwind, PostCSS and Autoprefixer packages were installed and initialized, so that tailwind.config.js and postcss.config.js files were added to the root folder. Also, the styles in the former were extended with the google fonts.

Updates

Before

After

Testing Steps / QA Criteria

• npm start
• Click on the navigation icons

[github-actions]

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

https://tcl-78-smart-shopping-list--pr45-styling-5pk9pt4g.web.app

_{(expires Sat, 05 Oct 2024 18:13:02 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: c781903507c1507075d7a974036959ddeec29c0a}