Merge pull request #49 from OmPals/enhancement/more-details-modal

Issue 4: Modal to host more details about the project
2026-01-09 14:08:01 -05:00 · 2022-07-02 15:29:33 -04:00
parent 1c5bdf2faa 8794933b40
commit 8b0f20dc73
6 changed files with 231 additions and 1 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
        "@types/node": "^16.11.36",
        "@types/react": "^18.0.9",
        "@types/react-dom": "^18.0.4",
+        "@types/react-modal": "^3.13.1",
        "babel-loader": "^8.2.3",
        "color-hash": "^2.0.1",
        "copy-webpack-plugin": "^11.0.0",
@@ -32,6 +33,7 @@
        "mini-css-extract-plugin": "^2.4.5",
        "react": "^18.1.0",
        "react-dom": "^18.1.0",
+        "react-modal": "^3.15.1",
        "react-router-dom": "^6.3.0",
        "style-loader": "^3.3.1",
        "typescript": "^4.6.4",
@@ -1942,6 +1944,14 @@
        "@types/react": "*"
      }
    },
+    "node_modules/@types/react-modal": {
+      "version": "3.13.1",
+      "resolved": "https://registry.npmjs.org/@types/react-modal/-/react-modal-3.13.1.tgz",
+      "integrity": "sha512-iY/gPvTDIy6Z+37l+ibmrY+GTV4KQTHcCyR5FIytm182RQS69G5ps4PH2FxtC7bAQ2QRHXMevsBgck7IQruHNg==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
    "node_modules/@types/retry": {
      "version": "0.12.0",
      "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz",
@@ -4044,6 +4054,11 @@
        "url": "https://github.com/sindresorhus/execa?sponsor=1"
      }
    },
+    "node_modules/exenv": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
+      "integrity": "sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw=="
+    },
    "node_modules/exit": {
      "version": "0.1.2",
      "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
@@ -7528,6 +7543,14 @@
      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.0.tgz",
      "integrity": "sha512-h2AatdwYH+JHiZpv7pt/gSX1XoRGb7L/qSIeuqA6GwYoF9w1vP1cw42TO0aI2pNyshRK5893hNSl+1//vHK7hQ=="
    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/object-inspect": {
      "version": "1.12.0",
      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.0.tgz",
@@ -8367,6 +8390,21 @@
        "node": ">= 6"
      }
    },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "node_modules/prop-types/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
    "node_modules/proxy-addr": {
      "version": "2.0.7",
      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -8510,6 +8548,29 @@
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
    },
+    "node_modules/react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
+    "node_modules/react-modal": {
+      "version": "3.15.1",
+      "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.15.1.tgz",
+      "integrity": "sha512-duB9bxOaYg7Zt6TMFldIFxQRtSP+Dg3F1ZX3FXxSUn+3tZZ/9JCgeAQKDg7rhZSAqopq8TFRw3yIbnx77gyFTw==",
+      "dependencies": {
+        "exenv": "^1.2.0",
+        "prop-types": "^15.7.2",
+        "react-lifecycles-compat": "^3.0.0",
+        "warning": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "peerDependencies": {
+        "react": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18",
+        "react-dom": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18"
+      }
+    },
    "node_modules/react-router": {
      "version": "6.3.0",
      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz",
@@ -9669,6 +9730,14 @@
        "makeerror": "1.0.12"
      }
    },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
    "node_modules/watchpack": {
      "version": "2.3.1",
      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.3.1.tgz",
@@ -11691,6 +11760,14 @@
        "@types/react": "*"
      }
    },
+    "@types/react-modal": {
+      "version": "3.13.1",
+      "resolved": "https://registry.npmjs.org/@types/react-modal/-/react-modal-3.13.1.tgz",
+      "integrity": "sha512-iY/gPvTDIy6Z+37l+ibmrY+GTV4KQTHcCyR5FIytm182RQS69G5ps4PH2FxtC7bAQ2QRHXMevsBgck7IQruHNg==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
    "@types/retry": {
      "version": "0.12.0",
      "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz",
@@ -13269,6 +13346,11 @@
        "strip-final-newline": "^2.0.0"
      }
    },
+    "exenv": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
+      "integrity": "sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw=="
+    },
    "exit": {
      "version": "0.1.2",
      "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
@@ -15814,6 +15896,11 @@
      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.0.tgz",
      "integrity": "sha512-h2AatdwYH+JHiZpv7pt/gSX1XoRGb7L/qSIeuqA6GwYoF9w1vP1cw42TO0aI2pNyshRK5893hNSl+1//vHK7hQ=="
    },
+    "object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="
+    },
    "object-inspect": {
      "version": "1.12.0",
      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.0.tgz",
@@ -16364,6 +16451,23 @@
        "sisteransi": "^1.0.5"
      }
    },
+    "prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "requires": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "16.13.1",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+        }
+      }
+    },
    "proxy-addr": {
      "version": "2.0.7",
      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -16464,6 +16568,22 @@
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
    },
+    "react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
+    "react-modal": {
+      "version": "3.15.1",
+      "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.15.1.tgz",
+      "integrity": "sha512-duB9bxOaYg7Zt6TMFldIFxQRtSP+Dg3F1ZX3FXxSUn+3tZZ/9JCgeAQKDg7rhZSAqopq8TFRw3yIbnx77gyFTw==",
+      "requires": {
+        "exenv": "^1.2.0",
+        "prop-types": "^15.7.2",
+        "react-lifecycles-compat": "^3.0.0",
+        "warning": "^4.0.3"
+      }
+    },
    "react-router": {
      "version": "6.3.0",
      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz",
@@ -17329,6 +17449,14 @@
        "makeerror": "1.0.12"
      }
    },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
    "watchpack": {
      "version": "2.3.1",
      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.3.1.tgz",
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
    "@types/node": "^16.11.36",
    "@types/react": "^18.0.9",
    "@types/react-dom": "^18.0.4",
+    "@types/react-modal": "^3.13.1",
    "babel-loader": "^8.2.3",
    "color-hash": "^2.0.1",
    "copy-webpack-plugin": "^11.0.0",
@@ -27,6 +28,7 @@
    "mini-css-extract-plugin": "^2.4.5",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
+    "react-modal": "^3.15.1",
    "react-router-dom": "^6.3.0",
    "style-loader": "^3.3.1",
    "typescript": "^4.6.4",
--- a/src/components/ProjectCard.tsx
+++ b/src/components/ProjectCard.tsx
@@ -7,6 +7,7 @@ import img_link from "../images/box_arrow_out.svg";
 import "./ProjectCard.css";
 import ColorHash from "color-hash";
 import { title } from "process";
+import ProjectDescription from "./ProjectDescription";

 export interface ProjectCardProps {
  name: string;
@@ -176,6 +177,7 @@ function ProjectCard(props: ProjectCardProps) {
        <div className="card-title">{title(props)}</div>
        {renderDescription(props.description)}
      </div>
+      <ProjectDescription title={title(props)} long_description={props.long_description}></ProjectDescription>
      <div className="card-footer">
        <div className="docs-links">{docLinks}</div>
        <div className="social-links">{socialLinks}</div>
--- a/src/components/ProjectDescription.css
+++ b/src/components/ProjectDescription.css
@@ -0,0 +1,55 @@
+.btn {
+  border: none;
+  display: inline-block;
+  padding: 10px 10px;
+  font-size: 15px;
+  cursor: pointer;
+  text-align: center;
+  text-decoration: none;
+  outline: none;
+  border: none;
+  border-radius: 15px;
+}
+
+.btn-close {
+  color: #fff;
+  float: right;
+  background-color: red;
+}
+
+.btn-ext {
+  color: black;
+  font-weight: 600;
+  background-color: rgb(214, 214, 214);
+  margin-top: 1em;
+}
+
+.column {
+  display: flex;
+  flex-direction: column;  /* stacks the left and right headers above the bottom content */
+}
+
+h3 {
+  float: left;
+}
+
+.modal-desc {
+  margin-top: 1em;
+}
+
+.ReactModal__Overlay {
+  opacity: 0;
+  transition: 300ms ease-in-out;
+}
+
+.ReactModal__Overlay--after-open{
+  opacity: 1;
+}
+
+.ReactModal__Overlay--before-close{
+  opacity: 0;
+}
+
+.ReactModal__Body--open {
+  overflow: hidden;
+}
--- a/src/components/ProjectDescription.tsx
+++ b/src/components/ProjectDescription.tsx
@@ -0,0 +1,42 @@
+import { useState } from "react";
+import Modal from "react-modal";
+import "./ProjectDescription.css";
+
+Modal.setAppElement('#root');
+
+function ProjectDescription(props:any) {
+  // For more descriptions modal
+  const [modalIsOpen, setmodalIsOpen] = useState(false);
+  
+  return (
+    <>
+      <button className="btn btn-ext" onClick={() => setmodalIsOpen(true)}>
+        More Details
+      </button>
+      <Modal
+        isOpen={modalIsOpen}
+        shouldCloseOnOverlayClick={true}
+        onRequestClose={() => setmodalIsOpen(false)}
+        style={{
+          overlay: {
+            backgroundColor: "papayawhip",
+          },
+        }}
+      >
+        <div className="column">
+          <div>
+            <h3>{props.title}</h3>
+            <button className="btn btn-close" onClick={() => setmodalIsOpen(false)}>
+              Close
+            </button>
+          </div>
+        </div>
+        <div>
+          <p className="modal-desc">{props.long_description}</p>
+        </div>
+      </Modal>
+    </>
+  );
+}
+
+export default ProjectDescription;
--- a/src/data/Projects.json
+++ b/src/data/Projects.json
@@ -181,7 +181,8 @@
  {
    "name": "Trusted Setup",
    "image": "trust-setup.svg",
-    "description": "Open source infrastructure for running a trusted setup ceremony, in which many people participate in generating entropy which will secure a cryptographic protocol. Perpetual Powers of Tau: A universal ceremony for the initial phase of a trusted setup. MPC Phase 2 UI: UI for a CLI or browser-based ceremony for the second, circuit-specific phase for Groth-16 SNARKs.",
+    "description": "Open source infrastructure for running a trusted setup ceremony",
+    "long_description": "in which many people participate in generating entropy which will secure a cryptographic protocol. Perpetual Powers of Tau: A universal ceremony for the initial phase of a trusted setup. MPC Phase 2 UI: UI for a CLI or browser-based ceremony for the second, circuit-specific phase for Groth-16 SNARKs.",
    "links": [
      {
        "github": "https://github.com/privacy-scaling-explorations/perpetualpowersoftau"