Merge pull request #1264 from dacadeorg/fix/typography-scale

fix: adjust font scale across all page

Author: serapieTuyishime

public/locales/bg/common.json

@@ -31,7 +31,7 @@
   "page.index.communities.title": "Communities of Practice",
   "page.index.communities.subtitle": "In our communities, you will work with your peers to learn and build amazing projects using blockchain technology.",
   "page.index.communities.partnering.title": "Your community here",
-  "page.index.communities.partnering.subtitle": "We know that developer community growth is a top priority for software projects in this highly competitive space; that's why we created dacade.",
+  "page.index.communities.partnering.subtitle": "We know that developer community growth is a top priority for software projects in this highly competitive space, that's why we created dacade.",
   "page.index.communities.partnering.button-text": "Become a partner",
   "page.protocols.title.1": "Developer Adoption",
   "page.protocols.title.2": " through Peer-to-Peer education",

public/locales/en/common.json

@@ -31,7 +31,7 @@
   "page.index.communities.title": "Communities of Practice",
   "page.index.communities.subtitle": "In our communities, you will work with your peers to learn and build amazing projects using blockchain technology.",
   "page.index.communities.partnering.title": "Your community here",
-  "page.index.communities.partnering.subtitle": "We know that developer community growth is a top priority for software projects in this highly competitive space; that's why we created dacade.",
+  "page.index.communities.partnering.subtitle": "We know that developer community growth is a top priority for software projects in this highly competitive space, that's why we created dacade.",
   "page.index.communities.partnering.button-text": "Become a partner",
   "page.protocols.title.1": "Developer Adoption",
   "page.protocols.title.2": " through Peer-to-Peer education",

public/locales/hr/common.json

@@ -31,7 +31,7 @@
   "page.index.communities.title": "Communities of Practice",
   "page.index.communities.subtitle": "In our communities, you will work with your peers to learn and build amazing projects using blockchain technology.",
   "page.index.communities.partnering.title": "Your community here",
-  "page.index.communities.partnering.subtitle": "We know that developer community growth is a top priority for software projects in this highly competitive space; that's why we created dacade.",
+  "page.index.communities.partnering.subtitle": "We know that developer community growth is a top priority for software projects in this highly competitive space, that's why we created dacade.",
   "page.index.communities.partnering.button-text": "Become a partner",
   "page.protocols.title.1": "Developer Adoption",
   "page.protocols.title.2": " through Peer-to-Peer education",

src/components/cards/Bounty.tsx

@@ -85,12 +85,10 @@ export default function BountyCard({ bounty }: BountyProps): ReactElement {
                 customStyle={{
                   bottom: "-4px",
                   right: "-4px",
-                  fontSize: 14,
                   backgroundColor: bounty.colors.accent,
                 }}
-                size="medium"
                 value={bounty?.unreviewedSubmissionsCount}
-                className="bottom-0 -right-1 absolute p-4"
+                className="bottom-0 -right-1 absolute"
               />
             )}
           </Component>
@@ -145,12 +143,10 @@ export default function BountyCard({ bounty }: BountyProps): ReactElement {
             customStyle={{
               bottom: "-4px",
               right: "-4px",
-              fontSize: 14,
               backgroundColor: bounty.colors.accent,
             }}
-            size="medium"
             value={bounty?.unreviewedSubmissionsCount}
-            className="bottom-0 -right-1 absolute p-4"
+            className="bottom-0 -right-1 absolute"
           />
         )}
       </Component>

src/components/cards/Numbered.tsx

@@ -29,9 +29,11 @@ export default function Numbered({ index = 1, title = "", text = "" }: NumberedP
   return (
     <div className="flex items-center md:flex-col md:items-start gap-2.5">
       <div className="block">
-        <div className="w-9 h-9 md:w-14 md:h-14 border border-solid border-gray-400 text-gray-400 font-medium rounded-full flex items-center justify-center">{index}</div>
+        <div className="w-9 h-9 md:w-14 md:h-14 border border-solid border-gray-400 text-gray-400 font-medium rounded-full flex items-center justify-center md:text-2xl text-lg leading-6">
+          {index}
+        </div>
       </div>
-      <div>
+      <div className="leading-6 -tracking-2">
         <span className="font-medium">{title}</span> <span>{text}</span>
       </div>
     </div>

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-6 contains-ordered-list -tracking-1" dangerouslySetInnerHTML={{ __html: objective as string }} />
     </div>
   );
 }

src/components/cards/Partnering.tsx

@@ -12,18 +12,18 @@ export default function PartneringCard() {
   const { t } = useTranslation();
   return (
     <div className="relative lg:mt-0 xl:pt-0 rounded-3.5xl overflow-hidden mt-5 md:mt-0 border border-solid border-gray-light md:border-none">
-      <div className="relative z-10 p-6 lg:pb-3 w-full text-primary h-full min-h-xs flex flex-col justify-between divide-y-2 divide-y divide-dotted divide-theme-accent">
-        <div className="max-w-sm">
-          <p className="text-2xl font-medium mb-2.5 leading-none">{t("page.index.communities.partnering.title")}</p>
-          <p className="text-base mt-0 mb-20 lg:mb-0 leading-normal">{t("page.index.communities.partnering.subtitle")}</p>
+      <div className="relative z-10 p-6 lg:pb-3 w-full text-primary h-full min-h-xs flex flex-col justify-between divide-y-2 divide-dotted divide-theme-accent">
+        <div>
+          <p className="text-.5xl leading-7 font-medium mb-2.5">{t("page.index.communities.partnering.title")}</p>
+          <p className="text-base mt-0 mb-20 lg:mb-0 leading-6 -tracking-1">{t("page.index.communities.partnering.subtitle")}</p>
         </div>
         <div className="mt-4 flex-none md:flex justify-between">
           <div className="md:flex md:flex-col space-y-0">
-            <div className="mt-4 font-light text-theme-accent md:w-48">{t("partnering.card.text")}</div>
+            <div className="mt-4 font-light text-theme-accent md:w-48 text-sm leading-4 lg:leading-5">{t("partnering.card.text")}</div>
           </div>
           <div className="mt-4 align-middle">
             <a href="mailto:[email protected]">
-              <Button className="hover:bg-primary group-hover:text-white leading-relaxed lg:px-7 px-5 font-medium" variant="outline-primary" type="button" padding={false}>
+              <Button className="hover:bg-primary group-hover:text-white lg:px-7 px-5 font-medium" variant="outline-primary" type="button" padding={false}>
                 {t("page.index.communities.partnering.button-text")}
               </Button>
             </a>

src/components/cards/Submission.tsx

@@ -97,7 +97,7 @@ export default function SubmissionCard({ submission, link = "", children }: Subm
             )}
             {submission.metadata && submission.metadata.evaluation ? (
               <div className="inline-flex flex-1 items-center space-x-1">
-                <Badge customStyle={badgeButtonStyles} size="medium" className="relative" value={submission.metadata.evaluation.points} />
+                <Badge customStyle={badgeButtonStyles} className="relative" value={submission.metadata.evaluation.points} />
                 <span className="text-sm leading">{t("submissions.evaluation.points")}</span>
               </div>
             ) : (

src/components/cards/User.tsx

@@ -92,7 +92,6 @@ export default function UserCard({ boxLayout, link, bordered, expanded, user, ba
               <Badge
                 value={badge}
                 className="absolute"
-                size="medium"
                 customStyle={{
                   bottom: "-1px",
                   right: "-3px",

src/components/cards/challenge/Challenge.tsx

@@ -43,9 +43,9 @@ export default function ChallengeCard({ data, community, isCourseEnd }: Challeng
                 <span className="font-medium pl-1">{expiresAt}</span>
               </div>
             )}
-            <div className="text-lg text-gray-900 font-medium leading-normal mb-3">{data.name}</div>
+            <div className="text-lg text-gray-900 font-medium leading-4.95 mb-3">{data.name}</div>
             <Badges challenge={data} />
-            <div className="text-sm text-gray-700">{data.description}</div>
+            <div className="text-base text-gray-700 -tracking-1">{data.description}</div>
           </div>
           <div className="divide-y-2 divide-gray-200 divide-dotted flex flex-col mt-8">
             {learningMaterialsCount && (
@@ -65,9 +65,9 @@ export default function ChallengeCard({ data, community, isCourseEnd }: Challeng
         <div className="mx-auto relative rounded-full mb-5 w-[147px] h-[184px]">
           <Image src={data?.certificateData?.icon} alt="achievement" fill priority />
         </div>
-        <div className="">
-          <h1 className="font-bold text-gray-400 text-xs uppercase pb-3">{t("communities.overview.challenge.unlock.certificate")}</h1>
-          <RewardCertificate rewards={data?.rewards} />
+        <div>
+          <h1 className="font-bold text-gray-400 text-xs uppercase pb-3 leading-3.3 tracking-3">{t("communities.overview.challenge.unlock.certificate")}</h1>
+          <RewardCertificate rewards={data?.rewards} isChallengeCard/>
         </div>
         {data?.isHackathon && <p className="py-1.5 border-t border-gray-200 text-sm">{t("communities.overview.challenge.participate", { token: reward?.token })}</p>}
       </div>