Update SmallPortraitCardWithDialog to enable the possibility to close…

… the dialog by clicking the overlay.
QuantStack · Oct 30, 2024 · 5b58c1b · 5b58c1b
1 parent ddfdc96
commit 5b58c1b
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 52 deletions.
diff --git a/src/components/about/SmallPortraitCard.tsx b/src/components/about/SmallPortraitCard.tsx
@@ -2,41 +2,39 @@ import styles from "./styles.module.css";
 import { useHistory } from "react-router";
 import Avatar from "./Avatar";
 import { useState } from "react";
+import Link from "@docusaurus/Link";
 
-
-export function SmallPortraitCard ({ person}) {
+export function SmallPortraitCard({ person }) {
   let [isDialogOpen, setIsDialogOpen] = useState(false);
 
   const history = useHistory();
 
   const openDialog = () => {
     history.push("/about/" + person.firstName);
     setIsDialogOpen(true);
-    /* dialog = name
-    /* use a props*/
   };
 
   return (
     <div onClick={openDialog}>
-       <div className={"card" + " " + styles.small_portrait_card}>
-      <div className="card__header">
-        <Avatar person={person} />
-        <div
-          className={
-            "flex-full-centered" + " " + styles.small_card_complete_name
-          }
-        >
-          {person.completeName}
+      <div className={"card" + " " + styles.small_portrait_card}>
+        <div className="card__header">
+          <Avatar person={person} />
+          <div
+            className={
+              "flex-full-centered" + " " + styles.small_card_complete_name
+            }
+          >
+            {person.completeName}
+          </div>
         </div>
-      </div>
-      <div className="card__body">
-        <div
-          className={"flex-full-centered" + " " + styles.small_card_position}
-        >
-          {person.position}
+        <div className="card__body">
+          <div
+            className={"flex-full-centered" + " " + styles.small_card_position}
+          >
+            {person.position}
+          </div>
         </div>
       </div>
     </div>
-    </div>
   );
-}
+}
diff --git a/src/components/about/SmallPortraitCardWithDialog.tsx b/src/components/about/SmallPortraitCardWithDialog.tsx
@@ -1,3 +1,4 @@
+import styles from "./styles.module.css";
 import React from "react";
 import {
   BrowserRouter as Router,
@@ -9,30 +10,17 @@ import { useState } from "react";
 import LargePortraitCard from "./LargePortraitCard";
 import { SmallPortraitCard } from "./SmallPortraitCard";
 
-const modalOverlay = {
-  position: "fixed",
-  top: "0",
-  left: "0",
-  right: "0",
-  bottom: "0",
-  backgroundColor: "rgba(0, 0, 0, 0.3)",
-  zIndex: 1000
-};
-const modalContent = {
-  position: "fixed",
-  top: "50%",
-  left: "50%",
-  transform: "translate(-50%, -50%)",
-  backgroundColor: "white",
-  border: "1px solid #ccc",
-  boxShadow: "0 8px 16px rgba(0,0,0,0.2)",
-  borderRadius: "10px",
-  zIndex: "4000"
-};
-
-export default function PortraitCardsAnchorAndDialog({ person }) {
+export default function SmallPortraitCardWithDialog({ person }) {
   const history = useHistory();
   let [isDialogOpen, setIsDialogOpen] = useState(true);
+  const overlay = document.getElementsByClassName("modal_overlay");
+  const closeButton = document.getElementsByClassName("close-button");
+
+  function closeDialog() {
+    history.goBack();
+    console.log("overlay clicked")
+  }
+
   return (
     <Router>
       <div>
@@ -42,19 +30,16 @@ export default function PortraitCardsAnchorAndDialog({ person }) {
             path={"/about/" + person.firstName}
             render={() => (
               <>
-                <div style={modalOverlay}>
-                  <div style={modalContent}>
+                <div className={styles.modal_overlay} onClick={closeDialog}>
+                  <div className={styles.modal_content}>
                     <button
                       className="close-button"
                       style={{
                         position: "absolute",
                         top: "10px",
                         right: "10px",
                       }}
-                      onClick={() => {
-                        history.goBack();
-                        setIsDialogOpen(false);
-                      }}
+                      onClick={closeDialog}
                     />
                     <LargePortraitCard person={person} />
                   </div>

diff --git a/src/components/about/index.tsx b/src/components/about/index.tsx
@@ -3,8 +3,7 @@ import { coreTeam, QSCollaboratorsTeam, leadershipTeam } from "./Team/team";
 import FourValues from "./FourValues";
 import SubTeam from "./SubTeam";
 import LinkToContact from "../home/LinkToContact";
-import { BrowserRouter as Router } from "react-router-dom";
-import Appli from "./Test"; // Your main App component
+
 
 export function About() {
   return (

diff --git a/src/components/about/styles.module.css b/src/components/about/styles.module.css
@@ -1,3 +1,25 @@
+.modal_overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.3);
+  z-index: 1000;
+}
+
+.modal_content {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: white;
+  border: 1px solid #ccc;
+  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
+  border-radius: 20px;
+  z-index: 4000;
+}
+
 .small_portrait_card {
   width: 279px;
   height: 320px;
@@ -239,7 +261,7 @@ div .join_the_team_text {
   }
 
   .large_portrait_card {
-    width: 960px;
+    width: 920px;
     padding: var(--ifm-spacing-xl) var(--ifm-spacing-2xl);
   }