fix: fix

zvoosh · Mar 10, 2024 · 739d3eb · 739d3eb
1 parent b085d0c
commit 739d3eb
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 10 deletions.
diff --git a/src/components/chooser/ChoosingPage.jsx b/src/components/chooser/ChoosingPage.jsx
@@ -4,6 +4,12 @@ import { Chooser } from "./Chooser";
 import { useRef, useState } from "react";
 import emailjs from '@emailjs/browser';
 import { IoMdMenu } from "react-icons/io";
+import { FaHome } from "react-icons/fa";
+import { PiPersonSimpleBold } from "react-icons/pi";
+import { LuPaintbrush2 } from "react-icons/lu";
+import { GiCeremonialMask } from "react-icons/gi";
+import { IoHammerOutline } from "react-icons/io5";
+import { TfiEmail } from "react-icons/tfi";
 
 const ChoosingPage = () => {
     const navigate = useNavigate();
@@ -72,33 +78,33 @@ const ChoosingPage = () => {
                                     <div  className={`head-nav-link  ${location.pathname == '/first-page' &&  'active-link'}`}  onClick={() => {
                                         handleNavigation('/first-page')
                                     }}>
-                                    <div className="mr-1">Home</div>
+                                    <div className="mr-1"><FaHome style={{marginRight:'1rem'}}/>Home</div>
                                     </div>
                                     <div  className={`head-nav-link ${location.pathname == '/first-page/people' &&  'active-link'}`}  onClick={() => {
                                         handleNavigation('/first-page/people')
                                     }}>
-                                    <div className="mr-1">People</div>
+                                    <div className="mr-1"> <PiPersonSimpleBold style={{marginRight:'1rem'}}/> People</div>
                                     </div>
                                     <div  className={`head-nav-link ${location.pathname == '/first-page/painting' &&  'active-link'}`}  onClick={() => {
                                         handleNavigation('/first-page/painting')
                                     }}>
-                                    <div className="mr-1">Paintings</div>
+                                    <div className="mr-1"><LuPaintbrush2  style={{marginRight:'1rem'}}/>Paintings</div>
                                     </div>
                                     <div  className={`head-nav-link ${location.pathname == '/first-page/folklore' &&  'active-link'}`}  onClick={() => {
                                         handleNavigation('/first-page/folklore')
                                     }}>
-                                    <div className="mr-1">Folklore</div>
+                                    <div className="mr-1"><GiCeremonialMask style={{marginRight:'1rem'}}/> Folklore</div>
                                     </div>
                                     <div  className={`head-nav-link ${location.pathname == '/first-page/craftmenship' &&  'active-link'}`}  onClick={() => {
                                         handleNavigation('/first-page/craftmenship')
                                     }}>
-                                    <div className="mr-1">Craftmenship</div>
+                                    <div className="mr-1"><IoHammerOutline style={{marginRight:'1rem'}} />Craftmenship</div>
                                     </div>
                                     </div>
                                     <div className=" mr-1 flex justify-end align-end">
                                     <div  className='head-nav-link' onClick={()=>{
                                     isOpenModal((prev)=>!prev)
-                                }}>Contact</div>
+                                }}><TfiEmail style={{marginRight:'1rem'}} />Contact</div>
                                 </div>
                             </div>
                             )}
@@ -154,23 +160,23 @@ const ChoosingPage = () => {
                     <label>Name:</label>
                         </Col>
                         <Col span={16}>
-                    <input type="text" name="user_name" className="input-style" autoComplete={false} id="inputTY"/>
+                    <input type="text" name="user_name" className="input-style" autoComplete={false} id="inputTY" required />
                         </Col>
                     </Row>
                     <Row  className="p-1">
                         <Col span={6}>
                     <label>Email:</label>
                         </Col>
                         <Col span={16}>
-                    <input type="email" name="user_email" className="input-style"  autoComplete={false}/>
+                    <input type="email" name="user_email" className="input-style"  autoComplete={false} required />
                         </Col>
                     </Row>
                     <Row  className="p-1">
                         <Col span={6}>
                     <label>Message:</label>
                         </Col>
                         <Col span={16}>
-                    <textarea name="message" rows={5} className="w-100"  autoComplete={false}/>
+                    <textarea name="message" rows={5} className="w-100"  autoComplete={false} required />
                         </Col>
                     </Row>
                     <Row justify={"end"}>

diff --git a/src/main.jsx b/src/main.jsx
@@ -6,7 +6,6 @@ import { HashRouter  } from 'react-router-dom'
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
-    {/*  basename='/Chinese-Cultural-Evolution/' */}
     <HashRouter>
       <App />
     </HashRouter >

diff --git a/src/styling/choosing.scss b/src/styling/choosing.scss
@@ -992,4 +992,20 @@ textarea:hover{
 
 }
 
+}
+
+/* Style for the validation message */
+input:invalid,
+textarea:invalid {
+    border-color: red; /* Change border color to red for invalid fields */
+}
+
+/* Style for the validation message text */
+input:invalid + span::after,
+textarea:invalid + span::after {
+    content: "This field is required"; /* Custom error message */
+    color: red; /* Set text color to red */
+    display: block; /* Display the message */
+    font-size: 0.8rem; /* Adjust font size */
+    margin-top: 0.2rem; /* Adjust spacing */
 }