LT-248: Making Current Case Measurement Status look like the specified in the design

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

@@ -15,29 +15,31 @@
                     stroke-dasharray="131.9469"
                     stroke-dashoffset="0">
             </circle>
-            <circle id="bar"
-                    r="21"
-                    cx="23"
-                    cy="23"
-                    fill="transparent"
-                    stroke-dasharray="131.9469"
-                    style="stroke-dashoffset: {{progressRadius}}px;">
-            </circle>
+            {{#unless isLocked}}
+                <circle id="bar"
+                        r="21"
+                        cx="23"
+                        cy="23"
+                        fill="transparent"
+                        stroke-dasharray="131.9469"
+                        style="stroke-dashoffset: {{progressRadius}}px;">
+                </circle>
+            {{/unless}}
         </svg>
         <div class="progressText">
-            {{ #if isLocked }}
-                <svg>
+            {{#if isLocked}}
+                <svg class="locked">
                     <use xlink:href=/packages/lesiontracker/assets/icons.svg#icon-status-lock></use>
                 </svg>
-            {{ else }}
-                {{ #if progressComplete }}
-                <svg>
-                    <use xlink:href=/packages/lesiontracker/assets/icons.svg#icon-status-complete></use>
-                </svg>
-                {{ else }}
-                {{progressText}}
-                {{ /if }}
-            {{ /if }}
+            {{else}}
+                {{#if progressComplete}}
+                    <svg class="complete">
+                        <use xlink:href=/packages/lesiontracker/assets/icons.svg#icon-status-complete></use>
+                    </svg>
+                {{else}}
+                    {{progressText}}
+                {{/if}}
+            {{/if}}
         </div>
     </div>
 </template>

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

@@ -22,7 +22,7 @@ $circleSize = 46px
     -webkit-transform: rotate(270deg) /* Chrome, Safari, Opera */
     -webkit-transform-origin: center center /* Chrome, Safari, Opera */
     transform: rotate(270deg)
-    transform-origin: center center
+    transform-origin(center center)
 
   .progressText
     position: absolute
@@ -36,5 +36,17 @@ $circleSize = 46px
     top: 0
 
     svg
-      width: 17px
-      height: 17px
+      fill: $uiSkyBlue
+      left: 50%
+      position: absolute
+      stroke: $uiSkyBlue
+      top: 50%
+      transform(translateX(-50%) translateY(-50%))
+
+      &.locked
+        width: 16px
+        height: 21px
+
+      &.complete
+        width: 27px
+        height: 27px