From 727865039507b5f5d8d71562023c6fc3bcc53dbb Mon Sep 17 00:00:00 2001
From: Patrick Smith <patrick+dds@promptworks.com>
Date: Sat, 9 Feb 2019 18:05:32 -0500
Subject: [PATCH] Update styles on spend table in reports

---
 styles/sections/_reports.scss           | 40 +++++++++++++++++--------
 templates/portfolios/reports/index.html | 11 ++++---
 2 files changed, 32 insertions(+), 19 deletions(-)

diff --git a/styles/sections/_reports.scss b/styles/sections/_reports.scss
index a97de1c6..18f9187b 100644
--- a/styles/sections/_reports.scss
+++ b/styles/sections/_reports.scss
@@ -200,9 +200,12 @@
 
 
 .spend-table {
+  box-shadow: 0 6px 18px 0 rgba(144,164,183,0.3);
+
   .spend-table__header {
     @include panel-base;
     @include panel-theme-default;
+    border-top: none;
     border-bottom: 0;
     display: flex;
     flex-direction: row;
@@ -212,8 +215,8 @@
     padding: $gap * 2;
 
     .spend-table__title {
-      @include h3;
-      margin: 0;
+      @include h4;
+      font-size: $lead-font-size;
       flex: 2;
     }
 
@@ -224,6 +227,12 @@
   }
 
   table {
+    thead th {
+      text-transform: uppercase;
+      border-bottom: 1px solid $color-gray-lightest;
+      border-top: none;
+    }
+
     th, td {
       white-space: nowrap;
 
@@ -231,10 +240,6 @@
         margin: 0;
       }
 
-      &.current-month {
-        background-color: $color-aqua-lightest;
-      }
-
       &.previous-month {
         color: $color-gray;
       }
@@ -283,13 +288,15 @@
     .spend-table__portfolio {
       th, td {
         font-weight: bold;
+        border-bottom: 1px solid $color-gray-lightest;
       }
     }
 
     .spend-table__application {
       .spend-table__application__toggler {
-        @include icon-link-color($color-black-light, $color-gray-lightest);
+        @include icon-link-color($color-blue, $color-gray-lightest);
         margin-left: -$gap;
+        color: $color-blue;
 
         .icon {
           @include icon-size(12);
@@ -297,14 +304,21 @@
         }
       }
 
-      .spend-table__application__env {
-        margin-left: $gap;
+      th, td {
+        border-bottom: none;
+      }
 
-        &:last-child {
-          td, th {
-            padding-bottom: $gap * 5;
-            box-shadow: inset 0 (-$gap * 2.5) 0 $color-gray-lightest;
+      .spend-table__application__env {
+        margin-left: 2 * $gap;
+
+        th, td {
+          .icon-link {
+            font-weight: $font-normal;
+            font-size: $base-font-size;
           }
+
+          border-bottom: 1px dashed $color-white;
+          background-color: $color-blue-light;
         }
       }
     }
diff --git a/templates/portfolios/reports/index.html b/templates/portfolios/reports/index.html
index 10b7d01c..9522995a 100644
--- a/templates/portfolios/reports/index.html
+++ b/templates/portfolios/reports/index.html
@@ -342,7 +342,7 @@
 
     <div class='spend-table responsive-table-wrapper'>
       <div class='spend-table__header'>
-        <h2 class='spend-table__title'>Total spend per month </h2>
+        <h2 class='spend-table__title'>Total spent per month</h2>
 
         <select name='month' id='month' onchange='location = this.value' class='spend-table__month-select'>
           {% for m in cumulative_budget["months"] %}
@@ -379,12 +379,12 @@
             <th scope='col' class='table-cell--align-right previous-month'>{{ two_months_ago.strftime('%B %Y') }}</th>
             <th scope='col' class='table-cell--align-right previous-month'>{{ prev_month.strftime('%B %Y') }}</th>
             <th scope='col' class='table-cell--align-right current-month'>{{ current_month.strftime('%B %Y') }}</th>
-            <th class='current-month'>% of total spend this month</th>
+            <th class='current-month'></th>
           </thead>
 
           <tbody class='spend-table__portfolio'>
             <tr>
-              <th scope='row'>Total</th>
+              <th scope='row'>Portfolio Total</th>
               <td class='table-cell--align-right previous-month'>{{ portfolio_totals.get(two_months_ago_index, 0) | dollars }}</td>
               <td class='table-cell--align-right previous-month'>{{ portfolio_totals.get(prev_month_index, 0) | dollars }}</td>
               <td class='table-cell--align-right current-month'>{{ portfolio_totals.get(current_month_index, 0) | dollars }}</td>
@@ -429,10 +429,9 @@
 
             <tr v-for='(environment, envName) in environments[name]' v-show='application.isVisible' class='spend-table__application__env'>
               <th scope='rowgroup'>
-                <a href='#' class='icon-link spend-table__application__env'>
-                  {{ Icon('link') }}
+                <div class='icon-link spend-table__application__env'>
                   <span v-html='envName'></span>
-                </a>
+                </div>
               </th>
 
               <td class='table-cell--align-right previous-month'>