Skip to content

Commit bc944ff

Browse files
Odile078Odile078
committed
feat: update spacing in secttions of the challenge page
1 parent b1fae0f commit bc944ff

File tree

15 files changed

+42
-41
lines changed

15 files changed

+42
-41
lines changed

‎src/components/cards/CreateTeam.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -180,7 +180,7 @@ export default function CreateTeamCard({ index = 1, title = "", text = "" }: Cre
180180
};
181181

182182
return (
183-
<div className="flex flex-col relative flex-grow p-6 divide-y sm:divide-y-0 sm:divide-x divide-gray-200 rounded-3xl group text-gray-700 sm:p-7 mb-4 border-solid border border-gray-200">
183+
<div className="flex flex-col relative flex-grow 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">
184184
<div className="flex flex-col justify-between w-full sm:pb-0">
185185
<div className="flex flex-col gap-4">
186186
<div className="text-lg font-medium leading-normal text-gray-900">

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ interface ConfirmTeamInvitationProps {
2626
*/
2727
export default function ConfirmTeamInvitation({ index, title, text, invite }: ConfirmTeamInvitationProps): ReactElement {
2828
return (
29-
<div className="flex flex-col relative flex-grow p-6 rounded-3xl group text-gray-700 sm:p-7 mb-4 border-solid border border-gray-200">
29+
<div className="flex flex-col relative flex-grow p-6 rounded-3xl group text-gray-700 sm:p-7 border-solid border border-gray-200">
3030
<div className="flex flex-col justify-between w-full sm:pb-0">
3131
<div className="flex flex-col">
3232
<div className="text-lg font-medium leading-normal text-gray-900">

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ interface FormTeamCardProps {
2020

2121
export default function FormTeamCard({ index = 1, title, description }: FormTeamCardProps): JSX.Element {
2222
return (
23-
<div className="flex flex-col md:w-2/5 relative p-6 divide-y sm:divide-y-0 sm:divide-x divide-gray-200 rounded-3xl group text-gray-700 sm:p-7 mb-4 border-solid border border-gray-200">
23+
<div className="flex flex-col md:w-2/5 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">
2424
<div className="flex flex-col justify-between w-full sm:pb-0 h-full ">
2525
<div className="flex flex-col">
2626
<div className="text-lg font-medium leading-normal text-gray-900">

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

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

2525
return (
26-
<div className="flex flex-col relative md:w-1/2s p-6 divide-y sm:divide-y-0 sm:divide-x divide-gray-200 rounded-3xl group text-gray-700 sm:p-7 mb-4 border-solid border border-gray-200">
26+
<div className="flex flex-col gap-3 relative md:w-1/2s 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">
2727
<div className="flex flex-col justify-between w-full sm:pb-0">
2828
<div className="flex flex-col">
2929
<div className="text-lg font-medium leading-normal text-gray-900">{title}</div>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ 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 mb-4 border-solid border border-gray-200">
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">
2626
<div className="flex flex-col justify-between w-full sm:pb-0">
2727
<div className="flex flex-col">
2828
<div className="text-base font-medium leading-normal text-gray-900">{title}</div>

‎src/components/challenge/ExpiryDate.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ 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-6 px-3 md:py-9 md:px-3 border rounded border-solid border-gray-200 flex items-center justify-start md:justify-center">
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">
1616
<p className="text-gray-700 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>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@ export default function Learning({ courses, learningModules, community }: { cour
2424
isExpanded
2525
content={
2626
<>
27-
<div className="text-base font-normal text-slate-700 pt-8 pb-7 md:w-182.5">{t("communities.overview.challenge.learning.title")}</div>
28-
<div className="md:grid grid-cols-2 gap-3">
27+
<div className="text-base font-normal text-slate-700 py-6">{t("communities.overview.challenge.learning.title")}</div>
28+
<div className="grid grid-cols-1 md:grid-cols-2 gap-3 mb-3">
2929
{courses?.map((course) => (
3030
<LearningCard
3131
key={`learning-card-data-${course.id}`}
@@ -35,7 +35,7 @@ export default function Learning({ courses, learningModules, community }: { cour
3535
/>
3636
))}
3737
</div>
38-
<div className="md:grid grid-cols-3 gap-3">
38+
<div className="grid grid-cols-1 md:grid-cols-3 gap-3">
3939
{learningModules?.map((learning) => (
4040
<RelatedLearningCard
4141
key={`related-learning-card-${learning.id}`}

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

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -23,20 +23,22 @@ export default function Objectives(): ReactElement {
2323
const expirationDate = challenge?.expiresAt && DateManager.format(challenge.expiresAt, "MMMM d, yyyy", "en");
2424
return (
2525
<Section title={`${t("communities.overview.challenge.objective.title")}`}>
26-
<div className="space-y-5">
26+
<div className="space-y-6">
2727
<ObjectiveList objectives={challenge?.objectives} />
28-
{expirationDate && <ExpiryDate expiresAt={expirationDate} />}
29-
<Hint>
30-
{containsLink.test(challenge?.hint as string) ? (
31-
<span
32-
dangerouslySetInnerHTML={{
33-
__html: challenge?.hint as string,
34-
}}
35-
/>
36-
) : (
37-
<>{challenge?.hint}</>
38-
)}
39-
</Hint>
28+
<div className="space-y-3">
29+
{expirationDate && <ExpiryDate expiresAt={expirationDate} />}
30+
<Hint>
31+
{containsLink.test(challenge?.hint as string) ? (
32+
<span
33+
dangerouslySetInnerHTML={{
34+
__html: challenge?.hint as string,
35+
}}
36+
/>
37+
) : (
38+
<>{challenge?.hint}</>
39+
)}
40+
</Hint>
41+
</div>
4042
</div>
4143
</Section>
4244
);

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

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,21 +15,19 @@ import RewardCertificate from "@/components/cards/challenge/RewardCertificate";
1515
*/
1616
export function OverviewRewards(): ReactElement {
1717
const { t } = useTranslation();
18-
const challenge = useSelector((state)=>state.challenges.current)
18+
const challenge = useSelector((state) => state.challenges.current);
1919
const router = useRouter();
2020
const token = challenge?.reward?.token || challenge?.rewards[0]?.token || "";
2121

2222
return (
2323
<Section title={`${t("communities.overview.reward.title")}`}>
24-
<p className="my-5 text-lg">{t("course.challenge.reward.certificate.description")}</p>
24+
<p className="my-6 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">
2626
<div className="">
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">
31-
{challenge?.rewards && <RewardCertificate rewards={challenge?.rewards} isReward />}
32-
</div>
30+
<div className="flex flex-col w-full lg:w-1/2">{challenge?.rewards && <RewardCertificate rewards={challenge?.rewards} isReward />}</div>
3331
{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>}
3432
</div>
3533
</div>

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

Lines changed: 5 additions & 4 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-8 md:w-182.5 inline-flex flex-wrap items-center gap-1">
60+
<div className="text-base font-normal text-slate-700 pt-6 inline-flex flex-wrap items-center gap-1">
6161
{challenge?.isHackathon ? (
6262
<div dangerouslySetInnerHTML={{ __html: challenge?.additionalInfo?.[GRADING_CRITERIA].text || hackatonPassingScore }} />
6363
) : (
@@ -89,14 +89,15 @@ export default function RubricHeader({ ratingCriteria, selected, hideTitle = fal
8989
<>
9090
<div>
9191
{ratingCriteria.map((criteria, i) => (
92-
<div key={`rating-criteria-item-${i}`} className="mt-8">
92+
<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">
9595
{criteria.rubric.map((rubric, k) => (
9696
<div
9797
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 ${selected?.length && !selectedRubric(rubric.id) ? "opacity-40" : "relative"
99-
}`}
98+
className={`text-sm border border-transparent sm:border-gray-200 px-0 py-2 sm:p-3.5 rounded-2xl ${
99+
selected?.length && !selectedRubric(rubric.id) ? "opacity-40" : "relative"
100+
}`}
100101
>
101102
{selectedRubric(rubric.id) && (
102103
<span className="absolute right-2 bottom-3 w-3" style={{ color: colors?.textAccent }}>

0 commit comments

Comments
 (0)