Skip to content

Commit

Permalink
Refactor code: Update badge styling in ToggleButton component
Browse files Browse the repository at this point in the history
  • Loading branch information
@mayura-andrew
mayura-andrew committed Sep 30, 2024
1 parent 82609a3 commit 14f1d12
Show file tree
Hide file tree
Showing 7 changed files with 183 additions and 136 deletions.
2 changes: 1 addition & 1 deletion src/components/MonthlyChecking/MenteeMonthlyChecking.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions src/components/MonthlyChecking/MentorFeedbackForm.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions src/components/MonthlyChecking/MentorMonthlyChecking.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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))
) : (
Expand Down
34 changes: 3 additions & 31 deletions src/components/MonthlyChecking/MonthlyCheckingHeader.tsx
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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}
Expand All @@ -48,12 +25,12 @@ const MonthlyCheckInHeader: React.FC<MonthlyCheckingHeaderProps> = ({
{showGuidelines ? (
<>
<ArrowDownIcon />
Hide Guidelines
Guidelines
</>
) : (
<>
<ArrowRightIcon />
View Guidelines
Guidelines
</>
)}
</button>
Expand Down Expand Up @@ -113,11 +90,6 @@ const MonthlyCheckInHeader: React.FC<MonthlyCheckingHeaderProps> = ({
</div>
</div>
)}
<MonthlyCheckInModal
isOpen={isModalOpen}
onClose={closeModal}
menteeId={menteeId}
/>
</>
);
};
Expand Down
11 changes: 1 addition & 10 deletions src/components/Toggle/ButtonToggle.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 &&
Expand All @@ -35,16 +36,6 @@ const ToggleButton: React.FC<ToggleButtonProps> = ({
</span>
))}
</span>

{isOpen ? (
<>
<ArrowDownIcon />
</>
) : (
<>
<ArrowRightIcon />
</>
)}
</button>
);

Expand Down
95 changes: 62 additions & 33 deletions src/pages/MenteeDashboard/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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}
/>
</>
);
};

Expand Down
Loading

0 comments on commit 14f1d12

Please sign in to comment.