Style updates to portfolio team page:

- right align environment toggle
- fix environment toggle text, add caret icons
- display user permissions correctly

styles/components/_accordion_table.scss

@@ -150,5 +150,9 @@
       flex-grow: 1;
       flex-basis: 0;
     }
+
+    .accordion-table__item__toggler {
+      text-align: right;
+    }
   }
 }

styles/components/_portfolio_layout.scss

@@ -227,10 +227,6 @@
           }
         }
 
-        .green {
-          color: $color-green;
-        }
-
         .name {
           font-weight: bold;
 

styles/core/_util.scss

@@ -46,3 +46,11 @@
     @content;
   }
 }
+
+.green {
+  color: $color-green;
+}
+
+.user-permission {
+  font-weight: $font-normal;
+}

templates/portfolios/applications/team.html

@@ -46,7 +46,7 @@
           <div class="accordion-table__head">
             <span>
               <span>
-                {{ "portfolios.applications.team_settings.user" | translate }}
+                {{ "common.name" | translate }}
               </span>
               <span>
                 {{ "portfolios.applications.team_settings.section.table.delete_access" | translate }}
@@ -66,7 +66,11 @@
               {% set user_info = environment_users[user.id] %}
               {% set user_permissions = user_info["permissions"] %}
 
+                {% macro PermissionField(value) %}
+                  <span class="user-permission{% if "Edit" in value %} green{% endif %}">{{ value }}</span>
+                {% endmacro %}
 
+<<<<<<< HEAD
               <toggler inline-template>
                 <li class="accordion-table__item">
                   <div class="accordion-table__item-content">
@@ -85,6 +89,26 @@
                       {% set close_html %}
                         {{ "common.hide" | translate }} {{ "portfolios.applications.team_settings.environments" | translate }} ({{ user_info['environments'] | length }})
                       {% endset %}
+=======
+                <toggler inline-template>
+                  <li class="accordion-table__item">
+                    <div class="accordion-table__item-content">
+                      <span>
+                        {{ name }}
+                        <span>{{ user.full_name }}</span>
+                        {{ PermissionField(user_permissions["delete_access"]) }}
+                        {{ PermissionField(user_permissions["environment_management"]) }}
+                        {{ PermissionField(user_permissions["team_management"]) }}
+                      </span>
+                      <span class="icon-link icon-link--large accordion-table__item__toggler">
+                        {% set open_html %}
+                        {{ "portfolios.applications.team_settings.environments" | translate }} ({{ user_info['environments'] | length }}) {{ Icon('caret_down') }}
+                        {% endset %}
+
+                        {% set close_html %}
+                          {{ "portfolios.applications.team_settings.environments" | translate }} ({{ user_info['environments'] | length }}) {{ Icon('caret_up') }}
+                        {% endset %}
+>>>>>>> Style updates to portfolio team page:
 
                       {{
                         ToggleButton(

translations.yaml

@@ -38,6 +38,7 @@ common:
   resource_names:
     environments: Environments
   choose_role: Choose a role
+  name: Name
 components:
   modal:
     close: Close