🎨 styles: modal create user info

:%s

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/>
     </>
   )
 }

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;

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} />

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}>

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;

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;
+            }
+        }
+    }
+}

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;

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'

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;
+                    }
+                }
+            }
+        }
+    }
 }