Merge branch 'stage'

musayann · musayann · commit 91623883aa05 · 2024-05-27T12:02:56.000+02:00
diff --git a/__tests__/components/wrappers/ThemeWrapper.test.tsx b/__tests__/components/wrappers/ThemeWrapper.test.tsx
@@ -0,0 +1,13 @@
+import ThemeWrapper from "@/components/wrappers/ThemeWrapper";
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+
+describe("ThemeWrapper", () => {
+  it("should render the theme wrapper", () => {
+    render(<ThemeWrapper>Theme wrapper</ThemeWrapper>);
+    const themeWrapper = screen.getByTestId("themeWrapper");
+
+    expect(themeWrapper).toBeInTheDocument();
+    expect(themeWrapper.textContent).toBe("Theme wrapper");
+  });
+});
diff --git a/src/components/cards/CreateTeam.tsx b/src/components/cards/CreateTeam.tsx
@@ -180,7 +180,7 @@ export default function CreateTeamCard({ index = 1, title = "", text = "" }: Cre
   };
 
   return (
-    <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">
+    <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">
       <div className="flex flex-col justify-between w-full sm:pb-0">
         <div className="flex flex-col gap-4">
           <div className="text-lg font-medium leading-normal text-gray-900">
diff --git a/src/components/cards/challenge/ConfirmTeamInvitation.tsx b/src/components/cards/challenge/ConfirmTeamInvitation.tsx
@@ -26,7 +26,7 @@ interface ConfirmTeamInvitationProps {
  */
 export default function ConfirmTeamInvitation({ index, title, text, invite }: ConfirmTeamInvitationProps): ReactElement {
   return (
-    <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">
+    <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">
       <div className="flex flex-col justify-between w-full sm:pb-0">
         <div className="flex flex-col">
           <div className="text-lg font-medium leading-normal text-gray-900">
diff --git a/src/components/cards/challenge/_partials/FormTeam.tsx b/src/components/cards/challenge/_partials/FormTeam.tsx
@@ -20,7 +20,7 @@ interface FormTeamCardProps {
 
 export default function FormTeamCard({ index = 1, title, description }: FormTeamCardProps): JSX.Element {
   return (
-    <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">
+    <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">
       <div className="flex flex-col justify-between w-full sm:pb-0 h-full ">
         <div className="flex flex-col">
           <div className="text-lg font-medium leading-normal text-gray-900">
diff --git a/src/components/cards/challenge/_partials/Learning.tsx b/src/components/cards/challenge/_partials/Learning.tsx
@@ -23,7 +23,7 @@ export default function Learning({ title, description, link }: LearningProps): J
   const { t } = useTranslation();
 
   return (
-    <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">
+    <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">
       <div className="flex flex-col justify-between w-full sm:pb-0">
         <div className="flex flex-col">
           <div className="text-lg font-medium leading-normal text-gray-900">{title}</div>
diff --git a/src/components/cards/challenge/_partials/RelatedLearning.tsx b/src/components/cards/challenge/_partials/RelatedLearning.tsx
@@ -22,7 +22,7 @@ interface RelatedLearningProps {
  */
 const RelatedLearning: React.FC<RelatedLearningProps> = ({ title, description, path }) => {
   return (
-    <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">
+    <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">
       <div className="flex flex-col justify-between w-full sm:pb-0">
         <div className="flex flex-col">
           <div className="text-base font-medium leading-normal text-gray-900">{title}</div>
diff --git a/src/components/challenge/ExpiryDate.tsx b/src/components/challenge/ExpiryDate.tsx
@@ -12,7 +12,7 @@ import { ReactElement } from "react-markdown/lib/react-markdown";
 export default function ExpiryDate({ expiresAt }: { expiresAt?: string }): ReactElement {
   const { t } = useTranslation();
   return (
-    <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">
+    <div className="bg-gray-50 py-8 px-3 border rounded border-solid border-gray-200 flex items-center justify-start md:justify-center">
       <p className="text-gray-700 flex flex-col md:flex-row mx-auto items-center gap-1 text-sm">
         {t("communities.overview.challenge.expiry")}
         <span className="font-medium text-center">{expiresAt}</span>
diff --git a/src/components/sections/challenges/Header.tsx b/src/components/sections/challenges/Header.tsx
@@ -16,7 +16,7 @@ export default function ChallengeHeader(): ReactElement {
   const challenge = useSelector((state) => state.challenges.current);
 
   return (
-    <div>
+    <div className="space-y-6">
       <Header isTeamChallenge={challenge?.isTeamChallenge} title={challenge?.name} subtitle={t("communities.challenge.title")} isHackathon={challenge?.isHackathon} />
       <Section subtitle={challenge?.description} />
     </div>
diff --git a/src/components/sections/challenges/Learning.tsx b/src/components/sections/challenges/Learning.tsx
@@ -24,8 +24,8 @@ export default function Learning({ courses, learningModules, community }: { cour
         isExpanded
         content={
           <>
-            <div className="text-base font-normal text-slate-700 pt-8 pb-7 md:w-182.5">{t("communities.overview.challenge.learning.title")}</div>
-            <div className="md:grid grid-cols-2 gap-3">
+            <div className="text-base font-normal text-slate-700 py-6">{t("communities.overview.challenge.learning.title")}</div>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-3 mb-3">
               {courses?.map((course) => (
                 <LearningCard
                   key={`learning-card-data-${course.id}`}
@@ -35,7 +35,7 @@ export default function Learning({ courses, learningModules, community }: { cour
                 />
               ))}
             </div>
-            <div className="md:grid grid-cols-3 gap-3">
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
               {learningModules?.map((learning) => (
                 <RelatedLearningCard
                   key={`related-learning-card-${learning.id}`}
diff --git a/src/components/sections/challenges/Objectives.tsx b/src/components/sections/challenges/Objectives.tsx
@@ -23,20 +23,22 @@ export default function Objectives(): ReactElement {
   const expirationDate = challenge?.expiresAt && DateManager.format(challenge.expiresAt, "MMMM d, yyyy", "en");
   return (
     <Section title={`${t("communities.overview.challenge.objective.title")}`}>
-      <div className="space-y-5">
+      <div className="space-y-6">
         <ObjectiveList objectives={challenge?.objectives} />
-        {expirationDate && <ExpiryDate expiresAt={expirationDate} />}
-        <Hint>
-          {containsLink.test(challenge?.hint as string) ? (
-            <span
-              dangerouslySetInnerHTML={{
-                __html: challenge?.hint as string,
-              }}
-            />
-          ) : (
-            <>{challenge?.hint}</>
-          )}
-        </Hint>
+        <div className="space-y-3">
+          {expirationDate && <ExpiryDate expiresAt={expirationDate} />}
+          <Hint>
+            {containsLink.test(challenge?.hint as string) ? (
+              <span
+                dangerouslySetInnerHTML={{
+                  __html: challenge?.hint as string,
+                }}
+              />
+            ) : (
+              <>{challenge?.hint}</>
+            )}
+          </Hint>
+        </div>
       </div>
     </Section>
   );
diff --git a/src/components/sections/challenges/Rewards.tsx b/src/components/sections/challenges/Rewards.tsx
@@ -15,21 +15,19 @@ import RewardCertificate from "@/components/cards/challenge/RewardCertificate";
  */
 export function OverviewRewards(): ReactElement {
   const { t } = useTranslation();
-  const  challenge = useSelector((state)=>state.challenges.current)
+  const challenge = useSelector((state) => state.challenges.current);
   const router = useRouter();
   const token = challenge?.reward?.token || challenge?.rewards[0]?.token || "";
 
   return (
     <Section title={`${t("communities.overview.reward.title")}`}>
-      <p className="my-5 text-lg">{t("course.challenge.reward.certificate.description")}</p>
+      <p className="my-6 text-lg">{t("course.challenge.reward.certificate.description")}</p>
       <div className="text-sm mt-6 flex gap-8 w-full md:w-2/3 items-center">
         <div>
           <Certificate size="medium" name={router.query?.slug as string} />
         </div>
         <div className="flex flex-col lg:flex-row justify-between gap-2 items-start w-full">
-          <div className="flex flex-col w-full lg:w-1/2">
-            {challenge?.rewards && <RewardCertificate rewards={challenge?.rewards} isReward />}
-          </div>
+          <div className="flex flex-col w-full lg:w-1/2">{challenge?.rewards && <RewardCertificate rewards={challenge?.rewards} isReward />}</div>
           {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>}
         </div>
       </div>
diff --git a/src/components/sections/challenges/Rubric.tsx b/src/components/sections/challenges/Rubric.tsx
@@ -57,7 +57,7 @@ export default function RubricHeader({ ratingCriteria, selected, hideTitle = fal
     const hackatonPassingScore = t("communities.challenge.hackathon.passing.score", { threshold: challenge?.threshold, prizePool: `USD ${reward?.amount}` });
 
     return (
-      <div className="text-base font-normal text-slate-700 pt-8 md:w-182.5 inline-flex flex-wrap items-center gap-1">
+      <div className="text-base font-normal text-slate-700 pt-6 inline-flex flex-wrap items-center gap-1">
         {challenge?.isHackathon ? (
           <div dangerouslySetInnerHTML={{ __html: challenge?.additionalInfo?.[GRADING_CRITERIA].text || hackatonPassingScore }} />
         ) : (
@@ -89,14 +89,15 @@ export default function RubricHeader({ ratingCriteria, selected, hideTitle = fal
           <>
             <div>
               {ratingCriteria.map((criteria, i) => (
-                <div key={`rating-criteria-item-${i}`} className="mt-8">
+                <div key={`rating-criteria-item-${i}`} className="mt-6">
                   <span className="block text-sm capitalize font-medium">{criteria.name}</span>
                   <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">
                     {criteria.rubric.map((rubric, k) => (
                       <div
                         key={`criteria-rubic-item-${k}`}
-                        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"
-                          }`}
+                        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"
+                        }`}
                       >
                         {selectedRubric(rubric.id) && (
                           <span className="absolute right-2 bottom-3 w-3" style={{ color: colors?.textAccent }}>
diff --git a/src/components/sections/challenges/SetupTeamChallenge.tsx b/src/components/sections/challenges/SetupTeamChallenge.tsx
@@ -25,8 +25,8 @@ export default function SetupTeamChallenge(): JSX.Element {
 
   return (
     <Section title="Submission">
-      <div className="text-base font-normal text-slate-700 pt-8 pb-7 md:w-182.5">{t("communities.overview.challenge.team.setup.info")}</div>
-      <div className="md:flex flex-row gap-5">
+      <div className="text-base font-normal text-slate-700 py-6 md:w-182.5">{t("communities.overview.challenge.team.setup.info")}</div>
+      <div className="flex flex-col md:flex-row gap-6">
         <FormTeamCard index={1} title="Form your team" description={challenge?.additionalInfo?.[TEAM_FORMATION].text || t("communities.overview.challenge.team.organization")} />
         {invite && !invite.team?.locked ? (
           <ConfirmTeamInvitation index={2} title="Submit your team" text={`The maximum team members for this challenge is ${challenge?.teamLimit || "3"} people`} invite={invite} />
diff --git a/src/components/sections/challenges/Submission.tsx b/src/components/sections/challenges/Submission.tsx
@@ -130,14 +130,14 @@ export default function Submission(): ReactElement {
   };
 
   return (
-    <Section title={t("communities.challenge.submission")}>
+    <Section title={t("communities.challenge.submission")} className={challenge?.isTeamChallenge ? "pt-0" : ""}>
       {submissionsClosed ? (
-        <Hint className="mb-8">{t("communities.overview.challenge.submissions-closed")}</Hint>
+        <Hint className="my-6">{t("communities.overview.challenge.submissions-closed")}</Hint>
       ) : (
         <>
           {challenge?.isTeamChallenge && <p className="text-base font-normal text-slate-700 pt-2 pb-7 md:w-182.5"> {t("communities.overview.challenge.submission.description")}</p>}
           {!canSubmit ? (
-            <Hint className="mb-8">{t("communities.challenge.submission.hint")}</Hint>
+            <Hint className="mb-6">{t("communities.challenge.submission.hint")}</Hint>
           ) : (
             <form onSubmit={handleSubmit(onSubmit)}>
               {challenge?.format && (
diff --git a/src/components/sections/challenges/TeamChallenge.tsx b/src/components/sections/challenges/TeamChallenge.tsx
@@ -63,7 +63,7 @@ export default function TeamChallenge(): JSX.Element {
 
   return (
     <Section title="Team Challenge">
-      <div className="text-base font-normal text-slate-700 pt-8 pb-7 md:w-182.5">To complete the team challenge, you need to follow these steps:</div>
+      <div className="text-base font-normal text-slate-700 py-6">To complete the team challenge, you need to follow these steps:</div>
       <div className="md:flex flex-row gap-20 md:divide-y-0 divide-y divide-gray-900 divide-dotted space-y-5 md:space-y-0 space-x-0">
         {steps.map((step) => (
           <TeamChallengeCard key={`TeamChallenge-card-data-${step.index}`} index={step.index} title={step.title} text={step.text} />
diff --git a/src/components/sections/communities/_partials/Section.tsx b/src/components/sections/communities/_partials/Section.tsx
@@ -33,7 +33,7 @@ interface SectionProps {
 }
  * @returns {ReactElement}
  */
-export default function Section({ title, titleBold = true, subtitle, id, hideSubtitleOnMobile = false, children, className }: SectionProps): ReactElement {
+export default function Section({ title, titleBold = true, subtitle, id, hideSubtitleOnMobile = false, children, className = "" }: SectionProps): ReactElement {
   return (
     <div id={id} className={`text-xl md:text-.5xl px-0 py-6 ${className}`}>
       {title && <H3 bold={titleBold}>{title}</H3>}
diff --git a/src/components/sections/communities/overview/Sidebar.tsx b/src/components/sections/communities/overview/Sidebar.tsx
@@ -2,6 +2,7 @@ import { useSelector } from "@/hooks/useTypedSelector";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { useTranslation } from "next-i18next";
+import classNames from "classnames";
 
 /**
  * @interface SidebarProps
@@ -41,7 +42,7 @@ export default function Sidebar(): JSX.Element {
       </Link>
       {hasCurrentCommunity && (
         <Link href={scoreboardLink}>
-          <div className={isActive(scoreboardLink) ? "pt-5" : "opacity-80 md:block hidden scroll-smooth pt-5"}>
+          <div className={classNames("pt-6", { "opacity-80 md:block hidden scroll-smooth": isActive(scoreboardLink) })}>
             <div className="font-medium text-.5xl leading-snug">{t("communities.overview.scoreboard.title")}</div>
             <div className="text-sm font-light lg:w-full lg:pr-7 pt-2 mb-6 md:mb-0">{t("communities.overview.scoreboard.description")}</div>
           </div>
diff --git a/src/components/sections/communities/overview/scoreboard/Filter.tsx b/src/components/sections/communities/overview/scoreboard/Filter.tsx
@@ -108,42 +108,38 @@ export default function Filters(): ReactElement {
   };
 
   return (
-    <div className="lg:flex flex-col w-2/4 mr-8 divide-y divide-solid divide-gray-200 hidden">
-      <div className="divide-y divide-gray-200">
-        <div className="block mt-6 mb-6">
-          <span className="text-gray-700 mb-4">Filter by</span>
-          <div className="mt-6 mb-6">
-            {filterOptions.map((option, i) => (
-              <FilterOption
-                key={`option-${i}`}
-                defaultChecked={filterBy === option.value}
-                label={option.label}
-                value={option.value}
-                data={filterBy}
-                name="filter-by-option"
-                onChange={handleFilterByChange}
-              />
-            ))}
-          </div>
+    <div className="lg:flex flex-col mr-8 hidden mt-6 space-y-6">
+      <div>
+        <span className="text-gray-700">Filter by</span>
+        <div className="mt-3 space-y-1">
+          {filterOptions.map((option, i) => (
+            <FilterOption
+              key={`option-${i}`}
+              defaultChecked={filterBy === option.value}
+              label={option.label}
+              value={option.value}
+              data={filterBy}
+              name="filter-by-option"
+              onChange={handleFilterByChange}
+            />
+          ))}
         </div>
       </div>
 
-      <div className="pt-4">
-        <div className="block">
-          <span className="text-gray-700 mb-4">Sort</span>
-          <div className="mt-6 mb-6">
-            {sortingOptions.map((option, i) => (
-              <FilterOption
-                key={`sorting-option-${i}`}
-                defaultChecked={sortBy === option.value}
-                label={option.label}
-                value={option.value}
-                data={sortBy}
-                name="sort-by-option"
-                onChange={handleSortByChange}
-              />
-            ))}
-          </div>
+      <div>
+        <span className="text-gray-700">Sort</span>
+        <div className="mt-3 space-y-1">
+          {sortingOptions.map((option, i) => (
+            <FilterOption
+              key={`sorting-option-${i}`}
+              defaultChecked={sortBy === option.value}
+              label={option.label}
+              value={option.value}
+              data={sortBy}
+              name="sort-by-option"
+              onChange={handleSortByChange}
+            />
+          ))}
         </div>
       </div>
     </div>
diff --git a/src/components/sections/communities/overview/scoreboard/_partials/FilterOption.tsx b/src/components/sections/communities/overview/scoreboard/_partials/FilterOption.tsx
@@ -33,16 +33,14 @@ export default function FilterOption({ label = "", value = "", data = "", name =
   const isChecked = useMemo(() => value.toString().toLowerCase() === data.toLowerCase(), [data, value]);
 
   return (
-    <div className="mt-2 mb-2">
-      <label className="inline-flex items-center">
-        <Radio disabled={isChecked} {...props} name={name} data={data} value={value} className="w-8" />
-        <span
-          className={classNames("ml-4", {
-            "font-bold": isChecked,
-          })}
-        >
-          {label}
-        </span>
+    <div className="flex items-center gap-2">
+      <Radio disabled={isChecked} {...props} name={name} data={data} value={value} className="!w-4.5 !h-4.5 mx-0" />
+      <label
+        className={classNames("text-sm", {
+          "font-bold": isChecked,
+        })}
+      >
+        {label}
       </label>
     </div>
   );
diff --git a/src/components/sections/submissions/BestSubmissions.tsx b/src/components/sections/submissions/BestSubmissions.tsx
@@ -30,9 +30,9 @@ export default function BestSubmissions(): ReactElement {
         isExpanded
         content={
           <div>
-            <p className="leading-normal text-sm capitalize md:w-full w-64 pt-3">{t("communities.challenge.best-submissions.description")}</p>
+            <p className="leading-normal text-sm capitalize md:w-full w-64 pt-6">{t("communities.challenge.best-submissions.description")}</p>
             <div className="text-xl md:text-.5xl px-0">
-              <div className="md:grid grid-cols-2 gap-5 pt-7 flex-wrap">
+              <div className="md:grid grid-cols-2 gap-5 pt-6 flex-wrap">
                 {challenge?.bestSubmissions.map((submission, index) => {
                   return <SubmissionCard key={`submission-${index}`} submission={submission} />;
                 })}
diff --git a/src/components/ui/Radio.tsx b/src/components/ui/Radio.tsx
diff --git a/src/components/ui/accordion/Accordion.tsx b/src/components/ui/accordion/Accordion.tsx
diff --git a/src/components/wrappers/ThemeWrapper.tsx b/src/components/wrappers/ThemeWrapper.tsx
diff --git a/src/pages/communities/[slug]/challenges/[challenge_id]/index.tsx b/src/pages/communities/[slug]/challenges/[challenge_id]/index.tsx
diff --git a/src/store/index.ts b/src/store/index.ts
diff --git a/yarn.lock b/yarn.lock
