fix: font size in the community page

Author: mhenriette

src/components/cards/Objective.tsx

@@ -38,7 +38,7 @@ export default function ObjectiveCard({ iconcolor = "", crossmark = false, objec
       <div className="py-0 pt-px mt-px mr-2" style={{ color: iconcolor || colors?.primary }}>
         {crossmark ? <Crossmark /> : <Checkmark />}
       </div>
-      <div className="text-sm font-normal leading-5 contains-ordered-list" dangerouslySetInnerHTML={{ __html: objective as string }} />
+      <div className="text-base font-normal leading-5 contains-ordered-list" dangerouslySetInnerHTML={{ __html: objective as string }} />
     </div>
   );
 }

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

@@ -19,7 +19,7 @@ export default function Header({
   isTeamChallenge = false,
   isHackathon = false,
 }: HeaderProps): ReactElement {
-  const headerClassName = classNames("text-4xl md:text-5xl leading-none text-gray-900", {
+  const headerClassName = classNames("text-4xl md:text-5xl text-gray-900", {
     "hidden md:flex": hideTitleOnMobile,
   });
 
@@ -28,7 +28,7 @@ export default function Header({
       <h1 className={headerClassName}>{title}</h1>
       <div className="flex items-start gap-1">
         {subtitle && (
-          <h2 className={`text-4xl flex items-center font-normal leading-none md:text-5xl ${title? "text-gray-400": "text-gray-900"}`}>
+          <h2 className={`text-4xl flex items-center font-normal md:text-5xl ${title ? "text-gray-400" : "text-gray-900"}`}>
             {subtitle}
             {isTeamChallenge && (
               <div className="h-full flex -mt-2 items-start ml-2">
@@ -38,7 +38,7 @@ export default function Header({
           </h2>
         )}
       </div>
-      {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>}
+      {description && <p className="lg:w-182.5 my-2 md:my-5 text-base md:text-lg w-full md:w-10/12 leading-loose md:leading-snug text-gray-700">{description}</p>}
     </div>
   );
 }

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-.5xl font-normal leading-normal ${hideSubtitleOnMobile ? "hidden" : ""}`}>{subtitle}</p>
+      <p className={`text-base md:text-lg font-normal ${hideSubtitleOnMobile ? "hidden" : ""}`}>{subtitle}</p>
       <div>{children}</div>
     </div>
   );

src/components/sections/communities/overview/MainHeader.tsx

@@ -24,8 +24,8 @@ export default function CommunitySection(): ReactElement {
         <div className="flex flex-col justify-between lg:flex-row">
           <div className="max-w-md mb-4 md:max-w-md lg:max-w-lg xl:max-w-xl 2xl:max-w-2xl lg:mr-6">
             <h1 className="text-5xl tracking-tight sm:text-6.5xl xl:text-7.75xl max-w-text-xs">{community?.name}</h1>
-            <p className="mt-2 text-xl tracking-tight md:text-.5xl leading-tight max-w-text-sm lg:hidden">{community?.summary}</p>
-            <p className="hidden mt-4 tracking-tight text-lg xl:text-.5xl max-w-text-md font-extralight lg:block">{community?.summary}</p>
+            <p className="mt-2 text-lg tracking-tight leading-tight lg:hidden">{community?.summary}</p>
+            <p className="hidden mt-4 tracking-tight text-lg font-extralight lg:block">{community?.summary}</p>
           </div>
           <div className="self-end w-36 md:h-82 lg:h-128 md:w-1/2 max-w-lg">
             {community?.icon && <Image src={`${community?.icon}`} alt={community?.name || ""} className="relative w-full h-full" width={300} height={300} />}

src/components/ui/Hint.tsx

@@ -6,7 +6,7 @@ type HintProps = {
 };
 
 function Hint({ children, className }: HintProps): ReactElement {
-  return <div className={`bg-blue-50 text-primary p-3 border border-blue-200 rounded text-base hint-container ${className}`}>{children}</div>;
+  return <div className={`bg-blue-50 text-primary p-3 border border-blue-200 rounded text-sm hint-container ${className}`}>{children}</div>;
 }
 
 export default Hint;