From ef89c3dfd7edce153a0488fab11710c548c05f38 Mon Sep 17 00:00:00 2001
From: Bruno Alves de Faria <brunoalvesdefaria@gmail.com>
Date: Thu, 23 Jun 2016 16:59:36 -0300
Subject: [PATCH] LT-249: Creating warning and response status states for
 measurement rows

---
 .../roundedButtonGroup.styl                   |  8 +++---
 Packages/design/styles/variables.styl         | 15 +++++-----
 .../additionalMeasurements.styl               |  2 +-
 .../lesionTableRow/lesionTableRow.html        | 16 +++++------
 .../lesionTableRow/lesionTableRow.styl        | 28 ++++++++++++++++++-
 .../studySeriesQuickSwitch.styl               |  2 +-
 6 files changed, 47 insertions(+), 24 deletions(-)

diff --git a/Packages/design/components/roundedButtonGroup/roundedButtonGroup.styl b/Packages/design/components/roundedButtonGroup/roundedButtonGroup.styl
index 4b937f36e..6790138a5 100644
--- a/Packages/design/components/roundedButtonGroup/roundedButtonGroup.styl
+++ b/Packages/design/components/roundedButtonGroup/roundedButtonGroup.styl
@@ -17,7 +17,7 @@ $textColorActive = #2D2D2D
 
     .roundedButton
       align-items: center
-      background-color: $darkUiColor
+      background-color: $uiGrayDarker
       border: 1px $uiBorderColorDark solid
       color: $textSecondaryColor
       display: flex
@@ -56,7 +56,7 @@ $textColorActive = #2D2D2D
 
     &:hover .roundedButton
       background-color: $boxBackgroundColor
-      color: $darkUiColor
+      color: $uiGrayDarker
 
     &.active .roundedButton
       background-color: $activeColor
@@ -66,5 +66,5 @@ $textColorActive = #2D2D2D
     &:hover .roundedButton
     &.active .roundedButton
       svg
-        fill: $darkUiColor
-        stroke: $darkUiColor
+        fill: $uiGrayDarker
+        stroke: $uiGrayDarker
diff --git a/Packages/design/styles/variables.styl b/Packages/design/styles/variables.styl
index 233b03587..bef6074da 100644
--- a/Packages/design/styles/variables.styl
+++ b/Packages/design/styles/variables.styl
@@ -1,26 +1,25 @@
+// Common pallete
+$uiYellow = #E29E4A
+$uiSkyBlue = #6FBDE2
+$uiGrayDark = #263340
+$uiGrayDarker = #16202B
+$uiGrayDarkest = #151A1F
+
 // Interface UI Colors
 $defaultColor = #94A8B3
 $hoverColor = #ffffff
 $activeColor = #40D9B8
 $uiBorderColor = #436270
 $uiBorderColorDark = #3C5D80
-$darkUiColor = #16202B
 $primaryBackgroundColor = #000000
 $boxBackgroundColor = #3E5975
 $boxBackgroundColorDark = #22374D
 
-// Common pallete
-$uiSkyBlue = #6FBDE2
-$uiGrayDark = #263340
-$uiGrayDarker = #16202B
-$uiGrayDarkest = #151A1F
-
 // Text Colors
 $textPrimaryColor = #ffffff
 $textSecondaryColor = #91B9CD
 
 // Other Colors
-$errorColor = #E29E4A
 $menuBackgroundColor = #F2F2F2
 
 // Sizes
diff --git a/Packages/lesiontracker/client/components/additionalMeasurements/additionalMeasurements.styl b/Packages/lesiontracker/client/components/additionalMeasurements/additionalMeasurements.styl
index 8e5a695a1..078889eae 100644
--- a/Packages/lesiontracker/client/components/additionalMeasurements/additionalMeasurements.styl
+++ b/Packages/lesiontracker/client/components/additionalMeasurements/additionalMeasurements.styl
@@ -25,7 +25,7 @@
       font-size: 14px
       padding: 0 10px
       color: $textPrimaryColor
-      background-color: $darkUiColor
+      background-color: $uiGrayDarker
 
     .entrySection
       #regionsOfMetastaticDisease
diff --git a/Packages/lesiontracker/client/components/lesionTableRow/lesionTableRow.html b/Packages/lesiontracker/client/components/lesionTableRow/lesionTableRow.html
index bfeae9ce1..9a9767fbe 100644
--- a/Packages/lesiontracker/client/components/lesionTableRow/lesionTableRow.html
+++ b/Packages/lesiontracker/client/components/lesionTableRow/lesionTableRow.html
@@ -1,23 +1,21 @@
 <template name="lesionTableRow">
-    <div class="lesionTableRow" data-measurementid="{{_id}}">
+    <div class="lesionTableRow {{#if descriptionRequired}}warning{{/if}}{{#if responseStatus}}response-status{{/if}}" data-measurementid="{{_id}}">
         <div class='lesionRowSidebar'>
             <div class="lesionNumber">
                 {{lesionNumberAbsolute}}
             </div>
-            <div class="lesionNumber">
-                {{ #if descriptionRequired }}
-                <div>
+            {{#if descriptionRequired}}
+                <div class="warning-icon">
                     <svg>
                         <use xlink:href=/packages/lesiontracker/assets/icons.svg#icon-ui-warning></use>
                     </svg>
                 </div>
-                {{ /if }}
-                {{ #if responseStatus }}
-                <div>
+            {{/if}}
+            {{#if responseStatus}}
+                <div class="response-status-icon">
                     CR
                 </div>
-                {{ /if }}
-            </div>
+            {{/if}}
         </div>
         <div class="lesionDetails">
             <div class='location'>
diff --git a/Packages/lesiontracker/client/components/lesionTableRow/lesionTableRow.styl b/Packages/lesiontracker/client/components/lesionTableRow/lesionTableRow.styl
index 03b422cf3..101cb9cb7 100644
--- a/Packages/lesiontracker/client/components/lesionTableRow/lesionTableRow.styl
+++ b/Packages/lesiontracker/client/components/lesionTableRow/lesionTableRow.styl
@@ -28,16 +28,42 @@
     .lesionRowSidebar
       color: $activeColor
 
+  &.response-status .lesionRowSidebar .response-status-icon
+    background-color: $defaultColor
+    border-radius: 11px
+    color: $uiGrayDark
+    font-size: 12px
+    font-weight: 700
+    height: 21px
+    line-height: 22px
+    margin: 5px auto 0
+    text-align: center
+    width: 21px
+
+  &.warning .lesionRowSidebar
+    color: $textPrimaryColor
+    background-color: $uiYellow
+
+    .warning-icon, svg
+      width: 22px
+      height: 20px
+
+    .warning-icon
+      margin: 7px auto 0
+
+    svg
+      fill: $textPrimaryColor
+
   .lesionRowSidebar
     background: $uiGrayDark
     color: $textSecondaryColor
     flex: 1
     max-width: 30px
-    padding-right: 5px
 
     .lesionNumber
       font-size: 14px
       font-weight: 400
+      margin-right: 5px
       padding-top: 10px
       text-align: center
 
diff --git a/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.styl b/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.styl
index fbf055d93..2def3dd84 100644
--- a/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.styl
+++ b/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.styl
@@ -99,7 +99,7 @@ $seriesSpacing = 2px
       .studyTimepointStudy.active .studyModality
         box-shadow: inset 0 0 0 3px $activeColor
       .studyBox
-        background-color: $darkUiColor
+        background-color: $uiGrayDarker
         border: solid 1px $activeColor
         border-radius: 11px
         display: block