From 14f1d12e2866d71f4501d63c938cf36fcf640fea Mon Sep 17 00:00:00 2001
From: mayura-andrew <mayuraalahakoon@gmail.com>
Date: Tue, 1 Oct 2024 01:53:27 +0530
Subject: [PATCH] Refactor code: Update badge styling in ToggleButton component

---
 .../MonthlyChecking/MenteeMonthlyChecking.tsx |   2 +-
 .../MentorFeedbackForm.component.tsx          |   4 +-
 .../MonthlyChecking/MentorMonthlyChecking.tsx |   4 +-
 .../MonthlyChecking/MonthlyCheckingHeader.tsx |  34 +---
 src/components/Toggle/ButtonToggle.tsx        |  11 +-
 src/pages/MenteeDashboard/index.tsx           |  95 ++++++----
 src/pages/MyMentees/MyMentees.component.tsx   | 169 ++++++++++++------
 7 files changed, 183 insertions(+), 136 deletions(-)

diff --git a/src/components/MonthlyChecking/MenteeMonthlyChecking.tsx b/src/components/MonthlyChecking/MenteeMonthlyChecking.tsx
index cfd28a39..418a41f2 100644
--- a/src/components/MonthlyChecking/MenteeMonthlyChecking.tsx
+++ b/src/components/MonthlyChecking/MenteeMonthlyChecking.tsx
@@ -18,7 +18,7 @@ const CheckInItem: React.FC<CheckInItemProps> = ({ checkIn }) => (
   <div className="p-4 hover:bg-gray-50 transition-colors duration-150">
     <div className="flex justify-between items-start">
       <div>
-        <h4 className="text-lg font-medium text-gray-700 mt-2 mb-4 bg-blue-100 p-2 rounded w-48 h-12 flex items-center justify-center">
+        <h4 className="text-lg font-medium text-gray-700 mt-2 mb-4 bg-blue-100 p-2 rounded w-30 h-12 flex items-center justify-center">
           {' '}
           {checkIn.title}
         </h4>
diff --git a/src/components/MonthlyChecking/MentorFeedbackForm.component.tsx b/src/components/MonthlyChecking/MentorFeedbackForm.component.tsx
index 5a99b715..3c6fc8cc 100644
--- a/src/components/MonthlyChecking/MentorFeedbackForm.component.tsx
+++ b/src/components/MonthlyChecking/MentorFeedbackForm.component.tsx
@@ -83,11 +83,11 @@ const MentorFeedbackForm: React.FC<MentorFeedbackFormProps> = ({
         </label>
         <button
           type="submit"
-          className="px-4 py-2 bg-blue-500  text-white rounded-full focus:outline-none focus:ring-2 focus:ring-opacity-50 transition-all duration-300 text-sm font-medium shadow-md hover:shadow-lg"
+          className="px-4 py-2 bg-blue-500  text-white rounded-full focus:outline-none focus:ring-2 focus:ring-opacity-50 transition-all duration-300 text-sm font-medium shadow-md hover:shadow-lg w-48"
           disabled={isSubmitting}
         >
           {isSubmitting ? (
-            <span className="flex items-center">
+            <span className="flex items-center justify-center">
               <Spinner />
               <span>Submitting...</span>
             </span>
diff --git a/src/components/MonthlyChecking/MentorMonthlyChecking.tsx b/src/components/MonthlyChecking/MentorMonthlyChecking.tsx
index dac15d1f..38ab976a 100644
--- a/src/components/MonthlyChecking/MentorMonthlyChecking.tsx
+++ b/src/components/MonthlyChecking/MentorMonthlyChecking.tsx
@@ -48,7 +48,7 @@ const MentorMonthlyChecking: React.FC<MentorMonthlyCheckingProps> = ({
     >
       <div className="flex justify-between items-start">
         <div>
-          <h4 className="text-lg font-medium text-gray-700 mt-2 mb-4 bg-blue-100 p-2 rounded w-48 h-12 flex items-center justify-center">
+          <h4 className="text-lg font-medium text-gray-700 mt-2 mb-4 bg-blue-100 p-2 rounded w-30 h-12 flex items-center justify-center">
             {checkIn.title}
           </h4>
           <div className="mt-2">
@@ -185,7 +185,7 @@ const MentorMonthlyChecking: React.FC<MentorMonthlyCheckingProps> = ({
 
         {isHistoryOpen && (
           <div>
-            <div className="bg-white shadow overflow-hidden sm:rounded-md">
+            <div className="bg-white rounded-lg shadow overflow-hidden sm:rounded-md">
               {checkedCheckIns.length > 0 ? (
                 checkedCheckIns.map((checkIn) => renderCheckIn(checkIn, true))
               ) : (
diff --git a/src/components/MonthlyChecking/MonthlyCheckingHeader.tsx b/src/components/MonthlyChecking/MonthlyCheckingHeader.tsx
index 83da757e..4fd06a5b 100644
--- a/src/components/MonthlyChecking/MonthlyCheckingHeader.tsx
+++ b/src/components/MonthlyChecking/MonthlyCheckingHeader.tsx
@@ -1,7 +1,6 @@
-import React, { useState } from 'react';
+import React from 'react';
 import ArrowRightIcon from '../../assets/svg/Icons/ArrowRightIcon';
 import ArrowDownIcon from '../../assets/svg/Icons/ArrowDownIcon';
-import MonthlyCheckInModal from './MenteeCheckInFormModal.component';
 
 interface MonthlyCheckingHeaderProps {
   isMentorView: boolean;
@@ -15,31 +14,9 @@ const MonthlyCheckInHeader: React.FC<MonthlyCheckingHeaderProps> = ({
   isMentorView,
   toggleGuidelines,
   showGuidelines,
-  menteeId = '',
 }) => {
-  const [isModalOpen, setIsModalOpen] = useState(false);
-
-  const closeModal = () => {
-    setIsModalOpen(false);
-  };
-
-  const openModal = () => {
-    setIsModalOpen(true);
-  };
-
   return (
     <>
-      <div className="flex justify-between items-center mb-4 mt-4">
-        <h2 className="text-2xl font-bold text-gray-800">Monthly Check-Ins</h2>
-        {!isMentorView && (
-          <button
-            onClick={openModal}
-            className="px-4 py-2 bg-blue-500  text-white rounded-md focus:outline-none focus:ring-2 focus:ring-opacity-50 transition-all duration-300 text-sm font-medium shadow-md hover:shadow-lg"
-          >
-            Submit Your Monthly Check-In
-          </button>
-        )}
-      </div>
       <div className="mb-4">
         <button
           onClick={toggleGuidelines}
@@ -48,12 +25,12 @@ const MonthlyCheckInHeader: React.FC<MonthlyCheckingHeaderProps> = ({
           {showGuidelines ? (
             <>
               <ArrowDownIcon />
-              Hide Guidelines
+              Guidelines
             </>
           ) : (
             <>
               <ArrowRightIcon />
-              View Guidelines
+              Guidelines
             </>
           )}
         </button>
@@ -113,11 +90,6 @@ const MonthlyCheckInHeader: React.FC<MonthlyCheckingHeaderProps> = ({
           </div>
         </div>
       )}
-      <MonthlyCheckInModal
-        isOpen={isModalOpen}
-        onClose={closeModal}
-        menteeId={menteeId}
-      />
     </>
   );
 };
diff --git a/src/components/Toggle/ButtonToggle.tsx b/src/components/Toggle/ButtonToggle.tsx
index 6c036d4f..3ea47b4b 100644
--- a/src/components/Toggle/ButtonToggle.tsx
+++ b/src/components/Toggle/ButtonToggle.tsx
@@ -24,6 +24,7 @@ const ToggleButton: React.FC<ToggleButtonProps> = ({
     className="flex items-center justify-between w-full text-left text-xl font-bold text-gray-900 mb-4 focus:outline-none hover:text-blue-600 transition-colors duration-200"
   >
     <span className="flex items-center">
+      {isOpen ? <ArrowDownIcon /> : <ArrowRightIcon />}
       {text}
       {badgeCount !== undefined &&
         badgeCount >= 0 &&
@@ -35,16 +36,6 @@ const ToggleButton: React.FC<ToggleButtonProps> = ({
           </span>
         ))}
     </span>
-
-    {isOpen ? (
-      <>
-        <ArrowDownIcon />
-      </>
-    ) : (
-      <>
-        <ArrowRightIcon />
-      </>
-    )}
   </button>
 );
 
diff --git a/src/pages/MenteeDashboard/index.tsx b/src/pages/MenteeDashboard/index.tsx
index af19f34e..17de4cba 100644
--- a/src/pages/MenteeDashboard/index.tsx
+++ b/src/pages/MenteeDashboard/index.tsx
@@ -4,6 +4,7 @@ import useMyApplications from '../../hooks/useMyApplications';
 import MentorCard from '../../components/MentorCard/MentorCard.component';
 import MonthlyCheckInHeader from '../../components/MonthlyChecking/MonthlyCheckingHeader';
 import MenteeMonthlyChecking from '../../components/MonthlyChecking/MenteeMonthlyChecking';
+import MonthlyCheckInModal from '../../components/MonthlyChecking/MenteeCheckInFormModal.component';
 
 const MenteeDashboard: React.FC = () => {
   const [showGuidelines, setShowGuidelines] = useState(true);
@@ -19,56 +20,84 @@ const MenteeDashboard: React.FC = () => {
   const toggleGuidelines = () => {
     setShowGuidelines((prev) => !prev);
   };
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const closeModal = () => {
+    setIsModalOpen(false);
+  };
+
+  const openModal = () => {
+    setIsModalOpen(true);
+  };
 
   const isApproved = approvedApplications.length > 0;
 
   const menteeId = isApproved ? approvedApplications[0].uuid : '';
 
   return (
-    <div className="container mx-auto p-4">
-      <div className="flex flex-wrap -mx-2">
-        <div className="w-full">
-          {isApproved ? (
-            <>
-              <MonthlyCheckInHeader
-                isMentorView={false}
-                toggleGuidelines={toggleGuidelines}
-                showGuidelines={showGuidelines}
-                menteeId={menteeId}
-              />
-              <MenteeMonthlyChecking menteeId={menteeId} />
-            </>
-          ) : (
-            <div className="px-2 py-2 mt-4 bg-blue-100 rounded-lg">
+    <>
+      <div className="container mx-auto p-4">
+        <div className="flex flex-wrap -mx-2">
+          <div className="w-full">
+            {isApproved ? (
+              <>
+                <div className="bg-blue-100 rounded-lg p-4 mt-4 mb-4 flex-grow overflow-auto">
+                  <h2 className="text-xl font-bold text-gray-800 mb-4 text-center items-center">
+                    Monthly Check-Ins
+                  </h2>
+                  <div className="flex justify-end">
+                    <button
+                      onClick={openModal}
+                      className="px-4 py-2 bg-blue-500 text-white rounded-md focus:outline-none focus:ring-2 focus:ring-opacity-50 transition-all duration-300 text-sm font-medium shadow-md hover:shadow-lg"
+                    >
+                      Submit Your Monthly Check-In
+                    </button>
+                  </div>
+                  <MonthlyCheckInHeader
+                    isMentorView={false}
+                    toggleGuidelines={toggleGuidelines}
+                    showGuidelines={showGuidelines}
+                  />
+                  <MenteeMonthlyChecking menteeId={menteeId} />
+                </div>
+              </>
+            ) : (
+              <div className="px-2 py-2 mt-4 bg-blue-100 rounded-lg">
+                <p className="text-lg font-medium mb-2 pb-5">
+                  Your pending mentee applications:
+                </p>
+                <div className="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-4 px-2 md:px-6">
+                  {pendingApplications.length > 0
+                    ? pendingApplications.map(({ mentor, uuid }) => (
+                        <MentorCard key={uuid} mentor={mentor} />
+                      ))
+                    : 'No mentors'}
+                </div>
+              </div>
+            )}
+          </div>
+          <div className="w-full md:w-1/2 px-2">
+            <div className="px-2 py-2 mt-4">
               <p className="text-lg font-medium mb-2 pb-5">
-                Your pending mentee applications:
+                Your approved mentee applications:
               </p>
               <div className="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-4 px-2 md:px-6">
-                {pendingApplications.length > 0
-                  ? pendingApplications.map(({ mentor, uuid }) => (
+                {approvedApplications.length > 0
+                  ? approvedApplications.map(({ mentor, uuid }) => (
                       <MentorCard key={uuid} mentor={mentor} />
                     ))
                   : 'No mentors'}
               </div>
             </div>
-          )}
-        </div>
-        <div className="w-full md:w-1/2 px-2">
-          <div className="px-2 py-2 mt-4">
-            <p className="text-lg font-medium mb-2 pb-5">
-              Your approved mentee applications:
-            </p>
-            <div className="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-4 px-2 md:px-6">
-              {approvedApplications.length > 0
-                ? approvedApplications.map(({ mentor, uuid }) => (
-                    <MentorCard key={uuid} mentor={mentor} />
-                  ))
-                : 'No mentors'}
-            </div>
           </div>
         </div>
       </div>
-    </div>
+      <MonthlyCheckInModal
+        isOpen={isModalOpen}
+        onClose={closeModal}
+        menteeId={menteeId}
+      />
+    </>
   );
 };
 
diff --git a/src/pages/MyMentees/MyMentees.component.tsx b/src/pages/MyMentees/MyMentees.component.tsx
index ca43a649..7e7b1190 100644
--- a/src/pages/MyMentees/MyMentees.component.tsx
+++ b/src/pages/MyMentees/MyMentees.component.tsx
@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useMentees } from '../../hooks/useMentees';
-import { Link, Route, Routes, useParams } from 'react-router-dom';
+import { Link, Route, Routes, useParams, useNavigate } from 'react-router-dom';
 import MenteeProfile from '../../components/MenteeProfile';
 import UserIcon from '../../assets/svg/Icons/UserIcon';
 import MonthlyCheckInHeader from '../../components/MonthlyChecking/MonthlyCheckingHeader';
@@ -11,12 +11,22 @@ import { Mentee } from '../../types';
 
 const MyMentees: React.FC = () => {
   const { data: menteeApplications } = useMentees();
-
   const [activeTab, setActiveTab] = useState<ApplicationStatus>(
     ApplicationStatus.APPROVED
   );
+  const [isMobile, setIsMobile] = useState(window.innerWidth < 768);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth < 768);
+    };
 
-  const [isMenteeSelected, setIsMenteeSelected] = useState(false);
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
 
   const filteredApplications =
     menteeApplications?.filter((mentee) => mentee.state === activeTab) || [];
@@ -31,9 +41,6 @@ const MyMentees: React.FC = () => {
       key={mentee.uuid}
       className="bg-white border-sky-100 rounded border p-2 text-black flex items-center cursor-pointer mb-2 hover:bg-gray-50 transition-colors duration-200"
       to={`/mentor/dashboard/${mentee.uuid}`}
-      onClick={() => {
-        setIsMenteeSelected(true);
-      }}
     >
       <div className="flex items-center w-full">
         <div className="flex-shrink-0 mr-3">
@@ -60,62 +67,97 @@ const MyMentees: React.FC = () => {
     </Link>
   );
 
-  return (
-    <div className="flex flex-col md:flex-row min-h-screen">
-      <div className="hidden md:w-1/5 p-4 bg-blue-50 md:block">
-        <div className="flex justify-between items-center mb-4">
-          <h2 className="text-2xl font-semibold">Mentee Applications</h2>
-        </div>
-        <div className="mb-4 flex space-x-1 text-xs">
-          {tabData.map((tab) => (
-            <button
-              key={tab.status}
-              className={`px-1 py-1 rounded transition-colors duration-300 ${
-                activeTab === tab.status
-                  ? 'bg-blue-500 text-white shadow-lg'
-                  : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
-              }`}
-              onClick={() => {
-                setActiveTab(tab.status);
-              }}
-            >
-              <span>{tab.label}</span>
-              <span className="px-1 py-1 ml-1 p-1 text-xs font-semibold rounded-full bg-opacity-20 bg-gray-700 text-gray-700">
-                {menteeApplications?.filter((m) => m.state === tab.status)
-                  .length || 0}
-              </span>
-            </button>
-          ))}
-        </div>
-        <div className="h-96 overflow-y-auto md:overflow-y-visible">
-          {filteredApplications.map(renderMenteeLink)}
-          {filteredApplications.length === 0 && (
-            <p className="text-gray-600">No mentee applications available.</p>
-          )}
-        </div>
+  const renderMenteeList = () => (
+    <div
+      className={`${isMobile ? 'w-full' : 'w-1/5'} p-4 bg-blue-50 rounded-lg`}
+    >
+      <div className="flex justify-between items-center mb-4">
+        <h2 className="text-2xl font-semibold">Mentee Applications</h2>
       </div>
-      <div className="w-full md:w-4/5 p-4 bg-gray-50">
-        {!isMenteeSelected && (
-          <div className="p-6 mb-6">
-            <h1 className="text-2xl font-semibold mb-4 text-gray-800">
-              Welcome to the ScholarX Mentee Dashboard!
-            </h1>
-            <p className="text-gray-600">
-              Here, you can view your mentees and provide feedback on their
-              monthly check-ins. Click on a mentee to view their profile and
-              their monthly check-in submissions.
-            </p>
-          </div>
+      <div className="mb-4 flex space-x-1 text-xs">
+        {tabData.map((tab) => (
+          <button
+            key={tab.status}
+            className={`px-1 py-1 rounded transition-colors duration-300 ${
+              activeTab === tab.status
+                ? 'bg-blue-500 text-white shadow-lg'
+                : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
+            }`}
+            onClick={() => {
+              setActiveTab(tab.status);
+            }}
+          >
+            <span>{tab.label}</span>
+            <span className="px-1 py-1 ml-1 p-1 text-xs font-semibold rounded-full bg-opacity-20 bg-gray-700 text-gray-700">
+              {menteeApplications?.filter((m) => m.state === tab.status)
+                .length || 0}
+            </span>
+          </button>
+        ))}
+      </div>
+      <div className={`${isMobile ? '' : 'h-96'} overflow-y-auto`}>
+        {filteredApplications.map(renderMenteeLink)}
+        {filteredApplications.length === 0 && (
+          <p className="text-gray-600">No mentee applications available.</p>
         )}
+      </div>
+    </div>
+  );
+
+  return (
+    <div className={`flex ${isMobile ? 'flex-col' : 'flex-row'} min-h-screen`}>
+      {isMobile ? (
         <Routes>
-          <Route path=":menteeId" element={<MenteeDetails />} />
+          <Route path="/" element={renderMenteeList()} />
+          <Route
+            path=":menteeId"
+            element={
+              <MenteeDetails
+                onBack={() => {
+                  navigate('/mentor/dashboard');
+                }}
+                isMobile={isMobile}
+              />
+            }
+          />
         </Routes>
-      </div>
+      ) : (
+        <>
+          {renderMenteeList()}
+          <div className="w-4/5 p-4 bg-gray-50">
+            <Routes>
+              <Route path="/" element={<WelcomeMessage />} />
+              <Route
+                path=":menteeId"
+                element={
+                  <MenteeDetails onBack={() => {}} isMobile={isMobile} />
+                }
+              />
+            </Routes>
+          </div>
+        </>
+      )}
     </div>
   );
 };
 
-const MenteeDetails: React.FC = () => {
+const WelcomeMessage: React.FC = () => (
+  <div className="p-6 mb-6">
+    <h1 className="text-2xl font-semibold mb-4 text-gray-800">
+      Welcome to the ScholarX Mentee Dashboard!
+    </h1>
+    <p className="text-gray-600">
+      Here, you can view your mentees and provide feedback on their monthly
+      check-ins. Click on a mentee to view their profile and their monthly
+      check-in submissions.
+    </p>
+  </div>
+);
+
+const MenteeDetails: React.FC<{ onBack: () => void; isMobile: boolean }> = ({
+  onBack,
+  isMobile,
+}) => {
   const { menteeId } = useParams<{ menteeId: string }>();
   const [showGuidelines, setShowGuidelines] = useState(true);
 
@@ -130,9 +172,22 @@ const MenteeDetails: React.FC = () => {
   } = useMonthlyCheckIns(menteeId ?? '');
 
   return (
-    <div>
+    <div className="flex flex-col h-full">
+      {isMobile && (
+        <button
+          onClick={onBack}
+          className="text-blue-500 hover:text-blue-700 mb-4 text-left"
+        >
+          ← Back to Mentee List
+        </button>
+      )}
       <MenteeProfile />
-      <div className="bg-blue-100 rounded-lg p-4 mt-4 mb-4">
+      <div className="bg-blue-100 rounded-lg p-4 mt-4 mb-4 flex-grow overflow-auto -webkit-overflow-scrolling-touch">
+        <div className="flex justify-center items-center">
+          <h2 className="text-2xl font-bold text-gray-800 mb-4">
+            Monthly Check-Ins
+          </h2>
+        </div>
         <MonthlyCheckInHeader
           isMentorView={true}
           toggleGuidelines={toggleGuidelines}