fix: change primary color name to be brand

mhenriette · mhenriette · commit 8f92d580a837 · 2024-06-21T11:32:00.000+02:00
diff --git a/CONTRIBUTING.md b/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,
   })}
diff --git a/src/components/banner/PrivacyPolicy.tsx b/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">
diff --git a/src/components/cards/Address.tsx b/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>
diff --git a/src/components/cards/Partnering.tsx b/src/components/cards/Partnering.tsx
@@ -22,7 +22,7 @@ export default function PartneringCard() {
             </div>
             <div className="mt-4 align-middle">
               <a href="mailto:moritz@dacade.org">
-                <Button className="hover:bg-primary group-hover:text-white leading-relaxed lg:px-7 px-5 font-medium" variant="outline-primary" type="button" padding={false}>
+                <Button className="hover:bg-brand group-hover:text-white leading-relaxed lg:px-7 px-5 font-medium" variant="outline-primary" type="button" padding={false}>
                   {t("page.index.communities.partnering.button-text")}
                 </Button>
               </a>
diff --git a/src/components/cards/community/List.tsx b/src/components/cards/community/List.tsx
@@ -68,8 +68,8 @@ export default function CommunityListCard({ community }: CommunityListCardProps)
                   <Link href={path}>
                     <ArrowButton
                       rounded={false}
-                      className="group-hover:bg-primary group-hover:text-white"
-                      arrowClasses="group-hover:bg-primary bg-gray-200 text-primary group-hover:text-white"
+                      className="group-hover:bg-brand group-hover:text-white"
+                      arrowClasses="group-hover:bg-brand bg-gray-200 text-brand group-hover:text-white"
                       variant="outline-primary"
                       loading={false}
                       disabled={false}
diff --git a/src/components/cards/profile/Request.tsx b/src/components/cards/profile/Request.tsx
@@ -47,7 +47,7 @@ export default function Request(): ReactElement {
 
         <div className="md:pl-4 py-4 md:py-0">4 Pending invitations</div>
       </div>
-      <Link href={`/profile/referrals`} className="text-primary flex items-center justify-between gap-4 cursor-pointer">
+      <Link href={`/profile/referrals`} className="text-brand flex items-center justify-between gap-4 cursor-pointer">
         <span>See all</span>
         <Right />
       </Link>
diff --git a/src/components/layout/Navbar.tsx b/src/components/layout/Navbar.tsx
@@ -101,7 +101,7 @@ export default function Navbar({ settings, sidebarBurgerColor = false }: NavbarP
           <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 type="button" className="nav-item underline underline-offset-2 text-primary bg-transparent p-0 capitalize" onClick={displayJobOffersPopup}>
+            <button type="button" className="nav-item underline underline-offset-2 text-brand bg-transparent p-0 capitalize" onClick={displayJobOffersPopup}>
               {t("job.offers.title")}
             </button>
           </ul>
@@ -129,7 +129,7 @@ export default function Navbar({ settings, sidebarBurgerColor = false }: NavbarP
                     <NavItem type="item" to="/login">
                       <span
                         className={classNames("py-2 text-sm", {
-                          "text-primary": router.pathname === "/signup",
+                          "text-brand": router.pathname === "/signup",
                           inherit: router.pathname !== "/signup",
                         })}
                       >
@@ -143,7 +143,7 @@ export default function Navbar({ settings, sidebarBurgerColor = false }: NavbarP
                     {router.pathname === "/login" && <span className="text-sm">{t("nav.signin.new-accout")}</span>}
                     <NavItem type="item" to="/signup">
                       {router.pathname === "/login" ? (
-                        <span className="py-2 text-sm text-primary">{t("nav.sign-up")}</span>
+                        <span className="py-2 text-sm text-brand">{t("nav.sign-up")}</span>
                       ) : (
                         <Button
                           variant="secondary"
@@ -154,7 +154,7 @@ export default function Navbar({ settings, sidebarBurgerColor = false }: NavbarP
                           rounded={false}
                           onClick={() => null}
                           className={classNames("text-sm py-2", {
-                            "text-primary": router.pathname === "/login",
+                            "text-brand": router.pathname === "/login",
                             "text-gray-900": router.pathname !== "/login",
                           })}
                         >
diff --git a/src/components/list/LanguageList.tsx b/src/components/list/LanguageList.tsx
@@ -57,7 +57,7 @@ export default function LanguageList({ onSelect }: LanguageSwitcherProps): React
               </span>
             </div>
             {locale === selected && (
-              <div className="text-primary">
+              <div className="text-brand">
                 <Checkmark />
               </div>
             )}
diff --git a/src/components/list/ReferralsList.tsx b/src/components/list/ReferralsList.tsx
@@ -36,12 +36,12 @@ export default function ReferralsList({ text }: ReferralsListProps): ReactElemen
   return (
     <div className="bg-blue-lighter border border-solid border-blue-light w-full rounded-3.5xl items-center justify-between flex md:flex-row flex-col py-6 px-5">
       <div className="md:w-96">
-        <p className="inline-block px-2 pb-3 text-lg font-medium text-primary md:pb-0">{text}</p>
+        <p className="inline-block px-2 pb-3 text-lg font-medium text-brand md:pb-0">{text}</p>
       </div>
 
       <div className="flex-none">
         <Button
-          className="px-5 font-medium leading-relaxed hover:bg-primary group-hover:text-white lg:px-7"
+          className="px-5 font-medium leading-relaxed hover:bg-brand group-hover:text-white lg:px-7"
           variant="outline-primary"
           type="button"
           padding={false}
diff --git a/src/components/popups/DiscordDisconnect.tsx b/src/components/popups/DiscordDisconnect.tsx
@@ -67,7 +67,7 @@ export default function DiscordDisconnect({ show, onClose }: DiscordDisconnectPr
         </p>
       </div>
       <div className="flex items-center justify-between pt-4 pb-2 pl-6 pr-6">
-        <span className="text-sm font-medium cursor-pointer text-primary self-end mb-4" onClick={onClose}>
+        <span className="text-sm font-medium cursor-pointer text-brand self-end mb-4" onClick={onClose}>
           {t("profile.header.discord.close")}
         </span>
         {!disconnectLoading && !discordDisconnectSuccess && (
diff --git a/src/components/popups/KYCVerification.tsx b/src/components/popups/KYCVerification.tsx
@@ -75,7 +75,7 @@ export default function KYCVerification({ onCompleted }: KYCVerificationProps) {
         {showModal ? <div id="sumsub-websdk-container" className="pb-5"></div> : <></>}
       </div>
       <div className="flex items-center justify-between pt-4 pb-2 pl-6 pr-2">
-        <span className="text-sm font-medium cursor-pointer text-primary" onClick={closeModal}>
+        <span className="text-sm font-medium cursor-pointer text-brand" onClick={closeModal}>
           {t("profile.edit.close")}
         </span>
         {!verifying && kycStatus !== KYCSTATUS.REJECTED && (
diff --git a/src/components/popups/Sidebar.tsx b/src/components/popups/Sidebar.tsx
@@ -136,7 +136,7 @@ export default function Sidebar({ burgerColor = false }: SidebarProps): ReactEle
               {isAuthenticated && (
                 <>
                   <div className="flex">
-                    <div className="w-10 h-10 ml-3 mr-2 my-3 rounded-full bg-red-500">
+                    <div className="w-10 h-10 ml-3 mr-2 my-3 rounded-full">
                       <WalletIcon className="m-2" />
                     </div>
                     <div className="py-5 font-medium text-gray-900" onClick={toggle}>
@@ -146,7 +146,7 @@ export default function Sidebar({ burgerColor = false }: SidebarProps): ReactEle
                     </div>
                   </div>
                   <div className="flex">
-                    <div className="w-10 h-10 ml-3 mr-2 my-3 rounded-full bg-primary">
+                    <div className="w-10 h-10 ml-3 mr-2 my-3 rounded-full bg-brand">
                       <JobIcon className="m-2 text-white" />
                     </div>
                     <div className="py-5 font-medium text-gray-900 cursor-pointer" onClick={displayJobOffersPopup}>
@@ -196,7 +196,7 @@ export default function Sidebar({ burgerColor = false }: SidebarProps): ReactEle
 
             {!isAuthenticated && (
               <div className="w-full h-15 p-2 flex">
-                <Button padding={false} type="button" variant="secondary" className="w-full p-3 text-sm font-medium text-primary" onClick={toggle}>
+                <Button padding={false} type="button" variant="secondary" className="w-full p-3 text-sm font-medium text-brand" onClick={toggle}>
                   <Link className="w-full" href="/login">
                     {t("nav.login")}
                   </Link>
diff --git a/src/components/popups/profile-settings/EmailForm.tsx b/src/components/popups/profile-settings/EmailForm.tsx
@@ -112,7 +112,7 @@ export default function EditEmail({ show, onClose }: EditProfileProps): ReactEle
             />
           </div>
           <div className="flex pb-2 items-center justify-between">
-            <span className="cursor-pointer text-sm font-medium text-primary" onClick={onClose}>
+            <span className="cursor-pointer text-sm font-medium text-brand" onClick={onClose}>
               {t("profile.edit.close")}
             </span>
             <ArrowButton loading={loading} disabled={loading} variant="outline-primary">
diff --git a/src/components/popups/profile-settings/NamesForm.tsx b/src/components/popups/profile-settings/NamesForm.tsx
@@ -98,7 +98,7 @@ export default function EditProfile({ show, onClose }: EditProfileProps): ReactE
             />
           </div>
           <div className="flex pb-2 items-center justify-between">
-            <span className="cursor-pointer text-sm font-medium text-primary" onClick={onClose}>
+            <span className="cursor-pointer text-sm font-medium text-brand" onClick={onClose}>
               {t("profile.edit.close")}
             </span>
             <ArrowButton loading={loading} disabled={loading} variant="outline-primary">
diff --git a/src/components/sections/homepage/_partials/testimonials/CommunityStats.tsx b/src/components/sections/homepage/_partials/testimonials/CommunityStats.tsx
@@ -46,7 +46,7 @@ export default function CommunityStats() {
   );
 
   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">
+    <div className="p-7 bg-brand 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">
         {formattedStat.map((stat) => (
diff --git a/src/components/sections/profile/Navigation.tsx b/src/components/sections/profile/Navigation.tsx
@@ -104,8 +104,8 @@ export default function ProfileNagivation(): ReactElement {
           <ProfileOverviewSection title={menu.title}>
             <ul className="space-y-4 flex flex-col">
               {menu.items.map((item, k) => (
-                <li key={`profile-menu-subItem-${k}`} className="text-sm relative text-primary">
-                  <Link href={item.link} className={`relative text-gray-500 ${isCurrentMenuItem(item) && "text-primary"}`}>
+                <li key={`profile-menu-subItem-${k}`} className="text-sm relative text-brand">
+                  <Link href={item.link} className={`relative text-gray-500 ${isCurrentMenuItem(item) && "text-brand"}`}>
                     {isCurrentMenuItem(item) && (
                       <span className="!inline-block absolute -left-6 nav-icon">
                         <ChevronRightIcon />
diff --git a/src/components/sections/profile/modals/EditAddress/_partials/Footer.tsx b/src/components/sections/profile/modals/EditAddress/_partials/Footer.tsx
@@ -23,7 +23,7 @@ export default function EditAdressFooter({ onClose, actionButtonDisabled, loadin
   const { t } = useTranslation();
   return (
     <div className="flex items-center justify-between pt-4 pb-2 pl-6 pr-2 -mb-6">
-      <span className="text-sm font-medium cursor-pointer text-primary" onClick={onClose}>
+      <span className="text-sm font-medium cursor-pointer text-brand" onClick={onClose}>
         {t("profile.edit.close")}
       </span>
 
diff --git a/src/components/sections/profile/modals/EditAddress/_partials/Info.tsx b/src/components/sections/profile/modals/EditAddress/_partials/Info.tsx
@@ -33,7 +33,7 @@ export function WalletInfo({ address, onClick, connectionMethod }: Props) {
         <p className="text-base font-medium">{t(address ? "profile.edit.wallet.current.address" : "profile.edit.wallet.input.label.manual")}</p>
 
         {address && (
-          <span className="ml-auto text-base font-medium cursor-pointer text-primary" onClick={onClick}>
+          <span className="ml-auto text-base font-medium cursor-pointer text-brand" onClick={onClick}>
             {t("profile.edit.wallet.button.change")}
           </span>
         )}
diff --git a/src/components/sections/profile/modals/EditProfile.tsx b/src/components/sections/profile/modals/EditProfile.tsx
@@ -95,7 +95,7 @@ export default function EditProfile({ show, onClose }: EditProfileProps): ReactE
             />
           </div>
           <div className="flex pb-2 items-center justify-between">
-            <span className="cursor-pointer text-sm font-medium text-primary" onClick={onClose}>
+            <span className="cursor-pointer text-sm font-medium text-brand" onClick={onClose}>
               {t("profile.edit.close")}
             </span>
             <ArrowButton loading={loading} disabled={loading} variant="outline-primary">
diff --git a/src/components/sections/profile/modals/MintCertificate.tsx b/src/components/sections/profile/modals/MintCertificate.tsx
@@ -203,7 +203,7 @@ export default function MintCertificate({ show, close }: { show: boolean; wallet
           </div>
         </div>
         <div className="flex items-center justify-between mt-8">
-          <a className="text-sm font-medium cursor-pointer text-primary" onClick={onClose}>
+          <a className="text-sm font-medium cursor-pointer text-brand" onClick={onClose}>
             Close
           </a>
           {!minted ? (
diff --git a/src/components/sections/profile/modals/Payout.tsx b/src/components/sections/profile/modals/Payout.tsx
@@ -72,7 +72,7 @@ export default function Payout({ show, wallet, onClose }: PayoutProps): ReactEle
         </div>
       </div>
       <div className="flex items-center justify-between pb-2 pl-6 pr-2">
-        <span className="text-sm font-medium cursor-pointer text-primary" onClick={onClose}>
+        <span className="text-sm font-medium cursor-pointer text-brand" onClick={onClose}>
           {t("profile.edit.close")}
         </span>
         <ArrowButton loading={loading} disabled={loading} variant="outline-primary" onClick={save}>
diff --git a/src/components/sections/profile/overview/Achievements.tsx b/src/components/sections/profile/overview/Achievements.tsx
@@ -27,13 +27,13 @@ export default function ProfileOverviewAchievements(): ReactElement {
           ))}
         </div>
         {showAll ? (
-          <button  onClick={() => setShowAll(false)} className="text-primary bg-transparent pt-4 flex items-center gap-1.5 cursor-pointer">
+          <button  onClick={() => setShowAll(false)} className="text-brand bg-transparent pt-4 flex items-center gap-1.5 cursor-pointer">
             {" "}
             <Less />
             <span>See Less</span>
           </button>
         ) : (
-          <button  onClick={() => setShowAll(true)} className="text-primary bg-transparent pt-4 flex items-center gap-1.5 cursor-pointer">
+          <button  onClick={() => setShowAll(true)} className="text-brand bg-transparent pt-4 flex items-center gap-1.5 cursor-pointer">
             {" "}
             <Plus />
             <span>See All</span>
diff --git a/src/components/sections/profile/settings/Linking.tsx b/src/components/sections/profile/settings/Linking.tsx
@@ -17,7 +17,7 @@ export default function ProfileLinking(): ReactElement {
           </div>
           <div className="text-sm self-center">{t("profile.settings.edit.discord")}</div>
         </div>
-        <div className="flex justify-end text-primary text-sm">
+        <div className="flex justify-end text-brand text-sm">
           {!canConnectDiscord ? (
             <button className="bg-transparent hover:bg-transparent flex justify-end text-gray-400 text-xs">{t("profile.settings.edit.discord.connected")}</button>
           ) : (
diff --git a/src/components/sections/profile/settings/Overview.tsx b/src/components/sections/profile/settings/Overview.tsx
@@ -25,7 +25,7 @@ export default function ProfileOverview(): ReactElement {
       <div className="grid grid-cols-3 gap-4 p-4">
         <div className="text-gray text-sm">{t("profile.settings.email")}</div>
         <div className="text-gray text-sm">{user.data?.email}</div>
-        <button className="bg-transparent hover:bg-transparent flex justify-end text-primary text-xs" onClick={() => setTogglePopupEmail(true)}>
+        <button className="bg-transparent hover:bg-transparent flex justify-end text-brand text-xs" onClick={() => setTogglePopupEmail(true)}>
           {user.data?.email.length ? t("profile.edit.change") : t("profile.edit.set")}
         </button>
       </div>
@@ -35,7 +35,7 @@ export default function ProfileOverview(): ReactElement {
         <div className="text-gray text-sm">
           <span>{user.data?.firstName ?? ""}</span> <span>{user.data?.lastName ?? ""}</span>
         </div>
-        <button className="bg-transparent hover:bg-transparent flex justify-end text-primary text-xs" onClick={() => setTogglePopupNames(true)}>
+        <button className="bg-transparent hover:bg-transparent flex justify-end text-brand text-xs" onClick={() => setTogglePopupNames(true)}>
           {user.data?.username.length ? t("profile.edit.change") : t("profile.edit.set")}
         </button>
       </div>
diff --git a/src/components/ui/Avatar.tsx b/src/components/ui/Avatar.tsx
@@ -121,7 +121,7 @@ export default function Avatar({
     <Component data-testid={testId} href={link} className={componentClassName}>
       <div
         style={{ backgroundColor: color }}
-        className={`bg-primary h-full w-full flex overflow-hidden text-white items-center justify-center uppercase leading-none align-middle relative z-0 ${shapeClassName}`}
+        className={`bg-brand h-full w-full flex overflow-hidden text-white items-center justify-center uppercase leading-none align-middle relative z-0 ${shapeClassName}`}
       >
         {user && user.avatar && userAvatarLoaded ? (
           <div>
diff --git a/src/components/ui/Checkbox.tsx b/src/components/ui/Checkbox.tsx
@@ -33,7 +33,7 @@ interface CheckboxProps extends HTMLProps<HTMLInputElement> {
 const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function ({ disabled, className, communityStyles, testId = "checkboxId", ...props }, ref) {
   const styles = communityStyles ? { color: "#0000FF" } : undefined;
 
-  const checkboxClassName = classNames("w-5 h-5 bg-gray-100 rounded border-gray-200 text-primary", className, {
+  const checkboxClassName = classNames("w-5 h-5 bg-gray-100 rounded border-gray-200 text-brand", className, {
     "cursor-not-allowed": disabled,
     "cursor-pointer": !disabled,
   });
diff --git a/src/components/ui/Loader.tsx b/src/components/ui/Loader.tsx
@@ -36,7 +36,7 @@ export default function Loader({ communityStyles = false, className = "", isSmal
   };
 
   const loaderClasses = classNames(`flex items-center relative justify-center ${className}`, {
-    "text-primary": !communityStyles,
+    "text-brand": !communityStyles,
   });
   const spinnerClasses = classNames(`animate-spin`, {
     "h-12 w-12": !isSmallSpinner,
diff --git a/src/components/ui/Progress.tsx b/src/components/ui/Progress.tsx
@@ -33,7 +33,7 @@ export default function Progress({ communityStyles, percentage }: ProgressProps)
   return (
     <div className="h-3 w-full block rounded-lg overflow-hidden relative">
       <div style={styles} className={`h-full w-full absolute top-0 left-0 bg-gray-100  z-0 ${communityStyles ? "opacity-20" : ""}`} />
-      <div style={{ width: `${percentage}%`, ...styles }} className="h-full relative z-10 bg-primary transition-all" />
+      <div style={{ width: `${percentage}%`, ...styles }} className="h-full relative z-10 bg-brand transition-all" />
     </div>
   );
 }
diff --git a/src/components/ui/Radio.tsx b/src/components/ui/Radio.tsx
diff --git a/src/components/ui/Section.tsx b/src/components/ui/Section.tsx
diff --git a/src/components/ui/button/index.tsx b/src/components/ui/button/index.tsx
diff --git a/src/pages/login.tsx b/src/pages/login.tsx
diff --git a/src/styles/globals.css b/src/styles/globals.css
diff --git a/tailwind.config.js b/tailwind.config.js
