fix: spacing in challenge card and add course count

Author: mhenriette

src/components/cards/challenge/Badges.tsx

@@ -25,8 +25,10 @@ export default function Badges({ challenge, className }: BadgeProps) {
     return setChallengeLevel("course.challenge.level-2");
   }, [challenge.level]);
 
+  if (!challenge?.level && !challenge?.isTeamChallenge) return <></>;
+
   return (
-    <div className={`uppercase flex flex-wrap gap-2 mb-6 ${className}`}>
+    <div className={`uppercase flex flex-wrap gap-2 mb-4 ${className}`}>
       {challenge?.level && <Tag>{t(challengeLevel)}</Tag>}
       {challenge?.isTeamChallenge && <Tag type="light">{challenge?.isHackathon ? "Hackathon" : "Team"} challenge</Tag>}
     </div>

src/components/cards/challenge/Challenge.tsx

@@ -27,30 +27,28 @@ export default function ChallengeCard({ data, community, isCourseEnd }: Challeng
   const link = `/communities/${community.slug}/challenges/${data.id}`;
   const expiresAt = useMemo(() => (data.expiresAt ? new Date(data.expiresAt).toLocaleDateString() : null), [data.expiresAt]);
   const reward = isCourseEnd ? data?.rewards?.find((reward) => reward.type === "SUBMISSION") : data?.reward;
-  const learningModulesCount = data?.learningModules?.length || 0;
+  const learningMaterialsCount = data?.learningModules?.length + data?.courses?.length || 0;
 
   return (
-    <div className="w-full justify-between- flex flex-col sm:flex-row  md:flex-col lg:flex-row  border-solid border border-gray-200 bg-gray-50 rounded-3xl mb-5 group text-gray-700">
-      <div className="border-solid border-b border-gray-300 bg-white rounded-3xl sm:p-8 sm:pb-6 p-6 lg:w-2/3">
+    <div className="w-full flex flex-col sm:flex-row  md:flex-col lg:flex-row  border-solid border border-gray-200 bg-gray-50 rounded-3xl mb-5 group text-gray-700">
+      <div className="border-solid border-b border-r-0 sm:border-b-0 sm:border-r md:border-b md:border-r-0 lg:border-r lg:border-b-0 border-gray-300 bg-white rounded-3xl sm:p-8 sm:pb-6 p-6 lg:w-2/3">
         <div className="flex flex-col mb-1">
-          <div className="lg:pr-20 lg:w-3/5-">
-            <div className="text-gray-400 lg:w-2/3 text-sm font-normal mb-6 lg:mb-0">
-              {expiresAt && (
-                <>
+          <div className="lg:pr-20">
+            {expiresAt && (
+              <div className="text-gray-400 lg:w-2/3 text-sm font-normal mb-4">
                   <span>{t("communities.overview.challenge.deadline")}</span>
                   <span className="font-medium pl-1">{expiresAt}</span>
-                </>
-              )}
-            </div>
-            <div className="text-lg text-gray-900 font-medium leading-normal mb-6">{data.name}</div>
-            <Badges challenge={data} className="" />
-            <div className="text-sm pb-2 text-gray-700">{data.description}</div>
+              </div>
+            )}
+            <div className="text-lg text-gray-900 font-medium leading-normal mb-4">{data.name}</div>
+            <Badges challenge={data} />
+            <div className="text-sm text-gray-700">{data.description}</div>
           </div>
-          <div className="divide-y-2 divide-gray-200 divide-dotted flex flex-col mt-3">
-            <p className="pb-6">
-              {learningModulesCount ? `${learningModulesCount}  learning ${learningModulesCount === 1 ? "module" : "modules"} included` : "No learning modules included"}
-            </p>
-            <div className="lg:flex lg:flex-row flex-col justify-between pt-6 items-center">
+          <div className="divide-y-2 divide-gray-200 divide-dotted flex flex-col mt-4">
+            {learningMaterialsCount && (
+              <p className="pb-5 text-sm font-medium text-gray-400">{`${learningMaterialsCount}  Learning ${learningMaterialsCount === 1 ? "material" : "materials"} included`}</p>
+            )}
+            <div className="lg:flex lg:flex-row flex-col justify-between pt-5 items-center">
               <Link href={link}>
                 <ArrowButton communityStyles={true} variant="outline-primary">
                   {isCourseEnd ? t("communities.overview.challenge.take.challenge") : t("communities.overview.challenge.see.challenge")}
@@ -62,11 +60,11 @@ export default function ChallengeCard({ data, community, isCourseEnd }: Challeng
       </div>
       <div className="p-6">
         <div className={"mx-auto relative rounded-full mb-5 w-[147px] h-[184px]"}>
-          <Image src={data?.certificateData?.icon} alt="achievement" fill />
+          <Image src={data?.certificateData?.icon} alt="achievement" fill priority />
         </div>
         <div className="">
           <h1 className="font-bold text-gray-400 text-xs uppercase pb-2">{t("communities.overview.challenge.unlock.certificate")}</h1>
-          <RewardCertificate rewards={data?.rewards}/>
+          <RewardCertificate rewards={data?.rewards} />
         </div>
         {data?.isHackathon && <p className="py-2 border-t border-gray-200 text-sm">{t("communities.overview.challenge.participate", { token: reward?.token })}</p>}
       </div>

src/components/sections/communities/overview/Sidebar.tsx

@@ -32,7 +32,7 @@ export default function Sidebar(): JSX.Element {
   const mainLink = hasCurrentCommunity ? `/communities/${currentCommunity.slug}` : "";
 
   return (
-    <div className="flex flex-col divide-y divide-solid divide-gray-100 w-full text-gray-700 space-y-6">
+    <div className="flex flex-col md:divide-y divide-solid divide-gray-100 w-full text-gray-700 space-y-6">
       <Link href={mainLink}>
         <div className={isActive(mainLink) ? "" : "opacity-80"}>
           <div className="font-medium text-.5xl leading-snug">{t("communities.overview.challenges.title")}</div>

src/components/ui/Tag.tsx

@@ -44,7 +44,7 @@ export default function Tag({ rounded = true, type = "gray", value, children, ..
   );
   return (
     <div {...props} className={tagClassNames}>
-      <span className="text-xs font-medium block leading-none">{value ? <span>{value}</span> : children}</span>
+      <span className="text-xs font-medium block leading-none whitespace-nowrap">{value ? <span>{value}</span> : children}</span>
     </div>
   );
 }