Skip to content

Commit 4b7ff58

Browse files
mhenriettemhenriette
committed
fix: colors in challenge card
1 parent 7c08677 commit 4b7ff58

File tree

15 files changed

+79
-48
lines changed

15 files changed

+79
-48
lines changed

‎src/components/cards/Objective.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export default function ObjectiveCard({ iconcolor = "", crossmark = false, objec
3838
<div className="py-0 pt-px mt-px mr-2" style={{ color: iconcolor || colors?.primary }}>
3939
{crossmark ? <Crossmark /> : <Checkmark />}
4040
</div>
41-
<div className="text-sm font-normal leading-5 contains-ordered-list" dangerouslySetInnerHTML={{ __html: objective as string }} />
41+
<div className="text-sm font-normal leading-5 contains-ordered-list text-surface-text-primary" dangerouslySetInnerHTML={{ __html: objective as string }} />
4242
</div>
4343
);
4444
}

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

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -33,23 +33,23 @@ export default function ChallengeCard({ data, community, isCourseEnd }: Challeng
3333

3434

3535
return (
36-
<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">
37-
<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">
36+
<div className="w-full flex flex-col sm:flex-row md:flex-col lg:flex-row border-solid border border-surface-border-primary bg-surface-bg-secondary rounded-3xl mb-5 group text-surface-text-secondary">
37+
<div className="border-solid border -m-px border-surface-border-primary bg-surface-bg-primary rounded-3xl sm:p-8 sm:pb-6 p-6 sm:w-2/3 md:w-auto lg:w-2/3">
3838
<div className="flex flex-col mb-1">
3939
<div className="lg:pr-20">
4040
{expiresAt && (
41-
<div className="text-gray-400 text-sm font-normal mb-4.5 md:mb-6">
41+
<div className="text-surface-text-tertiary text-sm font-normal mb-4.5 md:mb-6">
4242
<span>{t("communities.overview.challenge.deadline")}</span>
4343
<span className="font-medium pl-1">{expiresAt}</span>
4444
</div>
4545
)}
46-
<div className="text-lg text-gray-900 font-medium leading-normal mb-3">{data.name}</div>
46+
<div className="text-lg text-surface-text-primary font-medium leading-normal mb-3">{data.name}</div>
4747
<Badges challenge={data} />
48-
<div className="text-sm text-gray-700">{data.description}</div>
48+
<div className="text-sm text-surface-text-secondary">{data.description}</div>
4949
</div>
5050
<div className="divide-y-2 divide-gray-200 divide-dotted flex flex-col mt-8">
5151
{learningMaterialsCount && (
52-
<p className="pb-3 md:pb-4 text-sm font-medium text-gray-400">{`${learningMaterialsCount} Learning ${learningMaterialsCount === 1 ? "material" : "materials"} included`}</p>
52+
<p className="pb-3 md:pb-4 text-sm font-medium text-surface-text-tertiary">{`${learningMaterialsCount} Learning ${learningMaterialsCount === 1 ? "material" : "materials"} included`}</p>
5353
)}
5454
<div className="lg:flex lg:flex-row flex-col justify-between pt-3 md:pt-4 items-center">
5555
<Link href={link}>
@@ -66,11 +66,11 @@ export default function ChallengeCard({ data, community, isCourseEnd }: Challeng
6666
<Image src={data?.certificateData?.icon} alt="achievement" fill priority />
6767
</div>
6868
<div className="">
69-
<h1 className="font-bold text-gray-400 text-xs uppercase pb-3">{t("communities.overview.challenge.unlock.certificate")}</h1>
69+
<h1 className="font-bold text-surface-text-tertiary text-xs uppercase pb-3">{t("communities.overview.challenge.unlock.certificate")}</h1>
7070
<RewardCertificate rewards={data?.rewards} />
7171
</div>
72-
{data?.isHackathon && <p className="py-1.5 border-t border-gray-200 text-sm">{t("communities.overview.challenge.participate", { token: reward?.token })}</p>}
72+
{data?.isHackathon && <p className="py-1.5 border-t border-surface-border-primary text-sm">{t("communities.overview.challenge.participate", { token: reward?.token })}</p>}
7373
</div>
7474
</div>
7575
);
76-
}
76+
}

‎src/components/cards/challenge/_partials/Learning.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,11 @@ export default function Learning({ title, description, link }: LearningProps): J
2323
const { t } = useTranslation();
2424

2525
return (
26-
<div className="flex flex-col gap-3 relative p-6 divide-y sm:divide-y-0 sm:divide-x divide-gray-200 rounded-3xl group text-gray-700 sm:p-7 border-solid border border-gray-200">
26+
<div className="flex flex-col gap-3 relative bg-surface-bg-primary p-6 divide-y sm:divide-y-0 sm:divide-x divide-gray-200 rounded-3xl group sm:p-7 border-solid border border-surface-border-primary">
2727
<div className="flex flex-col justify-between w-full sm:pb-0">
2828
<div className="flex flex-col">
29-
<div className="text-lg font-medium leading-normal text-gray-900">{title}</div>
30-
<div className="text-sm font-normal text-gray-700 mt-3 max-w-xxs pb-6 mb-5">{description}</div>
29+
<div className="text-lg font-medium leading-normal text-surface-text-primary">{title}</div>
30+
<div className="text-sm font-normal text-surface-text-secondary mt-3 max-w-xxs pb-6 mb-5">{description}</div>
3131
</div>
3232
<div className="absolute bottom-0 pb-4">
3333
<Link href={link}>

‎src/components/cards/challenge/_partials/RelatedLearning.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,12 @@ interface RelatedLearningProps {
2222
*/
2323
const RelatedLearning: React.FC<RelatedLearningProps> = ({ title, description, path }) => {
2424
return (
25-
<div className="flex flex-col relative w-full p-6 divide-y sm:divide-y-0 sm:divide-x divide-gray-200 rounded-3xl group text-gray-700 sm:p-7 border-solid border border-gray-200">
25+
<div className="flex flex-col relative w-full bg-surface-bg-primary p-6 divide-y sm:divide-y-0 sm:divide-x divide-gray-200 rounded-3xl group sm:p-7 border-solid border border-surface-border-primary">
2626
<div className="flex flex-col justify-between w-full sm:pb-0">
2727
<div className="flex flex-col">
28-
<div className="text-base font-medium leading-normal text-gray-900">{title}</div>
28+
<div className="text-base font-medium leading-normal text-surface-text-primary">{title}</div>
2929

30-
<div className="text-sm font-normal text-gray-700 mt-3 max-w-xxs pb-6">{description}</div>
30+
<div className="text-sm font-normal text-surface-text-secondary mt-3 max-w-xxs pb-6">{description}</div>
3131
</div>
3232

3333
<div className="">

‎src/components/challenge/ExpiryDate.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ import { ReactElement } from "react-markdown/lib/react-markdown";
1212
export default function ExpiryDate({ expiresAt }: { expiresAt?: string }): ReactElement {
1313
const { t } = useTranslation();
1414
return (
15-
<div className="bg-gray-50 py-8 px-3 border rounded border-solid border-gray-200 flex items-center justify-start md:justify-center">
16-
<p className="text-gray-700 flex flex-col md:flex-row mx-auto items-center gap-1 text-sm">
15+
<div className="bg-surface-bg-secondary py-8 px-3 border rounded border-solid border-surface-border-primary flex items-center justify-start md:justify-center">
16+
<p className="text-surface-text-primary flex flex-col md:flex-row mx-auto items-center gap-1 text-sm">
1717
{t("communities.overview.challenge.expiry")}
1818
<span className="font-medium text-center">{expiresAt}</span>
1919
</p>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export default function Learning({ courses, learningModules, community }: { cour
2424
isExpanded
2525
content={
2626
<>
27-
<div className="text-base font-normal text-slate-700 py-6">{t("communities.overview.challenge.learning.title")}</div>
27+
<div className="text-base font-normal text-surface-text-primary py-6">{t("communities.overview.challenge.learning.title")}</div>
2828
<div className="grid grid-cols-1 md:grid-cols-2 gap-3 mb-3">
2929
{courses?.map((course) => (
3030
<LearningCard

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,14 +21,16 @@ export function OverviewRewards(): ReactElement {
2121

2222
return (
2323
<Section title={`${t("communities.overview.reward.title")}`}>
24-
<p className="my-6 text-lg">{t("course.challenge.reward.certificate.description")}</p>
24+
<p className="my-6 text-lg text-surface-text-secondary">{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">
2626
<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">
30-
<div className="flex flex-col w-full lg:w-1/2">{challenge?.rewards && <RewardCertificate rewards={challenge?.rewards} isReward />}</div>
31-
{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>}
30+
<div className="flex flex-col text-surface-text-primary w-full lg:w-1/2">{challenge?.rewards && <RewardCertificate rewards={challenge?.rewards} isReward />}</div>
31+
{!challenge?.isHackathon && (
32+
<div className="pb-1.5 border-b border-surface-border-primary text-surface-text-primary w-full lg:w-1/2">{t("communities.overview.challenge.participate", { token: token })}</div>
33+
)}
3234
</div>
3335
</div>
3436
</Section>

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ export default function RubricHeader({ ratingCriteria, selected, hideTitle = fal
5757
const hackatonPassingScore = t("communities.challenge.hackathon.passing.score", { threshold: challenge?.threshold, prizePool: `USD ${reward?.amount}` });
5858

5959
return (
60-
<div className="text-base font-normal text-slate-700 pt-6 inline-flex flex-wrap items-center gap-1">
60+
<div className="text-base font-normal text-surface-text-primary pt-6 inline-flex flex-wrap items-center gap-1">
6161
{challenge?.isHackathon ? (
6262
<div dangerouslySetInnerHTML={{ __html: challenge?.additionalInfo?.[GRADING_CRITERIA].text || hackatonPassingScore }} />
6363
) : (
@@ -92,10 +92,11 @@ export default function RubricHeader({ ratingCriteria, selected, hideTitle = fal
9292
<div key={`rating-criteria-item-${i}`} className="mt-6">
9393
<span className="block text-sm capitalize font-medium">{criteria.name}</span>
9494
<div className="grid grid-cols-1 sm:space-y-4 space-y-0 md:space-y-0 md:grid-cols-2 lg:grid-cols-4 mt-3 sm:gap-y-5 gap-y-2 gap-x-3">
95+
{/* TODO: We should have this as a rubic card component*/}
9596
{criteria.rubric.map((rubric, k) => (
9697
<div
9798
key={`criteria-rubic-item-${k}`}
98-
className={`text-sm border border-transparent sm:border-gray-200 px-0 py-2 sm:p-3.5 rounded-2xl ${
99+
className={`text-sm border border-transparent sm:border-surface-border-primary bg-surface-bg-primary px-0 py-2 sm:p-3.5 rounded-2xl ${
99100
selected?.length && !selectedRubric(rubric.id) ? "opacity-40" : "relative"
100101
}`}
101102
>
@@ -108,7 +109,7 @@ export default function RubricHeader({ ratingCriteria, selected, hideTitle = fal
108109
<span className="mr-1">{selectedRubric(rubric.id) ? selectedRubric(rubric.id)?.points : rubric.points}</span>
109110
{t("communities.challenge.criteria.points")}
110111
</span>
111-
<span className="block leading-normal">{rubric.text}</span>
112+
<span className="block leading-normal text-surface-text-secondary">{rubric.text}</span>
112113
</div>
113114
))}
114115
</div>

‎src/components/sections/communities/_partials/Header.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export default function Header({
1919
isTeamChallenge = false,
2020
isHackathon = false,
2121
}: HeaderProps): ReactElement {
22-
const headerClassName = classNames("text-4xl md:text-5xl leading-none text-gray-900", {
22+
const headerClassName = classNames("text-4xl md:text-5xl leading-none text-surface-text-primary", {
2323
"hidden md:flex": hideTitleOnMobile,
2424
});
2525

@@ -28,7 +28,7 @@ export default function Header({
2828
<h1 className={headerClassName}>{title}</h1>
2929
<div className="flex items-start gap-1">
3030
{subtitle && (
31-
<h2 className={`text-4xl flex items-center font-normal leading-none md:text-5xl ${title? "text-gray-400": "text-gray-900"}`}>
31+
<h2 className={`text-4xl flex items-center font-normal leading-none md:text-5xl ${title ? "text-surface-text-tertiary" : "text-surface-text-primary"}`}>
3232
{subtitle}
3333
{isTeamChallenge && (
3434
<div className="h-full flex -mt-2 items-start ml-2">
@@ -38,7 +38,7 @@ export default function Header({
3838
</h2>
3939
)}
4040
</div>
41-
{description && <p className="lg:w-182.5 my-2 md:my-5 text-base md:text-.5xl w-full md:w-10/12 leading-loose md:leading-snug text-gray-700">{description}</p>}
41+
{description && <p className="lg:w-182.5 my-2 md:my-5 text-base md:text-.5xl w-full md:w-10/12 leading-loose md:leading-snug text-surface-text-primary">{description}</p>}
4242
</div>
4343
);
4444
}

‎src/components/sections/communities/_partials/Section.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ export default function Section({ title, titleBold = true, subtitle, id, hideSub
3737
return (
3838
<div id={id} className={`text-xl md:text-.5xl px-0 py-6 ${className}`}>
3939
{title && <H3 bold={titleBold}>{title}</H3>}
40-
<p className={`text-base md:text-.5xl font-normal leading-normal ${hideSubtitleOnMobile ? "hidden" : ""}`}>{subtitle}</p>
40+
<p className={`text-base md:text-.5xl font-normal leading-normal text-surface-text-primary ${hideSubtitleOnMobile ? "hidden" : ""}`}>{subtitle}</p>
4141
<div>{children}</div>
4242
</div>
4343
);

0 commit comments

Comments
 (0)