Merge pull request #64 from KieIO/layout-checkout

Tan: layout CheckoutPage

pages/checkout.tsx

@@ -1,6 +1,5 @@
-import { Layout } from 'src/components/common';
+import { LayoutCheckout } from 'src/components/common';
 import { CheckoutPage } from 'src/components/modules/checkout';
-import { HomeBanner, HomeCategories, HomeCollection, HomeCTA, HomeFeature, HomeRecipe, HomeSubscribe, HomeVideo } from 'src/components/modules/home';
 
 export default function Checkout() {
   return (
@@ -10,4 +9,4 @@ export default function Checkout() {
   )
 }
 
-Checkout.Layout = Layout
+Checkout.Layout = LayoutCheckout

src/components/common/LayoutCheckout/LayoutCheckout.module.scss

@@ -0,0 +1,17 @@
+@import "../../../styles/utilities";
+.layoutCheckout {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    > main {
+        flex: 1;
+        position: relative;
+    }
+    .footer {
+        @apply spacing-horizontal;
+        padding-top: 3rem;
+        padding-left: 3.2rem;
+        padding-bottom: 3rem;
+        background-color: var(--gray);
+    }
+}

src/components/common/LayoutCheckout/LayoutCheckout.tsx

@@ -0,0 +1,20 @@
+import s from './LayoutCheckout.module.scss'
+
+interface Props {
+    children?: any,
+}
+
+const LayoutCheckout = ({ children }: Props) => {
+    return (
+        <div className={s.layoutCheckout}>
+            <main>{children}</main>
+            <footer className={s.footer}>
+                <div>
+                    © 2021 Online Grocery
+                </div>
+            </footer>
+        </div>
+    )
+}
+
+export default LayoutCheckout

src/components/common/index.ts

@@ -47,3 +47,4 @@ export { default as StaticImage} from './StaticImage/StaticImage'
 export { default as EmptyCommon} from './EmptyCommon/EmptyCommon'
 export { default as CustomShapeSvg} from './CustomShapeSvg/CustomShapeSvg'
 export { default as RecommendedRecipes} from './RecommendedRecipes/RecommendedRecipes'
+export { default as LayoutCheckout} from './LayoutCheckout/LayoutCheckout'

src/components/modules/checkout/CheckoutBill/CheckoutBill.module.scss

@@ -3,7 +3,7 @@
   min-width: 100%;
   @screen lg {
     max-width: 56.3rem;
-    @apply flex justify-between flex-col border-l-2 border-solid border-line;
+    @apply flex justify-between flex-col;
   }
   .title {
     display: none;

src/components/modules/checkout/CheckoutInfo/CheckoutInfo.module.scss

@@ -1,11 +1,13 @@
 .warpper{
     @apply w-full;
     padding: 3.2rem;
+    @screen lg {
+        padding-right: 8.8rem;
+    }
     .title{
         margin-bottom: 3.2rem;
         @apply flex justify-between items-center;
         .viewCart{
-            margin-right: 5.6rem;
             @apply text-primary font-bold;
             display: block;
             cursor: pointer;

src/components/modules/checkout/CheckoutInfo/components/CustomerInfoForm/CustomerInfoForm.module.scss

@@ -2,7 +2,10 @@
 .warpper{
     @apply u-form;
     @screen md {
-        padding: 0 5.6rem;
+        padding-left: 5.6rem;
+        .button {
+            min-width: 22rem;
+        }
     }
     .bottom{
         margin-top: 2.4rem;

src/components/modules/checkout/CheckoutPage/CheckoutPage.module.scss

@@ -1,7 +1,7 @@
 @import "../../../../styles/utilities";
 .warrper{
-    @apply flex;
+    @apply flex w-full h-full absolute;
-    .right{
+    .right {
         display: none;
         @screen lg {
             display: block;
@@ -11,10 +11,10 @@
             min-width: 56.3rem;
         }
     }
-    .left{  
+    .left {  
-        @apply w-full;
+        @apply w-full border-r-2 border-solid border-line;
     }
-    .mobile{
+    .mobile {
         @apply hidden;
         &.isShow{
             @apply block;
@@ -22,7 +22,7 @@
                 @apply hidden;
             }
         }
-        .modal{
+        .modal {
             background: rgba(0, 0, 0, 0.5);
             position: fixed;
             left: 0;