Mobile TeamMemberCard fixes (#368)

Summary of changes:
- Refactored TeamMemberCard to get rid of `isPopup` prop
- Reorganized TeamMemberCard CSS
- Fixes #213
- Fixes #214
- Fixes #242
- Fixes #286

Related PR: #241

Co-authored-by: Amy <a258wang@uwaterloo.ca>
Reviewed-on: #368
Reviewed-by: j285he <j285he@localhost>
Reviewed-by: Aditya Thakral <a3thakra@csclub.uwaterloo.ca>
Co-authored-by: Amy <a258wang@csclub.uwaterloo.ca>
Co-committed-by: Amy <a258wang@csclub.uwaterloo.ca>

components/TeamMemberCard.module.css

@@ -75,36 +75,50 @@
 
 .popupBackground {
   position: fixed;
-  z-index: 11;
-  background-color: var(--navbar-page-overlay);
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
+  z-index: 11;
+
+  background-color: var(--navbar-page-overlay);
   animation: revealBg 0.2s forwards;
 }
 
 .popupContainer {
   position: fixed;
-  display: flex;
-  z-index: 12;
-  flex-direction: column;
-  background-color: var(--secondary-background);
-  padding: calc(20rem / 16) calc(40rem / 16);
   left: 0;
+  right: 0;
   top: 50%;
+  z-index: 12;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+
+  box-sizing: border-box;
+  padding: calc(40rem / 16);
+  max-height: 75vh;
+  overflow: auto;
+
+  background-color: var(--secondary-background);
   animation: popup 0.7s forwards;
 }
 
 .closeBtn {
+  position: absolute;
   align-self: flex-end;
+  cursor: pointer;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
   /* reset default button styling */
-  width: min-content;
-  background: transparent;
-  border: 0px solid transparent;
+  background: none;
+  border: none;
   padding: 0;
-  font-family: inherit;
-  line-height: inherit;
 }
 
 .popupContent {
@@ -113,25 +127,27 @@
   align-items: center;
 }
 
-.popupName {
-  color: var(--primary-accent);
-  margin: calc(24rem / 16) 0 0 0;
+.popupContent .name {
+  margin-top: calc(24rem / 16);
   font-size: calc(18rem / 16);
   font-weight: 600;
 }
 
-.popupRole {
-  color: var(--primary-heading);
-  margin: 0 0 1rem 0;
-  text-align: center;
+.popupContent .role {
+  margin-bottom: calc(16rem / 16);
   font-size: calc(18rem / 16);
   font-weight: 600;
 }
 
-.popupDescription {
+.popupContent .description {
+  display: block;
   font-size: calc(14rem / 16);
 }
 
+.popupContent .description > *:last-child {
+  margin-bottom: 0;
+}
+
 @media only screen and (max-width: calc(768rem / 16)) {
   .card {
     display: flex;

components/TeamMemberCard.tsx

@@ -13,35 +13,6 @@ export interface TeamMemberCardProps {
   children: React.ReactNode;
 }
 
-interface TeamMemberInfoProps extends TeamMemberCardProps {
-  isPopup?: boolean;
-}
-
-function TeamMemberInfo({
-  name,
-  role,
-  image,
-  children,
-  isPopup = false,
-}: TeamMemberInfoProps) {
-  return (
-    <>
-      <div className={styles.picture}>
-        <Image
-          className={styles.image}
-          src={image}
-          alt={`Picture of ${name}`}
-        />
-      </div>
-      <h1 className={isPopup ? styles.popupName : styles.name}>{name}</h1>
-      <h2 className={isPopup ? styles.popupRole : styles.role}>{role}</h2>
-      <div className={isPopup ? styles.popupDescription : styles.description}>
-        {children}
-      </div>
-    </>
-  );
-}
-
 export function TeamMemberCard({
   name,
   role,
@@ -50,11 +21,13 @@ export function TeamMemberCard({
 }: TeamMemberCardProps) {
   const { width } = useWindowDimension();
   const [isOpen, setIsOpen] = useState(false);
+
   const handleClick = () => {
     if (isOpen || width <= 768) {
       setIsOpen(!isOpen);
     }
   };
+
   return (
     <>
       <article className={styles.card} onClick={handleClick}>
@@ -75,11 +48,28 @@ export function TeamMemberCard({
   );
 }
 
-interface Propup extends TeamMemberCardProps {
+function TeamMemberInfo({ name, role, image, children }: TeamMemberCardProps) {
+  return (
+    <>
+      <div className={styles.picture}>
+        <Image
+          className={styles.image}
+          src={image}
+          alt={`Picture of ${name}`}
+        />
+      </div>
+      <h1 className={styles.name}>{name}</h1>
+      <h2 className={styles.role}>{role}</h2>
+      <div className={styles.description}>{children}</div>
+    </>
+  );
+}
+
+interface PopupProps extends TeamMemberCardProps {
   handleClick: () => void;
 }
 
-function ExecPopup({ name, role, image, children, handleClick }: Propup) {
+function ExecPopup({ name, role, image, children, handleClick }: PopupProps) {
   return (
     <>
       <div className={styles.popupBackground} onClick={handleClick} />
@@ -88,9 +78,7 @@ function ExecPopup({ name, role, image, children, handleClick }: Propup) {
           <Image src="images/team/popup-close.svg" />
         </button>
         <div className={styles.popupContent}>
-          <TeamMemberInfo {...{ name, role, image }} isPopup={true}>
-            {children}
-          </TeamMemberInfo>
+          <TeamMemberInfo {...{ name, role, image }}>{children}</TeamMemberInfo>
         </div>
       </div>
     </>