abc

src/Layout/Layout.css

@@ -52,10 +52,10 @@
 }
 @media(max-width:900px) {
   .h1{
-    font-size: 3.5vw;
+    font-size: 1.5vw;
   }
   .App-logo{
-    width: 5vh;
+    width: 1.4vh;
   }
   .nav-item{
     width: 13.5vw;
@@ -71,9 +71,7 @@
 
 }
 @media(max-width:700px) {
-  .h1{
-    font-size: 3.1vw;
-  }
+
   #logoof{
     width: 5vh;
   }
@@ -91,7 +89,9 @@
   #trynow{
     width: 11vw;
   }
-
+  h1{
+    font-size: 2.8vw;
+  }
 }
 
 .nav-link {

src/Layout/Layout2.css

@@ -1,74 +1,76 @@
-/* You can adjust these styles based on your design preferences */
-
-
+/* Base styles */
 .navbar {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 1vw 2vw;
     background-color: #000;
-    margin:0;
+    margin: 0;
     /* Adjust padding as needed */
 }
-#experti{
-    border:1px solid #16a34a;
-                            background-color:#052e16;
-                            padding:2vh;
-                            border-radius:15px;
-                            font-size:3.5vh;
-                            margin-top:1.6vh;
-                            height:9vh;
-}
-#experti:hover{
-    border-radius: 15px;
-    border: 1.5px solid #16a34a;
-}
 .left-section {
     display: flex;
-    align-items: space-around;
-}
-.emoji{
-    font-size: 155%;
+    align-items: center;
 }
+
 .right-section {
     display: flex;
     align-items: center;
 }
 
+#experti {
+    border: 1px solid #16a34a;
+    background-color: #052e16;
+    padding: 2vh;
+    border-radius: 15px;
+    font-size: 3.5vh;
+    margin-top: 1.6vh;
+    height: 9vh;
+}
+
+#experti:hover {
+    border-radius: 15px;
+    border: 1.5px solid #16a34a;
+}
+
 .App-logo {
     width: 7vh;
-    /* Adjust the width as needed */
     height: auto;
-    /* Maintain aspect ratio */
     margin-right: 1vw;
-    /* Adjust margin as needed */
 }
 
 h1 {
     margin: 0;
-    /* Remove default margin for h1 */
     color: white;
     font-size: 2vw;
     font-weight: 500;
 }
 
-#night{
-    width: 4vw;
-    text-align: center;
-    border: none;
-    background-color: transparent;
-    box-shadow: none;
-    font-size: 1.5rem;
-    border-radius: 100%;
-    margin:1vw;
+.emoji {
+    font-size: 155%;
 }
-#day{
+
+#night, #day {
     width: 4vw;
     text-align: center;
     border: none;
     background-color: transparent;
     box-shadow: none;
     font-size: 1.5rem;
     border-radius: 100%;
-    margin:1vw;
-}
+    margin: 1vw;
+}
+
+/* Media query for screens up to 800px width */
+@media (max-width: 800px) {
+    /* Change navbar layout to column */
+
+    .navbar{
+        padding: 0;
+    }
+
+    /* Adjust logo size for mobile */
+
+
+
+}

src/Layout/Layout2.js

@@ -93,8 +93,10 @@ const Layout2 = () => {
 
                         }}  type='button' id='experti' onClick={()=>{
                             navigate('/becomeanexpert?userid='+userid+'');
+                        }}   onMouseEnter={()=>{
+                            document.getElementById('experti').innerHTML = 'Become an Expert';
                         }}>
-                            Become An Expert
+                            Expert
                         </button>
                         <button id='day'  type='button' onClick={themeChange2} hidden>
                             &#127769;

src/Pages/Auth/Singup.js

@@ -74,34 +74,45 @@ function Signup(){
 
 
   return (
-    <div className='whole'>
+    <div className='whole' style={{
+      padding:"1vh"
+    }}>
     <div className="signup-container">
       <form className="signup-form">
-        <h2>Sign Up</h2>
+        <h2  style={{
+            textAlign:'center',
+            fontSize:'5vh'
+          }}>Sign Up</h2>
         <label htmlFor="username">Username:</label>
         <input type="text" id="username" name="username" 
           value={username}
           onChange={(e) => setUsername(e.target.value)}
+          className='formlogininput'
           required />
 
         <label htmlFor="email">Email:</label>
         <input type="email" id="email" name="email"
           value={email}
           onChange={(e) => setEmail(e.target.value)}
+          className='formlogininput'
           required />
 
         <label htmlFor="password">Password:</label>
         <input type="password" id="password" name="password"
           value={password}
           onChange={(e) => setPassword(e.target.value)}
-          required />
+          className='formlogininput'
+          required style={{
+            color:"black"
+          }}/>
 
         <label htmlFor="confirmPassword" id='confirmPassword'>Confirm Password:</label>
         <input type="password" name="confirmPassword" 
           value={passwordConfirm}
           onChange={(e) => setPasswordConfirm(e.target.value)}
+          className='formlogininput'
           required />
-        <button type="submit" onClick={handleFormSubmit}>Sign Up</button>
+        <button id='loginbutton' type="submit" onClick={handleFormSubmit}>Sign Up</button>
       </form>
     </div>
     </div>

src/Pages/Profile/Profile.js

@@ -64,6 +64,15 @@ function Profile() {
 
     fetchPostData();
   }, [userId]);
+  useEffect(() => {
+    // Set the document title when the component is mounted
+    document.title = 'Profile';
+
+    // Optionally reset the title when the component is unmounted
+    return () => {
+        document.title = 'The Conspiracy World';
+    };
+}, [userData]);
   function postClick(id){
     if(usertype === 'normal'){
         var str = '/post?postid=' + id + '&userid=' + userId;

src/Pages/Search/Search.js

@@ -27,7 +27,15 @@ function Search(){
   var searchterm = (queryParams.get('term') === null)?"":queryParams.get('term');
   const [postData, setPostData] = useState([]);
   const [names, getNames] = useState([])
+  useEffect(() => {
+    // Set the document title when the component is mounted
+    document.title = searchterm;
 
+    // Optionally reset the title when the component is unmounted
+    return () => {
+        document.title = 'The Conspiracy World';
+    };
+}, [searchterm]);
   useEffect(() => {
     const fetchPostData = async () => {
       try {
@@ -90,7 +98,7 @@ function Search(){
                         <img style={{
                             display:"inline",
                             marginRight:"1px"
-                        }} src="https://th.bing.com/th/id/R.6b0022312d41080436c52da571d5c697?rik=EBuuBNxzjeKhkQ&pid=ImgRaw&r=0" alt="Profile Picture" width={35}/>
+                        }} src="user.png" alt="Profile" width={35}/>
 <h2 style={{
                             color:"white",
                             textAlign:"left",

src/Pages/becomeAnExpert.js

@@ -4,6 +4,7 @@ import { initializeApp } from "firebase/app";
 import { getFirestore } from "firebase/firestore";
 import { collection, addDoc } from "firebase/firestore";
 import { useLocation } from "react-router-dom";
+import React, { useEffect, useState } from 'react';
 
 // TODO: Add SDKs for Firebase products that you want to use
 // https://firebase.google.com/docs/web/setup#available-libraries
@@ -31,7 +32,15 @@ function ExpertPage() {
         "Genetics", "Medicine"
     ];
     var selectedlist = [];
-
+    useEffect(() => {
+        // Set the document title when the component is mounted
+        document.title = 'Become an Expert';
+
+        // Optionally reset the title when the component is unmounted
+        return () => {
+            document.title = 'The Conspiracy World';
+        };
+    }, []);
     return (
         <>
             <div className='funtableselect'>