🧹🧹🧹 Don't mind me. Just moving things around

src/components/Header/Header.css

@@ -0,0 +1,108 @@
+.entry-header {
+  padding: 10px 10px 0;
+  height: var(--top-bar-height);
+}
+
+.entry-header.header-big {
+  background: rgba(21,25,30,0.7);
+  padding: 10px var(--study-list-padding);
+  height: auto;
+  display: inline-block;
+  width: 100%;
+}
+
+.header-left-box {
+  display: inline-block;
+  position: relative;
+}
+
+.header-viewerLink {
+  float: left;
+}
+
+.header-brand {
+  height: 30px;
+  text-decoration: none;
+  float: left;
+  clear: both;
+}
+
+.entry-header.header-big .header-brand {
+  height: auto;
+  padding: 25px 0;
+}
+
+
+.header-logo-image {
+  fill: transparent;
+  height: 100%;
+  margin: 0 8px 0 0;
+  width: 30px;
+  float: left;
+}
+
+.entry-header.header-big .header-logo-image {
+  margin: 0 20px 0 0;
+  width: 50px;
+  height: 50px;
+}
+
+.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;
+}
+
+.entry-header.header-big .header-logo-text {
+  font-size: 30px;
+  line-height: 36px;
+}
+
+.header-btn {
+  color: var(--text-secondary-color);
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 26px;
+}
+
+.header-btn:hover {
+  color: var(--hover-color);
+}
+
+.header-btn:active {
+  color: var(--active-color);
+}
+
+.header-studyListLinkSection {
+  border-left: var(--ui-border-thickness) solid var(--ui-border-color);
+  margin: 3px 0 0 10px;
+  padding: 0 0 0 10px;
+  display: inline-block;
+}
+
+.header-menu {
+  color: var(--text-primary-color);
+  float: right;
+  padding: 4px 0;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 18px;
+  text-decoration: none;
+  margin-right: 10px;
+}
+
+.entry-header.header-big .header-menu {
+  margin-right: 0;
+}
+
+.header-menu .research-use {
+  float: left;
+  font-size: 13px;
+  font-weight: 700;
+  color: #91b9cd;
+  margin-right: 1rem;
+}

src/components/Header/Header.js

@@ -0,0 +1,81 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Link, withRouter } from 'react-router-dom';
+import { Dropdown } from 'react-viewerbase';
+import './Header.css';
+import OHIFLogo from '../OHIFLogo/OHIFLogo.js';
+import ConnectedUserPreferencesModal from '../../connectedComponents/ConnectedUserPreferencesModal.js';
+
+class Header extends Component {
+  static propTypes = {
+    home: PropTypes.bool.isRequired,
+    location: PropTypes.object.isRequired,
+    openUserPreferencesModal: PropTypes.func,
+    children: PropTypes.node
+  };
+
+  static defaultProps = {
+    home: true,
+    children: OHIFLogo()
+  };
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      userPreferencesOpen: false
+    };
+
+    this.options = [
+      {
+        title: 'Preferences ',
+        icon: 'fa fa-user',
+        onClick: this.props.openUserPreferencesModal
+      },
+      {
+        title: 'About',
+        icon: 'fa fa-info',
+        link: 'http://ohif.org'
+      }
+    ];
+  }
+
+  render() {
+    return (
+      <div className={`entry-header ${this.props.home ? 'header-big' : ''}`}>
+        <div className="header-left-box">
+          {this.props.location && this.props.location.studyLink && (
+            <Link
+              to={this.props.location.studyLink}
+              className="header-btn header-viewerLink"
+            >
+              Back to Viewer
+            </Link>
+          )}
+
+          {this.props.children}
+
+          {!this.props.home && (
+            <Link
+              className="header-btn header-studyListLinkSection"
+              to={{
+                pathname: '/',
+                state: { studyLink: this.props.location.pathname }
+              }}
+            >
+              Study list
+            </Link>
+          )}
+        </div>
+
+        <div className="header-menu">
+          <span className="research-use">INVESTIGATIONAL USE ONLY</span>
+          <Dropdown title="Options" list={this.options} align="right" />
+          <ConnectedUserPreferencesModal />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default withRouter(Header);

src/components/Header/index.js

@@ -0,0 +1,3 @@
+import Header from './Header'
+
+export default Header