From 5e74b907808d8a92830dfeaeaadaa446fdd6e525 Mon Sep 17 00:00:00 2001
From: fhanportainer <79428273+fhanportainer@users.noreply.github.com>
Date: Fri, 5 Aug 2022 10:25:29 +1200
Subject: [PATCH] feat(teams): updated teams edit css UI (#7403)

* feat(teams): updated teams edit css UI

* feat(team): removed inline style.
---
 app/portainer/views/teams/edit/team.html | 47 ++++++++++++------------
 1 file changed, 23 insertions(+), 24 deletions(-)

diff --git a/app/portainer/views/teams/edit/team.html b/app/portainer/views/teams/edit/team.html
index 7bf9999ce..c29ae7c59 100644
--- a/app/portainer/views/teams/edit/team.html
+++ b/app/portainer/views/teams/edit/team.html
@@ -3,7 +3,7 @@
 <div class="row">
   <div class="col-lg-12 col-md-12 col-xs-12">
     <rd-widget>
-      <rd-widget-header icon="fa-users" title-text="Team details"></rd-widget-header>
+      <rd-widget-header icon="users" feather-icon="true" title-text="Team details"></rd-widget-header>
       <rd-widget-body classes="no-padding">
         <table class="table">
           <tbody>
@@ -11,9 +11,7 @@
               <td>Name</td>
               <td>
                 <span ng-if="!settings.TeamSync">{{ team.Name }}</span>
-                <button class="btn btn-xs btn-danger" ng-if="isAdmin" ng-click="deleteTeam()"
-                  ><i class="fa fa-trash-alt space-right" aria-hidden="true"></i>Delete this team</button
-                >
+                <button class="btn btn-xs btn-danger" ng-if="isAdmin" ng-click="deleteTeam()"> <pr-icon icon="'trash-2'" feather="true"></pr-icon>Delete this team </button>
               </td>
             </tr>
             <tr>
@@ -35,7 +33,7 @@
 
 <div class="row" ng-if="team && settings.TeamSync">
   <div class="col-sm-12 text-muted">
-    <i class="fa fa-exclamation-circle orange-icon" aria-hidden="true" style="margin-right: 2px"></i>
+    <pr-icon icon="'alert-circle'" feather="true" class-name="'icon-warning'"></pr-icon>
     The team leader feature is disabled as external authentication is currently enabled with team sync.
   </div>
 </div>
@@ -43,7 +41,7 @@
 <div class="row" ng-if="team">
   <div class="col-sm-6">
     <rd-widget>
-      <rd-widget-header classes="col-sm-12 col-md-6 nopadding" icon="fa-users" title-text="Users">
+      <rd-widget-header classes="col-sm-12 col-md-6 nopadding" icon="users" feather-icon="true" title-text="Users">
         <div class="pull-md-right pull-lg-right">
           Items per page:
           <select ng-model="state.pagination_count_users" ng-change="changePaginationCountUsers()">
@@ -57,9 +55,9 @@
       </rd-widget-header>
       <rd-widget-taskbar classes="col-sm-12 nopadding">
         <div class="col-sm-12 col-md-6 nopadding">
-          <button class="btn btn-primary btn-sm" ng-click="addAllUsers()" ng-if="isAdmin" ng-disabled="users.length ===  0 || filteredUsers.length === 0 || settings.TeamSync"
-            ><i class="fa fa-user-plus space-right" aria-hidden="true"></i>Add all users</button
-          >
+          <button class="btn btn-primary btn-sm" ng-click="addAllUsers()" ng-if="isAdmin" ng-disabled="users.length ===  0 || filteredUsers.length === 0 || settings.TeamSync">
+            <pr-icon icon="'user-plus'" feather="true" class-name="'icon-white'" size="'sm'"></pr-icon>Add all users
+          </button>
         </div>
         <div class="col-sm-12 col-md-6 nopadding">
           <input type="text" id="filter-users" ng-model="state.filterUsers" placeholder="Filter..." class="form-control input-sm" />
@@ -86,8 +84,8 @@
               >
                 <td>
                   {{ user.Username }}
-                  <span style="margin-left: 5px">
-                    <a ng-click="addUser(user)" ng-class="{ 'btn disabled py-0': settings.TeamSync }"> <i class="fa fa-plus-circle space-right" aria-hidden="true"></i>Add </a>
+                  <span class="space-left">
+                    <a ng-click="addUser(user)" ng-class="{ 'btn disabled py-0': settings.TeamSync }"> <pr-icon icon="'plus-circle'" feather="true" size="'sm'"></pr-icon> Add </a>
                   </span>
                 </td>
               </tr>
@@ -108,7 +106,7 @@
   </div>
   <div class="col-sm-6">
     <rd-widget>
-      <rd-widget-header classes="col-sm-12 col-md-6 nopadding" icon="fa-users" title-text="Team members">
+      <rd-widget-header classes="col-sm-12 col-md-6 nopadding" icon="users" feather-icon="true" title-text="Team members">
         <div class="pull-md-right pull-lg-right">
           Items per page:
           <select ng-model="state.pagination_count_members" ng-change="changePaginationCountGroupMembers()">
@@ -127,8 +125,9 @@
             ng-click="removeAllUsers()"
             ng-if="isAdmin"
             ng-disabled="teamMembers.length ===  0 || filteredGroupMembers.length === 0 || settings.TeamSync"
-            ><i class="fa fa-user-times space-right" aria-hidden="true"></i>Remove all users</button
           >
+            <pr-icon icon="'user-x'" feather="true" class-name="'icon-white'" size="'sm'"></pr-icon>Remove all users
+          </button>
         </div>
         <div class="col-sm-12 col-md-6 nopadding">
           <input type="text" id="filter-group" ng-model="state.filterGroupMembers" placeholder="Filter..." class="form-control input-sm" />
@@ -162,23 +161,23 @@
               >
                 <td>
                   {{ user.Username }}
-                  <span style="margin-left: 5px" ng-if="isAdmin || user.TeamRole === 'Member'">
+                  <span class="space-left" ng-if="isAdmin || user.TeamRole === 'Member'">
                     <a ng-click="removeUser(user)" ng-class="{ 'btn disabled py-0': settings.TeamSync }">
-                      <i class="fa fa-minus-circle space-right" aria-hidden="true"></i>Remove
+                      <pr-icon icon="'minus-circle'" feather="true" size="'sm'"></pr-icon> Remove
                     </a>
                   </span>
                 </td>
                 <td>
-                  <i ng-if="user.TeamRole === 'Leader'" class="fa fa-user-plus" aria-hidden="true" style="margin-right: 2px"></i>
-                  <i ng-if="user.TeamRole === 'Member'" class="fa fa-user" aria-hidden="true" style="margin-right: 2px"></i>
+                  <pr-icon ng-if="user.TeamRole === 'Leader'" icon="'user-plus'" feather="true" class-name="'icon-secondary-alt'" size="'sm'"></pr-icon>
+                  <pr-icon ng-if="user.TeamRole === 'Member'" icon="'user'" feather="true" class-name="'icon-secondary-alt'" size="'sm'"></pr-icon>
                   {{ user.TeamRole }}
-                  <span style="margin-left: 5px">
-                    <a style="margin-left: 5px" ng-click="promoteToLeader(user)" ng-if="user.TeamRole === 'Member'" ng-class="{ 'btn disabled py-0': settings.TeamSync }"
-                      ><i class="fa fa-user-plus space-right" aria-hidden="true"></i>Leader</a
-                    >
-                    <a style="margin-left: 5px" ng-click="demoteToMember(user)" ng-if="isAdmin && user.TeamRole === 'Leader'" ng-class="{ 'btn disabled py-0': settings.TeamSync }"
-                      ><i class="fa fa-user-times space-right" aria-hidden="true"></i>Member</a
-                    >
+                  <span class="space-left">
+                    <a class="space-left" ng-click="promoteToLeader(user)" ng-if="user.TeamRole === 'Member'" ng-class="{ 'btn disabled py-0': settings.TeamSync }">
+                      <pr-icon icon="'user-plus'" feather="true" class-name="'icon-secondary-alt'" size="'sm'"></pr-icon> Leader
+                    </a>
+                    <a class="space-left" ng-click="demoteToMember(user)" ng-if="isAdmin && user.TeamRole === 'Leader'" ng-class="{ 'btn disabled py-0': settings.TeamSync }">
+                      <pr-icon icon="'user-x'" feather="true" class-name="'icon-secondary-alt'" size="'sm'"></pr-icon> Member
+                    </a>
                   </span>
                 </td>
               </tr>