Website: More Team Page Improvements (#801)

cchrischen · web-flow · commit e976e754d948 · 2024-12-22T21:29:53.000-05:00
diff --git a/new-dti-website/components/blob.tsx b/new-dti-website/components/blob.tsx
@@ -18,7 +18,7 @@
  */
 const RedBlob: React.FC<{ className?: string; intensity: number }> = ({ className, intensity }) => (
   <div
-    className={`absolute h-[600px] w-[600px] rounded-full z-0 ${className}`}
+    className={`absolute h-[600px] w-[600px] rounded-full z-0 select-none ${className}`}
     style={{
       backgroundImage: `radial-gradient(rgba(192, 12, 12, ${intensity}) 5%, transparent 75%)`
     }}
diff --git a/new-dti-website/components/team/MemberDisplay.tsx b/new-dti-website/components/team/MemberDisplay.tsx
@@ -43,8 +43,8 @@ const MemberDisplay: React.FC = () => {
         const target = event.target as HTMLElement;
         if (
           !(
-            target.classList.contains('memberCard') ||
-            target.parentElement?.classList.contains('memberCard')
+            target.classList.contains('card-clickable') ||
+            target.parentElement?.classList.contains('card-clickable')
           ) &&
           !memberDetailsRef.current?.contains(target)
         )
diff --git a/new-dti-website/components/team/MemberGroup.tsx b/new-dti-website/components/team/MemberGroup.tsx
@@ -30,20 +30,22 @@ const MemberSummary: React.FC<MemberSummaryProps> = ({
 
   return (
     <div
-      className={`memberCard flex flex-col md:gap-3 xs:gap-2 xs:text-[16px] ${
+      className={`memberCard card-clickable flex h-full flex-col md:gap-3 xs:gap-2 xs:text-[16px] justify-between ${
         enlarged ? 'md:text-2xl' : 'md:text-lg'
       }`}
     >
-      <img
-        src={image}
-        alt={`${firstName}-${lastName}`}
-        className={`rounded-md ${
-          enlarged ? 'h-[244px] w-[244px]' : 'h-[202px] w-[202px]'
-        } object-cover`}
-      />
-      <h3
-        className={`text-left font-${enlarged ? 'semibold' : 'bold'}`}
-      >{`${firstName} ${lastName}`}</h3>
+      <div className="card-clickable flex flex-col md:gap-3 xs:gap-2 justify-between">
+        <img
+          src={image}
+          alt={`${firstName}-${lastName}`}
+          className={`rounded-md ${
+            enlarged ? 'h-[244px] w-[244px]' : 'md:h-[238px] xs:h-[202px] w-full'
+          } object-cover`}
+        />
+        <h3
+          className={`text-left font-${enlarged ? 'semibold' : 'bold'}`}
+        >{`${firstName} ${lastName}`}</h3>
+      </div>
       <p
         className="w-fit h-[32px] flex items-center px-[12px] py-[4px] rounded-2xl text-[14px]"
         style={{ backgroundColor: chipColor }}
@@ -65,7 +67,7 @@ type MemberCardProps = {
 
 const MemberCard: React.FC<MemberCardProps> = (props: MemberCardProps) => (
   <Card
-    className={`memberCard w-fit md:p-3 md:pb-4 xs:p-2 xs:pb-3 h-fit justify-self-center ${
+    className={`memberCard card-clickable w-full md:p-3 md:pb-4 xs:p-2 xs:pb-3 h-fit grow ${
       props.cardState ? 'opacity-70 hover:opacity-100' : 'opacity-100'
     }`}
   >
@@ -101,7 +103,7 @@ export const MemberDetails: React.FC<MemberDetailsProps> = (props: MemberDetails
     : { name: 'No Subteam', link: '' };
 
   return (
-    <Card className="flex flex-col gap-5 md:p-7 xs:p-4 xs:pr-2 rounded-[20px]">
+    <Card className="flex flex-col gap-5 md:p-7 xs:p-4 xs:pr-2 rounded-lg">
       <div className="flex lg:gap-10">
         <div className="w-3/12 lg:flex xs:hidden">
           <MemberSummary {...props} enlarged={true} />
@@ -155,13 +157,13 @@ export const MemberDetails: React.FC<MemberDetailsProps> = (props: MemberDetails
                 }`}
               >
                 {link ? (
-                  <a href={link} className="whitespace-nowrap">
+                  <a href={link} className="flex whitespace-nowrap">
                     {name}
+                    {link && <Image src="/icons/link.svg" alt="link" height={20} width={20} />}
                   </a>
                 ) : (
                   <p>{name}</p>
                 )}
-                {link && <Image src="/icons/link.svg" alt="link" height={20} width={20} />}
               </div>
             </div>
             <div className="flex flex-col gap-2 md:w-1/3 xs:w-1/2">
@@ -171,12 +173,17 @@ export const MemberDetails: React.FC<MemberDetailsProps> = (props: MemberDetails
                   const link = props[icon.alt as keyof typeof props] as string | null;
                   return (
                     link && (
-                      <a href={icon.alt === 'email' ? `mailto:${link}` : `${link}`} key={icon.alt}>
+                      <a
+                        href={icon.alt === 'email' ? `mailto:${link}` : `${link}`}
+                        key={icon.alt}
+                        className="icons"
+                      >
                         <Image
                           src={icon.src}
                           alt={icon.alt}
                           height={icon.height}
                           width={icon.width}
+                          className="opacity-100 hover:opacity-60"
                         />
                       </a>
                     )
@@ -198,7 +205,7 @@ export const MemberDetails: React.FC<MemberDetailsProps> = (props: MemberDetails
                   alt="calendar"
                   width={24}
                   height={24}
-                  className={hover ? 'brightness-0 invert' : ''}
+                  className={hover ? 'coffee-calendar-hover' : ''}
                 />
                 <p className="font-bold text-lg text-inherit whitespace-nowrap">Chat with me</p>
               </a>
@@ -224,11 +231,11 @@ export const MemberDetails: React.FC<MemberDetailsProps> = (props: MemberDetails
         >
           <div className="flex gap-3 w-max">
             <Image
-              src="/icons/calendar.svg"
+              src="/icons/red_calendar.svg"
               alt="calendar"
               width={24}
               height={24}
-              className={hover ? 'brightness-0 invert' : ''}
+              className={hover ? 'coffee-calendar-hover' : ''}
             />
             <p className="font-bold text-base text-inherit whitespace-nowrap">Chat with me</p>
           </div>
@@ -317,7 +324,7 @@ const MemberGroup: React.FC<MemberGroupProps> = ({
         <>
           <button
             onClick={() => onMemberCardClick(member)}
-            className="memberCard custom-focus-state"
+            className="memberCard card-clickable flex flex-col items-center custom-focus-state"
             aria-label={`open ${member.firstName} ${member.lastName}'s details`}
           >
             <MemberCard
@@ -328,7 +335,10 @@ const MemberGroup: React.FC<MemberGroupProps> = ({
             />
           </button>
           {selectedMember && canInsertMemberDetails(index) && (
-            <div className="lg:col-span-4 md:col-span-3 xs:col-span-2" ref={memberDetailsRef}>
+            <div
+              className="lg:col-span-4 md:col-span-3 xs:col-span-2 rounded-lg"
+              ref={memberDetailsRef}
+            >
               <MemberDetails
                 {...selectedMember}
                 image={`team/${selectedMember.netid}.jpg`}
@@ -348,13 +358,13 @@ const MemberGroup: React.FC<MemberGroupProps> = ({
         <p className="mt-3 md:text-xl xs:text-sm">{description}</p>
         <div
           className="grid lg:grid-cols-4 md:grid-cols-3 xs:grid-cols-2 md:gap-10 
-              xs:gap-x-1.5 xs:gap-y-5 md:mt-10 xs:mt-5"
+              xs:gap-5 md:mt-10 xs:mt-5"
         >
           {members.map((member, index) => (
             <>
               <button
                 onClick={() => onMemberCardClick(member)}
-                className="memberCard custom-focus-state"
+                className="memberCard card-clickable flex flex-col items-center custom-focus-state"
                 aria-label={`open ${member.firstName} ${member.lastName}'s details`}
               >
                 <MemberCard
diff --git a/new-dti-website/components/team/TeamAbout.tsx b/new-dti-website/components/team/TeamAbout.tsx
@@ -239,7 +239,7 @@ const TeamAbout = () => (
     <SectionWrapper id={'Team Page About Section information'}>
       <div className="flex flex-col gap-12 relative z-10">
         <div className="flex flex-col items-center">
-          <div className="flex md:flex-row xs:flex-col justify-between gap-[30px] items-center">
+          <div className="flex md:flex-row xs:flex-col justify-between gap-[30px] items-center xs:mb-8 md:mb-0">
             <div className="flex flex-col md:w-1/2 gap-6">
               <h2 className="font-semibold text-[32px]">We are Cornell DTI</h2>
               <p className="md:text-lg xs:text-sm">
@@ -248,25 +248,25 @@ const TeamAbout = () => (
               </p>
             </div>
             <div className={`${ibm_plex_mono.className} text-sm`}>
-              <p className="text-left mb-3">@2024</p>
               <Image
                 src="/images/dti_2024.png"
                 alt="2024 DTI Team"
                 width={490}
                 height={370}
                 className="rounded-[23px] lg:w-[490px] md:w-[383px] xs:w-[350px] h-auto"
               />
+              <p className="text-left mt-3 text-right">@2024</p>
             </div>
           </div>
           <div className={`${ibm_plex_mono.className} text-sm relative w-fit xl:bottom-[84px]`}>
-            <p className="mb-3 text-sm">@2017</p>
             <Image
               src="/images/dti_2017.png"
               alt="2017 DTI Team"
               width={453}
               height={305}
               className="rounded-[23px] lg:w-[490px] md:w-[383px] xs:w-[350px] h-auto"
             />
+            <p className="mt-3 text-sm text-right">@2017</p>
           </div>
         </div>
 
diff --git a/new-dti-website/components/team/TeamFooter.tsx b/new-dti-website/components/team/TeamFooter.tsx
@@ -51,10 +51,10 @@ const TeamFooter = () => {
         <SectionWrapper id={'Team Page Footer Information'}>
           <div className="flex md:flex-row xs:flex-col lg:gap-[60px] md:gap-10 xs:gap-8 items-center">
             <Image
-              src="/images/full-team.png"
-              alt="team picture"
-              width={412}
-              height={312}
+              src="/images/dti_2024.png"
+              alt="2024 DTI Team Picture"
+              width={490}
+              height={370}
               className="lg:w-[412px] xs:w-[360px] rounded-xl"
             />
             <div className="flex flex-col gap-[20px] items-start w-2/3">
diff --git a/new-dti-website/components/team/data/roles.json b/new-dti-website/components/team/data/roles.json
@@ -3,35 +3,35 @@
     "roleName": "Leads",
     "description": "Striving to connect and mentor our members for their best growth.",
     "members": [],
-    "roles": ["lead", "ops-lead", "product-lead", "dev-lead", "design-lead", "business-lead"],
+    "roles": ["lead", "ops-lead", "dev-lead", "design-lead", "business-lead", "product-lead"],
     "color": "#FFD0D0"
   },
+  "developer": {
+    "roleName": "Development",
+    "description": "Building, testing, and optimizing our applications.",
+    "members": [],
+    "roles": ["dev-lead", "tpm", "developer", "dev-advisor"],
+    "color": "#BCECC3"
+  },
   "designer": {
     "roleName": "Design",
     "description": "Designing quality products, keeping users at the center of it all.",
     "members": [],
     "roles": ["design-lead", "designer", "design-advisor"],
     "color": "#ADD3F9"
   },
-  "pm": {
-    "roleName": "Product",
-    "description": "Leading product development to positively impact the community.",
-    "members": [],
-    "roles": ["product-lead", "pm", "apm", "pm-advisor"],
-    "color": "#DEBDFE"
-  },
   "business": {
     "roleName": "Business",
     "description": "Bringing products and events to the community.",
     "members": [],
     "roles": ["business-lead", "business", "business-advisor"],
     "color": "#F9D6AD"
   },
-  "developer": {
-    "roleName": "Development",
-    "description": "Building, testing, and optimizing our applications.",
+  "pm": {
+    "roleName": "Product",
+    "description": "Leading product development to positively impact the community.",
     "members": [],
-    "roles": ["dev-lead", "tpm", "developer", "dev-advisor"],
-    "color": "#BCECC3"
+    "roles": ["product-lead", "pm", "apm", "pm-advisor"],
+    "color": "#DEBDFE"
   }
 }
diff --git a/new-dti-website/src/app/course/page.tsx b/new-dti-website/src/app/course/page.tsx
@@ -51,8 +51,8 @@ export default function Courses() {
           const target = event.target as HTMLElement;
           if (
             !(
-              target.classList.contains('memberCard') ||
-              target.parentElement?.classList.contains('memberCard')
+              target.classList.contains('card-clickable') ||
+              target.parentElement?.classList.contains('card-clickable')
             ) &&
             !memberDetailsRef.current?.contains(target)
           )
diff --git a/new-dti-website/src/app/globals.css b/new-dti-website/src/app/globals.css
@@ -306,3 +306,12 @@ details[open] > summary::after {
   left: -13px;
   border-radius: 16px;
 }
+
+.icons:focus-visible {
+  opacity: 0.6;
+}
+
+.coffee-calendar-hover {
+  filter: brightness(0) invert(1);
+  -webkit-filter: brightness(0) invert(1);
+}
