PWV-1: Fixing studylist and viewer links styles

LesionTracker/client/components/app/app.html

@@ -12,7 +12,7 @@
                 </div>
             </a>
             {{ #if studyListToggleText }}
-            <a class="btn studyListLinkSection pull-left m-x-1 p-x-2 p-y-0 js-toggle-studyList">
+            <a class="btn studyListLinkSection pull-left js-toggle-studyList">
                 {{studyListToggleText}}
             </a>
             {{ /if }}

LesionTracker/client/components/app/app.styl

@@ -9,12 +9,14 @@ $expandedHeight = 160px
 
 .topBar
   height: $topBarHeight
-  overflow: hidden
-  padding: 1rem $studyListPadding 0
+  padding: 10px 10px 0
   theme('color', '$textPrimaryColor')
   theme('background-color', '$primaryBackgroundColor')
   transition(all 0.5s ease)
 
+  &>.clearfix
+    position: relative
+
   .brandSection
     height: 30px
     display: inline-block
@@ -33,6 +35,8 @@ $expandedHeight = 160px
 
   .studyListLinkSection
     theme('border-left', '%s solid $uiBorderColor' % $uiBorderThickness)
+    margin: 3px 0 0 10px
+    padding: 0 0 0 10px
 
   .btn
     theme('color', '$textSecondaryColor')
@@ -40,7 +44,6 @@ $expandedHeight = 160px
     font-size: 13px
     font-weight: 500
     line-height: 26px
-    margin-top: 3px
 
     &:hover
       theme('color', '$hoverColor')
@@ -51,11 +54,13 @@ $expandedHeight = 160px
   &.studyList
     background-color: rgba(21, 25, 30, 0.7)
     height: $expandedHeight
+    padding-left: $studyListPadding
+    padding-right: $studyListPadding
 
     .brandSection
       height: 100%
       width: 80%
-      line-height: $expandedHeight
+      line-height: $expandedHeight - 10px
 
       .logoImage
         width: 50px
@@ -65,10 +70,12 @@ $expandedHeight = 160px
         font-size: 30px
 
     .studyListLinkSection
-      position: absolute
       border: none
-      top: 5px
-      left: 5px
+      left: 0
+      margin: 0
+      padding: 0
+      position: absolute
+      top: 0
 
 #studylistTabs
   height: "calc(100% - %s)" % $topBarHeight