LT-250: Styling header and left part of toolbar

Packages/lesiontracker/client/components/lesionTracker/lesionTracker.html

@@ -1,18 +1,20 @@
 <template name="lesionTracker">
     <div class="topBar {{#if onStudyList}}studyList{{/if}}">
-        <a class="brandSection pull-left" href="http://ohif.org">
-            <img class="logoImage" src="/images/logo.png">
-            <div class="logoText">
-                Open Health Imaging Foundation
+        <div class="clearfix p-x-1 p-t-1">
+            <a class="brandSection pull-left" href="http://ohif.org">
+                <img class="logoImage" src="/images/logo.png">
+                <div class="logoText">
+                    Open Health Imaging Foundation
+                </div>
+            </a>
+            {{ #if studyListToggleText }}
+            <div class="studyListLinkSection pull-left m-x-1 p-x-2 js-toggle-studyList">
+                {{studyListToggleText}}
+            </div>
+            {{ /if }}
+            <div class="userAccountSection pull-right">
+                {{>userAccountMenu}}
             </div>
-        </a>
-        {{ #if studyListToggleText }}
-        <div class="studyListLinkSection pull-left js-toggle-studyList">
-            {{studyListToggleText}}
-        </div>
-        {{ /if }}
-        <div class="userAccountSection pull-right">
-            {{>userAccountMenu}}
         </div>
     </div>
     {{ >timeoutCountdownDialog }}
@@ -32,4 +34,4 @@
     {{ >lastLoginModal }}
     {{ >studyContextMenu }}
     {{ >progressDialog}}
-</template>
+</template>

Packages/lesiontracker/client/components/lesionTracker/lesionTracker.styl

@@ -9,7 +9,7 @@ $expandedHeight = 160px
   transition(all 0.5s ease)
 
   .brandSection
-    height: 100%
+    height: 30px
     display: inline-block
 
     img.logoImage
@@ -25,14 +25,13 @@ $expandedHeight = 160px
       color: $textPrimaryColor
 
   .studyListLinkSection
-    color: $textSecondaryColor
     border-left: $uiBorderThickness solid $uiBorderColor;
-    font-weight: 400
-    font-size: 13px
-    line-height: 30px
-    padding: 0 10px
-    margin: 0 10px
+    color: $textSecondaryColor
     cursor: pointer
+    font-size: 13px
+    font-weight: 500
+    line-height: 26px
+    margin-top: 3px
 
     &:hover
       color: $hoverColor
@@ -48,6 +47,7 @@ $expandedHeight = 160px
     height: $expandedHeight
 
     .brandSection
+      height: 100%
       width: 80%
       padding-left: 50px
       line-height: $expandedHeight