Merge branch 'master' of https://github.com/OHIF/Viewers into feature/i18n-basics

# Conflicts:
#	extensions/ohif-vtk-extension/package.json
#	extensions/ohif-vtk-extension/rollup.config.js
#	extensions/ohif-vtk-extension/yarn.lock
#	package.json
#	src/App.js
#	src/components/Header/Header.js
#	yarn.lock

src/components/Header/Header.js

@@ -2,8 +2,8 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Link, withRouter } from 'react-router-dom';
 import { Dropdown } from 'react-viewerbase';
+import i18n from '@ohif/i18n';
 import { withTranslation } from 'react-i18next';
-import i18n from 'ohif-i18n';
 import './Header.css';
 import OHIFLogo from '../OHIFLogo/OHIFLogo.js';
 import ConnectedUserPreferencesModal from '../../connectedComponents/ConnectedUserPreferencesModal.js';
@@ -36,13 +36,15 @@ class Header extends Component {
     const { t } = this.props;
     this.options = [
       {
-        title: t('preferences'),
-        icon: 'fa fa-user',
+        title: t('Preferences'),
+        icon: { name: 'user' },
         onClick: this.props.openUserPreferencesModal,
       },
       {
-        title: t('about'),
-        icon: 'fa fa-info',
+        title: t('About'),
+        icon: {
+          name: 'info'
+        },
         link: 'http://ohif.org',
       },
     ];
@@ -66,7 +68,7 @@ class Header extends Component {
               to={this.props.location.studyLink}
               className="header-btn header-viewerLink"
             >
-              {t('back_to_viewer')}
+              {t('Back to Viewer')}
             </Link>
           )}
 
@@ -80,13 +82,13 @@ class Header extends Component {
                 state: { studyLink: this.props.location.pathname },
               }}
             >
-              {t('study_list')}
+              {t('Study list')}
             </Link>
           )}
         </div>
 
         <div className="header-menu">
-          <span className="research-use">{t('research_use')}</span>
+          <span className="research-use">{t('INVESTIGATIONAL USE ONLY')}</span>
           <button
             className="research-use"
             onClick={() => this.changeLanguage('en-US')}
@@ -111,7 +113,7 @@ class Header extends Component {
           >
             ES-MX
           </button>
-          <Dropdown title={t('options')} list={this.options} align="right" />
+          <Dropdown title={t('Options')} list={this.options} align="right" />
           <ConnectedUserPreferencesModal />
         </div>
       </div>

src/components/Labelling/LabellingFlow.js

@@ -1,14 +1,12 @@
+import { Icon, SelectTree } from 'react-viewerbase';
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-import cloneDeep from 'lodash.clonedeep';
-import bounding from '../../lib/utils/bounding.js';
 
 import LabellingTransition from './LabellingTransition.js';
-import { SelectTree } from 'react-viewerbase';
-import { getAddLabelButtonStyle } from './labellingPositionUtils.js';
-
 import OHIFLabellingData from './OHIFLabellingData.js';
+import PropTypes from 'prop-types';
+import bounding from '../../lib/utils/bounding.js';
+import cloneDeep from 'lodash.clonedeep';
+import { getAddLabelButtonStyle } from './labellingPositionUtils.js';
 
 export default class LabellingFlow extends Component {
   static propTypes = {
@@ -93,11 +91,6 @@ export default class LabellingFlow extends Component {
       locationLabel,
     } = this.state;
 
-    const Icons = `${window.config.routerBasename}/icons.svg`.replace(
-      '//',
-      '/'
-    );
-
     if (!skipAddLabelButton) {
       return (
         <>
@@ -128,9 +121,7 @@ export default class LabellingFlow extends Component {
               className="checkIconWrapper"
               onClick={this.fadeOutAndLeaveFast}
             >
-              <svg className="checkIcon">
-                <use xlinkHref={`${Icons}#check-solid`} />
-              </svg>
+              <Icon name="check" className="checkIcon" />
             </div>
             <div className="locationDescriptionWrapper">
               <div className="location">{locationLabel}</div>

src/components/OHIFLogo/OHIFLogo.css

@@ -1,23 +1,29 @@
 .header-brand {
   height: 30px;
   text-decoration: none;
-  float: left;
-  clear: both;
+  text-decoration-color: none;
+
+  display: flex;
+  color: var(--text-primary-color);
+  font-size: 14px;
+  font-weight: var(--logo-font-weight);
+  font-family: var(--logo-font-family);
+}
+
+.header-brand:hover,
+.header-brand:active,
+.header-band:visited {
+  color: var(--text-primary-color);
+  text-decoration: none;
 }
 
 .header-logo-text {
-  display: inline-block;
-  font-family: var(--logo-font-family);
-  font-size: 14px;
-  font-weight: var(--logo-font-weight);
-  color: var(--text-primary-color);
   line-height: 30px;
+  margin-left: 8px;
 }
 
 .header-logo-image {
-  fill: transparent;
-  height: 100%;
-  margin: 0 8px 0 0;
+  height: 30px;
   width: 30px;
-  float: left;
+  font-size: 30px;
 }

src/components/OHIFLogo/OHIFLogo.js

@@ -1,7 +1,7 @@
-import React from 'react';
 import './OHIFLogo.css';
 
-const Icons = `${window.config.routerBasename}/icons.svg`.replace('//', '/');
+import { Icon } from 'react-viewerbase';
+import React from 'react';
 
 function OHIFLogo() {
   return (
@@ -11,9 +11,7 @@ function OHIFLogo() {
       className="header-brand"
       href="http://ohif.org"
     >
-      <svg className="header-logo-image">
-        <use xlinkHref={`${Icons}#icon-ohif-logo`} />
-      </svg>
+      <Icon name="ohif-logo" className="header-logo-image" />
       <div className="header-logo-text">Open Health Imaging Foundation</div>
     </a>
   );