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/ui/src/assets/icons/external-link.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
+  <polyline points="15 3 21 3 21 9"></polyline>
+  <line x1="10" y1="14" x2="21" y2="3"></line>
+</svg>

platform/ui/src/components/Icon/getIcon.jsx

@@ -12,6 +12,7 @@ import chevronLeft from './../../assets/icons/chevron-left.svg';
 import chevronRight from './../../assets/icons/chevron-right.svg';
 import eyeVisible from './../../assets/icons/eye-visible.svg';
 import eyeHidden from './../../assets/icons/eye-hidden.svg';
+import externalLink from './../../assets/icons/external-link.svg';
 import groupLayers from './../../assets/icons/group-layers.svg';
 import info from './../../assets/icons/info.svg';
 import infoLink from './../../assets/icons/info-link.svg';
@@ -71,6 +72,7 @@ const ICONS = {
   'chevron-right': chevronRight,
   'eye-visible': eyeVisible,
   'eye-hidden': eyeHidden,
+  'external-link': externalLink,
   'group-layers': groupLayers,
   info: info,
   'info-link': infoLink,
@@ -116,7 +118,7 @@ const ICONS = {
   'old-angle-left': oldAngleLeft,
   'old-reset': oldReset,
   'old-circle-o': oldCircleO,
-  'old-trash': oldTrash
+  'old-trash': oldTrash,
 };
 
 /**

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',
     });
   };