fix: typography in challenge page

Author: mhenriette

src/components/cards/challenge/RewardCertificate.tsx

@@ -32,7 +32,7 @@ export default function RewardCertificate({ rewards, isReward }: RewardCertifica
           )}
         >
           <Coin size="small" token={reward?.token} />
-          <div className="text-sm">
+          <div className="text-base">
             <span>
               {shortenNumber(reward.amount)} {reward.token}
             </span>

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

@@ -26,8 +26,8 @@ export default function Learning({ title, description, link }: LearningProps): J
     <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>
-          <div className="text-sm font-normal text-gray-700 mt-3 max-w-xxs pb-6 mb-5">{description}</div>
+          <div className="text-base font-medium leading-6 text-gray-900">{title}</div>
+          <div className="text-sm lg:text-base font-normal leading-6 text-gray-700 mt-3 max-w-xxs pb-6 mb-5">{description}</div>
         </div>
         <div className="absolute bottom-0 pb-4">
           <Link href={link}>

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

@@ -27,7 +27,7 @@ const RelatedLearning: React.FC<RelatedLearningProps> = ({ title, description, p
         <div className="flex flex-col">
           <div className="text-base font-medium leading-normal text-gray-900">{title}</div>
 
-          <div className="text-sm font-normal text-gray-700 mt-3 max-w-xxs pb-6">{description}</div>
+          <div className="text-sm lg:text-base font-normal text-gray-700 mt-3 max-w-xxs pb-6">{description}</div>
         </div>
 
         <div className="">

src/components/sections/challenges/Rewards.tsx

@@ -21,7 +21,7 @@ export function OverviewRewards(): ReactElement {
 
   return (
     <Section title={`${t("communities.overview.reward.title")}`}>
-      <p className="my-6 text-lg">{t("course.challenge.reward.certificate.description")}</p>
+      <p className="my-6 text-base">{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} />

src/components/sections/challenges/Rubric.tsx

@@ -90,12 +90,12 @@ export default function RubricHeader({ ratingCriteria, selected, hideTitle = fal
             <div>
               {ratingCriteria.map((criteria, i) => (
                 <div key={`rating-criteria-item-${i}`} className="mt-6">
-                  <span className="block text-sm capitalize font-medium">{criteria.name}</span>
+                  <span className="block text-base 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 ${
+                        className={`text-sm lg:text-base leading-6 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"
                         }`}
                       >

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

@@ -37,7 +37,7 @@ export default function Section({ title, titleBold = true, subtitle, id, hideSub
   return (
     <div id={id} className={`text-xl md:text-.5xl px-0 py-6 ${className}`}>
       {title && <H3 bold={titleBold}>{title}</H3>}
-      <p className={`text-base md:text-lg font-normal ${hideSubtitleOnMobile ? "hidden" : ""}`}>{subtitle}</p>
+      <p className={`text-base font-normal ${hideSubtitleOnMobile ? "hidden" : ""}`}>{subtitle}</p>
       <div>{children}</div>
     </div>
   );

src/components/sections/submissions/BestSubmissions.tsx

@@ -30,8 +30,8 @@ export default function BestSubmissions(): ReactElement {
         isExpanded
         content={
           <div>
-            <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">
+            <p className="leading-6 text-base pt-6">{t("communities.challenge.best-submissions.description")}</p>
+            <div className="px-0">
               <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} />;

src/components/sections/submissions/_partials/SubmissionCard.tsx

@@ -51,15 +51,15 @@ export default function SubmissionCard({ submission }: SubmissionCard): ReactEle
   }, []);
 
   return (
-    <div className="bg-gray-50 text-sm text-gray-700 border-solid border border-gray-200 rounded-3xl mb-5 md:mb-0">
+    <div className="bg-gray-50 text-sm lg:text-base text-gray-700 border-solid border border-gray-200 rounded-3xl mb-5 md:mb-0">
       <Link href={navigation.submissionPath(submission.id)}>
         <div className="p-7">
           {membersWithOrganiser?.length ? (
             <div className="flex gap-2 overflow-hidden">
               {membersWithOrganiser?.map((user, index) => {
                 return (
                   <div className="flex items-center space-x-1.5 pb-1.5 pt-1" key={`team-member-${index}`}>
-                    <span className="text-lg leading-loose font-medium text-gray-900 pb-1 whitespace-nowrap">{user.displayName}</span>
+                    <span className="text-sm lg:text-base leading-6 font-medium text-gray-900 pb-1 whitespace-nowrap">{user.displayName}</span>
                     {user.reputation ? (
                       <span className="text-xs px-2.5 bg-secondary leading-none py-1 rounded-full font-medium">
                         <Currency value={user.reputation} token="REP" />
@@ -73,7 +73,7 @@ export default function SubmissionCard({ submission }: SubmissionCard): ReactEle
             </div>
           ) : (
             <div className="flex items-center space-x-1.5 pb-1.5 pt-1">
-              <span className="text-lg leading-loose font-medium text-gray-900 pb-1">{submission.user.displayName}</span>
+              <span className="text-sm lg:text-base leading-6 font-medium text-gray-900 pb-1">{submission.user.displayName}</span>
               {submission.user.reputation ? (
                 <span className="text-xs px-2.5 bg-secondary leading-none py-1 rounded-full font-medium">
                   <Currency value={submission.user.reputation} token="REP" />
@@ -83,13 +83,13 @@ export default function SubmissionCard({ submission }: SubmissionCard): ReactEle
               )}
             </div>
           )}
-          <span className="block text-sm leading-snug text-gray-700 pb-4">
+          <span className="block text-sm lg:text-base leading-snug text-gray-700 pb-4">
             {t("submissions.submitted")}{" "}
             <span className="font-medium" style={{ color: colors?.textAccent }}>
               {date}
             </span>
           </span>
-          <p className="line-clamp-3">{submission.text}</p>
+          <p className="line-clamp-3 text-sm lg:text-base">{submission.text}</p>
           <div className="pt-5">
             <Badge customStyle={{ backgroundColor: colors?.textAccent }} size="medium" className="relative left-0" value={submission.metadata.evaluation.points} />
             <span className="ml-1 text-sm">{t("submissions.evaluation.points")}</span>