From d2697f3962abaee75c2c54b4a8e8a5903e14d0eb Mon Sep 17 00:00:00 2001
From: Duvan Serrano Rojas <duvanserrano21@gmail.com>
Date: Mon, 11 Sep 2023 19:29:49 -0500
Subject: [PATCH 1/2] cambio de los componentes a como estan en figma

---
 src/assets/icons/CardCredit.tsx               |  6 ++--
 src/assets/icons/Shield.tsx                   |  2 +-
 src/assets/icons/Truck.tsx                    |  2 +-
 src/components/paymentMethod/payMethod.tsx    | 16 +++++-----
 .../paymentMethod/paymentMethodsList.tsx      | 29 +++++--------------
 5 files changed, 22 insertions(+), 33 deletions(-)

diff --git a/src/assets/icons/CardCredit.tsx b/src/assets/icons/CardCredit.tsx
index 4f39358..b806366 100644
--- a/src/assets/icons/CardCredit.tsx
+++ b/src/assets/icons/CardCredit.tsx
@@ -5,13 +5,15 @@ export default function CardCredit() {
     <svg
       xmlns="http://www.w3.org/2000/svg"
       fill="none"
+      width="100%"
+      height="100%"
       viewBox="0 0 24 24"
-      stroke="currentColor"
+      stroke="#8C0303"
     >
       <path
         stroke-linecap="round"
         stroke-linejoin="round"
-        d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5z"
+        d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5z"  
       />
     </svg>
   );
diff --git a/src/assets/icons/Shield.tsx b/src/assets/icons/Shield.tsx
index d4cf638..066536d 100644
--- a/src/assets/icons/Shield.tsx
+++ b/src/assets/icons/Shield.tsx
@@ -6,7 +6,7 @@ export default function Shield() {
       xmlns="http://www.w3.org/2000/svg"
       fill="none"
       viewBox="0 0 24 24"
-      stroke="currentColor"
+      stroke="#8C0303"
     >
       <path
         stroke-linecap="round"
diff --git a/src/assets/icons/Truck.tsx b/src/assets/icons/Truck.tsx
index 594bbef..e79c938 100644
--- a/src/assets/icons/Truck.tsx
+++ b/src/assets/icons/Truck.tsx
@@ -6,7 +6,7 @@ export default function Truck() {
       xmlns="http://www.w3.org/2000/svg"
       fill="none"
       viewBox="0 0 24 24"
-      stroke="currentColor"
+      stroke="#8C0303"
     >
       <path
         stroke-linecap="round"
diff --git a/src/components/paymentMethod/payMethod.tsx b/src/components/paymentMethod/payMethod.tsx
index e4cae2e..1657451 100644
--- a/src/components/paymentMethod/payMethod.tsx
+++ b/src/components/paymentMethod/payMethod.tsx
@@ -1,22 +1,24 @@
 import { IconTypes } from '~/types/icons';
 import IconText from '../IconText';
+import Icon from '~/assets/icons/icon';
 interface PaymentMethodProps {
   imageSrc: IconTypes;
   title: string;
-  link: string;
+  description: string;
 }
 
 const PaymentMethod: React.FC<PaymentMethodProps> = ({
   imageSrc,
   title,
-  link,
+  description
 }) => {
   return (
-    <div className="flex justify-between items-center mr-5 ml-5">
-      <a className="flex items-center" href={link} data-title="Medios de pago">
-        <IconText icon={imageSrc} text="" className="h-6 w-6" />
-        <div>{title}</div>
-      </a>
+    <div className="flex flex-col w-1/3 items-center mr-5 ml-5">
+        <div className="h-[100px] w-[100px]">
+          <Icon icon={imageSrc}/>          
+        </div>
+        <h2 className='text-2xl font-bold text-primary-lm'>{title}</h2>
+        <div className='w-[300px] text-center'>{description}</div>
     </div>
   );
 };
diff --git a/src/components/paymentMethod/paymentMethodsList.tsx b/src/components/paymentMethod/paymentMethodsList.tsx
index ccd6fcf..418ae48 100644
--- a/src/components/paymentMethod/paymentMethodsList.tsx
+++ b/src/components/paymentMethod/paymentMethodsList.tsx
@@ -4,38 +4,23 @@ import PaymentMethod from './payMethod';
 const PaymentMethodsComponent: React.FC = () => {
   return (
     <>
-      <div className="flex justify-center bg-gray-200">
-        <div className="max-w-6xl p-4 ">
-          <div className="rounded-lg shadow-md p-4 flex flex-row h-20 justify-center bg-secondary-background ">
+      <div>
+        <div>
+          <div className="p-4 flex justify-center">
             <PaymentMethod
               imageSrc='CardCredit'
-              title="Tarjeta de Credito"
-              link="/gz/home/payments/methods"
-            />
-            <PaymentMethod
-              imageSrc='Cash'
-              title="Efectivo"
-              link="/gz/home/payments/methods"
+              title="Todos los medios de pago"
+              description="trud nisi nostrud nostrud incididunt fugiat. Enim nostrud tempor cillum ea velit."
             />
             <PaymentMethod
               imageSrc='Truck'
               title="Envio a todo el pais"
-              link="/gz/home/payments/methods"
+              description="trud nisi nostrud nostrud incididunt fugiat. Enim nostrud tempor cillum ea velit."
             />
             <PaymentMethod
               imageSrc='Shield'
               title="Compra Segura"
-              link="/gz/home/payments/methods"
-            />
-            <PaymentMethod
-              imageSrc='warranty'
-              title="Grarantia"
-              link="/gz/home/payments/methods"
-            />
-            <PaymentMethod
-              imageSrc='MapLocation'
-              title="Bogota D.C"
-              link="/gz/home/payments/methods"
+              description="trud nisi nostrud nostrud incididunt fugiat. Enim nostrud tempor cillum ea velit."
             />
           </div>
         </div>

From be7914e60518c5ebe163fe788bc4160abe58ac43 Mon Sep 17 00:00:00 2001
From: Duvan Serrano Rojas <duvanserrano21@gmail.com>
Date: Mon, 11 Sep 2023 19:44:42 -0500
Subject: [PATCH 2/2] Modo responsive listo

---
 src/components/paymentMethod/payMethod.tsx          | 2 +-
 src/components/paymentMethod/paymentMethodsList.tsx | 6 +-----
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/components/paymentMethod/payMethod.tsx b/src/components/paymentMethod/payMethod.tsx
index 1657451..bb1911f 100644
--- a/src/components/paymentMethod/payMethod.tsx
+++ b/src/components/paymentMethod/payMethod.tsx
@@ -13,7 +13,7 @@ const PaymentMethod: React.FC<PaymentMethodProps> = ({
   description
 }) => {
   return (
-    <div className="flex flex-col w-1/3 items-center mr-5 ml-5">
+    <div className="flex flex-col items-center mr-5 ml-5">
         <div className="h-[100px] w-[100px]">
           <Icon icon={imageSrc}/>          
         </div>
diff --git a/src/components/paymentMethod/paymentMethodsList.tsx b/src/components/paymentMethod/paymentMethodsList.tsx
index 418ae48..1c148dc 100644
--- a/src/components/paymentMethod/paymentMethodsList.tsx
+++ b/src/components/paymentMethod/paymentMethodsList.tsx
@@ -4,9 +4,7 @@ import PaymentMethod from './payMethod';
 const PaymentMethodsComponent: React.FC = () => {
   return (
     <>
-      <div>
-        <div>
-          <div className="p-4 flex justify-center">
+          <div className="p-4 flex flex-wrap justify-around items-center">
             <PaymentMethod
               imageSrc='CardCredit'
               title="Todos los medios de pago"
@@ -23,8 +21,6 @@ const PaymentMethodsComponent: React.FC = () => {
               description="trud nisi nostrud nostrud incididunt fugiat. Enim nostrud tempor cillum ea velit."
             />
           </div>
-        </div>
-      </div>
     </>
   );
 };