Merge branch 'dev' into fix/reassign-gray-color

Author: mhenriette

.coderabbit.yaml

@@ -0,0 +1,15 @@
+# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json
+language: "en-US"
+early_access: false
+reviews:
+  profile: "chill"
+  request_changes_workflow: false
+  high_level_summary: false
+  poem: false
+  review_status: true
+  collapse_walkthrough: true
+  auto_review:
+    enabled: true
+    drafts: false
+chat:
+  auto_reply: true

src/components/layout/Navbar.tsx

@@ -93,15 +93,15 @@ export default function Navbar({ settings, sidebarBurgerColor = false }: NavbarP
           <NavItem to="/" type="logo w-8 h-8 md:w-11 md:h-11">
             <Logo />
           </NavItem>
-          <NavItem to="/" type="brand mx-0.5">
+          <NavItem to="/" type="brand">
             {t("app.name")}
           </NavItem>
         </ul>
         {isAuthenticatedAndVerified && (
           <ul className="hidden lg:block relative self-center text-surface-text-primary">
             <NavItem to="/bounties">{t("nav.bounties")}</NavItem>
             <NavItem to={"/communities"}>{t("nav.communities")}</NavItem>
-            <button className="nav-item underline underline-offset-2 text-primary bg-transparent pl-2 py-0 capitalize" onClick={displayJobOffersPopup}>
+            <button type="button" className="nav-item underline underline-offset-2 text-primary bg-transparent p-0 capitalize" onClick={displayJobOffersPopup}>
               {t("job.offers.title")}
             </button>
           </ul>

src/components/popups/NotificationPopup.tsx

@@ -61,7 +61,7 @@ export default function NotificationPopup({ buttonStyles }: NotificationPopupPro
   return (
     <div>
       <span onClick={externalClick}>
-        <li className={`inline-block align-middle mr-2 relative text-gray-500 max-w-80 ${isNotificationVisible ? "z-50" : "z-10"}`} onClick={toggle}>
+        <li className={`inline-block align-middle mr-3 relative text-gray-500 max-w-80 ${isNotificationVisible ? "z-50" : "z-10"}`} onClick={toggle}>
           <Button
             type="button"
             padding={false}

src/components/sections/courses/PageNavigation.tsx

@@ -87,7 +87,7 @@ export default function PageNavigation(): ReactElement {
    */
   const nextUrl: string | null = useMemo(() => {
     const index = currentIndex + 1;
-    if (index < list?.length - 1 && list[index]?.link) {
+    if (currentIndex < list?.length - 1 && list[index]?.link) {
       return list[index].link;
     }
     return null;

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

@@ -1,6 +1,7 @@
 import Button from "@/components/ui/button";
 import DiscordIcon from "@/icons/discord.svg";
 import { useTranslation } from "next-i18next";
+import { useMemo } from "react";
 
 /**
  * Statistic interface definitions
@@ -18,27 +19,37 @@ const stats: Statistic[] = [
   {
     title: "testimonials.community.stats.card-1.title",
     description: "testimonials.community.stats.card-1.description",
-    count: 16838,
+    count: 22240,
   },
   {
     title: "testimonials.community.stats.card-2.title",
     description: "testimonials.community.stats.card-2.description",
-    count: 2669,
+    count: 3595,
   },
   {
     title: "testimonials.community.stats.card-3.title",
     description: "testimonials.community.stats.card-3.description",
-    count: 6527,
+    count: 8131,
   },
 ];
 export default function CommunityStats() {
   const { t } = useTranslation();
+  const digitFormatter = useMemo(() => new Intl.NumberFormat(), []);
+
+  const formattedStat = useMemo(
+    () =>
+      stats.map((stat: Statistic) => ({
+        ...stat,
+        count: digitFormatter.format(stat.count),
+      })),
+    [digitFormatter]
+  );
 
   return (
     <div className="p-7 bg-primary rounded-3.5xl mx-auto text-surface-text-invert 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-4.5xl w-3/4">{t("testimonials.community.title")}</h3>
       <div className="relative divide-y divide-white divide-dotted">
-        {stats.map((stat) => (
+        {formattedStat.map((stat) => (
           <div key={stat.title} className="py-6">
             <span className="block text-.5xl mb-2">{stat.count}</span>
             <p className="text-base w-3/4 m-0">

src/styles/globals.css

@@ -83,13 +83,13 @@ body {
 }
 
 .nav-item {
-  @apply font-normal ml-2 hover:opacity-70;
+  @apply font-normal ml-3 hover:opacity-70;
 }
 .nav-item a {
   @apply align-text-top;
 }
 .nav-brand {
-  @apply font-semibold mx-1.5;
+  @apply font-semibold ml-2;
 }
 .content-wrapper {
   @apply relative;