From 505ef00d3814b9edd6f371b7d0f87d5ed05b092e Mon Sep 17 00:00:00 2001
From: Tan Le <shioryuu0302@gmail.com>
Date: Tue, 21 Sep 2021 17:55:15 +0700
Subject: [PATCH] refactor: styles btn checkout mobile

---
 .../CustomerInfoForm/CustomerInfoForm.module.scss         | 7 +++++++
 .../components/CustomerInfoForm/CustomerInfoForm.tsx      | 8 +++++---
 .../PaymentInfoForm/PaymentInfoForm.module.scss           | 6 ++++++
 .../components/PaymentInfoForm/PaymentInfoForm.tsx        | 8 +++++---
 .../ShippingInfoForm/ShippingInfoForm.module.scss         | 6 ++++++
 .../components/ShippingInfoForm/ShippingInfoForm.tsx      | 8 +++++---
 6 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/src/components/modules/checkout/CheckoutInfo/components/CustomerInfoForm/CustomerInfoForm.module.scss b/src/components/modules/checkout/CheckoutInfo/components/CustomerInfoForm/CustomerInfoForm.module.scss
index b0ecf8144..f8bfbe11f 100644
--- a/src/components/modules/checkout/CheckoutInfo/components/CustomerInfoForm/CustomerInfoForm.module.scss
+++ b/src/components/modules/checkout/CheckoutInfo/components/CustomerInfoForm/CustomerInfoForm.module.scss
@@ -11,5 +11,12 @@
             font-size: 1.2rem;
             line-height: 2rem;
         }
+        @screen sm-only {
+            @apply flex-col items-start;
+            .button {
+                padding-top: 2rem;
+            }
+        }
+
     }
 }
\ No newline at end of file
diff --git a/src/components/modules/checkout/CheckoutInfo/components/CustomerInfoForm/CustomerInfoForm.tsx b/src/components/modules/checkout/CheckoutInfo/components/CustomerInfoForm/CustomerInfoForm.tsx
index 8496b119d..5894683d7 100644
--- a/src/components/modules/checkout/CheckoutInfo/components/CustomerInfoForm/CustomerInfoForm.tsx
+++ b/src/components/modules/checkout/CheckoutInfo/components/CustomerInfoForm/CustomerInfoForm.tsx
@@ -43,9 +43,11 @@ const CustomerInfoForm = ({ id, onConfirm }: CustomerInfoFormProps) => {
           }
           .
         </div>
-        <ButtonCommon onClick={handleConfirmClick}>
-          Continue to Shipping
-        </ButtonCommon>
+        <div className={s.button}>
+          <ButtonCommon onClick={handleConfirmClick}>
+            Continue to Shipping
+          </ButtonCommon>
+        </div>
       </div>
     </div>
   )
diff --git a/src/components/modules/checkout/CheckoutInfo/components/PaymentInfoForm/PaymentInfoForm.module.scss b/src/components/modules/checkout/CheckoutInfo/components/PaymentInfoForm/PaymentInfoForm.module.scss
index 15a70659c..4b709d5bb 100644
--- a/src/components/modules/checkout/CheckoutInfo/components/PaymentInfoForm/PaymentInfoForm.module.scss
+++ b/src/components/modules/checkout/CheckoutInfo/components/PaymentInfoForm/PaymentInfoForm.module.scss
@@ -12,5 +12,11 @@
             font-size: 1.2rem;
             line-height: 2rem;
         }
+        @screen sm-only {
+            @apply flex-col items-start;
+            .button {
+                padding-top: 2rem;
+            }
+        }
     }
 }
\ No newline at end of file
diff --git a/src/components/modules/checkout/CheckoutInfo/components/PaymentInfoForm/PaymentInfoForm.tsx b/src/components/modules/checkout/CheckoutInfo/components/PaymentInfoForm/PaymentInfoForm.tsx
index dc84fec38..eac100fb0 100644
--- a/src/components/modules/checkout/CheckoutInfo/components/PaymentInfoForm/PaymentInfoForm.tsx
+++ b/src/components/modules/checkout/CheckoutInfo/components/PaymentInfoForm/PaymentInfoForm.tsx
@@ -44,9 +44,11 @@ const PaymentInfoForm = ({onConfirm,id}: PaymentInfoFormProps) => {
           }
           .
         </div>
-        <ButtonCommon onClick={handleConfirmClick}>
-          Submit Order
-        </ButtonCommon>
+        <div className={s.button}>
+          <ButtonCommon onClick={handleConfirmClick}>
+            Submit Order
+          </ButtonCommon>
+        </div>
       </div>
     </div>
   )
diff --git a/src/components/modules/checkout/CheckoutInfo/components/ShippingInfoForm/ShippingInfoForm.module.scss b/src/components/modules/checkout/CheckoutInfo/components/ShippingInfoForm/ShippingInfoForm.module.scss
index c0c8b2795..aa177fc88 100644
--- a/src/components/modules/checkout/CheckoutInfo/components/ShippingInfoForm/ShippingInfoForm.module.scss
+++ b/src/components/modules/checkout/CheckoutInfo/components/ShippingInfoForm/ShippingInfoForm.module.scss
@@ -12,6 +12,12 @@
             font-size: 1.2rem;
             line-height: 2rem;
         }
+        @screen sm-only {
+            @apply flex-col items-start;
+            .button {
+                padding-top: 2rem;
+            }
+        }
     }
     .line{
         >div{
diff --git a/src/components/modules/checkout/CheckoutInfo/components/ShippingInfoForm/ShippingInfoForm.tsx b/src/components/modules/checkout/CheckoutInfo/components/ShippingInfoForm/ShippingInfoForm.tsx
index ac4bc8af5..233e9d057 100644
--- a/src/components/modules/checkout/CheckoutInfo/components/ShippingInfoForm/ShippingInfoForm.tsx
+++ b/src/components/modules/checkout/CheckoutInfo/components/ShippingInfoForm/ShippingInfoForm.tsx
@@ -86,9 +86,11 @@ const ShippingInfoForm = ({onConfirm,id}: ShippingInfoFormProps) => {
           }
           .
         </div>
-        <ButtonCommon onClick={handleConfirmClick}>
-          Continue to Payment
-        </ButtonCommon>
+        <div className={s.button}>
+          <ButtonCommon onClick={handleConfirmClick}>
+            Continue to Payment
+          </ButtonCommon>
+        </div>
       </div>
     </div>
   )