Fixes #197: Redesign shop single item view (#207)

* style: redesign PopularItemsSection

* chore: move the returned value immediately after the `=>`

* chore: refactor formatPrice function

* chore: refactor formatPrice function

* style: remove rounded-md from card image

* style: change padding in popular items depending on screen width

* style: make product card responsive

* style: make product card responsive

* style: make similar products section responsive

* style: add x-axis scroll to popular items section

* style: display a max of three cards

* style: adjust product name color in card

* style: add max-w-fit to pill btns

* chore: remove unused code

* feat: display 'item' if stock is === 1

* style: create hr-scrollbar class with custom styles

* style: replace scrollbar with hr-scrollbar class

* chore: formatting

* style: add p-10 to itemheader above sm screen

* style: replace breadcrumb with GoBackBtn

* style: replace PiShoppingCartLight with MdOutlineAddShoppingCart

* style: add a p-10 to Single Item display section

* style: display font-medium by default and semibold on md screens

* style: update structure and style to match design

* style: update counter style

* style: update styling for color selection options

* style: add min-w-full to all screen sizes

* style: add max width to similar products section

* style: redesign cart drawer

* style: cart drawer style adjustments

* style: change currency shorthand from Ksh to KES

* chore: remove unused code

* chore: remove unused code

* style: design adjustments

* style: design adjustments

* style(fix): display different color selection circles

* style(fix): improve responsiveness of add to cart btn

* style(fix): add gradient background to add to cart btn

* feat: fix accessibility issues

* chore: remove unused cart icon import

* chore: delete unsued cart icon

* chore: fix seo issues

* style: format product price appropriately in single item page

---------

Co-authored-by: sonylomo <sonylomo1@gmail.com>

src/components/shop/Counter.jsx

@@ -6,21 +6,21 @@ function Counter({ className, setCount, count }) {
       <button
         type="button"
         data-action="decrement"
-        className="cursor-pointer outline-none w-20 border-y border-l border-l-[#323433] border-y-[#323433] rounded-l-full "
+        className="cursor-pointer outline-none w-20 border-y border-l border-l-[#EAECF0] border-y-[#EAECF0] rounded-l-md border-r"
         onClick={() => setCount(count > 1 ? count - 1 : 1)}
       >
         <span className=" text-base">−</span>
       </button>
       <p
-        className="outline-none focus:outline-none font-medium  md:text-basecursor-default flex items-center justify-center border-y border-y-[#323433]"
+        className="outline-none focus:outline-none font-medium  md:text-base cursor-default flex items-center justify-center border-y px-5 border-y-[#EAECF0]"
         name="custom-input-number"
       >
         {count}
       </p>
       <button
         type="button"
         data-action="increment"
-        className="cursor-pointer outline-none w-20 border-y border-r border-r-[#323433] border-y-[#323433] rounded-r-full"
+        className="cursor-pointer outline-none w-20 border-y border-r border-r-[#EAECF0] border-y-[#EAECF0] rounded-r-md border-l"
         onClick={() => setCount(count + 1)}
       >
         <span className="text-base">+</span>