From 96b7980220223c80358941da8777e3b7800066df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?nguy=E1=BB=85n=20th=C3=A1i=20nh=C3=A2n?=
 <ntnhan90@gmail.com>
Date: Wed, 8 Nov 2023 15:35:03 +0700
Subject: [PATCH] =?UTF-8?q?update=20css=20when=20scroll=20"T=E1=BA=A3i=20A?=
 =?UTF-8?q?pp"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/css/style.css                 | 26 ++++++--------------
 components/LoginSteps/Additional.tsx | 36 +++++++++++++++++-----------
 components/header/index.tsx          |  2 +-
 3 files changed, 30 insertions(+), 34 deletions(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index 3e0e980..85de327 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -1199,14 +1199,6 @@ a:hover{
 }
 .input7 {
     align-self: stretch;
-    border-radius: var(--br-5xs);
-    background-color: var(--full-white);
-    box-shadow: var(--shadow-xs);
-    /* border: 1px solid var(--gray-300); */
-    overflow: hidden;
-    align-items: flex-start;
-    font-size: var(--text-md-regular-size);
-    color: var(--gray-500);
 }
 .input7, .text-input1 {
     display: flex;
@@ -1273,14 +1265,7 @@ a:hover{
     font-size: var(--text-sm-semibold-size);
     color: var(--gray-7001);
 }
-.input7 {
-    flex-direction: row;
-    align-items: center;
-    gap: var(--gap-5xs);
-    text-align: center;
-    font-size: var(--display-lg-medium-size);
-    color: var(--gray-300);
-}
+
 .mega-input-field-base, .mega-input-field-base1 {
     border-radius: var(--br-5xs);
     background-color: var(--full-white);
@@ -1556,13 +1541,15 @@ a:hover{
     overflow: hidden;
     flex-direction: row;
     align-items: center;
-    padding: var(--padding-3xs) var(--padding-sm);
+    
     gap: var(--gap-5xs);
     color: var(--gray-500);
     font-size: var(--text-md-regular-size);
     text-align: left;
 }
-
+.phone_verification .input7 input{
+    padding: var(--padding-3xs) var(--padding-sm);
+}
 .content28 {
     flex: 1;
     flex-direction: row;
@@ -1964,4 +1951,5 @@ input[type=number] {
     mix-blend-mode: multiply;
     background-color: var(--gray-200);
 }
-.button56:hover, .button56:hover label{cursor: pointer;}
\ No newline at end of file
+.button56:hover, .button56:hover label{cursor: pointer;}
+label.text-red{ color: red }
\ No newline at end of file
diff --git a/components/LoginSteps/Additional.tsx b/components/LoginSteps/Additional.tsx
index ace6e9d..2ab5fa1 100644
--- a/components/LoginSteps/Additional.tsx
+++ b/components/LoginSteps/Additional.tsx
@@ -72,15 +72,16 @@ const Additional = ({onChange,setHeight,setWeight,setKcal}: StepType) => {
                         <div className="user-info">
                             <div className="ten">
                                 <div className="input-with-label6">
-                                    <div className="text73">Tên</div>
+                                    <div className="text73">
+                                        Tên
+                                        <label className="text-red ms-2"> (*)</label>
+                                    </div>
                                     <div className="input7 ">
-                                        <div className="content28 ">
-                                            <input placeholder="Ví dụ: nguyen.vana" type="text"
+                                        <input placeholder="Ví dụ: nguyen.vana" type="text"
                                                 className="text-input1 border-none no-outline no-padding w-100" name="name"
                                                 ref={register( { required: true ,
                                                 })}
                                             />
-                                        </div>
                                     </div>
                                 </div>
                                 {errors.name && errors.name.type === 'required' && 
@@ -90,7 +91,10 @@ const Additional = ({onChange,setHeight,setWeight,setKcal}: StepType) => {
                            
                             <div className="ten">
                                 <div className="input-with-label6">
-                                    <div className="text73">Email</div>
+                                    <div className="text73">
+                                        Email
+                                        <label className="text-red ms-2"> (*)</label>
+                                    </div>
                                     <div className="input7">
                                         <div className="content28">
                                             <input placeholder="Ví dụ: nguyen.vana@email.com" type="text"
@@ -113,7 +117,9 @@ const Additional = ({onChange,setHeight,setWeight,setKcal}: StepType) => {
 
                             <div className="ten">
                                 <div className="input-with-label6">
-                                    <div className="text73">Ngày sinh</div>
+                                    <div className="text73">
+                                        Ngày sinh
+                                    </div>
                                     <div className="input7">
                                         <div className="content28">
                                             <div className="text80 font-size16">
@@ -172,6 +178,10 @@ const Additional = ({onChange,setHeight,setWeight,setKcal}: StepType) => {
                                             className="text-input1 border-none no-outline no-padding w-100 input7" name="canNang"
                                             ref={register( { 
                                                 required: true ,
+                                                pattern: {
+                                                    value: /^[0-9]/,
+                                                    message: "invalid "
+                                                }
                                             })}
                                         />
                                     </div>
@@ -350,23 +360,21 @@ const Additional = ({onChange,setHeight,setWeight,setKcal}: StepType) => {
                                         </div>
                                         <div className="text-and-supporting-text3">
                                             <div className="text78">Chế độ ăn hỗn hợp</div>
-                                            <div className="supporting-text54">
-                                            Save my login details for next time.
-                                            </div>
+                                           
                                         </div>
                                     </div>
                                     <div className="radio-check3">
+                                        <div className="input10">
+                                            <input type="radio" name="che_do_an" className="checkbox-base1" value="4" />
+                                        </div>
                                         <div className="text-and-supporting-text3">
-                                            <div className="text78">Khác</div>
-                                            <div className="supporting-text54">
-                                                Save my login details for next time.
-                                            </div>
+                                            <div className="text78">Khác </div>
+                                            
                                         </div>
                                     </div>
                                     <input placeholder="Vui lòng điền tên chế độ ăn mong muốn" type="text"
                                         className="text-input1 border-none no-outline no-padding w-100 input7"
                                         name="allergy"
-                                       
                                     />
                                 </div>
                             </div>
diff --git a/components/header/index.tsx b/components/header/index.tsx
index b576790..e3b1672 100644
--- a/components/header/index.tsx
+++ b/components/header/index.tsx
@@ -58,7 +58,7 @@ const Header = ({ isErrorPage }: HeaderType) => {
                                     </Link>
                                 </div>
                                 <div className="navigation-button">
-                                    <Link href="http://localhost:3001/#download-section1">
+                                    <Link href="http://localhost:3001/#send-message-button">
                                         <a className="text fw-bolder">Tải App</a>
                                     </Link>
                                 </div>