Merge branch 'main' into foodlist-updated-ui

src/App.css

@@ -40,16 +40,16 @@ li:hover span {
   }
 }
 
-.nav-item{
+.Nav__item{
   font-size: 52px !important;
 }
 
-.star-rating {
+.StarRating  {
   display: flex;
   flex-direction: row;
 }
 
-.star {
+.StarRating__star {
   font-size: 2rem;
   color: #d3d3d3;
   background: none;
@@ -58,30 +58,30 @@ li:hover span {
   transition: color 0.2s;
 }
 
-.star.on {
+.StarRating__star--on {
   color: #ffc107;
 }
 
-.star.off {
+.StarRating__star--off {
   color: #d3d3d3;
 }
-.reviews-container{
+.Reviews__container{
   display: flex;
   flex-direction: row;
   justify-content: space-around;
 
 }
-.review-card{
+.Reviews__card {
   width: calc(90vw/3);
   border: 1px solid green;
   background-color: white;
   background-color: aquamarine;
 }
-.stdfeedback{
+.Feedback__standard{
   background-color: white;
   padding: 2% 3%;
 }
-.stdname{
+.Feedback__name{
   margin: 2% 3%;
 }
 

src/components/Feedback.jsx

@@ -30,11 +30,11 @@ const Reviews = () => {
   };
 
   return (
-    <div className="reviews-container">
+    <div className="Reviews__container">
       {reviews.map(review => (
-        <div key={review._id} className="review-card">
-          <p className='stdname'>{review.studentName}</p>
-          <div className="stdfeedback">
+        <div key={review._id} className="Reviews__card ">
+          <p className='Feedback__name'>{review.studentName}</p>
+          <div className="Feedback__standard">
             <h3>Rating: {renderStars(review.rating)}</h3>
             <p>{review.comment}</p>
             <p><strong>Canteen:</strong> {review.canteenName}</p>

src/components/Navbar.jsx

@@ -30,6 +30,17 @@ const Navbar = () => {
         }
     }
   }, []);
+  const removetoken = ()=>{
+      const usertoken=localStorage.getItem("usertoken");
+      const token=localStorage.getItem("token");
+      if(usertoken) {
+        localStorage.removeItem("usertoken");
+      }
+      if(token) {
+        localStorage.removeItem("token")
+        localStorage.removeItem("canteenId")
+      }
+  }
 
   const toggleMenu = () => {
     setIsOpen(!isOpen);
@@ -70,6 +81,7 @@ const Navbar = () => {
               <Link to="/">
                 <button
                   onClick={logout}
+
                   className={`py-1 px-2  w-full h-auto text-l relative z-0 rounded-lg transition-all duration-200 hover:scale-110 ${theme === 'dark' ? 'bg-white text-black' : 'bg-green-400 hover:bg-green-600 hover:shadow-green text-white'}`}
                 >
                   Log out

src/index.css

@@ -23,7 +23,7 @@ code {
   display: none;
 }
 
-.nav-item{
+.Nav__item{
    font-size: 12px !important;
    font-weight: bolder !important;
 }

src/pages/MenuPage.jsx

@@ -8,6 +8,28 @@ import Footer from "../components/Footer";
 import FoodCard from "../components/FoodCard";
 import { ThemeContext } from '../themeContext';
 
+
+const StarRating = ({ rating, onRatingChange }) => {
+  const [hoverRating, setHoverRating] = useState(0);
+
+  return (
+    <div className="StarRating ">
+      {[1, 2, 3, 4, 5].map((star) => (
+        <button
+          type="button"
+          key={star}
+          className={`StarRating__star ${star <= (hoverRating || rating) ? "StarRating__star--on" : "StarRating__star--off"}`}
+          onClick={() => onRatingChange(star)}
+          onMouseEnter={() => setHoverRating(star)}
+          onMouseLeave={() => setHoverRating(0)}
+        >
+          &#9733;
+        </button>
+      ))}
+    </div>
+  );
+};
+
 function MenuPage() {
   const { _id } = useParams();
   const [breakfast, setBreakfast] = useState([]);