fix: extend textColors and backgroundColors in tailwind config

Author: mhenriette

src/components/cards/Balance.tsx

@@ -31,7 +31,7 @@ export default function Balance({ details }: BalanceProps): ReactElement {
 
   return (
     <Link href="/profile/wallets">
-      <div className="flex px-5 py-3 -mx-5 space-x-3 text-left hover:bg-gray-50">
+      <div className="flex px-5 py-3 -mx-5 space-x-3 text-left hover:bg-secondary">
         <Coin token={details.token} size="medium" />
         <div className="w-3/4 pt-1">
           <div className="flex justify-between">

src/components/cards/Bounty.tsx

@@ -57,14 +57,14 @@ export default function BountyCard({ bounty }: BountyProps): ReactElement {
   const Component = link.startsWith("http") ? "a" : Link;
 
   return (
-    <div className="p-5 flex md:flex-row-reverse md:space-x-5 px-5 min-h-32 md:h-auto md:w-full justify-between hover:bg-secondary relative">
+    <div className="p-5 flex md:flex-row-reverse md:space-x-5 px-5 min-h-32 md:h-auto md:w-full justify-between hover:bg-tertiary relative">
       <div className="bg-theme-accent flex-col w-full h-full justify-between md:-space-y-1 pl-3 pr-5 my-5">
         <Component className="relative w-full block" href={link}>
           <div className="font-medium text-md md:pt-1.5">{bounty.course ? bounty.course.name : bounty.name}</div>
         </Component>
         <div className="flex justify-between w-full md:block">
           <Component className="inline-flex md:flex md:flex-row flex-col-reverse justify-between" href={link}>
-            <div className="text-sm pt-8 md:pt-2 md:pb-4 text-gray-600">{type()}</div>
+            <div className="text-sm pt-8 md:pt-2 md:pb-4 text-secondary">{type()}</div>
             <div className="flex">
               <Reward type="gray" reward={bounty.reward}></Reward>
             </div>

src/components/cards/Communities.tsx

@@ -34,7 +34,7 @@ interface CommunitiesProps {
 
 export default function Communities({ title = "" }: CommunitiesProps): ReactElement {
   return (
-    <div className="bg-gray-50 rounded-full pl-2 py-2 flex items-center mb-3">
+    <div className="bg-secondary rounded-full pl-2 py-2 flex items-center mb-3">
       {PARTNERS.map((partner) => (
         <a href={partner.link} key={partner.link} target="__blank" className="inline-block md:mx-auto">
           <div className="w-10 h-10 rounded-full border border-solid flex items-center">

src/components/cards/CreateTeam.tsx

@@ -203,7 +203,7 @@ export default function CreateTeamCard({ index = 1, title = "", text = "" }: Cre
                     </div>
                     <div className="flex flex-col">
                       <div className=" text-sm text-gray-700 font-medium">{member?.displayName}</div>
-                      <div className=" text-gray-400 text-xs">{status}</div>
+                      <div className=" text-tertiary text-xs">{status}</div>
                     </div>
                     {!team?.locked && (
                       <>

src/components/cards/FAQ.tsx

@@ -15,7 +15,7 @@ export default function FaqCard(): ReactElement {
   const { t } = useTranslation();
 
   return (
-    <div className="py-5 md:py-10 w-full bg-gray-50">
+    <div className="py-5 md:py-10 w-full bg-secondary">
       <div className="w-full content-wrapper divide-y divide-2 lg:divide-0 lg:divide-y-0 divide-gray-200 flex flex-col lg:flex-row">
         <div className="w-full lg:w-1/2 lg:min-w-xs text-gray-900 text-2xl md:text-4xl font-medium pb-5 flex-row">
           <div>{t("faq.title")}</div>

src/components/cards/Learning.tsx

@@ -55,7 +55,7 @@ export default function Learning({ learningModule }: LearningProps): ReactElemen
   };
 
   return (
-    <div className="px-5 pt-5 pb-8 bg-gray-50 rounded-3xl min-h-2xs w-full border-solid border-2 border-gray-100 md:mt-0 cursor-pointer">
+    <div className="px-5 pt-5 pb-8 bg-secondary rounded-3xl min-h-2xs w-full border-solid border-2 border-gray-100 md:mt-0 cursor-pointer">
       <div onClick={navigate} className="flex flex-col">
         <div className="w-full">
           <h4 className="font-medium block text-xl">{learningModule.title}</h4>

src/components/cards/NotificationCard.tsx

@@ -105,7 +105,7 @@ export default function NotificationCard({ user = {}, notification, extended = f
 
   return (
     <>
-      <div onClick={goToLink} className={`flex hover:bg-gray-50 py-4 -mx-5 px-5 cursor-pointer ${extended ? "rounded-3xl" : ""}`}>
+      <div onClick={goToLink} className={`flex hover:bg-secondary py-4 -mx-5 px-5 cursor-pointer ${extended ? "rounded-3xl" : ""}`}>
         <div className="flex mr-2">
           <Avatar user={user} size="medium-fixed" className="!w-10 !h-10" />
         </div>

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

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-sm font-normal leading-5 contains-ordered-list text-surface-text-primary" dangerouslySetInnerHTML={{ __html: objective as string }} />
+      <div className="text-sm font-normal leading-5 contains-ordered-list text-primary" dangerouslySetInnerHTML={{ __html: objective as string }} />
     </div>
   );
 }

src/components/cards/Partnering.tsx

@@ -11,7 +11,7 @@ import { useTranslation } from "next-i18next";
 export default function PartneringCard() {
   const { t } = useTranslation();
       return (
-        <div className="relative z-10 mt-6 md:mt-0 p-6 rounded-3.5xl border border-solid bg-surface-bg-highlight lg:pb-3 w-full text-surface-text-brand h-full min-h-xs flex flex-col justify-between divide-y-2 divide-dotted divide-theme-accent">
+        <div className="relative z-10 mt-6 md:mt-0 p-6 rounded-3.5xl border border-solid border-light-brand bg-highlight lg:pb-3 w-full text-brand h-full min-h-xs flex flex-col justify-between divide-y-2 divide-dotted divide-theme-accent">
           <div className="max-w-sm">
             <p className="text-2xl font-medium mb-2.5 leading-none">{t("page.index.communities.partnering.title")}</p>
             <p className="text-base mt-0 mb-20 lg:mb-0 leading-normal">{t("page.index.communities.partnering.subtitle")}</p>