update css when scroll "Tải App"

n-festa · Nov 8, 2023 · 96b7980 · 96b7980
1 parent 70d89fe
commit 96b7980
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 34 deletions.
diff --git 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;}
+.button56:hover, .button56:hover label{cursor: pointer;}
+label.text-red{ color: red }
diff --git 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ụ: [email protected]" 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
@@ -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>