updates to portfolio landing page

- darker gray for breadcrumbs and subheads
- larger font size for subheads
- updated toggle for environmnets list per-application
- more padding for application row

styles/components/_portfolio_layout.scss

@@ -34,10 +34,10 @@
 
   .portfolio-breadcrumbs__home {
     &.icon-link--disabled {
-      color: $color-gray-medium;
+      color: $color-gray-dark;
       opacity: 1;
       .icon {
-        @include icon-color($color-gray-medium);
+        @include icon-color($color-gray-dark);
       }
     }
   }
@@ -153,8 +153,6 @@
   color: $color-gray-dark;
   padding: $gap 0;
   text-transform: uppercase;
-  opacity: 0.54;
-  font-size: $small-font-size;
   font-weight: bold;
   margin-bottom: 3 * $gap;
 }

styles/elements/_accordions.scss

@@ -54,11 +54,16 @@
 
 .accordion__actions {
   margin-top: $gap;
+  margin-bottom: $gap * 0.5;
   display: flex;
   flex-direction: row;
 
   .icon-link {
     font-size: $small-font-size;
+
+    svg {
+      width: 1rem;
+    }
   }
 
   .counter {

templates/portfolios/applications/index.html

@@ -54,21 +54,20 @@
                   <a
                     href="{{ url_for('applications.team', application_id=application.id) }}"
                     class='icon-link'>
-                      <span>{{ "portfolios.applications.team_text" | translate }}</span>
-                      <span class='counter'>{{ application.num_users }}</span>
+                      <span>{{ "portfolios.applications.team_text" | translate }} ({{ application.num_users }})</span>
                     </a>
+                    <div class='separator'></div>
                   {% endif %}
-                </div>
-              </div>
-              <div class='col'>
-                <span class='icon-link toggle-link' v-on:click="toggleSection('{{ section_name }}')">
+                  <a class='icon-link' v-on:click="toggleSection('{{ section_name }}')">
+                    <span>Environments ({{ application.environments|length }})</span>
                     <span v-if="selectedSection === '{{ section_name }}'">
-                    {{ Icon('minus') }}
+                      {{ Icon('caret_up') }}
                     </span>
                     <span v-else>
-                    {{ Icon('plus') }}
-                  </span>
+                      {{ Icon('caret_down') }}
                     </span>
+                  </a>
+                </div>
               </div>
             </header>
             <ul v-show="selectedSection === '{{ section_name }}'">