From 3e9d57898ff065c37ea5bc2dcacf9deda19442af Mon Sep 17 00:00:00 2001
From: Joe Heffernan <interim17@gmail.com>
Date: Tue, 23 May 2023 10:56:42 -0700
Subject: [PATCH 1/9] menu item and modal

---
 src/components/HelpMenu/index.tsx     | 18 +++++++++
 src/components/VersionModal/index.tsx | 57 +++++++++++++++++++++++++++
 src/components/VersionModal/style.css | 12 ++++++
 3 files changed, 87 insertions(+)
 create mode 100644 src/components/VersionModal/index.tsx
 create mode 100644 src/components/VersionModal/style.css

diff --git a/src/components/HelpMenu/index.tsx b/src/components/HelpMenu/index.tsx
index 32b559c1..e9002759 100644
--- a/src/components/HelpMenu/index.tsx
+++ b/src/components/HelpMenu/index.tsx
@@ -13,6 +13,8 @@ import {
 
 import styles from "./style.css";
 
+import VersionModal from "../VersionModal";
+
 const HelpMenu = (): JSX.Element => {
     const location = useLocation();
     const tutorialLink =
@@ -27,8 +29,15 @@ const HelpMenu = (): JSX.Element => {
         ) : (
             <Link to={TUTORIAL_PATHNAME}>Quick start</Link>
         );
+
+    const [modalVisible, setModalVisible] = React.useState(false);
+
     const menu = (
         <Menu theme="dark" className={styles.menu}>
+            {/* <VersionModal /> */}
+            {modalVisible ? (
+                <VersionModal setModalVisible={setModalVisible} />
+            ) : null}
             <Menu.Item key="tutorial">{tutorialLink}</Menu.Item>
             <Menu.Item key="forum">
                 <a href={FORUM_URL} target="_blank" rel="noopener noreferrer">
@@ -65,6 +74,15 @@ const HelpMenu = (): JSX.Element => {
                     </a>
                 </Menu.Item>
             </Menu.SubMenu>
+            <Menu.Item
+                key="version"
+                onClick={() => {
+                    console.log("firing");
+                    setModalVisible(!modalVisible);
+                }}
+            >
+                <>Version Info</>
+            </Menu.Item>
         </Menu>
     );
 
diff --git a/src/components/VersionModal/index.tsx b/src/components/VersionModal/index.tsx
new file mode 100644
index 00000000..57514aeb
--- /dev/null
+++ b/src/components/VersionModal/index.tsx
@@ -0,0 +1,57 @@
+import { Button } from "antd";
+import React from "react";
+
+import CustomModal from "../CustomModal";
+
+import styles from "./style.css";
+
+interface VersionModalProps {
+    setModalVisible: (isModalVisible: boolean) => void;
+}
+
+const VersionModal: React.FC<VersionModalProps> = ({ setModalVisible }) => {
+    const closeModal = () => {
+        setModalVisible(false);
+    };
+
+    const footerButton = (
+        <>
+            <Button type="primary" onClick={closeModal}>
+                Close
+            </Button>
+        </>
+    );
+    console.log("VersionModal");
+    return (
+        <CustomModal
+            className={styles.container}
+            onCancel={closeModal}
+            open
+            footer={footerButton}
+            centered
+            title="Version Info"
+            width={425}
+        >
+            <div>
+                {" "}
+                Application:{" "}
+                <span className={styles.blueText}>
+                    {" "}
+                    simularium-website v{SIMULARIUM_WEBSITE_VERSION}{" "}
+                </span>
+            </div>
+            <div>
+                {" "}
+                Viewer:{" "}
+                <span className={styles.blueText}>
+                    {" "}
+                    simulairum-viewer v{SIMULARIUM_VIEWER_VERSION}{" "}
+                </span>
+            </div>
+            {/* TODO what should this content be */}
+            <span> Engine: not connected to server </span>
+        </CustomModal>
+    );
+};
+
+export default VersionModal;
diff --git a/src/components/VersionModal/style.css b/src/components/VersionModal/style.css
new file mode 100644
index 00000000..00499ca7
--- /dev/null
+++ b/src/components/VersionModal/style.css
@@ -0,0 +1,12 @@
+
+.blue-text {
+    color: var(--blue);
+}
+
+.container :global(.ant-modal-footer) {
+    background-color: var(--modal-content-bg);
+}
+
+.container :global(.ant-modal-body) {
+    padding: 12px 12px 0px 12px;
+}
\ No newline at end of file

From dcff5c8b8fd4842b72e53e100c76e1b79d23c178 Mon Sep 17 00:00:00 2001
From: Joe Heffernan <interim17@gmail.com>
Date: Thu, 1 Jun 2023 11:27:55 -0700
Subject: [PATCH 2/9] removing logs

---
 src/components/HelpMenu/index.tsx     | 1 -
 src/components/VersionModal/index.tsx | 5 ++---
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/HelpMenu/index.tsx b/src/components/HelpMenu/index.tsx
index e9002759..7951e87d 100644
--- a/src/components/HelpMenu/index.tsx
+++ b/src/components/HelpMenu/index.tsx
@@ -77,7 +77,6 @@ const HelpMenu = (): JSX.Element => {
             <Menu.Item
                 key="version"
                 onClick={() => {
-                    console.log("firing");
                     setModalVisible(!modalVisible);
                 }}
             >
diff --git a/src/components/VersionModal/index.tsx b/src/components/VersionModal/index.tsx
index 57514aeb..05a7a614 100644
--- a/src/components/VersionModal/index.tsx
+++ b/src/components/VersionModal/index.tsx
@@ -21,7 +21,6 @@ const VersionModal: React.FC<VersionModalProps> = ({ setModalVisible }) => {
             </Button>
         </>
     );
-    console.log("VersionModal");
     return (
         <CustomModal
             className={styles.container}
@@ -48,8 +47,8 @@ const VersionModal: React.FC<VersionModalProps> = ({ setModalVisible }) => {
                     simulairum-viewer v{SIMULARIUM_VIEWER_VERSION}{" "}
                 </span>
             </div>
-            {/* TODO what should this content be */}
-            <span> Engine: not connected to server </span>
+            {/* TODO add enginge when we switch to Octopus?/}
+            {/* <span> Engine: not connected to server </span> */}
         </CustomModal>
     );
 };

From 72c2e8d2ab548ee36829775a608e0dda5d3116f4 Mon Sep 17 00:00:00 2001
From: Joe Heffernan <interim17@gmail.com>
Date: Mon, 9 Oct 2023 14:10:35 -0700
Subject: [PATCH 3/9] remove unneeded jsx fragment wrappers

---
 src/components/VersionModal/index.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/components/VersionModal/index.tsx b/src/components/VersionModal/index.tsx
index 05a7a614..062ad115 100644
--- a/src/components/VersionModal/index.tsx
+++ b/src/components/VersionModal/index.tsx
@@ -15,12 +15,11 @@ const VersionModal: React.FC<VersionModalProps> = ({ setModalVisible }) => {
     };
 
     const footerButton = (
-        <>
-            <Button type="primary" onClick={closeModal}>
-                Close
-            </Button>
-        </>
+        <Button type="primary" onClick={closeModal}>
+            Close
+        </Button>
     );
+
     return (
         <CustomModal
             className={styles.container}

From 4c215c7ab876e546ec546b3712d88a83cfa79393 Mon Sep 17 00:00:00 2001
From: Joe Heffernan <interim17@gmail.com>
Date: Mon, 9 Oct 2023 14:14:01 -0700
Subject: [PATCH 4/9] remove commented code

---
 src/components/HelpMenu/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/HelpMenu/index.tsx b/src/components/HelpMenu/index.tsx
index 7951e87d..524c734c 100644
--- a/src/components/HelpMenu/index.tsx
+++ b/src/components/HelpMenu/index.tsx
@@ -34,7 +34,6 @@ const HelpMenu = (): JSX.Element => {
 
     const menu = (
         <Menu theme="dark" className={styles.menu}>
-            {/* <VersionModal /> */}
             {modalVisible ? (
                 <VersionModal setModalVisible={setModalVisible} />
             ) : null}

From 8dcccc1a3688e7528923670aa8f0611ae7283376 Mon Sep 17 00:00:00 2001
From: Joe Heffernan <interim17@gmail.com>
Date: Mon, 9 Oct 2023 14:34:28 -0700
Subject: [PATCH 5/9] styling update

---
 src/components/HelpMenu/index.tsx     |  2 +-
 src/components/VersionModal/index.tsx |  2 +-
 src/components/VersionModal/style.css | 14 ++++++++++----
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/components/HelpMenu/index.tsx b/src/components/HelpMenu/index.tsx
index 524c734c..a576d353 100644
--- a/src/components/HelpMenu/index.tsx
+++ b/src/components/HelpMenu/index.tsx
@@ -79,7 +79,7 @@ const HelpMenu = (): JSX.Element => {
                     setModalVisible(!modalVisible);
                 }}
             >
-                <>Version Info</>
+                <>Version info</>
             </Menu.Item>
         </Menu>
     );
diff --git a/src/components/VersionModal/index.tsx b/src/components/VersionModal/index.tsx
index 062ad115..1fb55901 100644
--- a/src/components/VersionModal/index.tsx
+++ b/src/components/VersionModal/index.tsx
@@ -27,7 +27,7 @@ const VersionModal: React.FC<VersionModalProps> = ({ setModalVisible }) => {
             open
             footer={footerButton}
             centered
-            title="Version Info"
+            title="Version Information"
             width={425}
         >
             <div>
diff --git a/src/components/VersionModal/style.css b/src/components/VersionModal/style.css
index 00499ca7..90d9306a 100644
--- a/src/components/VersionModal/style.css
+++ b/src/components/VersionModal/style.css
@@ -1,12 +1,18 @@
-
-.blue-text {
+.container .blue-text {
     color: var(--blue);
 }
 
-.container :global(.ant-modal-footer) {
-    background-color: var(--modal-content-bg);
+.container :global(.ant-modal-header) {
+    padding: 12px 24px;
+}
+.container :global(.ant-modal-title) {
+    font-weight: 400;
 }
 
 .container :global(.ant-modal-body) {
     padding: 12px 12px 0px 12px;
+}
+
+.container :global(.ant-modal-footer) {
+    background-color: var(--modal-content-bg);
 }
\ No newline at end of file

From 141b0370f42b3ee2b4345d56fe2e4db9e6fff2ab Mon Sep 17 00:00:00 2001
From: Joe Heffernan <interim17@gmail.com>
Date: Mon, 9 Oct 2023 14:34:44 -0700
Subject: [PATCH 6/9] remove comments

---
 src/components/VersionModal/index.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/VersionModal/index.tsx b/src/components/VersionModal/index.tsx
index 1fb55901..04da902a 100644
--- a/src/components/VersionModal/index.tsx
+++ b/src/components/VersionModal/index.tsx
@@ -46,8 +46,6 @@ const VersionModal: React.FC<VersionModalProps> = ({ setModalVisible }) => {
                     simulairum-viewer v{SIMULARIUM_VIEWER_VERSION}{" "}
                 </span>
             </div>
-            {/* TODO add enginge when we switch to Octopus?/}
-            {/* <span> Engine: not connected to server </span> */}
         </CustomModal>
     );
 };

From 23be0d4f7ed526a3853889940727a9dd21cbbc19 Mon Sep 17 00:00:00 2001
From: Joe Heffernan <interim17@gmail.com>
Date: Mon, 9 Oct 2023 15:27:12 -0700
Subject: [PATCH 7/9] typo

---
 src/components/VersionModal/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/VersionModal/index.tsx b/src/components/VersionModal/index.tsx
index 04da902a..61f84782 100644
--- a/src/components/VersionModal/index.tsx
+++ b/src/components/VersionModal/index.tsx
@@ -43,7 +43,7 @@ const VersionModal: React.FC<VersionModalProps> = ({ setModalVisible }) => {
                 Viewer:{" "}
                 <span className={styles.blueText}>
                     {" "}
-                    simulairum-viewer v{SIMULARIUM_VIEWER_VERSION}{" "}
+                    simularium-viewer v{SIMULARIUM_VIEWER_VERSION}{" "}
                 </span>
             </div>
         </CustomModal>

From caac57be991dc3dfaf79ff426e13ba6854c6ab03 Mon Sep 17 00:00:00 2001
From: Joe Heffernan <interim17@gmail.com>
Date: Tue, 10 Oct 2023 12:51:42 -0700
Subject: [PATCH 8/9] prevent bg color change after click

---
 src/components/HelpMenu/style.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/HelpMenu/style.css b/src/components/HelpMenu/style.css
index 3b9cd371..260de5fa 100644
--- a/src/components/HelpMenu/style.css
+++ b/src/components/HelpMenu/style.css
@@ -13,4 +13,8 @@
     width: fit-content;
     right: 160px !important;
     left: auto !important;
+}
+
+.menu :global(.ant-dropdown-menu-item-active){
+    background-color: transparent !important;
 }
\ No newline at end of file

From 836510a92366a61ef1dbc455f17838f92a638322 Mon Sep 17 00:00:00 2001
From: Joe Heffernan <interim17@gmail.com>
Date: Wed, 11 Oct 2023 11:47:54 -0700
Subject: [PATCH 9/9] Update src/components/HelpMenu/index.tsx

Co-authored-by: Megan Riel-Mehan <meganrm@gmail.com>
---
 src/components/HelpMenu/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/HelpMenu/index.tsx b/src/components/HelpMenu/index.tsx
index a576d353..1eee77cb 100644
--- a/src/components/HelpMenu/index.tsx
+++ b/src/components/HelpMenu/index.tsx
@@ -34,9 +34,9 @@ const HelpMenu = (): JSX.Element => {
 
     const menu = (
         <Menu theme="dark" className={styles.menu}>
-            {modalVisible ? (
+            {modalVisible && (
                 <VersionModal setModalVisible={setModalVisible} />
-            ) : null}
+            )}
             <Menu.Item key="tutorial">{tutorialLink}</Menu.Item>
             <Menu.Item key="forum">
                 <a href={FORUM_URL} target="_blank" rel="noopener noreferrer">