Update SmallPortraitCard and SmallPortraitCardWithDialog. Add the pag…

…es for the collaborators.

src/components/about/SmallPortraitCard.tsx

@@ -1,17 +1,12 @@
 import styles from "./styles.module.css";
-import { useHistory } from "react-router";
+import { useHistory } from "@docusaurus/router";
 import Avatar from "./Avatar";
-import { useState } from "react";
-import Link from "@docusaurus/Link";
 
 export function SmallPortraitCard({ person }) {
-  let [isDialogOpen, setIsDialogOpen] = useState(false);
-
   const history = useHistory();
 
-  const openDialog = () => {
+  function openDialog () {
     history.push("/about/" + person.firstName);
-    setIsDialogOpen(true);
   };
 
   return (

src/components/about/SmallPortraitCardWithDialog.tsx

@@ -1,24 +1,17 @@
 import styles from "./styles.module.css";
 import React from "react";
-import {
-  BrowserRouter as Router,
-  Route,
-  Switch,
-  useHistory,
-} from "react-router-dom";
-import { useState } from "react";
+import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
+import { useHistory } from "@docusaurus/router";
+
 import LargePortraitCard from "./LargePortraitCard";
 import { SmallPortraitCard } from "./SmallPortraitCard";
 
-export default function SmallPortraitCardWithDialog({ person }) {
+export 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 (

src/components/about/SubTeam.tsx

@@ -1,5 +1,7 @@
 import styles from "./styles.module.css";
-import SmallPortraitCardWithDialog from "./SmallPortraitCardWithDialog";
+import Example from "./PortraitDialog";
+import { SmallPortraitCardWithDialog } from "./SmallPortraitCardWithDialog";
+
 
 export default function SubTeam({ subTeamName, subTeam }) {
   return (
@@ -8,7 +10,7 @@ export default function SubTeam({ subTeamName, subTeam }) {
       <div className={"container"}>
         <ul className="row padding-none flex-full-centered row-with-margin-top">
           {subTeam.map((person, index) => (
-            <li className="cards-list" key={index}>
+            <li className="cards-list" key={person.firstName}>
               <div className="col">
                 <SmallPortraitCardWithDialog person={person} />
               </div>

src/components/careers/Interviews.tsx

@@ -8,7 +8,7 @@ export default function Interviews({ details, description }) {
       <div className="container">
         <ul className={"row" + " "+ "flex-full-centered"}>
           {details.map((person, index) => (
-            <li className="cards-list" key={index}>
+            <li className="cards-list" key={person.firstName}>
               <div className="col col--2">
                 <InterviewCard person={person} />
               </div>

src/pages/about/Romain.tsx

@@ -0,0 +1,11 @@
+import Layout from "@theme/Layout";
+import { About } from "@site/src/components/about";
+import BrowserOnly from "@docusaurus/BrowserOnly";
+
+export default function AboutPage(): JSX.Element {
+  return (
+    <Layout>
+      <BrowserOnly>{() => <About/>}</BrowserOnly>
+    </Layout>
+  );
+}

src/pages/about/Serge.tsx

@@ -0,0 +1,11 @@
+import Layout from "@theme/Layout";
+import { About } from "@site/src/components/about";
+import BrowserOnly from "@docusaurus/BrowserOnly";
+
+export default function AboutPage(): JSX.Element {
+  return (
+    <Layout>
+      <BrowserOnly>{() => <About/>}</BrowserOnly>
+    </Layout>
+  );
+}