LT-275: Final polish on style for both versions

Packages/design/styles/components/selectTree.styl

@@ -76,6 +76,7 @@ $gray6 = #303030
     display: block
     margin: 0
     padding: 5px
+    position: relative
     text-align: center
 
     span
@@ -85,6 +86,14 @@ $gray6 = #303030
     input
       border-color: $gray5
       font-weight: normal
+      padding-left: 34px
+
+      & ~ i
+        color: $gray1
+        font-size: 18px
+        left: 16px
+        position: absolute
+        top: 37px
 
   .tree-breadcrumb
     line-height: 32px
@@ -171,7 +180,7 @@ $gray6 = #303030
       border-radius: 5px
       color: white
       opacity: 0.9
-      padding: 5px 12px 12px
+      padding: 0 15px 12px
       position: absolute
       top: 50%
       transform(translateY(-50%))
@@ -179,13 +188,21 @@ $gray6 = #303030
 
       h5.title
         color: $gray5
-        font-size: 12px
         font-weight: normal
         line-height: 20px
-        margin: 0
+        margin: 12px 0 16px
 
       label
+        cursor: pointer
         display: block
+        font-weight: 300
+        line-height: 26px
+        margin: 0
+        padding-left: 3px
+        transition(padding 0.3s ease)
+
+        &:hover
+          padding-left: 0
 
 .select-tree-root
 

Packages/lesiontracker/client/components/measureFlow/measureFlow.html

@@ -3,6 +3,7 @@
         <button class="btn-add">Add label</button>
         {{#if eq instance.state.get 'selected'}}
             <div class="tree-leaf">
+                <i class="icon-check"></i>
                 <span>{{instance.value.label}}</span>
                 {{#if instance.descriptionEdit.get}}
                     <div class="description clearfix">

Packages/lesiontracker/client/components/measureFlow/measureFlow.styl

@@ -39,22 +39,11 @@
   &>.tree-leaf
     position: relative
 
-    &:before
+    .icon-check
-      animateZoomIn()
       background-color: $activeColor
-      border-radius: 20px
-      color: $uiGray
-      content: '\f00c'
-      display: block
-      font-family: FontAwesome
-      font-size: 24px
-      height: 40px
       left: -46px
-      line-height: 40px
       position: absolute
-      text-align: center
       top: 3px
-      width: 40px
 
     span
       background: white
@@ -127,8 +116,9 @@
       &.selected .select-tree-common .content
         animation-name: selectTreeCommonCloseLeft
 
-      .tree-search input
+      .tree-search
-        display: none
+        input, i
+          display: none
 
       .select-tree-common
         padding-left: 0
@@ -170,3 +160,25 @@
     width: calc(100% - 6px)
   }
 }
+
+.icon-check
+  background-color: white
+  border-radius: 20px
+  display: block
+  height: 40px
+  overflow: hidden
+  position: relative
+  width: 40px
+
+  &:before
+    border: 2px solid black
+    border-left-width: 0
+    border-top-width: 0
+    content: ''
+    display: block
+    height: 18px
+    left: 15px
+    position: absolute
+    top: 9px
+    transform(rotate(45deg))
+    width: 9px

Packages/ohif-core/client/components/bootstrap/input/selectTree.html

@@ -11,11 +11,13 @@
         <div class="tree-content">
             {{#let currentNode=this.currentNode.get}}
                 {{#if (and (not this.root) (ne this.search false))}}
-                    {{>inputText
+                    {{#inputText
                         label=this.label
                         labelClass='tree-search'
                         placeholder=(choose this.searchPlaceholder 'Search')
                     }}
+                        <i class="fa fa-search"></i>
+                    {{/inputText}}
                 {{/if}}
                 <div class="tree-options {{#if currentNode}}collapsed{{/if}}">
                     {{#if this.root}}