Merge pull request alim1496#7 from alim1496/fix/fix-misc-design-issues

fix several style bugs

Author: alim1496

src/components/ProductCard.tsx

@@ -51,21 +51,22 @@ const ProductCard: FC<Product> = ({
           />
         </Link>
       </div>
-      <div className="px-8 pt-4">
+      <div className="px-4 pt-4">
         <p className="text-gray-500 text-[14px] font-medium dark:text-white">
           {category}
         </p>
         <Link
-          className="font-semibold hover:underline dark:text-white"
+          className="font-semibold hover:underline dark:text-white overflow-hidden text-ellipsis whitespace-nowrap block"
           to={{ pathname: `/product/${id}` }}
+          title={title}
         >
           {title}
         </Link>
       </div>
-      <div className="px-8">
+      <div className="px-4">
         <RatingStar rating={rating} />
       </div>
-      <div className="flex items-center justify-between px-8 pb-4">
+      <div className="flex flex-wrap items-center justify-between px-4 pb-4">
         {discountPercentage && (
           <PriceSection discountPercentage={discountPercentage} price={price} />
         )}
@@ -74,9 +75,9 @@ const ProductCard: FC<Product> = ({
           className="flex items-center space-x-2 hover:bg-blue-500 text-white py-2 px-4 rounded bg-pink-500"
           onClick={addCart}
           data-test="add-cart-btn"
+          title="ADD TO CART"
         >
           <AiOutlineShoppingCart />
-          <span>ADD TO CART</span>
         </button>
       </div>
     </div>

src/pages/SingleProduct.tsx

@@ -159,30 +159,30 @@ const SingleProduct: FC = () => {
               {product?.description} {lorem}
             </p>
           </div>
-          <div className="flex flex-wrap items-center mt-4 mb-2 space-x-2">
+          <div className="flex flex-wrap items-center mt-4 mb-2">
             <button
               type="button"
-              className="flex items-center space-x-1 mb-2 hover:bg-pink-700 text-white p-2 rounded bg-pink-500"
+              className="flex space-x-1 items-center mr-2 mb-2 hover:bg-pink-700 text-white py-2 px-4 rounded bg-pink-500"
               onClick={addCart}
+              title="ADD TO CART"
             >
               <AiOutlineShoppingCart />
-              <span>ADD TO CART</span>
             </button>
             <button
               type="button"
-              className="flex items-center space-x-1 mb-2 bg-blue-500 text-white p-2 rounded hover:bg-blue-700"
+              className="flex space-x-1 items-center mr-2 mb-2 bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700"
               onClick={buyNow}
+              title="BUY NOW"
             >
               <FaHandHoldingDollar />
-              <span>BUY NOW</span>
             </button>
             <button
               type="button"
-              className="flex items-center space-x-1 mb-2 bg-yellow-500 text-white p-2 rounded hover:bg-yellow-700"
+              className="flex space-x-1 items-center mb-2 bg-yellow-500 text-white py-2 px-4 rounded hover:bg-yellow-700"
               onClick={addWishlist}
+              title="ADD TO WISHLIST"
             >
               <MdFavoriteBorder />
-              <span>ADD TO WISHLIST</span>
             </button>
           </div>
         </div>