Adapting header to the new structure

LesionTracker/client/components/app/app.styl

@@ -1,45 +1,46 @@
 @import "{ohif:design}/app"
 
-$expandedHeight = 160px
+body>.header
 
-.logoImage
-  display: inline-block
-  height: 100%
-  float: left
-
-.topBar
-  height: $topBarHeight
-  padding: 10px 10px 0
-  theme('color', '$textPrimaryColor')
-  theme('background-color', '$primaryBackgroundColor')
-  transition(all 0.5s ease)
-
-  &>.clearfix
-    position: relative
-
-  .brandSection
+  .brand
     height: 30px
     display: inline-block
     text-decoration: none
 
-    .logoImage
+    .logo-image
+      display: inline-block
+      fill: transparent
+      float: left
+      height: 100%
       margin: 0 8px 0 0
       width: 30px
 
-    .logoText
+    .logo-text
       display: inline-block
       font-family: $logoFontFamily
+      font-size: 14px
       font-weight: $logoFontWeight
       theme('color', '$textPrimaryColor')
       line-height: 30px
 
-  .studyListLinkSection
-    theme('border-left', '%s solid $uiBorderColor' % $uiBorderThickness)
-    margin: 3px 0 0 10px
-    padding: 0 0 0 10px
-    
-    &#back-to-viewer-btn
-      border-left: 0
+  .header-menu
+    .user-name
+      font-size: 13px
+
+    .menu-toggle
+      theme('border-left', 'solid 1px $defaultColor')
+      display: inline-block
+      height: 18px
+      padding: 0 8px
+
+      .fa
+        theme('color', '$defaultColor')
+        font-size: 17px
+        line-height: 18px
+
+      .caret-down
+        theme('color', '$uiGrayLight')
+        margin: 0 4px 4px 2px
 
   .btn
     theme('color', '$textSecondaryColor')
@@ -54,23 +55,29 @@ $expandedHeight = 160px
     &:active
       theme('color', '$activeColor')
 
-  &.studyList
-    background-color: rgba(21, 25, 30, 0.7)
-    height: $expandedHeight
+  .studyListLinkSection
+    theme('border-left', '%s solid $uiBorderColor' % $uiBorderThickness)
+    margin: 3px 0 0 10px
+    padding: 0 0 0 10px
+
+    &#back-to-viewer-btn
+      border-left: 0
+
+  &.header-big
     padding-left: $studyListPadding
     padding-right: $studyListPadding
 
-    .brandSection
-      height: 100%
-      width: 80%
-      line-height: $expandedHeight - 10px
+    .brand
+        height: 100%
+        width: 80%
+        line-height: $topBarExpandedHeight - 10px
 
-      .logoImage
-        width: 50px
-        margin: 0 20px 0 0
+        .logo-image
+          margin: 0 20px 0 0
+          width: 50px
 
-      .logoText
-        font-size: 30px
+        .logo-text
+          font-size: 30px
 
     .studyListLinkSection
       border: none