From 5f8b49de7cca6546970bf70c293b25338cc6be33 Mon Sep 17 00:00:00 2001
From: Sawan <sawankushwah457@gmail.com>
Date: Sun, 10 Nov 2024 15:48:05 +0530
Subject: [PATCH] fixes multiple ui issues through out the page

---
 hiring-portal/src/CSS/faqSection.module.css  |  10 +
 hiring-portal/src/CSS/herosection.module.css |   2 +-
 hiring-portal/src/CSS/jobpage.css            | 283 ++++++++++---------
 hiring-portal/src/Components/Jobpage.jsx     |  14 +-
 hiring-portal/src/Components/Navbar.jsx      |  79 ++----
 5 files changed, 193 insertions(+), 195 deletions(-)

diff --git a/hiring-portal/src/CSS/faqSection.module.css b/hiring-portal/src/CSS/faqSection.module.css
index 4f95731..f239519 100644
--- a/hiring-portal/src/CSS/faqSection.module.css
+++ b/hiring-portal/src/CSS/faqSection.module.css
@@ -90,4 +90,14 @@
     max-height: 500px;
     opacity: 1;
     padding-top: 10px;
+}
+
+@media (max-width: 768px) {
+    .faqContainer {
+        width: 100%;
+    }
+
+    .faqSection {
+        padding: 7px;
+    }
 }
\ No newline at end of file
diff --git a/hiring-portal/src/CSS/herosection.module.css b/hiring-portal/src/CSS/herosection.module.css
index 68c8fc3..7bb9c66 100644
--- a/hiring-portal/src/CSS/herosection.module.css
+++ b/hiring-portal/src/CSS/herosection.module.css
@@ -63,7 +63,7 @@
 .searchIcon,
 .locationIcon {
   position: absolute;
-  left: 200px;
+  left: 190px;
   color: #000000;
 }
 
diff --git a/hiring-portal/src/CSS/jobpage.css b/hiring-portal/src/CSS/jobpage.css
index de959a0..180c559 100644
--- a/hiring-portal/src/CSS/jobpage.css
+++ b/hiring-portal/src/CSS/jobpage.css
@@ -1,144 +1,151 @@
 .jobpage {
-    display: flex;
-    font-family: Arial, sans-serif;
-  }
-  
+  display: flex;
+  font-family: Arial, sans-serif;
+}
+
+.sidebar {
+  width: 300px;
+  padding: 20px;
+  background-color: #f8f9fa;
+  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
+  height: 100vh;
+  box-sizing: border-box;
+  overflow-y: auto;
+  /* border: 2px solid red; */
+}
+
+.sidebar-toggle {
+  display: none;
+}
+
+.Clear-btn {
+  background-color: rgb(234, 39, 39);
+  cursor: pointer;
+  color: #ddd;
+  padding: 8px;
+  font-weight: 600;
+  border-radius: 5px;
+
+}
+
+@media (max-width: 500px) {
   .sidebar {
-    width: 300px;
-    padding: 20px;
-    background-color: #f8f9fa;
-    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
-    height: 100vh;
-    box-sizing: border-box;
-    overflow-y: auto;
-    /* border: 2px solid red; */
+    /* display: none; */
+    transform: translateX(-100%);
+    position: absolute;
+    z-index: 10;
+    transition: all 0.3s ease-in-out;
   }
+
   .sidebar-toggle {
-    display: none;
-  }
-  .Clear-btn {
-    background-color: rgb(234, 39, 39);
-    cursor: pointer;
-    color: #ddd;
-    padding: 8px;
-    font-weight: 600;
-    border-radius: 5px;
-    
-  }
-  @media (max-width: 500px) {
-    .sidebar {
-      /* display: none; */
-      transform: translateX(-100%);
-      position: absolute;
-      z-index: 10;
-      transition: all 0.3s ease-in-out;
-    }
-    .sidebar-toggle {
-      letter-spacing: 3px;
-  
-      display: flex;
-      justify-content: center;
-      /* border: 2px solid green; */
-    }
-  }
-  
-  .sidebar h2 {
-    margin-bottom: 20px;
-    font-size: 1.5em;
-    color: #333;
-    border-bottom: 1px solid #ddd;
-    padding-bottom: 10px;
-  }
-  
-  .filter {
-    margin-bottom: 20px;
-  }
-  
-  .filter label {
-    font-size: 1em;
-    color: #555;
-    display: block;
-    margin-bottom: 10px;
-  }
-  
-  .filter input[type="checkbox"],
-  .filter input[type="radio"] {
-    margin-right: 10px;
-  }
-  
-  .salary-range {
+    letter-spacing: 3px;
     display: flex;
-    justify-content: space-between;
-  }
-  
-  .salary-range input {
-    width: 48%;
-    padding: 5px;
-    font-size: 1em;
-    box-sizing: border-box;
-    border: 1px solid #ccc;
-    border-radius: 5px;
-  }
-  
-  <<<<<<< main
-  .filter input[type="text"] {
-      width: 100%;
-      padding: 10px;
-      font-size: 14px;
-      border: 1px solid #ccc;
-      border-radius: 4px;
-      transition: border-color 0.3s ease-in-out;
-  }
-  
-  .filter input[type="text"]:focus {
-      border-color: #007bff;
-      outline: none;
-  }
-  
-  .filter input[type="text"]::placeholder {
-      color: #aaa;
-  }
-  .filter select {
-    width: 100%;
-    padding: 8px;
-    margin-top: 5px;
-    font-size: 1em;
-    box-sizing: border-box;
-    border: 1px solid #ccc;
-    border-radius: 5px;
-  }
-  
-  .filter select[multiple] {
-    height: auto;
-  }
-  
-  .location-select {
-    width: 100%;
-    margin-top: 5px;
-    font-size: 1em;
-  }
-  
-  .selected-locations {
-    margin-top: 10px;
-    font-size: 0.9em;
-    color: #333;
-  }
-  
-  .selected-locations span {
-    display: inline-block;
-    margin-right: 5px;
- 
-  }
-  
-  .mainarea {
-    flex: 1;
-    padding: 20px;
-    box-sizing: border-box;
-  }
-  
-  .mainarea h1 {
-    font-size: 2em;
-    margin-bottom: 20px;
-    color: #333;
+    justify-content: center;
+    position: absolute;
+    top: 61px;
+    right: 144px;
+    z-index: 60;
+    font-size: 40px;
+    cursor: pointer;
   }
-  
+}
+
+.sidebar h2 {
+  margin-bottom: 20px;
+  font-size: 1.5em;
+  color: #333;
+  border-bottom: 1px solid #ddd;
+  padding-bottom: 10px;
+}
+
+.filter {
+  margin-bottom: 20px;
+}
+
+.filter label {
+  font-size: 1em;
+  color: #555;
+  display: block;
+  margin-bottom: 10px;
+}
+
+.filter input[type="checkbox"],
+.filter input[type="radio"] {
+  margin-right: 10px;
+}
+
+.salary-range {
+  display: flex;
+  justify-content: space-between;
+}
+
+.salary-range input {
+  width: 48%;
+  padding: 5px;
+  font-size: 1em;
+  box-sizing: border-box;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+}
+
+<<<<<<< main .filter input[type="text"] {
+  width: 100%;
+  padding: 10px;
+  font-size: 14px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  transition: border-color 0.3s ease-in-out;
+}
+
+.filter input[type="text"]:focus {
+  border-color: #007bff;
+  outline: none;
+}
+
+.filter input[type="text"]::placeholder {
+  color: #aaa;
+}
+
+.filter select {
+  width: 100%;
+  padding: 8px;
+  margin-top: 5px;
+  font-size: 1em;
+  box-sizing: border-box;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+}
+
+.filter select[multiple] {
+  height: auto;
+}
+
+.location-select {
+  width: 100%;
+  margin-top: 5px;
+  font-size: 1em;
+}
+
+.selected-locations {
+  margin-top: 10px;
+  font-size: 0.9em;
+  color: #333;
+}
+
+.selected-locations span {
+  display: inline-block;
+  margin-right: 5px;
+
+}
+
+.mainarea {
+  flex: 1;
+  padding: 20px;
+  box-sizing: border-box;
+}
+
+.mainarea h1 {
+  font-size: 2em;
+  margin-bottom: 20px;
+  color: #333;
+}
\ No newline at end of file
diff --git a/hiring-portal/src/Components/Jobpage.jsx b/hiring-portal/src/Components/Jobpage.jsx
index b4b6ec8..f9a75b0 100644
--- a/hiring-portal/src/Components/Jobpage.jsx
+++ b/hiring-portal/src/Components/Jobpage.jsx
@@ -49,11 +49,11 @@ const Jobpage = () => {
         <>
             <Navbar />
             {/* sidebar mobile toggle */}
-            <div className="sidebar-toggle" onClick={toggleSidebar}>
-                {isSidebar ? "x" : "Filters"}
-            </div>
             {/*  */}
             <div className="jobpage">
+                <div className="sidebar-toggle" onClick={toggleSidebar}>
+                    {isSidebar ? "x" : "Filters"}
+                </div>
                 <div className="sidebar"
                     style={{ transform: isSidebar ? "translateX(0%)" : "translateX(-100%" }}
                 >
@@ -87,8 +87,8 @@ const Jobpage = () => {
                             <input type="radio" name="remoteOption" value="false" onChange={handleFilterChange} /> On-site
                         </label>
                     </div>
-                     <div className="filter">
- 
+                    <div className="filter">
+
                         <label>
                             Industry:
                             <input
@@ -100,8 +100,8 @@ const Jobpage = () => {
                             />
                         </label>
                     </div>
-                     <div className="filter">
- 
+                    <div className="filter">
+
                         <label>
                             Work Location:
                             <input
diff --git a/hiring-portal/src/Components/Navbar.jsx b/hiring-portal/src/Components/Navbar.jsx
index 81991bc..62f7259 100644
--- a/hiring-portal/src/Components/Navbar.jsx
+++ b/hiring-portal/src/Components/Navbar.jsx
@@ -133,9 +133,6 @@ const Navbar = () => {
                 <span>Contact Us</span>
               </Link>
             </div>
-
-            
-
             <div
               className={`${styles.icon} ${activeTab === "/blog" ? styles.active : ""
                 }`}
@@ -146,52 +143,36 @@ const Navbar = () => {
               </Link>
             </div>
 
-            
-                {/* Explore dropdown menu */}
-      <div className={styles.dropdown}>
-        <div className={styles.icon}>
-          <span>Explore</span>
-        </div>
-        <div className={styles.dropdownContent}>
-          <div
-            className={`${styles.icon} ${activeTab === "/jobcard" ? styles.active : ""}`}
-          >
-            <Link to="/jobcard">
-              <WorkIcon />
-              <span>Jobs</span>
-            </Link>
-          </div> 
-          <div
-              className={`${styles.icon} ${activeTab === "/resume-analyzer" ? styles.active : ""
-                }`}
-            >
-              <Link to="/resume-analyzer">
-                <Dock />
-                <span>Scan Resume</span>
-              </Link>
-            </div>
-            <div
-              className={`${styles.icon} ${activeTab === "/resume-screening" ? styles.active : ""
-                }`}
-            >
-              <Link
-                to="/resume-screening"
-                onClick={() => setActiveTab("/resume-analyzer")}
-              >
-                <Dock />
-                <span >Resume Screening</span>
-              </Link>
+
+            {/* Explore dropdown menu */}
+            <div className={styles.dropdown}>
+              <div className={styles.icon}>
+                <span>Explore</span>
+              </div>
+              <div className={styles.dropdownContent}>
+                <div
+                  className={`${styles.icon} ${activeTab === "/resume-analyzer" ? styles.active : ""
+                    }`}
+                >
+                  <Link to="/resume-analyzer">
+                    <Dock />
+                    <span>Scan Resume</span>
+                  </Link>
+                </div>
+                <div
+                  className={`${styles.icon} ${activeTab === "/resume-screening" ? styles.active : ""
+                    }`}
+                >
+                  <Link
+                    to="/resume-screening"
+                    onClick={() => setActiveTab("/resume-analyzer")}
+                  >
+                    <Dock />
+                    <span >Resume Screening</span>
+                  </Link>
+                </div>
+              </div>
             </div>
-          <div
-            className={`${styles.icon} ${activeTab === "/contactus" ? styles.active : ""}`}
-          >
-            <Link to="/contactus">
-              <ContactMailIcon />
-              <span>Contact Us</span>
-            </Link>
-          </div>
-        </div>
-      </div>
 
             <div
               className={`${styles.icon} ${activeTab === "/profile" ? styles.active : ""
@@ -213,7 +194,7 @@ const Navbar = () => {
               <span>Employer/Post Job</span>
               <LaunchIcon className={styles.postingIcon} />
             </div>
-            
+
           </>
         )}
       </div>