Update styling and change title on page and in breadcrumbs

styles/components/_portfolio_layout.scss

@@ -153,6 +153,18 @@
       }
     }
   }
+
+  .activity-log {
+    border-top: 3px solid $color-blue;
+
+    .subheading {
+      border-top: 0;
+      border-bottom: 1px solid $color-gray-lightest;
+      padding: 1.6rem 1.6rem;
+      font-weight: $font-bold;
+    }
+  }
+
 }
 
 .portfolio-applications {
@@ -355,4 +367,16 @@
   .edit-portfolio-name.action-group {
     margin-top: 2rem;
   }
+
+  .form-row {
+    margin-bottom: 0;
+
+    .form-col {
+      .usa-input {
+        input {
+          max-width: 45em;
+        }
+      }
+    }
+  }
 }

styles/elements/_accordians.scss

@@ -25,6 +25,10 @@
   border-top: 3px solid $color-blue;
   border-bottom: none;
   box-shadow: 0 2px 4px 0 rgba(216,218,222,0.58);
+
+  &.row {
+    background: $color-white;
+  }
 }
 
 .accordian__title {

styles/elements/_block_lists.scss

@@ -1,5 +1,6 @@
 @mixin block-list {
   @include panel-margin;
+  box-shadow: 0 6px 18px 0 rgba(144,164,183,0.3);
 
   ul, dl {
     list-style: none;
@@ -15,6 +16,11 @@
   display: flex;
   flex-direction: row;
   justify-content: space-between;
+  background-color: $color-gray-lightest;
+  padding: $gap 2 * $gap;
+  border-top: none;
+  border-bottom: none;
+  color: $color-gray;
 
   .icon-tooltip {
     margin: -$gap;
@@ -59,7 +65,7 @@
   margin: 0;
   padding: $gap * 2;
   border-top: 0;
-  border-bottom: 1px dashed $color-gray-light;
+  border-bottom: 1px solid $color-gray-lightest;
 
   @at-root li#{&} {
     &:last-child {

templates/fragments/audit_events_log.html

@@ -1,10 +1,7 @@
 {% from "components/pagination.html" import Pagination %}
 
-<section class="block-list">
+<section class="block-list activity-log">
-  <header class="block-list__header">
+  <div class='subheading'>Activity Log</div>
-    <h1 class="block-list__title">{{ "audit_log.header_title" | translate }}</h1>
-  </header>
-
   <ul>
     {% for event in audit_events %}
       <li class="block-list__item">

templates/portfolios/edit.html

@@ -4,13 +4,14 @@
 {% from "components/icon.html" import Icon %}
 {% from "components/text_input.html" import TextInput %}
 
-{% set secondary_breadcrumb = "navigation.portfolio_navigation.breadcrumbs.admin" | translate %}
+{% set secondary_breadcrumb = "navigation.portfolio_navigation.portfolio_admin" | translate %}
 
 {% block portfolio_content %}
 
   {% include "fragments/flash.html" %}
 
-  <div v-cloak class="portfolio-admin">
+  <div v-cloak class="portfolio-admin portfolio-content">
+
 
     <form method="POST" action="{{ url_for('portfolios.edit_portfolio', portfolio_id=portfolio.id) }}" autocomplete="false">
       {{ form.csrf_token }}
@@ -19,13 +20,12 @@
           {{ TextInput(form.name, validation="portfolioName") }}
         </div>
 
-        <div class='form-col form-col--half'>
         <div class='edit-portfolio-name action-group'>
           <button type="submit" class="usa-button usa-button-big usa-button-primary" tabindex="0">Save</button>
         </div>
       </div>
-      </div>
     </form>
+
     {% include "fragments/audit_events_log.html" %}
 
     {{ Pagination(audit_events, 'portfolios.portfolio_activity', portfolio_id=portfolio_id) }}

translations.yaml

@@ -304,6 +304,7 @@ navigation:
     applications: Applications
     portfolio_funding: Funding
     portfolio_settings: Portfolio Settings
+    portfolio_admin: Portfolio Administration
     breadcrumbs:
       admin: Admin
       funding: Funding