More study list styling

Packages/worklist/client/components/worklistResult/worklistResult.html

@@ -10,6 +10,8 @@
             {{>worklistToolbar}}
         </div>
     </div>
+    <div class="theadBackground">
+    </div>
     <div id="studyListContainer">
         <table id="tblStudyList" class="worklistResult table noselect">
             <thead>
@@ -105,7 +107,7 @@
         {{/if}}
 
         {{#if showNotFoundMessage}}
-            <h5 class="text-center">No Studies Found</h5>
+            <div class="notFound">No matching results</div>
         {{/if}}
     </div>
 </template>

Packages/worklist/client/components/worklistResult/worklistResult.styl

@@ -8,6 +8,8 @@ $inputBackgroundColor = #2c363f
 $inputPlaceholderColor = lightgray
 
 $studyListToolbarHeight = 75px
+$theadBackgroundColor =  #151a1f
+$tablePadding = 80px
 
 .studyListToolbar
   height: $studyListToolbarHeight
@@ -36,16 +38,44 @@ $studyListToolbarHeight = 75px
     padding: 0 10px
     line-height: $studyListToolbarHeight
 
+.theadBackground
+  background-color: $theadBackgroundColor
+  width: 100%
+  height: 122px
+  position: absolute
+  z-index: 1
+
 #studyListContainer
+  padding: 0 $tablePadding
+  position: absolute
+  z-index: 2
+
+  .loadingTextDiv
+    color: $textSecondaryColor
+    font-size: 30px
+    font-weight: 200
+
+  .notFound
+    color: $textSecondaryColor
+    font-size: 30px
+    font-weight: 200
+    text-align: center
+
   table#tblStudyList
     thead
-      background-color: #151a1f
+      background-color: $theadBackgroundColor
       white-space: nowrap
-      border-bottom: solid 1px #6fbde2;
 
       tr
         th
           padding: 0
+          border-bottom: solid 1px #6fbde2
+
+          &:first-child
+            padding-left: $tablePadding
+
+          &:last-child
+            padding-right: $tablePadding
 
           div.sortingCell
             display: inline-block
@@ -56,7 +86,6 @@ $studyListToolbarHeight = 75px
             color: $textPrimaryColor
             font-weight: 400
             padding: 20px
-            background: #171717
 
             span
               font-size: 15px
@@ -65,8 +94,12 @@ $studyListToolbarHeight = 75px
             i
               margin: 0 5px
 
-            &:hover, &.active
-              background: #252525
+            &:hover
+              color: $activeColor
+
+            &.active, &:active
+              color: $activeColor
+
 
           input.worklist-search
             height: 34px
@@ -126,6 +159,12 @@ $studyListToolbarHeight = 75px
 
           transition(all 0.1s ease)
 
+          &:first-child
+            padding-left: $tablePadding
+
+          &:last-child
+            padding-right: $tablePadding
+
         &:hover, &:active, &.active
           background-color: $hoverColor
           color: white