Styling fixes, add some other tools

OHIFViewer-react/src/FlexboxLayout/ToolbarRow.css

@@ -3,6 +3,8 @@
     flex: 0 0 auto;
     height: var(--toolbar-height);
     padding-top: 6px;
+    padding-left: 1rem;
+    padding-right: 1rem;
     position: relative;
     transition: height 300ms ease;
     width: 100%;

OHIFViewer-react/src/FlexboxLayout/ViewerMain.js

@@ -111,7 +111,7 @@ class ViewerMain extends Component {
         };
 
         updatedViewportData[viewportIndex] = this.getCornerstoneViewport(data, viewportIndex);
-        
+
         this.setState({
             viewportData: updatedViewportData
         });

OHIFViewer-react/src/Header/Header.css

@@ -98,3 +98,11 @@
 .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;
+}

OHIFViewer-react/src/Header/Header.js

@@ -35,8 +35,9 @@ function Header({ home, lastStudy, location }) {
 
 
       <div className="header-menu">
-        {/* TODO: research-use */}
-
+        <span className="research-use">
+                INVESTIGATIONAL USE ONLY
+        </span>
         <Dropdown
           title='Options'
           list={list}

OHIFViewer-react/src/index.js

@@ -17,10 +17,10 @@ const store = createStore(combined);
 
 const defaultButtons = [
     {
-        command: 'Pan',
+        command: 'StackScroll',
         type: 'tool',
-        text: 'Pan',
-        svgUrl: `${Icons}#icon-tools-pan`,
+        text: 'Stack Scroll',
+        svgUrl: `${Icons}#icon-tools-stack-scroll`,
         active: false
     },
     {
@@ -30,6 +30,41 @@ const defaultButtons = [
         svgUrl: `${Icons}#icon-tools-zoom`,
         active: false
     },
+    {
+        command: 'Wwwc',
+        type: 'tool',
+        text: 'Levels',
+        svgUrl: `${Icons}#icon-tools-levels`,
+        active: true
+    },
+    {
+        command: 'Pan',
+        type: 'tool',
+        text: 'Pan',
+        svgUrl: `${Icons}#icon-tools-pan`,
+        active: false
+    },
+    {
+        command: 'Length',
+        type: 'tool',
+        text: 'Length',
+        svgUrl: `${Icons}#icon-tools-measure-temp`,
+        active: false
+    },
+    /*{
+        command: 'Annotate',
+        type: 'tool',
+        text: 'Annotate',
+        svgUrl: `${Icons}#icon-tools-measure-non-target`,
+        active: false
+    },*/
+    {
+        command: 'Angle',
+        type: 'tool',
+        text: 'Angle',
+        iconClasses: 'fa fa-angle-left',
+        active: false
+    },
     {
         command: 'Bidirectional',
         type: 'tool',
@@ -37,13 +72,6 @@ const defaultButtons = [
         svgUrl: `${Icons}#icon-tools-measure-target`,
         active: false
     },
-    {
-        command: 'StackScroll',
-        type: 'tool',
-        text: 'Stack Scroll',
-        svgUrl: `${Icons}#icon-tools-stack-scroll`,
-        active: false
-    },
     {
         command: 'reset',
         type: 'command',
@@ -51,13 +79,6 @@ const defaultButtons = [
         svgUrl: `${Icons}#icon-tools-reset`,
         active: false
     },
-    {
-        command: 'Wwwc',
-        type: 'tool',
-        text: 'Manual',
-        svgUrl: `${Icons}#icon-tools-levels`,
-        active: true
-    },
 ];
 
 store.dispatch({