Updating design of OHIF Viewer using (OHIF-49)

Packages/viewerbase/client/components/viewer/toolbar/toolbar.html

@@ -1,31 +1,37 @@
 <template name="toolbar">
-    <div id='toolbar'>
+    <div class="btn-group">
+        {{ #each button }}
+            {{ >simpleToolbarButton}}
+        {{ /each }}
+
+        {{ #if includePlayClipButton }}
+            {{ >playClipButton }}
+        {{ /if }}
+
+        {{ #if includeLayoutButton }}
         <div class="btn-group">
-            {{ #each button }}
-                {{ >simpleToolbarButton}}
-            {{ /each }}
-
-            {{ #if includePlayClipButton }}
-                {{ >playClipButton }}
-            {{ /if }}
-
-            {{ #if includeLayoutButton }}
-            <div class="btn-group">
-                <button id="layout" type="button" class="btn btn-sm btn-default dropdown-toggle" data-container="body" data-toggle="dropdown" aria-expanded="false" data-placement="right" title="Layout" rel="tooltip">
-                    <span class="fa fa-th-large"></span>
-                </button>
-                {{  >layoutChooser }}
-            </div>
-            {{ /if }}
-
-            {{ #if includeHangingProtocolButtons }}
-                {{ >hangingProtocolButtons }}
-                {{ >matchedProtocols }}
-            {{ /if }}
-
-            {{ #each btnGroup }}
-                {{ >toolbarGroupButton}}
-            {{ /each }}
+            <button id="layout"
+                    type="button"
+                    class="btn btn-sm dropdown-toggle"
+                    data-container="body"
+                    data-toggle="dropdown"
+                    aria-expanded="false"
+                    data-placement="right"
+                    title="Layout"
+                    rel="tooltip">
+                <span class="fa fa-th-large"></span>
+            </button>
+            {{  >layoutChooser }}
         </div>
+        {{ /if }}
+
+        {{ #if includeHangingProtocolButtons }}
+            {{ >hangingProtocolButtons }}
+            {{ >matchedProtocols }}
+        {{ /if }}
+
+        {{ #each btnGroup }}
+            {{ >toolbarGroupButton}}
+        {{ /each }}
     </div>
 </template>

Packages/viewerbase/client/components/viewer/toolbar/toolbar.styl

@@ -1,16 +1,21 @@
-#toolbar
-  background-color: black
-  text-align: center
+@import "{design}/app.styl"
+
+.btn-group
+  background-color: $primaryBackgroundColor
+  display: inline-block
   
-  .btn-group
-    display: inline-block
+  button
+    text-align: center
+    color: $defaultColor
+    background-color: $primaryBackgroundColor
+    border-color: $uiBorderColor
+    transition(all 0.1s ease)
     
-    button
-      text-align: center
-      color: #ffffff
-      background-color: #424242
-      border-color: #424242
-      outline: none
-      
-      &.active, &:active
-        background-color: #3B678E
+    // Prevent the blue outline in Chrome when a viewport is selected
+    outline: 0 !important
+    
+    &:hover
+      color: $hoverColor
+
+    &.active, &:active
+      color: $activeColor