LT-342: Study List style issues

Packages/ohif-measurements/client/components/association/associationModal/studyAssociationTable/studyAssociationTable.html

@@ -1,13 +1,15 @@
 <template name="studyAssociationTable">
     <div id="studyAssociationTable">
-        <div class="row">
+        <div id="associationInstructions" class="row">
             <div class="col-md-12">
                 <h4>Instructions</h4>
-                <p>Associate the selected studies with timepoints in the clinical trial. Only 1 follow-up time point can be associated at the same time.</p>
+                <p>Select the studies you would like to associate to a time point. Only one follow-up time point can be associated at the same time.</p>
                 <p>We have automatically retrieved all studies within 14 days (<strong>{{formatDA this.earliestDate}}</strong> to <strong>{{formatDA latestDate}}</strong>) of your selected studies, in case you forgot to select a study.</p>
             </div>
         </div>
 
+        <div class="tableHeaderBackground">
+        </div>
         <table class="table table-responsive">
             <thead>
                 <tr>

Packages/ohif-measurements/client/components/association/associationModal/studyAssociationTable/studyAssociationTable.styl

@@ -1,18 +1,65 @@
 @import "{design}/app"
 
+$tableHoverColor = #2c363f
+$tableTextPrimaryColor = white
+$tableHeaderHeight = 50px
+$bodyCellHeight = 30px
+
 #studyAssociationTable
+  color: #fff;
+  
   .header
     text-align: center
 
   .center
     text-align: center
-
+  
+  #associationInstructions
+    theme('background', '$uiGrayDarker')
+    margin-bottom: 2px
+    padding: 0 15px
+    
+  .tableHeaderBackground
+    theme('background-color', '$uiGrayDarker')
+    position: absolute
+    height: $tableHeaderHeight + 1px
+    left: 0
+    width: 100%
+    z-index: 1
+    border-bottom: solid 1px;
+    theme('border-bottom-color', '$largeNumbersColor')
+  
   table
+    z-index: 2
+    position: relative
+    
+    thead
+      tr
+        th
+          padding: 0
+          border-bottom: solid 1px #6fbde2
+          height: $tableHeaderHeight
     tbody
       tr
+        padding: 5px
+        background-color: black
+
+        &:nth-child(even)
+          theme('background-color', '$uiGrayDarker')
+
         td
           position: relative
+          height: $bodyCellHeight
+          line-height: $bodyCellHeight
+          color: $tableTextPrimaryColor
+          border-top: 1px solid #436270
+          border-bottom: 1px solid #436270
+          vertical-align: middle;
+          transition(all 0.1s ease)
           
+          p
+            margin: 0;
+
           &.timepointOptions
             input
               margin: 0 3px
@@ -61,11 +108,16 @@
               padding-left: 20px
               display: inline-block
               position: relative
+              line-height: initial;
 
           &.disabled
             opacity: 0.2
             
           &.checkboxWrapper
+            label
+              display: block
+              margin: 0
+
             input
               margin: 0 3px
               
@@ -81,25 +133,22 @@
                 
               & + span
                 display: block
-                position: absolute
                 border: 1px solid #b6b6b6
                 background-color: white
                 border-radius: 2px
                 height: 16px
                 width: 16px
-                top: 10px
-                left: calc((100% - 16px)/2)
+                margin: 0 auto
                 z-index: 5
                 transition: border .25s linear
                 -webkit-transition: border .25s linear
                 
               & + span:before
                 display: block
-                position: absolute
+                position: relative
                 content: ''
                 font-size: 9px
-                left: 3px
-                top: 1px
+                top: -7px
                 color: white
                 background-color: transparent
                 transition: background 0.25s linear
@@ -109,4 +158,14 @@
                 theme('background-color', '$activeColor')
                 
                 &:before
-                  content: '\2713'
+                  content: '\2713'
+
+        &:hover, &:active, &.active
+          background-color: $tableHoverColor
+          color: white
+
+          td
+            // This selector is necessary to override bootstrap's 'table' class
+            border-top: 1px solid #436270
+            border-bottom: 1px solid #436270
+            background-color: $tableHoverColor

Packages/ohif-measurements/client/components/caseProgress/caseProgress.html

@@ -10,7 +10,7 @@
         {{/if}}
         {{#if progressComplete}}
             <div class="caseProgressStatus">
-                <button class="btn js-finish-case">Enter response</button>
+                <button class="btn js-finish-case">Save</button>
             </div>
         {{/if}}
     </div>