Merge pull request #1265 from dacadeorg/fix/reassign-gray-color

feat: add color variables in tailwind and use them

Author: serapieTuyishime

CONTRIBUTING.md

@@ -144,7 +144,7 @@ They can also be given class names as shown in the above image.
 
 ```javascript
 <div
-  className={classNames("w-1/3", "bg-primary", {
+  className={classNames("w-1/3", "bg-brand", {
     "text-white": type === "default",
     underline: hasLink,
   })}

src/components/banner/PrivacyPolicy.tsx

@@ -33,7 +33,7 @@ export default function PrivacyPolicyBanner(): ReactElement {
 
   if (showBanner)
     return (
-      <div className="fixed bottom-0 left-0 right-0 z-999 flex flex-row justify-center md:justify-between bg-primary">
+      <div className="fixed bottom-0 left-0 right-0 z-999 flex flex-row justify-center md:justify-between bg-brand">
         <div className="text-white py-8 text-center mx-auto lg:text-base text-sm md:text-lg justify-center md:max-w-none px-6">
           {t("signup-page.privacy.text")}{" "}
           <Link href="/privacy-policy" className="underline">

src/components/cards/Address.tsx

@@ -27,7 +27,7 @@ interface AddressProps {
 export default function Address({ hasAddress }: AddressProps): ReactElement {
   const { t } = useTranslation();
   return (
-    <div className="lg:pt-5 sm:pt-5 md:pt-5 pt-14 absolute text-sm lg:text-gray-700 md:text-gray-700 sm:text-gray-700 cursor-pointer text-primary font-medium lg:font-normal md:font-normal sm:font-normal">
+    <div className="lg:pt-5 sm:pt-5 md:pt-5 pt-14 absolute text-sm lg:text-gray-700 md:text-gray-700 sm:text-gray-700 cursor-pointer text-brand font-medium lg:font-normal md:font-normal sm:font-normal">
       {hasAddress ? (
         <div>
           <Link href="#">{t("profile.wallets.address-set")}</Link>

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>