sef-global · AnsarMahir · Sep 1, 2024 · Sep 1, 2024 · Sep 1, 2024 · Sep 6, 2024
diff --git a/index.html b/index.html
@@ -33,6 +33,7 @@
     />
     <link rel="shortcut icon" href="/favicon.png" />
     <title>ScholarX | Sustainable Education Foundation</title>
+    <link href="https://fonts.cdnfonts.com/css/sf-pro-display" rel="stylesheet">
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/assets/svg/BusinessBag.tsx b/src/assets/svg/BusinessBag.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+const BusinessBag: React.FC = () => (
+  <svg
+    className="w-4 h-4 text-gray-500 dark:text-white mr-2"
+    aria-hidden="true"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    viewBox="0 0 20 20"
+  >
+    <path d="M19.728 10.686c-2.38 2.256-6.153 3.381-9.875 3.381-3.722 0-7.4-1.126-9.571-3.371L0 10.437V18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-7.6l-.272.286Z"></path>
+    <path d="m.135 7.847 1.542 1.417c3.6 3.712 12.747 3.7 16.635.01L19.605 7.9A.98.98 0 0 1 20 7.652V6a2 2 0 0 0-2-2h-3V3a3 3 0 0 0-3-3H8a3 3 0 0 0-3 3v1H2a2 2 0 0 0-2 2v1.765c.047.024.092.051.135.082ZM10 10.25a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5ZM7 3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1H7V3Z"></path>
+  </svg>
+);
+
+export default BusinessBag;
diff --git a/src/components/MenteeCard/index.tsx b/src/components/MenteeCard/index.tsx
@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom';
 
 import { Mentee } from '../../types.ts';
 import ProfilePic from '../ProfilePic/index.tsx';
+import BusinessBag from '../../assets/svg/BusinessBag.tsx';
 
 interface MenteeCardProps {
   mentee: Mentee;
@@ -15,27 +16,30 @@ const MenteeCard: React.FC<MenteeCardProps> = ({
 }) => {
   return (
     <Link
-      className="border border-gray-200 p-4 rounded-md shadow-sm w-52 flex flex-col h-full"
+      className="border-2 border-light-gray p-2.5 pb-[12px] rounded-md shadow-sm max-w-full flex flex-col h-full"
       to={
         showPublicProfile
           ? `/mentees/${mentee.uuid}`
           : `/mentor/my-mentees/${mentee.uuid}`
       }
     >
-      <div className="mx-auto mb-4">
+      <div className="mx-auto mb-2">
         <ProfilePic
           src={mentee.profile?.image_url}
           alt="Mentee Avatar"
-          size="6rem"
+          size="11.6875rem"
+          width="16.25rem"
+          circular={false}
         />
       </div>
-      <div className="text-center">
+      <div className="text-left p-0.5">
         <h5 className="text-lg font-bold">
           {mentee.application.firstName} {mentee.application.lastName}
         </h5>
         {mentee.application.isUndergrad ? (
-          <p className="text-xs text-gray-500">
-            {mentee.application.university}
+          <p className="text-sm text-gray-500 flex items-center">
+            <BusinessBag />
+            <span>{mentee.application.university}</span>
           </p>
         ) : (
           <>

diff --git a/src/components/MentorCard/MentorCard.component.tsx b/src/components/MentorCard/MentorCard.component.tsx
@@ -2,6 +2,8 @@ import React from 'react';
 import { type Mentor } from '../../types.ts';
 import { Link } from 'react-router-dom';
 import ProfilePic from '../ProfilePic/index.tsx';
+import { ApplicationStatus } from '../../enums';
+import BusinessBag from '../../assets/svg/BusinessBag.tsx';
 
 interface MentorCardProps {
   mentor: Mentor;
@@ -46,16 +48,30 @@ const MentorCard: React.FC<MentorCardProps> = ({
     );
   }
 
+  const approvedMenteesCount = mentor?.mentees
+    ? mentor.mentees.filter(
+        (mentee) => mentee.state === ApplicationStatus.APPROVED
+      ).length
+    : 0;
+
+  const availableSlots = mentor?.application?.noOfMentees
+    ? Math.max(0, mentor.application.noOfMentees - approvedMenteesCount)
+    : 0;
+
+  const totalApplications = mentor?.mentees?.length ?? 0;
+
   return (
     <Link
-      className="border border-gray-200 p-4 rounded-md shadow-md w-52 flex flex-col h-full relative"
+      className="p-2.5 rounded-md shadow-md max-w-full flex flex-col h-full relative outline outline-2 outline-bd-gray"
       to={`/mentors/${mentor.uuid}`}
     >
-      <div className="mx-auto mb-4">
+      <div className="flex flex-col items-center">
         <ProfilePic
-          src={mentor.profile.image_url}
+          src={mentor.profile?.image_url}
           alt="Mentee Avatar"
-          size="6rem"
+          size="11.6875rem"
+          width="17.5rem"
+          circular={false}
           availability={mentor.availability}
         />
       </div>
@@ -64,15 +80,42 @@ const MentorCard: React.FC<MentorCardProps> = ({
           <span className="text-xs font-semibold">Unavailable</span>
         </div>
       )}
-      <div className="text-center">
-        <h5 className="text-lg font-semibold text-slate-600 text-wrap">
-          {mentor.application.firstName} {mentor.application.lastName}
+      <div className="text-left p-0.5 flex-1 font-sf-pro ">
+        <h5 className="text-lg font-bold text-black-600 text-wrap pb-1">
+          {mentor.application?.firstName} {mentor.application?.lastName}
         </h5>
-        <p className="text-sm">{mentor.application.position}</p>
-        <p className="text-xs text-gray-500">
-          {mentor.application.institution}
+        <p className="text-sm text-gray-500 flex items-center p-0">
+        <span className="self-start"> 
+      <BusinessBag />
+    </span>
+          <span className="align-top leading-snug " style={{ marginTop: '-0.15em' }}>
+            {mentor.application?.position} | {mentor.application?.institution}
+          </span>
         </p>
       </div>
+      <hr className="my-4 border-gray-300" />
+
+      <div className="flex justify-between text-left font-sf-pro">
+        <div className="text-[10px]">
+          <p className="text-gray-500">Available Mentee Slots</p>
+          <p className="text-xs font-bold text-[12px]">
+            {mentor?.application?.noOfMentees && mentor.mentees
+              ? availableSlots
+              : 0}
+          </p>
+        </div>
+        <div className="text-[10px]">
+          <p className="text-gray-500">Applications Received</p>
+          <p className="text-xs font-bold text-[12px]">
+            {mentor?.mentees &&
+            mentor.mentees.some(
+              (mentee) => mentee.state === ApplicationStatus.APPROVED
+            )
+              ? totalApplications
+              : 0}
+          </p>
+        </div>
+      </div>
     </Link>
   );
 };

diff --git a/src/components/ProfilePic/index.tsx b/src/components/ProfilePic/index.tsx
@@ -5,8 +5,10 @@ const ProfilePic: React.FC<{
   src: string | undefined;
   alt: string;
   size: string;
+  width?: string;
   availability?: boolean;
-}> = ({ src, alt, size, availability = true }) => {
+  circular?: boolean;
+}> = ({ src, alt, size, width, availability = true, circular = true }) => {
   const [isLoading, setIsLoading] = useState(true);
   const [isError, setIsError] = useState(false);
 
@@ -19,32 +21,38 @@ const ProfilePic: React.FC<{
     setIsLoading(false);
   };
 
+  const appliedWidth = width ?? size;
+
   return (
     <div
       className="relative inline-block"
-      style={{ height: size, width: size }}
+      style={{ height: size, width: appliedWidth }}
     >
       {isLoading && !isError && (
         <div
-          className="absolute inset-0 bg-gray-200 rounded-full animate-skeleton bg-gradient-to-r from-gray-200 via-gray-300 to-gray-200 bg-[length:200%_100%]"
-          style={{ height: size, width: size }}
+          className={`absolute inset-0 bg-gray-200 animate-skeleton bg-gradient-to-r from-gray-200 via-gray-300 to-gray-200 bg-[length:200%_100%] ${
+            circular ? 'rounded-full' : 'rounded-custom-5'
+          }`}
+          style={{ height: size, width: appliedWidth }}
         />
       )}
       {isError ? (
         <div
-          className="inline-block bg-gray-200 rounded-full ring-2 ring-white flex items-center justify-center"
-          style={{ height: size, width: size }}
+          className={`inline-block bg-gray-200 ring-2 ring-white flex items-center justify-center ${
+            circular ? 'rounded-full' : 'rounded-custom-5'
+          }`}
+          style={{ height: size, width: appliedWidth }}
         >
           <UserIcon />
         </div>
       ) : (
         <img
           src={src}
           alt={alt}
-          className={`inline-block rounded-full ring-2 ring-white object-cover ${
-            !availability ? 'opacity-60' : ''
-          }`}
-          style={{ height: size, width: size }}
+          className={`inline-block ring-2 ring-white object-cover ${
+            circular ? 'rounded-full' : 'rounded-custom-5'
+          } ${!availability ? 'opacity-60' : ''} max-w-full`}
+          style={{ height: size, width: appliedWidth }}
           referrerPolicy="no-referrer"
           onLoad={handleImageLoad}
           onError={handleImageError}

diff --git a/src/pages/Mentors/index.tsx b/src/pages/Mentors/index.tsx
@@ -106,7 +106,7 @@ const Mentors = () => {
         </div>
 
         {sortedMentors.length > 0 ? (
-          <div className="flex-grow grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 gap-8 items-start">
+          <div className="flex-grow grid grid-cols-[repeat(auto-fit,_minmax(16rem,_1fr))] gap-4 items-start">
             {sortedMentors.map((mentor) => (
               <MentorCard key={mentor.uuid} mentor={mentor} />
             ))}

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -5,16 +5,23 @@ export const theme = {
     colors: {
       'primary-blue': '#1677FF',
       'darkmod-blue': '#3D317C',
+      'bd-gray': '#D1D5DB',
     },
     animation: {
       'skeleton': 'skeleton-loading 1.5s infinite',
     },
+    fontFamily: {
+      'sf-pro': ['"SF Pro Text"', 'sans-serif'],
+    },
     keyframes: {
       'skeleton-loading': {
         '0%': { backgroundPosition: '100% 0' },
         '100%': { backgroundPosition: '-100% 0' },
       },
     },
+    borderRadius: {
+      'custom-5': '5px',
+    },
   },
 };
 export const plugins = [];