T-249: Adjusting measurements panel styles

Packages/design/styles/variables.styl

@@ -9,6 +9,12 @@ $primaryBackgroundColor = #000000
 $boxBackgroundColor = #3E5975
 $boxBackgroundColorDark = #22374D
 
+// Common pallete
+$uiSkyBlue = #6FBDE2
+$uiGrayDark = #263340
+$uiGrayDarker = #16202B
+$uiGrayDarkest = #151A1F
+
 // Text Colors
 $textPrimaryColor = #ffffff
 $textSecondaryColor = #91B9CD

Packages/lesiontracker/client/components/lesionTable/lesionTable.html

@@ -1,15 +1,13 @@
 <template name="lesionTable">
     <div id="lesionTableContainer">
         <div class="lesionTableLayoutChanger viewerRoundedButtonGroup">
-            {{ >roundedButtonGroup buttonGroupData }}
+            {{>roundedButtonGroup buttonGroupData}}
         </div>
         <div class="lesionTableTimepointHeaderRow">
-            <div class="spacer">
+            {{#each timepoints}}
-            </div>
+                {{>lesionTableTimepointHeader}}
-            {{ #each timepoints }}
+            {{/each}}
-            {{ >lesionTableTimepointHeader }}
-            {{ /each }}
         </div>
-        {{ >lesionTableView }}
+        {{>lesionTableView}}
     </div>
 </template>

Packages/lesiontracker/client/components/lesionTable/lesionTable.styl

@@ -1,17 +1,15 @@
 @import "{design}/app"
 
 #lesionTableContainer
-  width: 100%
+  background-color: $primaryBackgroundColor
   height: calc(100% - 105px)
-  background-color: #000000
+  width: 100%
 
 .lesionTableTimepointHeaderRow
   display: flex
-
+  padding: 2px 2px 0 44px
-  .spacer
-    width: 20px
 
 .lesionTableLayoutChanger
+  margin: 0 auto
   padding: 20px
   text-align: center
-  margin: 0 auto

Packages/lesiontracker/client/components/lesionTableHeaderRow/lesionTableHeaderRow.styl

@@ -3,59 +3,62 @@
 $headerRowHeight = 63px
 
 .lesionTableHeaderRow
-  border-top: 2px solid black
+  background-color: $uiGrayDarkest
-  background: #151a1f
   color: $textSecondaryColor
-  fill: $textSecondaryColor
-  width: 316px
-  height: $headerRowHeight
   display: flex
+  fill: $textSecondaryColor
+  height: $headerRowHeight
   line-height: $headerRowHeight
+  margin-top: 2px
+  width: 316px
 
   div
+    align-items: stretch
     flex: 1
     justify-content: space-around
-    align-items: stretch
     text-align: center
 
   .add
-    padding: 0 10px
-    max-width: 40px
     cursor: pointer
+    max-width: 30px
+    padding-left: 2px
 
     svg
       height: $headerRowHeight
       max-width: 11px
 
   .type
+    color: $textSecondaryColor
+    font-size: 22px
+    font-weight: 300
+    line-height: $headerRowHeight
     padding: 0 10px
     text-align: left
-    font-weight: 300
-    color: #91b9cd
-    height: $headerRowHeight
-    font-size: 13pt
 
   .numberOfLesions
     float: right
-    color:  #6fbde2
+    color: $uiSkyBlue
-    font-weight: 100
+    font-weight: 300
     font-size: 40px
-    max-width: 50px
+    max-width: 54px
-    margin-right: 5px
     height: $headerRowHeight
-    line-height: $headerRowHeight
+    line-height: 66px
 
   .max
     height: $headerRowHeight
+    max-width: 64px
+    text-align: right
 
     .maxNumLesions
-      margin: 21px auto
+      background-color: $textSecondaryColor;
-      height: 20px
-      line-height: 20px
-      width: 47px
-      font-size: 12px
-      text-transform: uppercase
-      font-weight: 500
       border-radius: 3px
       color: black
-      background-color: $textSecondaryColor;
+      display: table
+      font-size: 12px
+      font-weight: 500
+      height: 19px
+      line-height: 17px
+      margin-left: auto
+      margin-top: 22px
+      padding: 2px 6px 0
+      text-transform: uppercase

Packages/lesiontracker/client/components/lesionTableRow/lesionTableRow.styl

@@ -2,45 +2,51 @@
 
 .lesionTableRow
   display: flex
-  border-top: 2px solid black
   height: 63px
+  margin-top: 2px
   width: 100%
 
   .lesionRowSidebar
-    flex: 1
+    background: $uiGrayDark
     color: $textSecondaryColor
-    background: $darkUiColor
+    flex: 1
     max-width: 30px
+    padding-right: 5px
 
     .lesionNumber
+      font-size: 14px
+      font-weight: 400
+      padding-top: 10px
       text-align: center
-      font-weight: 200
-      padding: 3px
 
     &.active
       border-left: 4px $activeColor solid
 
   .lesionDetails
     flex: 1
-    padding-left: 20px
+    padding: 5px 2px 0 14px
-    padding-top: 5px
     display: flex
     flex-direction: column
     align-items: stretch
 
     .location
       flex: 1
-      font-weight: 200
+      font-weight: 400
       font-size: 14px
       color: $textSecondaryColor
-      height: 20px
+      height: 30px
+      line-height: 30px
+      margin-left: -2px
       width: 100%
 
     .timepointData
       display: flex
+      margin-top: 1px
 
       div
-        font-weight: 200
-        padding-bottom: 10px
         flex: 1
+        font-size: 14px
+        font-weight: 400
         justify-content: space-around
+        line-height: 18px
+        padding-bottom: 10px

Packages/lesiontracker/client/components/lesionTableTimepointHeader/lesionTableTimepointHeader.html

@@ -1,10 +1,10 @@
 <template name="lesionTableTimepointHeader">
     <div class="lesionTableTimepointHeader">
         <div class="timepointName">
-            {{ timepointName }}
+            {{timepointName}}
         </div>
         <div  class="timepointDate">
-            {{ formatDA latestDate "DD-MMM-YY"}}
+            {{formatDA latestDate "DD-MMM-YY"}}
         </div>
     </div>
 </template>

Packages/lesiontracker/client/components/lesionTableTimepointHeader/lesionTableTimepointHeader.styl

@@ -2,16 +2,21 @@
 
 .lesionTableTimepointHeader
   flex: 1
-  padding-left: 20px
   justify-content: space-around
 
   div
-    text-align: center
+    border-left: $uiBorderColor $uiBorderThickness solid
+    font-weight: 400
+    padding-left: 12px
+    text-align: left
 
   .timepointName
     color: $textSecondaryColor
+    font-size: 12px
+    line-height: 12px
 
   .timepointDate
-    font-weight: 200
     color: $textPrimaryColor
-    border-left: $uiBorderColor $uiBorderThickness solid
+    font-size: 14px
+    line-height: 20px
+    padding-bottom: 6px

Packages/lesiontracker/client/components/lesionTableView/lesionTableView.styl

@@ -5,7 +5,6 @@
   overflow-y: auto
   margin-right: -16px
   padding-bottom: 100px
-  padding-right: 16px
 
   -webkit-overflow-scrolling: touch
 

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

@@ -1,7 +1,6 @@
 @import "{design}/app"
 
 $circleSize = 46px
-$progressTextColor = #6fbde2
 
 .radialProgress
   height: $circleSize
@@ -34,7 +33,7 @@ $progressTextColor = #6fbde2
     font-weight: 700
     font-size: 17px
     text-align: center
-    color: $progressTextColor
+    color: $uiSkyBlue
     top: 0
 
     svg

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

@@ -8,13 +8,13 @@ $inputBackgroundColor = #2c363f
 $inputPlaceholderColor = lightgray
 
 $studyListToolbarHeight = 75px
-$theadBackgroundColor =  #151a1f
+$theadBackgroundColor =  $uiGrayDarkest
 $tablePadding = 8%
 $bodyCellHeight = 40px
 
 .studyListToolbar
   height: $studyListToolbarHeight
-  background: #151a1f
+  background: $uiGrayDarkest
   border-bottom: 2px solid black
   padding: 0 30px
 
@@ -35,7 +35,7 @@ $bodyCellHeight = 40px
   .studyCount
     font-size: 40px
     font-weight: 100
-    color: #6fbde2
+    color: $uiSkyBlue
     padding: 0 10px
     line-height: $studyListToolbarHeight
 
@@ -149,7 +149,7 @@ $bodyCellHeight = 40px
         background-color: black
 
         &:nth-child(even)
-          background-color: #151a1f
+          background-color: $uiGrayDarkest
 
         td
           height: $bodyCellHeight