fix: add missing line height in components

mhenriette · mhenriette · commit bad328cf57c2 · 2024-06-11T12:29:38.000+02:00
diff --git a/src/components/cards/Numbered.tsx b/src/components/cards/Numbered.tsx
@@ -29,7 +29,7 @@ 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 md:text-2xl text-lg">
+        <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-[26.4px]">
           {index}
         </div>
       </div>
diff --git a/src/components/cards/Objective.tsx b/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-base 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>
   );
 }
diff --git a/src/components/cards/Partnering.tsx b/src/components/cards/Partnering.tsx
@@ -15,7 +15,7 @@ export default function PartneringCard() {
       <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-[-0.01rem]">{t("page.index.communities.partnering.subtitle")}</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">
diff --git a/src/components/cards/challenge/Challenge.tsx b/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-[19.8px] mb-3">{data.name}</div>
             <Badges challenge={data} />
-            <div className="text-base 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 && (
@@ -66,7 +66,7 @@ export default function ChallengeCard({ data, community, isCourseEnd }: Challeng
           <Image src={data?.certificateData?.icon} alt="achievement" fill priority />
         </div>
         <div>
-          <h1 className="font-bold text-gray-400 text-xs uppercase pb-3">{t("communities.overview.challenge.unlock.certificate")}</h1>
+          <h1 className="font-bold text-gray-400 text-xs uppercase pb-3 leading-3.5 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>}
diff --git a/src/components/cards/challenge/_partials/Learning.tsx b/src/components/cards/challenge/_partials/Learning.tsx
@@ -27,7 +27,7 @@ export default function Learning({ title, description, link }: LearningProps): J
       <div className="flex flex-col justify-between w-full sm:pb-0">
         <div className="flex flex-col">
           <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 className="text-sm lg:text-base font-normal -tracking-1 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}>
diff --git a/src/components/cards/challenge/_partials/RelatedLearning.tsx b/src/components/cards/challenge/_partials/RelatedLearning.tsx
@@ -25,9 +25,9 @@ const RelatedLearning: React.FC<RelatedLearningProps> = ({ title, description, p
     <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>
+          <div className="text-base font-medium leading-6 text-gray-900">{title}</div>
 
-          <div className="text-sm lg:text-base font-normal text-gray-700 mt-3 max-w-xxs pb-6">{description}</div>
+          <div className="text-sm lg:text-base -tracking-1 font-normal text-gray-700 mt-3 max-w-xxs pb-6">{description}</div>
         </div>
 
         <div className="">
diff --git a/src/components/cards/community/index.tsx b/src/components/cards/community/index.tsx
@@ -65,8 +65,8 @@ export default function CommunityCard({ showRewards = true, community }: Communi
           <div className="flex-grow">
             <div className="flex flex-col justify-between space-y-5 sm:flex-row lg:flex-col 2xl:flex-row">
               <div className="text-.5xl md:text-2xl max-w-sm min-h-2xs md:min-h-3xs lg:min-h-2xs xl:min-h-2xs font-medium pb-5">
-                <h1 className="text-theme-text text-xl lg:text-.5xl leading-7">{community.name}</h1>
-                <p className="pr-2 text-theme-accent lg:text-.5xl leading-7">{community.description || ""}</p>
+                <h1 className="text-theme-text text-xl lg:text-.5xl leading-7 md:-tracking-3">{community.name}</h1>
+                <p className="pr-2 text-theme-accent lg:text-.5xl leading-7 md:-tracking-3">{community.description || ""}</p>
               </div>
               <div className="self-end max-w-lg sm:h-full sm:-mb-0 md:mb-2 md:h-auto">
                 <Image src={community.icon} className="relative mb-5 h-44 w-44" alt="community icon" width={56} height={56} />
diff --git a/src/components/sections/communities/_partials/Header.tsx b/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 text-gray-900", {
+  const headerClassName = classNames("text-4xl leading-8 md:text-5xl lg:leading-11 text-gray-900 -tracking-2", {
     "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 md:text-5xl ${title ? "text-gray-400" : "text-gray-900"}`}>
+          <h2 className={`text-4xl leading-8 flex items-center font-normal lg:text-5xl lg:leading-11 -tracking-2 ${title ? "text-gray-400" : "text-gray-900"}`}>
             {subtitle}
             {isTeamChallenge && (
               <div className="h-full flex -mt-2 items-start ml-2">
diff --git a/src/components/sections/communities/overview/MainHeader.tsx b/src/components/sections/communities/overview/MainHeader.tsx
@@ -23,9 +23,9 @@ export default function CommunitySection(): ReactElement {
       <div className="py-2 md:py-8 mx-auto">
         <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-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>
+            <h1 className="text-5xl leading-10 sm:text-6.5xl xl:text-7.75xl lg:leading-12 max-w-text-xs -tracking-4">{community?.name}</h1>
+            <p className="mt-8 text-lg leading-5.5 lg:hidden">{community?.summary}</p>
+            <p className="hidden mt-4 text-lg leading-6 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} />}
diff --git a/src/components/sections/homepage/Communities.tsx b/src/components/sections/homepage/Communities.tsx
@@ -25,7 +25,7 @@ export default function CommunitiesSection({ communities }: { communities: Commu
     <Section type="default" padding="pt-20 lg:pb-24 md:pb-24">
       <div id="communities" className="md:flex relative items-end">
         <div className="pr-5">
-          <p className="uppercase font-bold text-xs leading-3.5 tracking-[0.03rem]">{t("page.index.communities.title")}</p>
+          <p className="uppercase font-bold text-xs leading-3.5 tracking-3">{t("page.index.communities.title")}</p>
         </div>
         <div className="pl-7 relative hidden lg:block md:block">
           <div className="message-bubble">{t("page.index.communities.subtitle")}</div>
diff --git a/src/components/sections/homepage/_partials/testimonials/CommunityStats.tsx b/src/components/sections/homepage/_partials/testimonials/CommunityStats.tsx
@@ -36,11 +36,11 @@ export default function CommunityStats() {
 
   return (
     <div className="p-7 bg-primary rounded-3.5xl mx-auto text-white relative md:absolute md:top-28 lg:top-32 xl:w-1/3 md:w-4/6 z-10 sm:max-w-sm">
-      <h3 className="m-0 text-[32px] lg:text-4.5xl leading-8 lg:leading-10.5 w-3/4">{t("testimonials.community.title")}</h3>
+      <h3 className="m-0 text-[32px] lg:text-4.5xl leading-8 lg:leading-10.5 w-3/4 -tracking-6">{t("testimonials.community.title")}</h3>
       <div className="relative divide-y divide-white divide-dotted">
         {stats.map((stat) => (
           <div key={stat.title} className="py-6">
-            <span className="block lg:text-.5xl text-xl mb-2">{stat.count}</span>
+            <span className="block lg:text-.5xl text-xl mb-2 tracking-3">{stat.count}</span>
             <p className="text-base w-3/4 m-0">
               <span className="font-graphik font-medium">{t(stat.title)}</span> {t(stat.description)}
             </p>
diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -98,7 +98,7 @@ body {
 }
 
 .message-bubble {
-  @apply w-72 p-6 rounded-3.5xl rounded-bl-none relative text-base border border-black border-opacity-5;
+  @apply w-72 p-6 rounded-3.5xl rounded-bl-none relative text-base border border-black border-opacity-5 leading-6 -tracking-1;
 
   background: #fefce8;
   color: #713f12;
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -85,7 +85,11 @@ module.exports = {
         12: "5.75rem",
       },
       letterSpacing: {
-        "-4": "-0.04em",
+        1: "0.01em",
+        2: "0.02em",
+        3: "0.03em",
+        4: "0.04em",
+        6: "0.06em"
       },
       maxWidth: {
         "3xs": "5rem",

Original file line number	Diff line number	Diff line change
`@@ -38,7 +38,7 @@ export default function ObjectiveCard({ iconcolor = "", crossmark = false, objec`
`38`	`38`	`<div className="py-0 pt-px mt-px mr-2" style={{ color: iconcolor \|\| colors?.primary }}>`
`39`	`39`	`{crossmark ? <Crossmark /> : <Checkmark />}`
`40`	`40`	`</div>`
`41`		`- <div className="text-base font-normal leading-5 contains-ordered-list" dangerouslySetInnerHTML={{ __html: objective as string }} />`
	`41`	`+ <div className="text-base font-normal leading-6 contains-ordered-list -tracking-1" dangerouslySetInnerHTML={{ __html: objective as string }} />`
`42`	`42`	`</div>`
`43`	`43`	`);`
`44`	`44`	`}`