Fix:Replaced 'class' with 'className' in many files

Frontend/src/pages/UserPanel/Farm/AddCrop.jsx

@@ -0,0 +1,67 @@
+import { useEffect } from "react";
+
+const AddCrop = () => {
+  return (
+    <>
+      {" "}
+      <form onSubmit={handleAvatar}>
+        <div className="flex items-center justify-center w-full">
+          <img src={formData.avatar && `${formData.avatar}`} alt="" />
+          <label
+            for="dropzone-file"
+            className="flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600"
+          >
+            <div className="flex flex-col items-center justify-center pt-5 pb-6 ">
+              <svg
+                className="w-8 h-8 mb-4 text-gray-500 dark:text-gray-400"
+                aria-hidden="true"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 20 16"
+              >
+                <path
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"
+                />
+              </svg>
+              <p className="mb-2 text-sm text-gray-500 dark:text-gray-400">
+                {avatar ? (
+                  <span className="font-semibold">
+                    Avatar uploaded successfulky
+                  </span>
+                ) : (
+                  <span className="font-semibold">
+                    Click to upload and press Upload button
+                  </span>
+                )}
+              </p>
+              <p className="text-xs text-gray-500 dark:text-gray-400">
+                SVG, PNG, JPG or GIF (MAX. 800x400px)
+              </p>
+              <button
+                type="submit"
+                className="bg-gray-600 px-4 py-1 rounded-lg text-white font-semibold my-4"
+              >
+                Upload
+              </button>
+            </div>
+            <input
+              id="dropzone-file"
+              type="file"
+              className="hidden"
+              onChange={(e) => {
+                setAvatar(e.target.files[0]);
+                //console.log(e.target.files[0]);
+              }}
+            />
+          </label>
+        </div>
+      </form>
+    </>
+  );
+};
+
+export default AddCrop;

Frontend/src/pages/UserPanel/Farm/FarmPage.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { useParams, useNavigate } from "react-router-dom";
 import Farm from "./Farm";
-import AddCrop from "../Crops/AddCrop";
+import AddCrop from "./AddCrop";
 
 export default function FarmPage() {
   const { farmId } = useParams();

Frontend/src/pages/UserPanel/MainUserPanel.jsx

@@ -198,7 +198,7 @@ const MainUserPanel = () => {
                 <button
                   data-collapse-toggle="navbar-user"
                   type="button"
-                  class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
+                  className="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
                   aria-controls="navbar-user"
                   aria-expanded="false"
                 >
@@ -221,30 +221,30 @@ const MainUserPanel = () => {
                 </button>
               </div>
             </div>
-            <div class="mb-4">
+            <div className="mb-4">
               <img
                 src={`${user.avatar}`}
                 alt="Profile Picture"
-                class="rounded-full w-24 h-24 mx-auto"
+                className="rounded-full w-24 h-24 mx-auto"
               />
-              <h4 class="text-lg font-medium mt-2">{user.name}</h4>
-              {/* <span class="text-gray-500 text-sm">@thomasdox</span> */}
-              <p class="text-gray-500 text-sm mt-2">
+              <h4 className="text-lg font-medium mt-2">{user.name}</h4>
+              {/* <span className="text-gray-500 text-sm">@thomasdox</span> */}
+              <p className="text-gray-500 text-sm mt-2">
                 Join on {user.createdAt && user.createdAt.substring(0, 10)}
               </p>
-              <p class="text-gray-500 text-sm mt-2">
+              <p className="text-gray-500 text-sm mt-2">
                 {user.description == null &&
                   "I am a Senior Software Engineer at Google and also mentored 50+ students to get there dream job."}
               </p>
-              <div class="flex justify-center mt-4">
-                <button class="bg-gray-300 hover:bg-gray-400 text-gray-700 font-bold py-2 px-4 rounded mr-2">
+              <div className="flex justify-center mt-4">
+                <button className="bg-gray-300 hover:bg-gray-400 text-gray-700 font-bold py-2 px-4 rounded mr-2">
                   <FaHome className="text-lg font-extrabold" />
                 </button>
-                <button class="bg-gray-300 hover:bg-gray-400 text-gray-700 font-bold py-2 px-4 rounded mr-2">
+                <button className="bg-gray-300 hover:bg-gray-400 text-gray-700 font-bold py-2 px-4 rounded mr-2">
                   <IoMdSettings className="text-lg font-extrabold" />
                 </button>
                 <button
-                  class="bg-gray-300 hover:bg-gray-400 text-gray-700 font-bold py-2 px-4 rounded"
+                  className="bg-gray-300 hover:bg-gray-400 text-gray-700 font-bold py-2 px-4 rounded"
                   onClick={handleLogOut}
                 >
                   <RiLogoutBoxLine className="text-lg font-extrabold" />

Frontend/src/pages/UserPanel/MentorSessionCard.jsx

@@ -55,45 +55,43 @@ const MentorSessionCard = ({ session }) => {
   const realTimeString = timeStringtoRealTime(schduledTime);
 
   return (
-    <>
-      <li class="flex flex-col gap-5 w-full h-auto max-h-28 px-3 py-1 rounded-md hover:bg-slate-100 border-b-2">
-        <div class="flex items-center">
-          <div class="flex-shrink-0">
-            <img
-              class="w-8 h-8 rounded-full"
-              src="/images/profile.jpeg"
-              alt="Neil image"
-            />
-          </div>
-          <div class="flex-1 min-w-0 ms-4">
-            <p class="text-sm font-medium text-gray-900 truncate dark:text-white">
-              {user.role === "user" ? mentorName : studentName}
-            </p>
-            <p class="text-sm text-gray-500 truncate dark:text-gray-400">
-              {user.role === "user" ? mentorMail : studentMail}
+    <li className="flex flex-col gap-5 w-full h-auto max-h-28 px-3 py-1 rounded-md hover:bg-slate-100 border-b-2">
+      <div className="flex items-center">
+        <div className="flex-shrink-0">
+          <img
+            className="w-8 h-8 rounded-full"
+            src="/images/profile.jpeg"
+            alt="Neil image"
+          />
+        </div>
+        <div className="flex-1 min-w-0 ms-4">
+          <p className="text-sm font-medium text-gray-900 truncate dark:text-white">
+            {user.role === "user" ? mentorName : studentName}
+          </p>
+          <p className="text-sm text-gray-500 truncate dark:text-gray-400">
+            {user.role === "user" ? mentorMail : studentMail}
+          </p>
+        </div>
+        <div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">
+          ₹{amountPaid}
+        </div>
+      </div>
+      <div className="flex justify-between">
+        <div className="flex items-center">
+          <div>
+            <p className="text-gray-500">
+              {timeStringToDayName(schduledTime)},
+              {realTimeString.substring(21, 26) +
+                " " +
+                realTimeString.substring(30)}
             </p>
           </div>
-          <div class="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">
-            ₹{amountPaid}
-          </div>
         </div>
-        <div className="flex justify-between">
-          <div className="flex items-center">
-            <div>
-              <p className="text-gray-500">
-                {timeStringToDayName(schduledTime)},
-                {realTimeString.substring(21, 26) +
-                  " " +
-                  realTimeString.substring(30)}
-              </p>
-            </div>
-          </div>
-          <div className="flex items-center">
-            <p className="text-gray-500">{realTimeString.substring(0, 18)}</p>
-          </div>
+        <div className="flex items-center">
+          <p className="text-gray-500">{realTimeString.substring(0, 18)}</p>
         </div>
-      </li>
-    </>
+      </div>
+    </li>
   );
 };
 

Frontend/src/pages/UserPanel/Settings.jsx

@@ -95,15 +95,15 @@ const Settings = () => {
             </div>
           </div>
           <form onSubmit={handleAvatar}>
-            <div class="flex items-center justify-center w-full">
+            <div className="flex items-center justify-center w-full">
               <img src={formData.avatar && `${formData.avatar}`} alt="" />
               <label
-                for="dropzone-file"
-                class="flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600"
+                htmlFor="dropzone-file"
+                className="flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600"
               >
-                <div class="flex flex-col items-center justify-center pt-5 pb-6 ">
+                <div className="flex flex-col items-center justify-center pt-5 pb-6">
                   <svg
-                    class="w-8 h-8 mb-4 text-gray-500 dark:text-gray-400"
+                    className="w-8 h-8 mb-4 text-gray-500 dark:text-gray-400"
                     aria-hidden="true"
                     xmlns="http://www.w3.org/2000/svg"
                     fill="none"
@@ -117,18 +117,18 @@ const Settings = () => {
                       d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"
                     />
                   </svg>
-                  <p class="mb-2 text-sm text-gray-500 dark:text-gray-400">
+                  <p className="mb-2 text-sm text-gray-500 dark:text-gray-400">
                     {avatar ? (
-                      <span class="font-semibold">
-                        Avatar uploaded successfulky
+                      <span className="font-semibold">
+                        Avatar uploaded successfully
                       </span>
                     ) : (
-                      <span class="font-semibold">
+                      <span className="font-semibold">
                         Click to upload and press Upload button
                       </span>
                     )}
                   </p>
-                  <p class="text-xs text-gray-500 dark:text-gray-400">
+                  <p className="text-xs text-gray-500 dark:text-gray-400">
                     SVG, PNG, JPG or GIF (MAX. 800x400px)
                   </p>
                   <button
@@ -141,7 +141,7 @@ const Settings = () => {
                 <input
                   id="dropzone-file"
                   type="file"
-                  class="hidden"
+                  className="hidden"
                   onChange={(e) => {
                     setAvatar(e.target.files[0]);
                     //console.log(e.target.files[0]);