OHIF-332: Users should be able to see all available hotkeys and language settings in one place (#1895)

* OHIF-330: Update Modal Styles

* feat/ohif-332: finish raw ui

* feat/ohif-332: update mode configuration strategy

* feat/ohif-332: fix hotkey errors

* feat/ohif-332: update hotkey logic with recent merged changes

* feat/ohif-322: wrap

* feat/ohif-322: add disable state

* ohif-332: cr updates

* ohif-332: disable

* ohif-332: cr updates

* ohif-332: extract header component

* ohif-332: cr update to fix merge conflicts and design issue

Co-authored-by: Rodrigo Antinarelli <rodrigoantinarelli@gmail.com>

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

@@ -1,101 +0,0 @@
-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,56 +0,0 @@
-import React from 'react';
-import AboutModal from './AboutModal';
-import { Dropdown, IconButton, Icon, useModal } from '@ohif/ui';
-
-const PreferencesDropdown = () => {
-  const { show } = useModal();
-
-  const showAboutModal = () => {
-    show({
-      content: AboutModal,
-      title: 'About OHIF Viewer',
-    });
-  };
-
-  const showPreferencesModal = () => {
-    const modalComponent = () => <div>Preferences modal</div>;
-    show({
-      content: modalComponent,
-      title: 'Preferences',
-    });
-  };
-
-  return (
-    <Dropdown
-      showDropdownIcon={false}
-      list={[
-        { title: 'About', icon: 'info', onClick: showAboutModal },
-        {
-          title: 'Preferences',
-          icon: 'settings',
-          onClick: showPreferencesModal,
-        },
-      ]}
-    >
-      <IconButton
-        variant="text"
-        color="inherit"
-        size="initial"
-        className="text-primary-active"
-      >
-        <Icon name="settings" />
-      </IconButton>
-      <IconButton
-        variant="text"
-        color="inherit"
-        size="initial"
-        className="text-primary-active"
-        onClick={() => {}}
-      >
-        <Icon name="chevron-down" />
-      </IconButton>
-    </Dropdown>
-  );
-};
-
-export default PreferencesDropdown;

platform/viewer/src/components/PreferencesDropdown/index.js

@@ -1 +0,0 @@
-export { default } from './PreferencesDropdown';