fix: addresses several ui issues in shop

[alvyynm]

Have you read the contributing guidelines ?

What is the purpose of your pull request?

• [X] Bug fix
• [ ] New feature
• [ ] Documentation

Proposed changes

This PR fixes the following issues highlited in #230:

• Duplicate cart icons shown across the shop on mobile
• Add 8px radius to images in single item view
• Removes trailing space to item URL in the carousel's Shop Now button
• Display item categories in appropriate category color codes in the cart drawer
• Prevent product card from being distorted when the product name is longer than a certain length
• Display number of items in the cart alongside the cart icon if there's at least one product added

Warning

Please read these points carefully and answer honestly with an X into all the boxes. Example : [X]

Before submitting a pull request make sure you have:

• [x] Read the guidelines for contributing.
• [ ] Wrote some tests.
• [x] Respected the linting guidelines (read the guide below for help).

How to Check and Fix Linting Issues

Run npm run validate. This command will run prettier and eslint checks to ensure linting guidelines are respected.

• If the command exits with code 0 (build is successful), there are no linting issues.

• If the command exits with a code other than 0, scroll up the command output and look for identified linting issues. Fix them and revalidate to check if the issues have been resolved by re-running the command.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
syt-web-redesign	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 29, 2024 1:47pm

[alvyynm]

This fixes #230