LT-250: Styling right part of toolbar

Packages/design/styles/global.styl

@@ -1,10 +1,19 @@
 html *
-    font-family: 'Roboto', sans-serif;
+    font-family: 'Roboto', sans-serif
 
 hr
-  border-top: 1px solid $uiBorderColor;
+  border-top: 1px solid $uiBorderColor
 
 .center-table
   display: table
   margin-left: auto
   margin-right: auto
+
+.caret-down
+  display: inline-block
+  width: 0
+  height: 0
+  margin-top: .5rem
+  border-top: 5px solid
+  border-right: 5px solid transparent
+  border-left: 5px solid transparent

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

@@ -39,9 +39,6 @@ $expandedHeight = 160px
     &:active
       color: $activeColor
 
-  .userAccountSection
-     margin: 0 10px
-
   &.studyList
     background-color: rgba(21, 25, 30, 0.7)
     height: $expandedHeight

Packages/lesiontracker/client/components/radialProgressBar/radialProgressBar.html

@@ -8,19 +8,19 @@
              xmlns="http://www.w3.org/2000/svg">
 
             <!-- stroke-dasharray is 2 * PI * radius !-->
-            <circle r="13"
+            <circle r="21"
                     cx="23"
                     cy="23"
                     fill="transparent"
-                    stroke-dasharray="81.64"
+                    stroke-dasharray="131.9469"
                     stroke-dashoffset="0">
             </circle>
             <circle id="bar"
-                    r="13"
+                    r="21"
                     cx="23"
                     cy="23"
                     fill="transparent"
-                    stroke-dasharray="81.64"
+                    stroke-dasharray="131.9469"
                     style="stroke-dashoffset: {{progressRadius}}px;">
             </circle>
         </svg>
@@ -40,4 +40,4 @@
             {{ /if }}
         </div>
     </div>
-</template>
+</template>

Packages/lesiontracker/client/components/radialProgressBar/radialProgressBar.js

@@ -5,7 +5,7 @@ Template.radialProgressBar.helpers({
     },
 
     progressRadius() {
-        var radius = 13 * 2 * Math.PI;
+        var radius = 21 * 2 * Math.PI;
         const instance = Template.instance();
         var percentLeft = (100 - instance.data.progressPercent) / 100;
         return percentLeft * radius;

Packages/lesiontracker/client/components/radialProgressBar/radialProgressBar.styl

@@ -18,23 +18,24 @@ $progressTextColor = #6fbde2
 
   #svg #bar
     stroke: $activeColor
-    -ms-transform: rotate(270deg); /* IE 9 */
+    -ms-transform: rotate(270deg) /* IE 9 */
-    -ms-transform-origin: center center; /* IE 9 */
+    -ms-transform-origin: center center /* IE 9 */
-    -webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */
+    -webkit-transform: rotate(270deg) /* Chrome, Safari, Opera */
-    -webkit-transform-origin: center center; /* Chrome, Safari, Opera */
+    -webkit-transform-origin: center center /* Chrome, Safari, Opera */
-    transform: rotate(270deg);
+    transform: rotate(270deg)
-    transform-origin: center center;
+    transform-origin: center center
 
   .progressText
-    position: absolute;
+    position: absolute
-    width: $circleSize;
+    width: $circleSize
-    height: $circleSize;
+    height: $circleSize
-    line-height: $circleSize;
+    line-height: $circleSize
-    font-family: Roboto-Bold;
+    font-family: Roboto
-    font-size: 17px;
+    font-weight: 700
-    text-align: center;
+    font-size: 17px
-    color: $progressTextColor;
+    text-align: center
-    top: 0;
+    color: $progressTextColor
+    top: 0
 
     svg
       width: 17px

Packages/lesiontracker/client/components/toolbarSection/toolbarSection.html

@@ -1,10 +1,10 @@
 <template name="toolbarSection">
     <div class="toolbarSection p-x-2">
-        <div class="clearfix m-t-1">
+        <div class="clearfix">
-            <div class="pull-left">
+            <div class="pull-left m-t-1">
                 {{>roundedButtonGroup leftSidebarToggleButtonData}}
             </div>
-            <div class="toolbarSectionTools pull-left">
+            <div class="toolbarSectionTools pull-left m-t-1">
                 {{ #each toolbarButtons }}
                     {{ >toolbarSectionButton }}
                 {{ /each }}
@@ -24,10 +24,10 @@
             {{ >studySeriesQuickSwitch side="left" viewportIndex=0}}
             {{ >studySeriesQuickSwitch side="right" viewportIndex=1}}
 
-            <div class="pull-right toolbarSectionEntry">
+            <div class="toolbarSectionEntry pull-right m-l-1 p-x-1">
                 {{ >caseProgress }}
             </div>
-            <div class="pull-right">
+            <div class="pull-right m-t-1 m-x-1">
                 {{>roundedButtonGroup rightSidebarToggleButtonData}}
             </div>
             <!-- <div class="capsule-group pull-right">
@@ -52,7 +52,7 @@
                     </div>
                 </div>
             </div> -->
-            <div id="toggleHUD" class="pull-right toolbarSectionButton">
+            <div id="toggleHUD" class="toolbarSectionButton pull-right m-t-1 m-r-3">
                 <div class="svgContainer">
                     <svg>
                         <use xlink:href="/packages/lesiontracker/assets/icons.svg#icon-hud"></use>
@@ -62,7 +62,7 @@
                     HUD
                 </div>
             </div>
-            <div class="pull-right toolbarSectionButton" data-toggle="modal" data-target="#optionsModal">
+            <div class="toolbarSectionButton pull-right m-t-1 m-x-1" data-toggle="modal" data-target="#optionsModal">
                 <div class="svgContainer">
                     <svg>
                         <use xlink:href="/packages/lesiontracker/assets/icons.svg#icon-trial-info"></use>

Packages/lesiontracker/client/components/toolbarSection/toolbarSection.styl

@@ -51,14 +51,13 @@
         stroke: $hoverColor
 
   .toolbarSectionEntry
-    display: inline-block
     color: $defaultColor
-    fill: $defaultColor
-    stroke: $defaultColor
-    padding: 0 10px
-    height: $toolbarHeight
-    min-width: 30px
     cursor: pointer
+    display: inline-block
+    fill: $defaultColor
+    margin-top: 3px
+    min-width: 30px
+    stroke: $defaultColor
     text-align: center
 
   .quickSwitch

Packages/lesiontracker/client/components/userAccountMenu/userAccountMenu.html

@@ -1,10 +1,10 @@
 <template name="userAccountMenu">
     {{#if currentUser}}
         <div id="userAccountMenu" class="dropdown">
-            <div class="dropdown-toggle noselect" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <div class="dropdown-toggle noselect clearfix" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                {{name}} {{currentPath}}
+                <span class="userName pull-left m-r-1">{{name}} {{currentPath}}</span>
-                <div class="menuButton">
+                <div class="menuButton pull-right">
-                    <i class="fa fa-cog"></i> <span class="caret"></span>
+                    <i class="fa fa-cog"></i> <span class="caret-down"></span>
                 </div>
             </div>
             <ul class="dropdown-menu dropdown-menu-right">
@@ -41,4 +41,4 @@
             </ul>
         </div>
     {{/if}}
-</template>
+</template>

Packages/lesiontracker/client/components/userAccountMenu/userAccountMenu.styl

@@ -1,27 +1,31 @@
 @import "{design}/app"
 
 #userAccountMenu
-  padding: 5px
+  padding: 4px 0
   height: 100%
 
   .dropdown-toggle
-    cursor: pointer
-    line-height: 20px
-    font-weight: 400
-    font-size: 13px
-    text-decoration: none
     background-color: $primaryBackgroundColor
     color: $textSecondaryColor
+    cursor: pointer
+    font-size: 13px
+    font-weight: 400
+    line-height: 18px
+    text-decoration: none
 
     .menuButton
-      display: inline-block
-      padding-left: 5px
       border-left: solid 1px #516873
+      display: inline-block
+      height: 18px
+      padding: 0 8px
 
       .fa
         color: #94a8b3
+        font-size: 17px
+        line-height: 18px
 
-      .caret
+      .caret-down
+        margin: 0 4px 4px 2px
         color: #516873
 
   ul.dropdown-menu