feat: OHIF-331 - About Modal (#1894)

* OHIF-330: Update Modal Styles

* feat: OHIF-331 - About Modal

* add dynamic values for about modal

* fix icon

platform/viewer/package.json

@@ -64,6 +64,7 @@
     "@ohif/ui": "^1.4.4",
     "@tanem/react-nprogress": "^1.1.25",
     "@types/react": "^16.0.0",
+    "browser-detect": "^0.2.28",
     "classnames": "^2.2.6",
     "core-js": "^3.2.1",
     "cornerstone-math": "^0.1.8",

platform/viewer/src/components/PreferencesDropdown/AboutModal.jsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import { Typography, Icon } from '@ohif/ui';
+import detect from 'browser-detect';
+
+const Link = ({ href, children, showIcon = false }) => {
+  return (
+    <a href={href} target="_blank" rel="noopener noreferrer">
+      <Typography
+        variant="subtitle"
+        component="p"
+        className="flex items-center text-primary-active"
+      >
+        {children}
+        {!!showIcon && (
+          <Icon name="external-link" className="w-5 text-white ml-2" />
+        )}
+      </Typography>
+    </a>
+  );
+};
+
+const Row = ({ title, value, link }) => {
+  return (
+    <div className="flex mb-4">
+      <Typography variant="subtitle" component="p" className="text-white w-48">
+        {title}
+      </Typography>
+
+      {link ? (
+        <Link href={link}>{value}</Link>
+      ) : (
+        <Typography
+          variant="subtitle"
+          component="p"
+          className="text-white w-48"
+        >
+          {value}
+        </Typography>
+      )}
+    </div>
+  );
+};
+
+const AboutModal = () => {
+  const { os, version, name } = detect();
+  const browser = `${name[0].toUpperCase()}${name.substr(1)} ${version}`;
+
+  const renderRowTitle = title => (
+    <div className="border-b-2 border-black pb-3 mb-3">
+      <Typography variant="h6" className="text-primary-light">
+        {title}
+      </Typography>
+    </div>
+  );
+  return (
+    <div>
+      {renderRowTitle('Important Links')}
+      <div className="flex mb-8">
+        <Link
+          href="https://groups.google.com/forum/#!forum/cornerstone-platform"
+          showIcon={true}
+        >
+          Visit the forum
+        </Link>
+        <span className="ml-4">
+          <Link
+            href="https://github.com/OHIF/Viewers/issues/new/choose"
+            showIcon={true}
+          >
+            Report an issue
+          </Link>
+        </span>
+        <span className="ml-4">
+          <Link href="http://ohif.org/" showIcon={true}>
+            More details
+          </Link>
+        </span>
+      </div>
+
+      {renderRowTitle('Version Information')}
+      <div className="flex flex-col">
+        <Row
+          title="Repository URL"
+          value="https://github.com/OHIF/Viewers/"
+          link="https://github.com/OHIF/Viewers/"
+        />
+        <Row
+          title="Last Master Commits"
+          value="https://github.com/OHIF/Viewers/commits/master"
+          link="https://github.com/OHIF/Viewers/commits/master"
+        />
+        <Row title="Version Number" value={process.env.VERSION_NUMBER} />
+        <Row title="Build number" value={process.env.BUILD_NUM} />
+        <Row title="Browser" value={browser} />
+        <Row title="OS" value={os} />
+      </div>
+    </div>
+  );
+};
+
+export default AboutModal;

platform/viewer/src/components/PreferencesDropdown/PreferencesDropdown.jsx

@@ -1,15 +1,14 @@
 import React from 'react';
-
+import AboutModal from './AboutModal';
 import { Dropdown, IconButton, Icon, useModal } from '@ohif/ui';
 
 const PreferencesDropdown = () => {
   const { show } = useModal();
 
   const showAboutModal = () => {
-    const modalComponent = () => <div>About modal</div>;
     show({
-      content: modalComponent,
-      title: 'About',
+      content: AboutModal,
+      title: 'About OHIF Viewer',
     });
   };