From 23c4efabc99677fb0465ecc822a3e47f4d9bb28b Mon Sep 17 00:00:00 2001 From: ayoitshasya Date: Thu, 30 Jan 2025 13:33:25 +0530 Subject: [PATCH] css changes --- client/src/App.css | 2 +- client/src/Pages/ConsolidatedTable.jsx | 7 ++-- client/src/Pages/CourseTable.css | 1 + client/src/Pages/CourseTable.jsx | 8 +++-- client/src/Pages/Navbar.css | 14 +++++--- client/src/Pages/Navbar.jsx | 11 +++--- client/src/Pages/WelcomeWithFilter.css | 46 ++++++++++++++++++------- client/src/Pages/courseConsolidated.jsx | 9 ++--- 8 files changed, 66 insertions(+), 32 deletions(-) diff --git a/client/src/App.css b/client/src/App.css index b599c7c..0fc88be 100644 --- a/client/src/App.css +++ b/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; diff --git a/client/src/Pages/ConsolidatedTable.jsx b/client/src/Pages/ConsolidatedTable.jsx index cd64742..7614f9d 100644 --- a/client/src/Pages/ConsolidatedTable.jsx +++ b/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 diff --git a/client/src/Pages/CourseTable.css b/client/src/Pages/CourseTable.css index 2dec255..f9e5738 100644 --- a/client/src/Pages/CourseTable.css +++ b/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 { diff --git a/client/src/Pages/CourseTable.jsx b/client/src/Pages/CourseTable.jsx index 58a0f85..0a0908c 100644 --- a/client/src/Pages/CourseTable.jsx +++ b/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 ( <> - + + {/* Pass setCourses to FilterPage so it can update the course list */} + diff --git a/client/src/Pages/Navbar.css b/client/src/Pages/Navbar.css index 665098c..d5f98f0 100644 --- a/client/src/Pages/Navbar.css +++ b/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 { diff --git a/client/src/Pages/Navbar.jsx b/client/src/Pages/Navbar.jsx index 1e411ff..73875f2 100644 --- a/client/src/Pages/Navbar.jsx +++ b/client/src/Pages/Navbar.jsx @@ -44,17 +44,18 @@ const Navbar = () => {
{/* Appointment To Examiner text at the left */} - + Appointment To Examiner {/* Consolidated buttons in the center */}
- - Faculty Consolidated + + Faculty + Consolidated - - Course Consolidated + + Course Consolidated
diff --git a/client/src/Pages/WelcomeWithFilter.css b/client/src/Pages/WelcomeWithFilter.css index f1a94fb..d85d28e 100644 --- a/client/src/Pages/WelcomeWithFilter.css +++ b/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 { diff --git a/client/src/Pages/courseConsolidated.jsx b/client/src/Pages/courseConsolidated.jsx index 856c80b..383c861 100644 --- a/client/src/Pages/courseConsolidated.jsx +++ b/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 = () => { <>
-

+

Course Tables with Download Options

-
+
{ 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