refactor: remove arbitrary values

Author: mhenriette

src/components/cards/Numbered.tsx

@@ -29,11 +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 md:text-2xl text-lg leading-[26.4px]">
+        <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 className="leading-6 tracking-[-0.02rem]">
+      <div className="leading-6 -tracking-2">
         <span className="font-medium">{title}</span> <span>{text}</span>
       </div>
     </div>

src/components/cards/challenge/Challenge.tsx

@@ -43,7 +43,7 @@ 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-[19.8px] 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-base text-gray-700 -tracking-1">{data.description}</div>
           </div>
@@ -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 leading-3.5 tracking-3">{t("communities.overview.challenge.unlock.certificate")}</h1>
+          <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>}

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 leading-8 md:text-5xl lg:leading-11 text-gray-900 -tracking-2", {
+  const headerClassName = classNames("text-4xl leading-8 md:text-5xl lg:leading-13.4 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 leading-8 flex items-center font-normal lg:text-5xl lg:leading-11 -tracking-2 ${title ? "text-gray-400" : "text-gray-900"}`}>
+          <h2 className={`text-4xl leading-8 flex items-center font-normal lg:text-5xl lg:leading-13.4 -tracking-2 ${title ? "text-gray-400" : "text-gray-900"}`}>
             {subtitle}
             {isTeamChallenge && (
               <div className="h-full flex -mt-2 items-start ml-2">

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

@@ -23,7 +23,7 @@ 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 leading-10 sm:text-6.5xl xl:text-7.75xl lg:leading-12 max-w-text-xs -tracking-4">{community?.name}</h1>
+            <h1 className="text-5xl leading-10 sm:text-6.5xl xl:text-7.75xl 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>

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-3">{t("page.index.communities.title")}</p>
+          <p className="uppercase font-bold text-xs leading-3.3 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>

src/components/sections/homepage/Main.tsx

@@ -40,8 +40,8 @@ export default function MainSection(): ReactElement {
   return (
     <Section type="default" padding="p-0">
       <div className="w-full lg:py-24 pt-24 pb-8">
-        <h1 className="lg:text-7.75xl md:text-6xl text-4.5xl lg:leading-12 leading-10 -tracking-4">{t("page.index.main.title")}</h1>
-        <p className="lg:text-7.75xl md:text-6xl text-4.5xl py-2 lg:py-0 md:py-0 sm:py-0 text-gray-400 -tracking-4 lg:leading-12 leading-10">{t("page.index.main.subtitle")}</p>
+        <h1 className="lg:text-7.75xl md:text-6xl text-4.5xl leading-10 -tracking-4">{t("page.index.main.title")}</h1>
+        <p className="lg:text-7.75xl md:text-6xl text-4.5xl py-2 lg:py-0 md:py-0 sm:py-0 text-gray-400 -tracking-4 leading-10">{t("page.index.main.subtitle")}</p>
       </div>
       <div className="flex justify-between">
         <div className="w-full max-w-xs hidden lg:block">

src/components/sections/homepage/OpenSource.tsx

@@ -13,7 +13,7 @@ import { useTranslation } from "next-i18next";
 export default function OpenSource() {
   const { t } = useTranslation();
   return (
-    <div className="text-4xl lg:text-5xl leading-10 lg:leading-11 pt-24 flex flex-col text-wrap space-y-2 -tracking-2 md:-tracking-6 xl:-tracking-2">
+    <div className="text-4xl lg:text-5xl leading-10 lg:leading-13.4 pt-24 flex flex-col text-wrap space-y-2 -tracking-2 md:-tracking-6 xl:-tracking-2">
       <p >
         {t("footer.open.source")}
         <br className="block md:hidden lg:block" />

src/components/sections/homepage/_partials/testimonials/CommunityStats.tsx

@@ -36,7 +36,7 @@ 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 -tracking-6">{t("testimonials.community.title")}</h3>
+      <h3 className="m-0 text-[32px] lg:text-4.5xl leading-8 lg:leading-11 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">

src/components/ui/Tag.tsx

@@ -46,7 +46,7 @@ export default function Tag({ rounded = true, type = "gray", value, children, te
   );
   return (
     <div {...props} className={tagClassNames} data-testid={testId}>
-      <span className="text-xs font-medium block leading-3.5">{value ? <span data-testid={tagValueTestId}>{value}</span> : children}</span>
+      <span className="text-xs font-medium block leading-3.3">{value ? <span data-testid={tagValueTestId}>{value}</span> : children}</span>
     </div>
   );
 }

tailwind.config.js

@@ -77,19 +77,19 @@ module.exports = {
         "7.75xl": ["5.75rem", { lineHeight: "5.75rem" }],
       },
       lineHeight: {
-        3.5: "0.825rem",
+        3.3: "0.825rem",
+        4.95:"1.2375rem",
         5.5: "1.375rem",
         7.5: "1.875rem",
-        10.5: "2.75rem",
-        11: "3.3rem",
-        12: "5.75rem",
+        11: "2.75rem",
+        13.4: "3.3rem",
       },
       letterSpacing: {
         1: "0.01em",
         2: "0.02em",
         3: "0.03em",
         4: "0.04em",
-        6: "0.06em"
+        6: "0.06em",
       },
       maxWidth: {
         "3xs": "5rem",