Styling for portfolio summary section of reporting

styles/sections/_reports.scss

@@ -1,4 +1,10 @@
-.reporting-section-header {
+.portfolio-reports {
+  .estimate-warning {
+    margin-top: $gap * 3;
+    margin-bottom: $gap * 3;
+  }
+
+  .reporting-section-header {
     display: flex;
     align-items: baseline;
     &__header {
@@ -7,9 +13,9 @@
     &__subheader {
       @include small-copy;
     }
-}
+  }
 
-.jedi-clin-funding {
+  .jedi-clin-funding {
     padding-top: $gap * 3;
     padding-bottom: $gap * 3;
 
@@ -59,4 +65,26 @@
         line-height: 1.2;
       }
     }
+  }
+
+  .reporting-summary-item {
+    border-right: 1px solid $color-gray-light;
+    margin-right: $gap * 3;
+    padding-right: $gap * 3;
+    &:last-child {
+      border-right: none;
+      margin-right: 0;
+      padding-right: 0;
+    }
+    &__header {
+      margin: 0;
+      &-icon {
+        margin: 0;
+        padding: 0;
+      }
+    }
+    &__value {
+      font-size: $lead-font-size;
+    }
+  }
 }

templates/portfolios/reports/index.html

@@ -6,6 +6,7 @@
 {% block portfolio_content %}
   {{ StickyCTA("Reports") }}
   <div class="portfolio-reports col col--grow">
+    <p class="row estimate-warning">{{ "portfolios.reports.estimate_warning" | translate }}</p>
     {% include "portfolios/reports/portfolio_summary.html" %}
     <hr>
     {% include "portfolios/reports/obligated_funds.html" %}

templates/portfolios/reports/portfolio_summary.html

@@ -3,34 +3,34 @@
 
 
 <section class="row">
-  <div class='col col--grow'>
+  <div class='col col--grow reporting-summary-item'>
-    <p>
+    <h5 class="reporting-summary-item__header">
-      Total Portfolio Value
+      <span class="reporting-summary-item__header-text">Total Portfolio Value</span>
-      {{Tooltip(("common.lorem" | translate), title="")}}
+      {{Tooltip(("common.lorem" | translate), title="", classes="reporting-summary-item__header-icon")}}
-    </p>
+    </h5>
-    <p>{{ total_portfolio_value | dollars }}</p>
+    <p class="reporting-summary-item__value">{{ total_portfolio_value | dollars }}</p>
   </div>
-  <div class='col col--grow'>
+  <div class='col col--grow reporting-summary-item'>
-    <p>
+    <h5 class="reporting-summary-item__header">
-      Funding Duration
+      <span class="reporting-summary-item__header-text">Funding Duration</span>
-      {{Tooltip(("common.lorem" | translate), title="")}}
+      {{Tooltip(("common.lorem" | translate), title="", classes="reporting-summary-item__header-icon")}}
-    </p>
+    </h5>
     {% set earliest_pop_start_date, latest_pop_end_date = portfolio.funding_duration %}
     {% if earliest_pop_start_date and latest_pop_end_date  %}
-      <p>
+      <p class="reporting-summary-item__value" >
         {{ earliest_pop_start_date | formattedDate(formatter="%B %d, %Y") }}
         - 
         {{ latest_pop_end_date | formattedDate(formatter="%B %d, %Y") }}
       </p>
     {% else %}
-      <p> - </p>
+      <p class="reporting-summary-item__value"> - </p>
     {% endif %}
   </div>
-  <div class='col col--grow'>
+  <div class='col col--grow reporting-summary-item'>
-    <p>
+    <h5 class="reporting-summary-item__header">
-      Days Remaining
+      <span class="reporting-summary-item__header-text">Days Remaining</span>
-      {{Tooltip(("common.lorem" | translate), title="")}}
+      {{Tooltip(("common.lorem" | translate), title="", classes="reporting-summary-item__header-icon")}}
-    </p>
+    </h5>
-    <p>{{ portfolio.days_to_funding_expiration }} days</p>
+    <p class="reporting-summary-item__value">{{ portfolio.days_to_funding_expiration }} days</p>
   </div>
 </section>

translations.yaml

@@ -446,6 +446,7 @@ portfolios:
       portfolio_mgmt: Portfolio management
       reporting: Reporting
   reports:
+    estimate_warning: Reports displayed in JEDI are estimates and not a system of record.
     empty_state:
       message: Nothing to report.
       sub_message: