1 files changed, 17 insertions, 26 deletions

diff --git a/src/lib/cart/components/Cart.jsx b/src/lib/cart/components/Cart.jsx
index 1131fed7..5b8a4690 100644
--- a/src/lib/cart/components/Cart.jsx
+++ b/src/lib/cart/components/Cart.jsx
@@ -170,16 +170,13 @@ const Cart = () => {
 
             {products?.map((product) => (
               <div key={product?.id} className='flex mx-4'>
-                <button
-                  type='button'
-                  className='flex items-center mr-2'
+                <input
+                  type='checkbox'
                   onClick={() => toggleSelected(product.id)}
-                >
-                  {!product?.selected && (
-                    <div className='w-5 h-5 border border-gray_r-11 rounded' />
-                  )}
-                  {product?.selected && <CheckIcon className='border bg-red_r-10 w-5 text-white' />}
-                </button>
+                  checked={product?.selected}
+                  className='mr-2 accent-danger-500 w-4'
+                />
+
                 <Link
                   href={createSlug('/shop/product/', product?.parent.name, product?.parent.id)}
                   className='w-[30%] flex-shrink-0'
@@ -213,7 +210,7 @@ const Cart = () => {
                     {currencyFormat(product?.price?.priceDiscount)}
                   </div>
                   <div className='flex justify-between items-center mt-1'>
-                    <div className='text-red_r-11 font-medium'>
+                    <div className='text-danger-500 font-medium'>
                       {currencyFormat(product?.price?.priceDiscount * product?.quantity)}
                     </div>
                     <div className='flex gap-x-1'>
@@ -255,7 +252,7 @@ const Cart = () => {
               <div className='flex justify-between mb-4'>
                 <div className='text-gray_r-11'>
                   Total:
-                  <span className='text-red_r-11 font-semibold'>
+                  <span className='text-danger-500 font-semibold'>
                     &nbsp;
                     {selectedProduct().length > 0
                       ? currencyFormat(totalPriceBeforeTax - totalDiscountAmount + totalTaxAmount)
@@ -319,18 +316,12 @@ const Cart = () => {
                 {products?.map((product) => (
                   <tr key={product.id}>
                     <td>
-                      <button
-                        type='button'
-                        className='flex items-center mr-2'
+                      <input
+                        type='checkbox'
                         onClick={() => toggleSelected(product.id)}
-                      >
-                        {!product?.selected && (
-                          <div className='w-5 h-5 border border-gray_r-11 rounded' />
-                        )}
-                        {product?.selected && (
-                          <CheckIcon className='border bg-red_r-10 w-5 text-white' />
-                        )}
-                      </button>
+                        checked={product?.selected}
+                        className='accent-danger-500 w-4'
+                      />
                     </td>
                     <td className='flex'>
                       <Link
@@ -339,12 +330,12 @@ const Cart = () => {
                           product?.parent.name,
                           product?.parent.id
                         )}
-                        className='w-[30%] flex-shrink-0'
+                        className='w-[20%] flex-shrink-0'
                       >
                         <Image
                           src={product?.parent?.image}
                           alt={product?.name}
-                          className='object-contain object-center border border-gray_r-6 h-40 w-full rounded-md'
+                          className='object-contain object-center border border-gray_r-6 h-28 w-full rounded-md'
                         />
                       </Link>
                       <div className='px-2 text-left'>
@@ -391,7 +382,7 @@ const Cart = () => {
                       </div>
                     </td>
                     <td>
-                      <div className='text-red_r-11 font-medium'>
+                      <div className='text-danger-500 font-medium'>
                         {currencyFormat(product?.price?.priceDiscount * product?.quantity)}
                       </div>
                     </td>
@@ -429,7 +420,7 @@ const Cart = () => {
               <div className='flex justify-between mb-4'>
                 <div className='text-gray_r-11'>
                   Total:
-                  <span className='text-red_r-11 font-semibold'>
+                  <span className='text-danger-500 font-semibold'>
                     &nbsp;
                     {selectedProduct().length > 0
                       ? currencyFormat(totalPriceBeforeTax - totalDiscountAmount + totalTaxAmount)