fix: colors in home page

Author: mhenriette

src/components/cards/Numbered.tsx

@@ -29,9 +29,9 @@ 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-surface-text-tertiary font-medium rounded-full flex items-center justify-center">{index}</div>
       </div>
-      <div>
+      <div className="text-surface-text-primary">
         <span className="font-medium">{title}</span> <span>{text}</span>
       </div>
     </div>

src/components/layout/Navbar.tsx

@@ -87,7 +87,7 @@ export default function Navbar({ settings, sidebarBurgerColor = false }: NavbarP
   };
 
   return (
-    <div className="text-gray-900 " style={containerStyle}>
+    <div className="text-gray-900" style={containerStyle}>
       <div className="content-wrapper lg:py-12 py-6 flex relative">
         <ul className="relative">
           <NavItem to="/" type="logo w-8 h-8 md:w-11 md:h-11">
@@ -98,7 +98,7 @@ export default function Navbar({ settings, sidebarBurgerColor = false }: NavbarP
           </NavItem>
         </ul>
         {isAuthenticatedAndVerified && (
-          <ul className="hidden lg:block relative self-center">
+          <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}>

src/components/popups/NotificationPopup.tsx

@@ -62,7 +62,13 @@ export default function NotificationPopup({ buttonStyles }: NotificationPopupPro
     <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}>
-          <Button type="button" padding={false} variant="secondary" className="p-2 bg-gray-100 bg-opacity-75 hover:bg-gray-50 text-primary" customStyle={buttonStyles}>
+          <Button
+            type="button"
+            padding={false}
+            variant="secondary"
+            className="p-2 bg-surface-bg-tertiary hover:bg-surface-bg-secondary text-surface-text-brand"
+            customStyle={buttonStyles}
+          >
             <BellIcon />
             {unread > 0 && <Badge value={unread} className="top-0 -right-1 absolute" />}
           </Button>
@@ -74,7 +80,7 @@ export default function NotificationPopup({ buttonStyles }: NotificationPopupPro
               maxHeight: "calc(100vh - 140px)",
               overflow: "hidden scroll",
             }}
-            className="z-50 w-80 absolute top-14 right-0 bg-white py-4 px-4.5 rounded-3.5xl text-gray-900 no-scrollbar"
+            className="z-50 w-80 absolute top-14 right-0 bg-surface-bg-primary border border-surface-border-primary py-4 px-4.5 rounded-3.5xl text-surface-text-primary no-scrollbar"
           >
             <NotificationList extended={false} />
           </div>

src/components/popups/Video.tsx

@@ -37,7 +37,7 @@ export default function VideoPopup(): ReactElement {
     <div className="flex flex-col items-center justify-center w-fit">
       <span onClick={externalClick} ref={videoPopupRef}>
         <li className="inline-block align-middle max-w-2xl relative text-gray-500 cursor-pointer w-full" onClick={toggle}>
-          <span className="flex space-x-1 text-primary relative hover:text-primary-dark mt-3 text-base leading-normal">
+          <span className="flex space-x-1 text-surface-text-brand relative hover:text-primary-dark mt-3 text-base leading-normal">
             <PlayIcon className="-mt-1" fill="white" />
             <div className="leading-normal font-light">
               <span className="font-medium">{t("app.name")}</span> {t("page.index.main.button.description")}

src/components/popups/user/index.tsx

@@ -67,10 +67,10 @@ export default function UserPopup({ buttonStyles }: { buttonStyles: CSSPropertie
     <div>
       <div>
         <div className={`inline-block align-middle relative ${show === true ? "z-50" : "z-10"}`} onClick={toggle}>
-          <Button customStyle={buttonStyles} padding={false} variant="secondary" className={`p-0.5 bg-gray-100 bg-opacity-75 hover:bg-gray-50 ${mainWallet ? "pr-5" : ""}`}>
+          <Button customStyle={buttonStyles} padding={false} variant="secondary" className={`p-0.5 bg-surface-bg-tertiary hover:bg-surface-bg-secondary ${mainWallet ? "pr-5" : ""}`}>
             <Avatar user={user as User} useLink={false} hideVerificationBadge />
             {mainWallet ? (
-              <span style={{ color: buttonStyles.color ? buttonStyles.color : undefined }} className="align-middle ml-2.5 font-medium text-gray-500">
+              <span style={{ color: buttonStyles.color ? buttonStyles.color : undefined }} className="align-middle ml-2.5 font-medium text-surface-text-secondary">
                 <Currency value={mainWallet.balance} token={mainWallet.token} />
               </span>
             ) : (

src/components/sections/homepage/Communities.tsx

@@ -25,13 +25,13 @@ 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-semibold leading-none text-base">{t("page.index.communities.title")}</p>
+          <p className="uppercase font-semibold leading-none text-base text-surface-text-primary">{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>
         </div>
       </div>
-      <div className="mt-5 md:mt-7 grid grid-cols-1 lg:grid-cols-2 gap-x-5 gap-y-0.5 lg:gap-y-5 md:gap-y-5 justify-stretch-items">
+      <div className="mt-5 md:mt-7 grid grid-cols-1 lg:grid-cols-2 gap-x-6 gap-y-2 lg:gap-y-6 md:gap-y-5 justify-stretch-items">
         {communities?.map((community) => (
           <CommunityCard key={community.id} community={community} />
         ))}

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-8xl md:text-6xl text-5xl leading-none tracking-tighter">{t("page.index.main.title")}</h1>
-        <p className="lg:text-8xl md:text-6xl text-4.5xl py-2 lg:py-0 md:py-0 sm:py-0 text-gray-400 tracking-tighter leading-none">{t("page.index.main.subtitle")}</p>
+        <h1 className="lg:text-8xl md:text-6xl text-5xl leading-none tracking-tighter text-surface-text-primary">{t("page.index.main.title")}</h1>
+        <p className="lg:text-8xl md:text-6xl text-4.5xl py-2 lg:py-0 md:py-0 sm:py-0 text-surface-text-tertiary tracking-tighter leading-none">{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

@@ -14,10 +14,10 @@ export default function OpenSource() {
   const { t } = useTranslation();
   return (
     <div className="text-4xl lg:text-5xl pt-24 flex flex-col text-wrap space-y-2">
-      <p >
+      <p className="text-surface-text-primary">
         {t("footer.open.source")}
         <br className="block md:hidden lg:block" />
-        <Link href="https://github.com/dacadeorg/dacade-frontend-app" target="_blank" className="text-primary items-center space-x-2">
+        <Link href="https://github.com/dacadeorg/dacade-frontend-app" target="_blank" className="text-surface-text-brand items-center space-x-2">
           <span> {t("footer.open.source.contribute")}</span>
           <ArrowRightIcon className="w-6.5 h-5.5 inline-flex" />
         </Link>

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

@@ -35,7 +35,7 @@ export default function CommunityStats() {
   const { t } = useTranslation();
 
   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">
+    <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) => (