css changes

client/src/App.css

@@ -262,7 +262,7 @@ box-shadow: 0 0 5px 1px white;
   color: black !important;
   font-family: 'Roboto', sans-serif !important;
   text-transform:none !important;
-  margin: -3px auto !important;
+  margin: 6px auto !important;
 }
 .GoogleBtn:hover {
   background-color: #f0f0f0 !important;

client/src/Pages/ConsolidatedTable.jsx

@@ -26,7 +26,8 @@ const styles = {
   },
   button: {
     padding: "10px 20px",
-    borderRadius: "5px",
+    borderRadius: "52px",
+    gap: "15px",
     color: "white",
     border: "none",
     cursor: "pointer",
@@ -270,7 +271,7 @@ const ConsolidatedTable = () => {
                       onClick={() => createExcelFile(teacherData, teacher)}
                       style={{ ...styles.button, backgroundColor: "#007bff" }}
                     >
-                      Download {teacher}'s Table
+                      Download
                     </button>
                     <button
                       onClick={() => handleSendEmail(teacher, teacherData)}
@@ -279,7 +280,7 @@ const ConsolidatedTable = () => {
                         backgroundColor: "#6c757d",
                       }}
                     >
-                      Send {teacher}'s XSL via Email
+                      Send XSL via Email
                     </button>
                   </div>
                 </div>

client/src/Pages/CourseTable.css

@@ -7,6 +7,7 @@
     background-color: #f9f9f9;
     border-radius: 8px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    margin-top: 50px;
   }
   
   .course-table h2 {

client/src/Pages/CourseTable.jsx

@@ -2,7 +2,8 @@ import React, { useState, useEffect } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import "./CourseTable.css";
 import { fetchCourses, fetchAppointments } from "../api";
-import Navbar from "./Navbar";
+
+import FilterPage from "./FilterPage";
 
 const CourseTable = () => {
   const { state } = useLocation();
@@ -32,7 +33,6 @@ const CourseTable = () => {
   }, [state?.courses, state?.academicYear]);
 
   const getStatus = (courseId) => {
-    // Check if there's an appointment for the given courseId
     return appointments.some((appointment) => appointment.courseId === courseId)
       ? "Submitted"
       : "Not Submitted";
@@ -50,7 +50,9 @@ const CourseTable = () => {
 
   return (
     <>
-      <Navbar />
+     
+      {/* Pass setCourses to FilterPage so it can update the course list */}
+      <FilterPage setCourses={setCourses} />
       <table className="course-table">
         <thead>
           <tr>

client/src/Pages/Navbar.css

@@ -1,11 +1,12 @@
 .navbar {
   background-color: #800000; /* Maroon background */
-  height: 50px; /* Increased navbar height */
+ /* Increased navbar height */
+  padding: 25px ;
   width: 100%; /* Full width */
   display: flex; /* Use flexbox for layout */
   justify-content: space-between; /* Space between items */
   align-items: center; /* Align items vertically */
-  padding: 0 20px; /* Horizontal padding */
+  
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow */
   position: fixed; /* Fixed position */
   top: 0;
@@ -26,7 +27,7 @@ width: 100%;
 .user-icon {
   font-size: 30px; /* Size of user icon */
   color: #fff; /* Color of the icon */
-  margin-left: 20px; /* Space after the icon before the buttons */
+  margin-left: -70px; /* Space after the icon before the buttons */
   cursor: pointer; /* Cursor type */
   transition: color 0.3s ease-in-out; /* Transition for hover effect */
 }
@@ -37,7 +38,7 @@ width: 100%;
 
 .button-container {
   display: flex; /* Flexbox for buttons */
-  gap: 20px; /* Gap between buttons */
+  gap: 200px; /* Gap between buttons */
 }
 
 .button-container button {
@@ -50,6 +51,11 @@ width: 100%;
   white-space: nowrap; /* Prevent text wrapping */
   transition: background-color 0.3s; /* Smooth transition for hover */
   padding: 6px 10px;
+  text-decoration: none; /* Ensure no underline */
+}
+
+.button-container a {
+  text-decoration: none; /* Removes underline */
 }
 
 .button-container button:hover {

client/src/Pages/Navbar.jsx

@@ -44,17 +44,18 @@ const Navbar = () => {
       <div className="navbar-container">
         <ToastContainer />
         {/* Appointment To Examiner text at the left */}
-        <NavLink to="/Welcome" className="navbar-title">
+        <NavLink to="/Welcome" className="navbar-title nav-btn">
           Appointment To Examiner
         </NavLink>
 
         {/* Consolidated buttons in the center */}
         <div className="button-container">
-          <NavLink to="/consolidated" className="consolidated-button">
+          <NavLink to="/consolidated" className="consolidated-button nav-btn">
-            Faculty Consolidated
+            Faculty 
+            Consolidated
           </NavLink>
-          <NavLink to="/courseConsolidated" className="consolidated-button">
+          <NavLink to="/courseConsolidated" className="consolidated-button nav-btn">
-            Course Consolidated
+            Course      Consolidated
           </NavLink>
         </div>
         <div>

client/src/Pages/WelcomeWithFilter.css

@@ -9,12 +9,29 @@
   /* Filter Section (Top) */
   .filter-section {
     display: flex;
-    padding: 10px 20px;
+
     background-color: #800000; /* Dark red background */
     gap: 10px;
     justify-content: center;
     flex-wrap: wrap; /* Makes the items wrap if screen width is small */
   }
+
+
+  .nav-btn{
+    background-color: #b22222;
+    color: #fff;
+    cursor: pointer;
+    transition: background-color 0.3s ease, transform 0.2s ease;
+
+    flex: 1; /* Fields will take up equal space */
+    max-width: 200px; /* Ensures fields don't get too wide */
+    padding: 8px 38px;
+    border-radius: 5px;
+    border: none;
+    font-size: 14px;
+    text-align: center;
+    text-decoration: none;
+  }
   
   .filter-section select,
   .filter-section button {
@@ -26,17 +43,8 @@
     font-size: 14px;
     text-align: center;
   }
-  
+
-  .filter-section select {
+
-    background-color: #fff;
-    color: #333;
-    transition: border 0.3s ease;
-  }
-  
-  .filter-section select:focus {
-    border: 2px solid #b22222; /* Highlighted border on focus */
-  }
-  
   .filter-section button {
     background-color: #b22222;
     color: #fff;
@@ -49,6 +57,20 @@
     background-color: #a50000; /* Darker red for hover/active state */
     transform: scale(1.05); /* Subtle enlargement */
   }
+
+ 
+  
+  .filter-section select {
+    background-color: #fff;
+    color: #333;
+    transition: border 0.3s ease;
+  }
+  
+  .filter-section select:focus {
+    border: 2px solid #b22222; /* Highlighted border on focus */
+  }
+  
+ 
   
   /* Welcome Section */
   .welcome-section {

client/src/Pages/courseConsolidated.jsx

@@ -100,7 +100,7 @@ const CourseConsolidated = () => {
     doc.text("Date: " + new Date().toLocaleDateString(), 150, 20);
     doc.setFontSize(14);
     doc.text("CONFIDENTIAL", 10, 60);
-    doc.setFontSize(16);
+    doc.setFontSize(10);
     doc.text(
       "LETTER OF APPOINTMENT AS QUESTION PAPER SETTER",
       105,
@@ -205,11 +205,11 @@ const CourseConsolidated = () => {
     <>
     <Navbar/>
     <div>
-      <h1 style={{ textAlign: "center" }}>
+      <h1 style={{ textAlign: "center", background: "#003366", color: "white", padding: "20px 0", fontSize: "24px", }}>
         Course Tables with Download Options
       </h1>
 
-        <div style={{ padding: "10px", marginBottom: "20px" }}>
+        <div style={{ padding: "10px", marginBottom: "30px" }}>
           <input
             type="text"
             value={searchQuery}
@@ -234,6 +234,7 @@ const CourseConsolidated = () => {
           padding: "10px",
           borderRadius: "5px",
           backgroundColor: "#f9f9f9",
+          fontSize: "160px",
         }}
       >
         {currentCourses.map((courseCode, index) => {
@@ -272,7 +273,7 @@ const CourseConsolidated = () => {
                     borderRadius: "5px",
                   }}
                 >
-                  Download {courseName}'s Appointment Order
+                  Download 
                 </button>
               </div>