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

Packages/design/components/roundedButtonGroup/roundedButtonGroup.styl

@@ -1,7 +1,6 @@
 @import "{design}/app"
 
 $height = 25px
-$borderColorActive = #3C8074
 $textColorActive = #2D2D2D
 
 .roundedButtonGroup
@@ -59,7 +58,7 @@ $textColorActive = #2D2D2D
 
     &.active .roundedButton
       background-color: $activeColor
-      border-color: $borderColorActive
+      border-color: $uiBorderColorActive
       color: $textColorActive
 
     &:hover .roundedButton

Packages/design/styles/imports/variables.styl

@@ -13,6 +13,7 @@ $hoverColor = #ffffff
 $activeColor = #40D9B8
 $uiBorderColor = #436270
 $uiBorderColorDark = #3C5D80
+$uiBorderColorActive = #3C8074
 $primaryBackgroundColor = #000000
 $boxBackgroundColor = #3E5975
 $boxBackgroundColorDark = #22374D

Packages/lesiontracker/assets/icons.svg

@@ -36,7 +36,9 @@
     <title>
       Complete
     </title>
-    <path d="M13.5 0C6.08 0 0 6.04 0 13.42 0 20.8 6.08 26.83 13.5 26.83 20.93 26.83 27 20.8 27 13.42 27 6.04 20.93 0 13.5 0L13.5 0ZM10.8 20.13L4.05 13.42 5.94 11.54 10.8 16.37 21.06 6.17 22.95 8.05 10.8 20.13 10.8 20.13Z" id="Shape"/>
+    <g id="icon-status-complete-group" stroke="none">
+      <path id="icon-status-complete-circle" d="M13.5,0 a13.5 13.5 0 0 1 0 27 a13.5 13.5 0 0 1 0 -27 M23,8 l-2,-2 -10,10, -5,-5 -2,2 7,7Z" />
+    </g>
   </symbol>
   <symbol id="icon-status-lock" viewBox="0 0 16 21">
     <title>

Packages/lesiontracker/client/components/caseProgress/caseProgress.html

@@ -1,11 +1,15 @@
 <template name="caseProgress">
     <div class="caseProgress">
-        {{ >radialProgressBar isLocked=isLocked progressPercent=progressPercent progressText=progressText}}
+        {{>radialProgressBar isLocked=isLocked progressPercent=progressPercent progressText=progressText}}
-        {{ #if isLocked }}
+        {{#if isLocked}}
-       <h5>Locked</h5>
+            <div class="caseProgressStatus">
-        {{ /if }}
+                <h5>Locked</h5>
-        {{ #if progressComplete }}
+            </div>
-        <button class="btn js-finish-case">Enter response</button>
+        {{/if}}
-        {{ /if }}
+        {{#if progressComplete}}
+            <div class="caseProgressStatus">
+                <button class="btn js-finish-case">Enter response</button>
+            </div>
+        {{/if}}
     </div>
-</template>
+</template>

Packages/lesiontracker/client/components/caseProgress/caseProgress.js

@@ -1,4 +1,4 @@
-Template.caseProgress.onCreated(function caseProgressOnCreated() {
+Template.caseProgress.onCreated(() => {
     const instance = Template.instance();
 
     instance.progressPercent = new ReactiveVar();

Packages/lesiontracker/client/components/caseProgress/caseProgress.styl

@@ -4,15 +4,29 @@
   transition(all 0.3 ease)
 
   .radialProgress
-    float:left
     display: inline-block
-
-  h5
     float:left
-    display: inline-block
 
-  button.btn
+  .caseProgressStatus
+    display: inline-block
     float: left
-    display: inline-block
+    margin-left: 22px
-    margin: 6px
+
-    cursor: pointer
+    h5
+      color: $textPrimaryColor
+      line-height: 46px
+      margin: 0
+      font-size: 15px
+      font-weight: bold
+
+    button.btn
+      background-color: $activeColor
+      border: 1px solid $uiBorderColorActive
+      color: #000
+      cursor: pointer
+      font-size: 15px
+      font-weight: bold
+      height: 37px
+      margin-top: 6px
+      text-align: center
+      width: 126px

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

@@ -15,29 +15,31 @@
                     stroke-dasharray="131.9469"
                     stroke-dashoffset="0">
             </circle>
-            <circle id="bar"
+            {{#unless isLocked}}
-                    r="21"
+                <circle id="bar"
-                    cx="23"
+                        r="21"
-                    cy="23"
+                        cx="23"
-                    fill="transparent"
+                        cy="23"
-                    stroke-dasharray="131.9469"
+                        fill="transparent"
-                    style="stroke-dashoffset: {{progressRadius}}px;">
+                        stroke-dasharray="131.9469"
-            </circle>
+                        style="stroke-dashoffset: {{progressRadius}}px;">
+                </circle>
+            {{/unless}}
         </svg>
         <div class="progressText">
-            {{ #if isLocked }}
+            {{#if isLocked}}
-                <svg>
+                <svg class="locked">
                     <use xlink:href=/packages/lesiontracker/assets/icons.svg#icon-status-lock></use>
                 </svg>
-            {{ else }}
+            {{else}}
-                {{ #if progressComplete }}
+                {{#if progressComplete}}
-                <svg>
+                    <svg class="complete">
-                    <use xlink:href=/packages/lesiontracker/assets/icons.svg#icon-status-complete></use>
+                        <use xlink:href=/packages/lesiontracker/assets/icons.svg#icon-status-complete></use>
-                </svg>
+                    </svg>
-                {{ else }}
+                {{else}}
-                {{progressText}}
+                    {{progressText}}
-                {{ /if }}
+                {{/if}}
-            {{ /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
+      fill: $uiSkyBlue
-      height: 17px
+      left: 50%
+      position: absolute
+      stroke: $uiSkyBlue
+      top: 50%
+      transform(translateX(-50%) translateY(-50%))
+
+      &.locked
+        width: 16px
+        height: 21px
+
+      &.complete
+        width: 27px
+        height: 27px

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

@@ -16,7 +16,8 @@
                         </svg>
                     </div>
                     <div class="buttonLabel">
-                        More <i class="fa fa-caret-down" aria-hidden="true"></i>
+                        <span>More</span>
+                        <i class="fa fa-caret-down" aria-hidden="true"></i>
                     </div>
                 </div>
 
@@ -34,7 +35,7 @@
             {{/if}}
 
             <div class="toolbarSectionEntry pull-right rm-l-1 p-x-1">
-                {{> caseProgress }}
+                {{>caseProgress}}
             </div>
             <div class="pull-right m-t-1 rm-x-1">
                 {{>roundedButtonGroup rightSidebarToggleButtonData}}
@@ -45,9 +46,7 @@
                         <use xlink:href="/packages/lesiontracker/assets/icons.svg#icon-hud"></use>
                     </svg>
                 </div>
-                <div class="buttonLabel">
+                <div class="buttonLabel">HUD</div>
-                    HUD
-                </div>
             </div>
             <div class="toolbarSectionButton pull-right rp-x-1 m-t-1 rm-r-1" data-toggle="modal" data-target="#optionsModal">
                 <div class="svgContainer">
@@ -55,9 +54,7 @@
                         <use xlink:href="/packages/lesiontracker/assets/icons.svg#icon-trial-info"></use>
                     </svg>
                 </div>
-                <div class="buttonLabel">
+                <div class="buttonLabel">Trial</div>
-                    Trial
-                </div>
             </div>
         </div>
     </div>