Merge branch 'master' of https://github.com/sau-mili/Counsellor-Web i…

…nto mainnn

package.json

@@ -13,7 +13,7 @@
     "@iconify/react": "^4.1.1",
     "cors": "^2.8.5",
     "dotenv": "^16.4.5",
-    "firebase": "^10.12.1",
+    "firebase": "^10.12.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.2.1",
@@ -28,6 +28,6 @@
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.0",
-    "vite": "^5.2.11"
+    "vite": "^5.2.12"
   }
 }

src/components/CollegePage/CollegePage.css

@@ -13,15 +13,34 @@
   background-color: rgb(26, 165, 224);
   width: 50vw;
 }
-
+.hide{
+  display:none;
+}
+#courseList:selected{
+  .image{
+    display:none;
+  }
+  .content{
+    display:block;
+  }
+}
 .college-name {
   margin-top: 80px;
   margin-left: 20px;
   text-align: left;
   font-weight: bolder;
   font-size: 60px;
 }
+.content{
+  display:block;
+}
+.image {
+  display: block;
+}
 
+.search-button {
+  display: block;
+}
 
 .description-card {
   display: flex;
@@ -151,10 +170,11 @@
 
 .student {
   margin-top: 18px;
-  border-radius: 5px;
+  border-radius: 10px;
   margin-left: 160px;
   width: 100px;
-  background-color: rgb(229, 234, 234);
+  background-color: rgb(172, 209, 209);
+  padding:15px;
   color: rgb(29, 31, 155);
 }
 

src/components/CollegePage/CollegePage.jsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import collegesData from '../Dashboard/colleges.json';
 import studentsData from './students.json';
 import './CollegePage.css';
-import { useParams,useNavigate } from 'react-router-dom';
+import { useParams, useNavigate } from 'react-router-dom';
 import Logo from '../../assets/logo.webp';
 import { signOut } from "firebase/auth";
 import { auth } from "../../firebase/auth";
@@ -20,7 +20,7 @@ const CollegePage = () => {
 
   const college = collegesData.find(college => college.id === parseInt(id));
 
-  
+
   if (!college) {
     return <div>College not found</div>;
   }
@@ -90,14 +90,20 @@ const CollegePage = () => {
                 <p className="rating-text">{college.rating}/10</p>
               </div>
             </div>
-            <img className="image" src={college.imageURL} />
           </div>
-          <button className="search-button"><a href={college.website} target="_blank" rel="noreferrer">Search</a></button>
+          <img className="image" src={college.imageURL} alt="College" />
+          <button className="search-button">
+            <a href={college.website} target="_blank" rel="noreferrer">Search</a>
+          </button>
         </div>
         <div className="right">
           <div className="searchCourses">
-
-            <select id="courseList" value={selectedCourse} placeholder="Search courses" onChange={(e) => setSelectedCourse(e.target.value)}>
+            <select
+              id="courseList"
+              value={selectedCourse}
+              placeholder="Search courses"
+              onChange={(e) => setSelectedCourse(e.target.value)}
+            >
               <option value="BTech">BTech</option>
               <option value="BBA">BBA</option>
               <option value="MBA">MBA</option>
@@ -107,7 +113,6 @@ const CollegePage = () => {
               <option value="PHD">PHD</option>
             </select>
           </div>
-
           <div className="students">
             {filteredStudents.map(student => (
               <div key={student.id} className="student-card">