LT-250: Styling right part of toolbar

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-origin: center center; /* IE 9 */
-    -webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */
-    -webkit-transform-origin: center center; /* Chrome, Safari, Opera */
-    transform: rotate(270deg);
-    transform-origin: center center;
+    -ms-transform: rotate(270deg) /* IE 9 */
+    -ms-transform-origin: center center /* IE 9 */
+    -webkit-transform: rotate(270deg) /* Chrome, Safari, Opera */
+    -webkit-transform-origin: center center /* Chrome, Safari, Opera */
+    transform: rotate(270deg)
+    transform-origin: center center
 
   .progressText
-    position: absolute;
-    width: $circleSize;
-    height: $circleSize;
-    line-height: $circleSize;
-    font-family: Roboto-Bold;
-    font-size: 17px;
-    text-align: center;
-    color: $progressTextColor;
-    top: 0;
+    position: absolute
+    width: $circleSize
+    height: $circleSize
+    line-height: $circleSize
+    font-family: Roboto
+    font-weight: 700
+    font-size: 17px
+    text-align: center
+    color: $progressTextColor
+    top: 0
 
     svg
       width: 17px