refactor: update the tailwind keys

Author: serapieTuyishime

src/components/sections/challenges/Learning.tsx

@@ -24,7 +24,7 @@ export default function Learning({ courses, learningModules, community }: { cour
         isExpanded
         content={
           <>
-            <div className="text-base font-normal text-slate-700 pt-8 pb-7 md:w-99">{t("communities.overview.challenge.learning.title")}</div>
+            <div className="text-base font-normal text-slate-700 pt-8 pb-7 md:w-182.5">{t("communities.overview.challenge.learning.title")}</div>
             <div className="md:grid grid-cols-2 gap-3">
               {courses?.map((course) => (
                 <LearningCard

src/components/sections/challenges/Rubric.tsx

@@ -56,25 +56,25 @@ export default function RubricHeader({ ratingCriteria, selected, hideTitle = fal
     const hackatonPassingScore = t("communities.challenge.hackathon.passing.score");
 
     return (
-        <div className="text-base font-normal text-slate-700 pt-8 md:w-99 inline-flex flex-wrap items-center gap-1">
-          {challenge?.isHackathon ? (
-            <div dangerouslySetInnerHTML={{ __html: hackatonPassingScore }} />
-          ) : (
-            passingScoreParts.map((part, index) => {
-              if (index === passingScoreParts.length - 1) {
-                return part.split(" ").map((word, index) => <span key={index} dangerouslySetInnerHTML={{ __html: word }} />);
-              }
-              return (
-                <Fragment key={index}>
-                  {part.split(" ").map((word, index) => (
-                    <span key={index} dangerouslySetInnerHTML={{ __html: word }} />
-                  ))}
-                  {<Coin token={reward?.token} size="small" className="!-mr-1 md:!-mr-1 -ml-1" />}
-                </Fragment>
-              );
-            })
-          )}
-        </div>
+      <div className="text-base font-normal text-slate-700 pt-8 md:w-182.5 inline-flex flex-wrap items-center gap-1">
+        {challenge?.isHackathon ? (
+          <div dangerouslySetInnerHTML={{ __html: hackatonPassingScore }} />
+        ) : (
+          passingScoreParts.map((part, index) => {
+            if (index === passingScoreParts.length - 1) {
+              return part.split(" ").map((word, index) => <span key={index} dangerouslySetInnerHTML={{ __html: word }} />);
+            }
+            return (
+              <Fragment key={index}>
+                {part.split(" ").map((word, index) => (
+                  <span key={index} dangerouslySetInnerHTML={{ __html: word }} />
+                ))}
+                {<Coin token={reward?.token} size="small" className="!-mr-1 md:!-mr-1 -ml-1" />}
+              </Fragment>
+            );
+          })
+        )}
+      </div>
     );
   };
 

src/components/sections/challenges/SetupTeamChallenge.tsx

@@ -24,7 +24,7 @@ export default function SetupTeamChallenge(): JSX.Element {
 
   return (
     <Section title="Submission">
-      <div className="text-base font-normal text-slate-700 pt-8 pb-7 md:w-99">{t("communities.overview.challenge.team.setup.info")}</div>
+      <div className="text-base font-normal text-slate-700 pt-8 pb-7 md:w-182.5">{t("communities.overview.challenge.team.setup.info")}</div>
       <div className="md:flex flex-row gap-5">
         <FormTeamCard index={1} title="Form your team" description="Open discord channel #icp-ai-web3-hachathon and find your teammates to complete the challenge with you." />
         {invite && !invite.team?.locked ? (

src/components/sections/challenges/Submission.tsx

@@ -136,7 +136,7 @@ export default function Submission(): ReactElement {
         <Hint className="mb-8">{t("communities.overview.challenge.submissions-closed")}</Hint>
       ) : (
         <>
-          {challenge?.isTeamChallenge && <p className="text-base font-normal text-slate-700 pt-2 pb-7 md:w-99"> {t("communities.overview.challenge.submission.description")}</p>}
+          {challenge?.isTeamChallenge && <p className="text-base font-normal text-slate-700 pt-2 pb-7 md:w-182.5"> {t("communities.overview.challenge.submission.description")}</p>}
           {!canSubmit ? (
             <Hint className="mb-8">{t("communities.challenge.submission.hint")}</Hint>
           ) : (

src/components/sections/challenges/TeamChallenge.tsx

@@ -37,7 +37,7 @@ export default function TeamChallenge(): JSX.Element {
 
   return (
     <Section title="Team Challenge">
-      <div className="text-base font-normal text-slate-700 pt-8 pb-7 md:w-99">To complete the team challenge, you need to follow these steps:</div>
+      <div className="text-base font-normal text-slate-700 pt-8 pb-7 md:w-182.5">To complete the team challenge, you need to follow these steps:</div>
       <div className="md:flex flex-row gap-20 md:divide-y-0 divide-y divide-gray-900 divide-dotted space-y-5 md:space-y-0 space-x-0">
         {TeamChallengeData.map((card) => (
           <TeamChallengeCard key={`TeamChallenge-card-data-${card.index}`} index={card.index} title={card.title} text={card.text} />

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

@@ -40,7 +40,7 @@ export default function Header({
           </h2>
         )}
       </div>
-      {description && <p className="lg:w-99 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-.5xl w-full md:w-10/12 leading-loose md:leading-snug text-gray-700">{description}</p>}
     </div>
   );
 }

src/components/sections/learning-modules/MaterialSection.tsx

@@ -32,7 +32,7 @@ export default function MaterialSection({ material }: MaterialProps) {
   return (
     <Section id={materialId} title={isAdditional ? "Additional Material" : material?.title}>
       {!isAdditional && <Duration text={material?.subtitle || ""} value={material?.duration as number} />}
-      {!isAdditional && <span className="block text-lg mb-6 mt-2 md:w-99">{material?.description}</span>}
+      {!isAdditional && <span className="block text-lg mb-6 mt-2 md:w-182.5">{material?.description}</span>}
       {material?.type === "EMBEDDED-VIDEO" && <Video url={material.link} />}
       {material?.type === "MARKDOWN" && <Markdown url={material?.link} />}
       {isAdditional && (

src/icons/tokens/SUI.svg

@@ -49,7 +49,7 @@ module.exports = {
         96.5: "25.5rem",
         98: "28rem",
         128: "32rem",
-        99: "45.625rem",
+        182.5: "45.625rem",
         "10.5/12": "90%",
         "1/100": "1%",
         "1/10": "10%",