From 37197743ce78935d77a73dc7eaab9f49ed131c7f Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Mon, 30 Aug 2021 11:10:23 +0700
Subject: [PATCH] :art: styles: modal create user info

:%s
---
 pages/index.tsx                               |  4 +-
 .../components/FormAuthen.module.scss         | 13 ++----
 .../components/FormLogin/FormLogin.tsx        |  5 +--
 .../components/FormRegister/FormRegister.tsx  |  1 -
 .../ModalCommon/ModalCommon.module.scss       |  2 +-
 .../ModalCreateUserInfo.module.scss           | 19 +++++++++
 .../ModalCreateUserInfo.tsx                   | 40 +++++++++++++++++++
 src/components/common/index.ts                |  1 +
 src/styles/_utilities.scss                    | 20 +++++++++-
 9 files changed, 88 insertions(+), 17 deletions(-)
 create mode 100644 src/components/common/ModalCreateUserInfo/ModalCreateUserInfo.module.scss
 create mode 100644 src/components/common/ModalCreateUserInfo/ModalCreateUserInfo.tsx

diff --git a/pages/index.tsx b/pages/index.tsx
index 1d3072ef7..95af77b83 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,5 +1,5 @@
 
-import { Layout } from 'src/components/common'
+import { Layout, ModalCreateUserInfo } from 'src/components/common'
 import { HomeBanner, HomeCollection, HomeCTA, HomeSubscribe, HomeVideo, HomeCategories, HomeFeature, HomeRecipe } from 'src/components/modules/home';
 
 export default function Home() {
@@ -13,6 +13,8 @@ export default function Home() {
       <HomeCTA />
       <HomeRecipe />
       <HomeSubscribe />
+
+      <ModalCreateUserInfo/>
     </>
   )
 }
diff --git a/src/components/common/ModalAuthenticate/components/FormAuthen.module.scss b/src/components/common/ModalAuthenticate/components/FormAuthen.module.scss
index bdfc69387..2ec8bf91f 100644
--- a/src/components/common/ModalAuthenticate/components/FormAuthen.module.scss
+++ b/src/components/common/ModalAuthenticate/components/FormAuthen.module.scss
@@ -1,17 +1,12 @@
+@import '../../../../styles/utilities';
+
 .formAuthen {
-    @apply bg-white w-full;
+    @apply bg-white w-full u-form;
     .inner {
         @screen md {
-            max-width: 52rem;
+            width: 60rem;
             margin: auto;
         }
-        .body {
-            > div {
-                &:not(:last-child) {
-                    margin-bottom: 1.6rem;
-                }
-            }
-        }
         .others {
             @apply font-bold text-center;
             margin-top: 4rem;
diff --git a/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx b/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx
index 7ef3ec9ba..de553a6aa 100644
--- a/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx
+++ b/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx
@@ -23,10 +23,7 @@ const FormLogin = ({ onSwitch, isHide }: Props) => {
     }, [isHide])
 
     return (
-        <section className={classNames({
-            [s.formAuthen]: true,
-            // [styles.hide]: isHide
-        })}>
+        <section className={s.formAuthen}>
             <div className={s.inner}>
                 <div className={s.body}>
                     <Inputcommon placeholder='Email Address' type='email' ref={emailRef} />
diff --git a/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.tsx b/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.tsx
index 1624f2c1c..40d4ef355 100644
--- a/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.tsx
+++ b/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.tsx
@@ -24,7 +24,6 @@ const FormRegister = ({ onSwitch, isHide }: Props) => {
         <section className={classNames({
             [s.formAuthen]: true,
             [styles.formRegister]: true,
-            // [styles.hide]: isHide
         })}>
             <div className={s.inner}>
                 <div className={s.body}>
diff --git a/src/components/common/ModalCommon/ModalCommon.module.scss b/src/components/common/ModalCommon/ModalCommon.module.scss
index d4967b04e..d1434ed21 100644
--- a/src/components/common/ModalCommon/ModalCommon.module.scss
+++ b/src/components/common/ModalCommon/ModalCommon.module.scss
@@ -8,7 +8,7 @@
         @apply flex justify-center items-center  min-h-screen;
         .modal{
             @apply inline-block align-bottom bg-white relative;
-            max-width: 60rem;
+            max-width: 66.4rem;
             padding: 3.2rem;
             box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.24);
             border-radius: 1.2rem;
diff --git a/src/components/common/ModalCreateUserInfo/ModalCreateUserInfo.module.scss b/src/components/common/ModalCreateUserInfo/ModalCreateUserInfo.module.scss
new file mode 100644
index 000000000..199028061
--- /dev/null
+++ b/src/components/common/ModalCreateUserInfo/ModalCreateUserInfo.module.scss
@@ -0,0 +1,19 @@
+@import "../../../styles/utilities";
+
+.formUserInfo {
+    @apply u-form;
+    .inner {
+        @screen md {
+            width: 60rem;
+            margin: auto;
+        }
+        .bottom {
+            @apply grid grid-cols-2;
+            margin-top: 4rem;
+            grid-gap: 1.6rem;
+            > button {
+                @apply w-full;
+            }
+        }
+    }
+}
diff --git a/src/components/common/ModalCreateUserInfo/ModalCreateUserInfo.tsx b/src/components/common/ModalCreateUserInfo/ModalCreateUserInfo.tsx
new file mode 100644
index 000000000..f6c3d7a6f
--- /dev/null
+++ b/src/components/common/ModalCreateUserInfo/ModalCreateUserInfo.tsx
@@ -0,0 +1,40 @@
+import classNames from 'classnames';
+import Link from 'next/link';
+import React, { useRef } from 'react';
+import { useModalCommon } from 'src/components/hooks/useModalCommon';
+import { CustomInputCommon } from 'src/utils/type.utils';
+import { Inputcommon } from '..';
+import ButtonCommon from '../ButtonCommon/ButtonCommon';
+import ModalCommon from '../ModalCommon/ModalCommon';
+import s from './ModalCreateUserInfo.module.scss';
+
+
+const ModalCreateUserInfo = () => {
+    const { visible, closeModal } = useModalCommon({ initialValue: true })
+    const firstInputRef = useRef<CustomInputCommon>(null)
+
+    return (
+        <ModalCommon visible={visible} onClose={closeModal} title='Enter your Information'>
+            <div className={s.formUserInfo}>
+                <div className={s.inner}>
+                    <div className={s.body}>
+                        <Inputcommon placeholder='Street Address' ref={firstInputRef} />
+                        <Inputcommon placeholder='City' />
+                        <div className={s.line}>
+                            <Inputcommon placeholder='State' />
+                            <Inputcommon placeholder='Zip code' />
+                        </div>
+                        <Inputcommon placeholder='Phone (delivery contact)' />
+                    </div>
+                    <div className={s.bottom}>
+                        <ButtonCommon size='large' onClick={closeModal} type='light'>Skip</ButtonCommon>
+                        <ButtonCommon size='large'>Submit</ButtonCommon>
+
+                    </div>
+                </div>
+            </div>
+        </ModalCommon>
+    );
+}
+
+export default ModalCreateUserInfo;
\ No newline at end of file
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index dc0288966..86b242fb9 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -28,3 +28,4 @@ export { default as NotiMessage} from './NotiMessage/NotiMessage'
 export { default as VideoPlayer} from './VideoPlayer/VideoPlayer'
 export { default as SelectCommon} from './SelectCommon/SelectCommon'
 export { default as ModalCommon} from './ModalCommon/ModalCommon'
+export { default as ModalCreateUserInfo} from './ModalCreateUserInfo/ModalCreateUserInfo'
diff --git a/src/styles/_utilities.scss b/src/styles/_utilities.scss
index 93291dc3a..26cea17c0 100644
--- a/src/styles/_utilities.scss
+++ b/src/styles/_utilities.scss
@@ -80,7 +80,7 @@
         font-size: 10px;
         line-height: 16px;
     }
-    
+
     .spacing-horizontal {
         padding-left: 2rem;
         padding-right: 2rem;
@@ -119,4 +119,22 @@
     .font-logo {
         font-family: var(--font-logo);
     }
+
+    .u-form {
+        .body {
+            > div {
+                &:not(:last-child) {
+                    margin-bottom: 1.6rem;
+                }
+            }
+            .line {
+                @apply flex justify-between items-center;
+                > div {
+                    &:not(:last-child) {
+                        margin-right: 1.6rem;
+                    }
+                }
+            }
+        }
+    }
 }