Update styles on "total spend" panel

styles/components/_portfolio_layout.scss

@@ -294,4 +294,10 @@
       @include subheading;
     }
   }
+
+  .panel {
+    box-shadow: 0 6px 18px 0 rgba(144,164,183,0.3);
+    border-top: none;
+    border-bottom: none;
+  }
 }

styles/sections/_reports.scss

@@ -7,6 +7,11 @@
 
   .funding-summary-row__col {
 
+    hr {
+      margin: 2 * $gap 0;
+      border-bottom: 1px solid $color-gray-lightest;
+    }
+
     @include media($medium-screen) {
       @include grid-pad;
       flex-grow: 1;
@@ -54,8 +59,8 @@
         }
 
         .spend-summary__heading {
-          @include h3;
+          @include h4;
-          margin: 0 $gap 0 0;
+          margin: 0 $gap 2 * $gap 0;
           -ms-flex-negative: 1;
         }
 
@@ -65,28 +70,22 @@
           @include ie-only {
             margin: $gap 0 0 0;
           }
+        }
 
-          > div {
+        dl {
-            text-align: right;
+          text-align: left;
-            margin: 0 0 ($gap / 2) 0;
+          margin: 0 0 ($gap / 2) 0;
 
-            @include ie-only {
+          @include ie-only {
-              text-align: left;
+            text-align: left;
-            }
+          }
 
-            dd, dt {
+          dt {
-              display: inline;
+            text-transform: uppercase;
-            }
+            color: $color-gray-light;
-
+            margin-right: $gap;
-            dt {
+            font-weight: bold;
-              color: $color-gray;
+            font-size: $small-font-size;
-              margin-right: $gap;
-              font-weight: normal;
-            }
-
-            dd {
-              font-weight: bold;
-            }
           }
         }
 
@@ -97,24 +96,18 @@
         }
 
         .spend-summary__spent {
-          margin: $gap 0 0 0;
+          margin: 2 * $gap 0;
           display: flex;
-          flex-direction: row-reverse;
+          flex-direction: column;
           justify-content: flex-end;
 
-          dd, dt {
-            @include h5;
-          }
-
           dt {
-            font-weight: normal;
+            letter-spacing: 0.47px;
-            margin-left: $gap;
           }
         }
       }
 
 
-
       // Task Order Summary
       // ===============================
       &.to-summary {

templates/portfolios/reports/index.html

@@ -12,31 +12,33 @@
 
     <div class='funding-summary-row__col'>
       <div class='panel spend-summary'>
+        <h4 class='spend-summary__heading'>Portfolio Total Spend</h4>
         <div class='row'>
-          <h2 class='spend-summary__heading col'>Portfolio Total Spend</h2>
+          <dl class='spend-summary__budget col col--grow row'>
-          <dl class='spend-summary__budget'>
             {% set budget = portfolio_totals['budget'] %}
             {% set spent = portfolio_totals['spent'] %}
             {% set remaining = budget - spent %}
-            <div>
+            <dl class='col col--grow'>
-              <dt>Budget </dt>
+              <dt>Budget</dt>
               <dd>{{ budget | dollars }}</dd>
-            </div>
+            </dl>
 
-            <div>
+            <dl class='col col--grow'>
               <dt>Remaining</dt>
               <dd>{{ remaining | dollars }}</dd>
-            </div>
+            </dl>
           </dl>
         </div>
 
+        <hr></hr>
+
         <div>
           <meter value='{{ spent }}' min='0' max='{{ budget }}' title='{{ spent | dollars }} Total spend to date'>
             <div class='meter__fallback' style='width:{{ (spent / budget) * 100 if budget else 0 }}%;'></div>
           </meter>
 
           <dl class='spend-summary__spent'>
-            <dt>Total spend to date</dt>
+            <dt>Total spending to date</dt>
             <dd>{{ spent | dollars }}</dd>
           </dl>
         </div>