change color theme based on page

Author: burtonjong

components/Avatar.jsx

@@ -1,26 +1,37 @@
 import Image from 'next/image';
 import { faLinkedin } from '@fortawesome/free-brands-svg-icons';
 import FontAwesomeLink from './FontAwesomeLink';
+import { PageIdentifiers } from '../utils/flags';
 
 const PROFILE_CONTAINER = 'flex flex-col items-center m-10';
 
-const Avatar = ({ name, linkedin, position, pfp, classes, prevRole, profileContainerClasses = '' }) => {
+const Avatar = ({ name, linkedin, position, pfp, classes, prevRole, profileContainerClasses = '', teamIdentifier }) => {
   const img = 'https:' + pfp.fields.file.url;
+
+  const colorTheme =
+    teamIdentifier === PageIdentifiers.INTERNAL_LEVEL_CONTAINER
+      ? 'text-[#00D3A9]'
+      : teamIdentifier === PageIdentifiers.EXECUTIVE_LEVEL_CONTAINER
+      ? 'text-[#7055FD]'
+      : '';
+
   return (
     <div className={`${PROFILE_CONTAINER} ${profileContainerClasses}`}>
       <div className={`w-28 h-28 sm:w-48 sm:h-48 rounded-full relative overflow-hidden`}>
         <Image src={img} alt={name} layout="fill" objectFit="contain" unoptimized={true} />
       </div>
-      <h2 className={`text-[#7055FD] text-xs sm:text-base font-semibold mt-3 ${classes}`}>{name}</h2>
-      <h2 className={`text-[#7055FD] text-xs sm:text-base font-medium mb-2 ${classes}`}>{position}</h2>
+      <h2 className={`${colorTheme} text-xs sm:text-base font-semibold mt-3 ${classes}`}>{name}</h2>
+      <h2 className={`${colorTheme} text-xs sm:text-base font-medium mb-2 ${classes}`}>{position}</h2>
       {prevRole && (
         <h2
-          className={`text-[#7055FD] w-28 text-center text-xs sm:text-base hidden sm:block font-medium mb-2 ${classes}`}
+          className={`${colorTheme} w-28 text-center text-xs sm:text-base hidden sm:block font-medium mb-2 ${classes}`}
         >
           Previously: {prevRole}
         </h2>
       )}
-      {linkedin && <FontAwesomeLink username={linkedin} icon={faLinkedin} className={`${classes} fill-black `} />}
+      {linkedin && (
+        <FontAwesomeLink colorTheme={colorTheme} username={linkedin} icon={faLinkedin} className={`${classes}`} />
+      )}
     </div>
   );
 };

components/FontAwesomeLink.jsx

@@ -1,10 +1,10 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
-const FontAwesomeLink = ({ username, icon, className }) => {
-  const defaultClasses = 'h-6 w-6 text-[#7055FD] hover:text-[#8A76FF] transition-all duration-300 cursor-pointer';
+const FontAwesomeLink = ({ username, colorTheme, icon, className }) => {
+  const defaultClasses = 'size-6 transition-all duration-300 cursor-pointer';
   return (
     <a target="_blank" href={`https://linkedin.com/in/${username}`} rel="noopener noreferrer">
-      <FontAwesomeIcon className={`${defaultClasses} ${className}`} icon={icon} />
+      <FontAwesomeIcon className={`${colorTheme} hover:size-7 ${defaultClasses} ${className}`} icon={icon} />
     </a>
   );
 };

components/InternalTeam.jsx

@@ -4,6 +4,7 @@ import { useState, useEffect } from 'react';
 import { Tabs, TabsHeader, TabsBody, Tab, TabPanel } from '@material-tailwind/react';
 import Heading from './Heading';
 import { UnderlineTypes } from '../utils/underlineType';
+import { PageIdentifiers } from '../utils/flags';
 
 const positionToGroupMap = {
   'Jr VP Marketing': 'Marketing',
@@ -48,19 +49,19 @@ const InternalTeam = () => {
   return (
     <>
       <div className="mb-12 flex justify-center gap-3">
-        <Heading distanceFromTop={11} underlineType={UnderlineTypes.PURPLE_SHORT_UNDERLINE}>
+        <Heading distanceFromTop={11} underlineType={UnderlineTypes.GREEN_SHORT_UNDERLINE}>
           Internal{' '}
         </Heading>
         <span className="text-5xl font-semibold">Team</span>
       </div>
       {groups.length > 0 && (
-        <Tabs value={activeTab} className="">
+        <Tabs value={activeTab}>
           <TabsHeader className="overflow-x-auto whitespace-nowrap scrollbar-hide w-full flex flex-row">
             {groups.map((group) => (
               <Tab key={group} value={group} onClick={() => setActiveTab(group)}>
                 <div
-                  className={`rounded-full p-2 px-4 font-medium hover:bg-[#7559fc] hover:text-white transition-all duration-200
-                  ${activeTab === group ? 'bg-[#7559fc] text-white' : 'text-black'}
+                  className={`rounded-full p-2 px-6 font-medium hover:bg-[#00D3A9] hover:text-white transition-all duration-200
+                  ${activeTab === group ? 'bg-[#00D3A9] text-white' : 'text-black'}
                   `}
                 >
                   {group}
@@ -71,7 +72,10 @@ const InternalTeam = () => {
           <TabsBody>
             {groups.map((group) => (
               <TabPanel key={group} value={group}>
-                <Team executives={executives.filter((exec) => exec.group === group)} />
+                <Team
+                  teamIdentifier={PageIdentifiers.INTERNAL_LEVEL_CONTAINER}
+                  teamMembers={executives.filter((exec) => exec.group === group)}
+                />
               </TabPanel>
             ))}
           </TabsBody>

components/Team.jsx

@@ -1,12 +1,12 @@
 import Avatar from './Avatar';
 
-const Team = ({ executives }) => {
-  const EXECUTIVE_LEVEL_CONTAINER = 'flex flex-row flex-wrap justify-center w-full';
+const Team = ({ teamMembers, teamIdentifier }) => {
+  const TEAM_CONTAINER = 'flex flex-row flex-wrap justify-center w-full';
 
   return (
-    <div className={EXECUTIVE_LEVEL_CONTAINER}>
-      {executives.map((exec) => (
-        <Avatar key={exec.name} {...exec} />
+    <div className={TEAM_CONTAINER}>
+      {teamMembers.map((member) => (
+        <Avatar teamIdentifier={teamIdentifier} key={member.name} {...member} />
       ))}
     </div>
   );

components/TechnicalTeam.jsx

@@ -4,6 +4,7 @@ import { useState, useEffect } from 'react';
 import { Tabs, TabsHeader, TabsBody, Tab, TabPanel } from '@material-tailwind/react';
 import Heading from './Heading';
 import { UnderlineTypes } from '../utils/underlineType';
+import { PageIdentifiers } from '../utils/flags';
 
 const TechnicalTeam = () => {
   const [executives, setExecutives] = useState([]);
@@ -51,7 +52,10 @@ const TechnicalTeam = () => {
           <TabsBody>
             {positions.map((position) => (
               <TabPanel key={position} value={position}>
-                <Team executives={executives.filter((exec) => exec.position === position)} />
+                <Team
+                  teamIdentifier={PageIdentifiers.EXECUTIVE_LEVEL_CONTAINER}
+                  teamMembers={executives.filter((exec) => exec.position === position)}
+                />
               </TabPanel>
             ))}
           </TabsBody>

utils/flags.js

@@ -1 +1,6 @@
 export const underConstruction = process.env.NEXT_PUBLIC_CONSTRUCTION_FLAG === 'false';
+
+export const PageIdentifiers = {
+  EXECUTIVE_LEVEL_CONTAINER: 'EXECUTIVE_LEVEL_CONTAINER',
+  INTERNAL_LEVEL_CONTAINER: 'INTERNAL_LEVEL_CONTAINER',
+};