Skip to content

Commit 45d5cbb

Browse files
musayannmusayann
authored
Merge pull request #1213 from dacadeorg/fix/challenge-card
fix: spacing in challenge card and add course count
2 parents fba979c + ea0e73c commit 45d5cbb

File tree

6 files changed

+33
-33
lines changed

6 files changed

+33
-33
lines changed

‎src/components/cards/challenge/Badges.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,10 @@ export default function Badges({ challenge, className }: BadgeProps) {
2525
return setChallengeLevel("course.challenge.level-2");
2626
}, [challenge.level]);
2727

28+
if (!challenge?.level && !challenge?.isTeamChallenge) return <></>;
29+
2830
return (
29-
<div className={`uppercase flex flex-wrap gap-2 mb-6 ${className}`}>
31+
<div className={`uppercase flex flex-wrap gap-2 mb-3 ${className}`}>
3032
{challenge?.level && <Tag>{t(challengeLevel)}</Tag>}
3133
{challenge?.isTeamChallenge && <Tag type="light">{challenge?.isHackathon ? "Hackathon" : "Team"} challenge</Tag>}
3234
</div>

‎src/components/cards/challenge/Challenge.tsx‎

Lines changed: 24 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -27,30 +27,28 @@ export default function ChallengeCard({ data, community, isCourseEnd }: Challeng
2727
const link = `/communities/${community.slug}/challenges/${data.id}`;
2828
const expiresAt = useMemo(() => (data.expiresAt ? new Date(data.expiresAt).toLocaleDateString() : null), [data.expiresAt]);
2929
const reward = isCourseEnd ? data?.rewards?.find((reward) => reward.type === "SUBMISSION") : data?.reward;
30-
const learningModulesCount = data?.learningModules?.length || 0;
30+
const learningMaterialsCount = data?.learningModules?.length + data?.courses?.length
3131

3232
return (
33-
<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">
34-
<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">
33+
<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">
34+
<div className="border-solid border -m-px border-gray-200 bg-white rounded-3xl sm:p-8 sm:pb-6 p-6 sm:w-2/3 md:w-auto lg:w-2/3">
3535
<div className="flex flex-col mb-1">
36-
<div className="lg:pr-20 lg:w-3/5-">
37-
<div className="text-gray-400 lg:w-2/3 text-sm font-normal mb-6 lg:mb-0">
38-
{expiresAt && (
39-
<>
40-
<span>{t("communities.overview.challenge.deadline")}</span>
41-
<span className="font-medium pl-1">{expiresAt}</span>
42-
</>
43-
)}
44-
</div>
45-
<div className="text-lg text-gray-900 font-medium leading-normal mb-6">{data.name}</div>
46-
<Badges challenge={data} className="" />
47-
<div className="text-sm pb-2 text-gray-700">{data.description}</div>
36+
<div className="lg:pr-20">
37+
{expiresAt && (
38+
<div className="text-gray-400 text-sm font-normal mb-4.5 md:mb-6">
39+
<span>{t("communities.overview.challenge.deadline")}</span>
40+
<span className="font-medium pl-1">{expiresAt}</span>
41+
</div>
42+
)}
43+
<div className="text-lg text-gray-900 font-medium leading-normal mb-3">{data.name}</div>
44+
<Badges challenge={data} />
45+
<div className="text-sm text-gray-700">{data.description}</div>
4846
</div>
49-
<div className="divide-y-2 divide-gray-200 divide-dotted flex flex-col mt-3">
50-
<p className="pb-6">
51-
{learningModulesCount ? `${learningModulesCount} learning ${learningModulesCount === 1 ? "module" : "modules"} included` : "No learning modules included"}
52-
</p>
53-
<div className="lg:flex lg:flex-row flex-col justify-between pt-6 items-center">
47+
<div className="divide-y-2 divide-gray-200 divide-dotted flex flex-col mt-8">
48+
{learningMaterialsCount && (
49+
<p className="pb-3 md:pb-4 text-sm font-medium text-gray-400">{`${learningMaterialsCount} Learning ${learningMaterialsCount === 1 ? "material" : "materials"} included`}</p>
50+
)}
51+
<div className="lg:flex lg:flex-row flex-col justify-between pt-3 md:pt-4 items-center">
5452
<Link href={link}>
5553
<ArrowButton communityStyles={true} variant="outline-primary">
5654
{isCourseEnd ? t("communities.overview.challenge.take.challenge") : t("communities.overview.challenge.see.challenge")}
@@ -60,15 +58,15 @@ export default function ChallengeCard({ data, community, isCourseEnd }: Challeng
6058
</div>
6159
</div>
6260
</div>
63-
<div className="p-6">
64-
<div className={"mx-auto relative rounded-full mb-5 w-[147px] h-[184px]"}>
65-
<Image src={data?.certificateData?.icon} alt="achievement" fill />
61+
<div className="p-6 lg:flex-1">
62+
<div className="mx-auto relative rounded-full mb-5 w-[147px] h-[184px]">
63+
<Image src={data?.certificateData?.icon} alt="achievement" fill priority />
6664
</div>
6765
<div className="">
68-
<h1 className="font-bold text-gray-400 text-xs uppercase pb-2">{t("communities.overview.challenge.unlock.certificate")}</h1>
69-
<RewardCertificate rewards={data?.rewards}/>
66+
<h1 className="font-bold text-gray-400 text-xs uppercase pb-3">{t("communities.overview.challenge.unlock.certificate")}</h1>
67+
<RewardCertificate rewards={data?.rewards} />
7068
</div>
71-
{data?.isHackathon && <p className="py-2 border-t border-gray-200 text-sm">{t("communities.overview.challenge.participate", { token: reward?.token })}</p>}
69+
{data?.isHackathon && <p className="py-1.5 border-t border-gray-200 text-sm">{t("communities.overview.challenge.participate", { token: reward?.token })}</p>}
7270
</div>
7371
</div>
7472
);

‎src/components/cards/challenge/RewardCertificate.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,8 @@ export default function RewardCertificate({ rewards, isReward }: RewardCertifica
2626
<div
2727
key={reward.id}
2828
className={classNames(
29-
"flex items-center gap-1 border-gray-200 pb-2",
30-
{ "pt-2": index !== 0 },
29+
"flex items-center gap-1 border-gray-200 pb-1.5",
30+
{ "pt-1.5": index !== 0 },
3131
{ "border-b": (index !== rewards.length - 1 && isReward) || (rewards.length === 1 && isReward) || index !== rewards.length - 1 }
3232
)}
3333
>

‎src/components/sections/challenges/Rewards.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,14 +23,14 @@ export function OverviewRewards(): ReactElement {
2323
<Section title={`${t("communities.overview.reward.title")}`}>
2424
<p className="my-5 text-lg">{t("course.challenge.reward.certificate.description")}</p>
2525
<div className="text-sm mt-6 flex gap-8 w-full md:w-2/3 items-center">
26-
<div className="">
26+
<div>
2727
<Certificate size="medium" name={router.query?.slug as string} />
2828
</div>
2929
<div className="flex flex-col lg:flex-row justify-between gap-2 items-start w-full">
3030
<div className="flex flex-col w-full lg:w-1/2">
3131
{challenge?.rewards && <RewardCertificate rewards={challenge?.rewards} isReward />}
3232
</div>
33-
{challenge?.isHackathon && <div className="pb-2 border-b border-gray-200 w-full lg:w-1/2">{t("communities.overview.challenge.participate", { token: token })}</div>}
33+
{challenge?.isHackathon && <div className="pb-1.5 border-b border-gray-200 w-full lg:w-1/2">{t("communities.overview.challenge.participate", { token: token })}</div>}
3434
</div>
3535
</div>
3636
</Section>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export default function Sidebar(): JSX.Element {
3232
const mainLink = hasCurrentCommunity ? `/communities/${currentCommunity.slug}` : "";
3333

3434
return (
35-
<div className="flex flex-col divide-y divide-solid divide-gray-100 w-full text-gray-700 space-y-6">
35+
<div className="flex flex-col md:divide-y divide-solid divide-gray-100 w-full text-gray-700 space-y-6">
3636
<Link href={mainLink}>
3737
<div className={isActive(mainLink) ? "" : "opacity-80"}>
3838
<div className="font-medium text-.5xl leading-snug">{t("communities.overview.challenges.title")}</div>

‎src/components/ui/Tag.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ export default function Tag({ rounded = true, type = "gray", value, children, ..
4444
);
4545
return (
4646
<div {...props} className={tagClassNames}>
47-
<span className="text-xs font-medium block leading-none">{value ? <span>{value}</span> : children}</span>
47+
<span className="text-xs font-medium block leading-none whitespace-nowrap">{value ? <span>{value}</span> : children}</span>
4848
</div>
4949
);
5050
}

0 commit comments

Comments
 (0)