added basic modal functionality

package-lock.json

@@ -17,7 +17,8 @@
         "docusaurus-theme-openapi-docs": "^1.4.5",
         "prism-react-renderer": "^1.3.1",
         "react": "^17.0.2",
-        "react-dom": "^17.0.2"
+        "react-dom": "^17.0.2",
+        "react-modal": "^3.16.1"
       },
       "devDependencies": {
         "@docusaurus/core": "^2.2.0",
@@ -11088,8 +11089,9 @@
       }
     },
     "node_modules/react-modal": {
-      "version": "3.15.1",
-      "license": "MIT",
+      "version": "3.16.1",
+      "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.16.1.tgz",
+      "integrity": "sha512-VStHgI3BVcGo7OXczvnJN7yT2TWHJPDXZWyI/a0ssFNhGZWsPmB8cF0z33ewDXq4VfYMO1vXgiv/g8Nj9NDyWg==",
       "dependencies": {
         "exenv": "^1.2.0",
         "prop-types": "^15.7.2",
@@ -21562,7 +21564,9 @@
       }
     },
     "react-modal": {
-      "version": "3.15.1",
+      "version": "3.16.1",
+      "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.16.1.tgz",
+      "integrity": "sha512-VStHgI3BVcGo7OXczvnJN7yT2TWHJPDXZWyI/a0ssFNhGZWsPmB8cF0z33ewDXq4VfYMO1vXgiv/g8Nj9NDyWg==",
       "requires": {
         "exenv": "^1.2.0",
         "prop-types": "^15.7.2",

package.json

@@ -30,7 +30,8 @@
     "docusaurus-theme-openapi-docs": "^1.4.5",
     "prism-react-renderer": "^1.3.1",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "react-modal": "^3.16.1"
   },
   "overrides": {
     "mermaid": "9.1.7"

src/components/stream/main/index.js

@@ -3,8 +3,35 @@ import clsx from "clsx";
 import styles from "./styles.module.css";
 import Link from "@docusaurus/Link";
 import WidgetBot from '@widgetbot/react-embed'
+import Modal from 'react-modal';
 import Room from "../room";
+
+const customStyles = {
+  content: {
+    top: '50%',
+    left: '50%',
+    right: 'auto',
+    bottom: 'auto',
+    marginRight: '-50%',
+    transform: 'translate(-50%, -50%)',
+  },
+};
 export default function Main() {
+  const [modalIsOpen, setIsOpen] = React.useState(false);
+  let subtitle;
+  Modal.setAppElement('#__docusaurus');
+
+  function openModal() {
+    setIsOpen(true);
+  }
+  function afterOpenModal() {
+    subtitle.style.color = '#f00';
+  }
+
+  function closeModal() {
+    setIsOpen(false);
+  }
+
   return (
     <div>
       <div className={styles.headerContainer}>
@@ -17,13 +44,13 @@ export default function Main() {
         <div className={styles.headerContent}>
           <div className={styles.buttonsContainer}>
             <div className={styles.buttonsContent}>
-              <div className={styles.button}>Agenda</div>
+              <div className={styles.button} onClick={openModal}>Agenda</div>
             </div>
             <div className={styles.buttonsContent}>
-              <div className={styles.button}>Speakers</div>
+              <div className={styles.button} onClick={openModal}>Speakers</div>
             </div>
             <div className={styles.buttonsContent}>
-              <div className={styles.button}>FAQ</div>
+              <div className={styles.button} onClick={openModal}>FAQ</div>
             </div>
           </div>
         </div>
@@ -43,6 +70,19 @@ export default function Main() {
 
       </div>
       <Room></Room>
+
+      <Modal
+        isOpen={modalIsOpen}
+        onAfterOpen={afterOpenModal}
+        onRequestClose={closeModal}
+        style={customStyles}
+        contentLabel="Example Modal"
+      >
+        <h2 ref={(_subtitle) => (subtitle = _subtitle)}>Hello</h2>
+        <button onClick={closeModal}>close</button>
+        <div>I am a modal</div>
+      </Modal>
     </div>
   );
 }
+

src/components/stream/main/styles.module.css

@@ -22,9 +22,13 @@
     display: grid;
     grid-gap: 20px;
     grid-template-columns: 80px 80px 80px;
-    place-content: center;
-
+    place-content: end;
 }
+@media only screen and (max-width: 628px) {
+    .buttonsContainer {
+        place-content: center;
+      }
+    }
 
 .buttonsContent {
     position:relative;
@@ -49,6 +53,14 @@
     margin-right: 40px;
 
 }
+@media only screen and (max-width: 628px) {
+    .stageButtonsContainer {
+        grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
+        grid-gap: 10px;
+        margin-left: 40px;
+        margin-right: 40px;
+      }
+    }
 
 .stageButtonsContent {
     position:relative;
@@ -159,4 +171,4 @@
     .stageButton {
         width: auto;
       }
-}
+    }

src/components/stream/room/index.js

@@ -6,14 +6,13 @@ import WidgetBot from '@widgetbot/react-embed'
 export default function Room() {
   return (
   <div className={styles.stageContainer}>
-    <div className={styles.stageContent}>
+    <div className={styles.videoContent}>
       <iframe className={styles.video} src="https://www.youtube.com/embed/dVGhO6vSCT8" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
     </div>
-    <div className={styles.stageContent}>
-      <WidgetBot className={styles.video} 
-          server="950875158011338752"
-          channel="950875158011338755"
-          shard="https://emerald.widgetbot.io"
+    <div className={styles.discordContent}>
+      <WidgetBot className={styles.discord} 
+        server="1039765757011165194"
+        channel="1047378402556002384"
       ></WidgetBot>
     </div>
   </div>

src/components/stream/room/styles.module.css

@@ -5,12 +5,19 @@
     margin-left: 20px;
     margin-bottom: 50px;
     grid-gap: 20px;
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
     place-content: center;
     margin-right: 20px;
 }
 
-.stageContent {
+.videoContent {
+    position:relative;
+    margin-top: 20px;
+    width: -webkit-fill-available;
+    position: relative;
+    padding-bottom: 56.25%;
+}
+.discordContent {
     position:relative;
     margin-top: 20px;
     width: -webkit-fill-available;
@@ -24,3 +31,38 @@
     width: 100%;
     height: 100%;
 }
+.discord {
+    border: none;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+}
+
+@media only screen and (max-width: 1150px) {
+    .discordContent {
+        padding-bottom: 600px;
+    }
+    .videoContent {
+        padding-bottom: 200px;
+    }
+    .video {
+        border: none;
+        position: absolute;
+        width: 100%;
+        height: 200px;
+    }
+}
+@media only screen and (max-width: 796px) {
+    .discordContent {
+        padding-bottom: 600px;
+    }
+    .videoContent {
+        padding-bottom: 56.25%;
+    }
+    .video {
+        border: none;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+    }
+}