fix(style): correct common pages [EE-3886] (#7449)

* fix(css): correct common pages [EE-3886]

app/assets/css/theme.css

@@ -352,7 +352,7 @@
   --bg-calendar-table-color: var(--grey-3);
   --bg-daterangepicker-end-date: var(--grey-4);
   --bg-daterangepicker-hover: var(--grey-4);
-  --bg-daterangepicker-in-range: var(--grey-2);
+  --bg-daterangepicker-in-range: var(--ui-gray-warm-11);
   --bg-daterangepicker-active: var(--blue-14);
   --bg-tooltip-color: var(--grey-3);
   --bg-input-autofill-color: var(--grey-2);
@@ -366,7 +366,7 @@
   --bg-stepper-item-counter: var(--grey-7);
   --bg-sortbutton-color: var(--grey-1);
   --bg-dashboard-item: var(--grey-3);
-  --bg-searchbar: var(--grey-1);
+  --bg-searchbar: var(--grey-2);
   --bg-inputbox: var(--grey-2);
   --bg-dropdown-hover: var(--grey-3);
   --bg-webeditor-color: var(--ui-gray-warm-9);
@@ -489,7 +489,7 @@
   --sort-icon: var(--ui-gray-3);
   --border-checkbox: var(--ui-gray-5);
   --bg-checkbox: var(--white-color);
-  --border-searchbar: var(--ui-gray-5);
+  --border-searchbar: var(--grey-54);
   --bg-button-group: var(--white-color);
   --border-button-group: var(--ui-gray-5);
   --text-button-group: var(--ui-gray-9);
@@ -593,7 +593,7 @@
   --text-rzslider-color: var(--white-color);
   --text-rzslider-limit-color: var(--white-color);
   --text-pagination-color: var(--white-color);
-  --text-daterangepicker-end-date: var(--grey-7);
+  --text-daterangepicker-end-date: var(--ui-white);
   --text-daterangepicker-in-range: var(--white-color);
   --text-daterangepicker-active: var(--white-color);
   --text-ui-select-color: var(--white-color);

app/portainer/components/datatables/users-datatable/usersDatatable.html

@@ -39,29 +39,37 @@
           <thead>
             <tr>
               <th>
-                <span class="md-checkbox" ng-show="$ctrl.isAdmin">
-                  <input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" />
-                  <label for="select_all"></label>
-                </span>
-                <a ng-click="$ctrl.changeOrderBy('Username')">
-                  Name
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Username' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Username' && $ctrl.state.reverseOrder"></i>
-                </a>
+                <div class="vertical-center">
+                  <span class="md-checkbox" ng-show="$ctrl.isAdmin">
+                    <input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" />
+                    <label for="select_all"></label>
+                  </span>
+                  <table-column-header
+                    col-title="'Name'"
+                    can-sort="true"
+                    is-sorted="$ctrl.state.orderBy === 'Username'"
+                    is-sorted-desc="$ctrl.state.orderBy === 'Username' && $ctrl.state.reverseOrder"
+                    ng-click="$ctrl.changeOrderBy('Username')"
+                  ></table-column-header>
+                </div>
               </th>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('RoleName')">
-                  Role
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'RoleName' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'RoleName' && $ctrl.state.reverseOrder"></i>
-                </a>
+                <table-column-header
+                  col-title="'Role'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'RoleName'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'RoleName' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('RoleName')"
+                ></table-column-header>
               </th>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('AuthenticationMethod')">
-                  Authentication
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'AuthenticationMethod' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'AuthenticationMethod' && $ctrl.state.reverseOrder"></i>
-                </a>
+                <table-column-header
+                  col-title="'Authentication'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'AuthenticationMethod'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'AuthenticationMethod' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('AuthenticationMethod')"
+                ></table-column-header>
               </th>
             </tr>
           </thead>
@@ -79,10 +87,10 @@
                 <span ng-show="!$ctrl.isAdmin">{{ item.Username }}</span>
               </td>
               <td>
-                <span>
-                  <i class="fa fa-user-circle" aria-hidden="true" style="margin-right: 5px" ng-if="item.Role === 1 && !item.isTeamLeader"></i>
-                  <i class="fa fa-user-plus" aria-hidden="true" style="margin-right: 5px" ng-if="item.Role !== 1 && item.isTeamLeader"></i>
-                  <i class="fa fa-user" aria-hidden="true" style="margin-right: 5px" ng-if="item.Role !== 1 && !item.isTeamLeader"></i>
+                <span class="vertical-center">
+                  <pr-icon icon="'svg-usercircle'" ng-if="item.Role === 1 && !item.isTeamLeader"></pr-icon>
+                  <pr-icon icon="'user'" ng-if="item.Role !== 1 && item.isTeamLeader" feather="true"></pr-icon>
+                  <pr-icon icon="'user-plus'" ng-if="item.Role !== 1 && !item.isTeamLeader" feather="true"></pr-icon>
                   {{ item.RoleName ? item.RoleName : '-' }}
                 </span>
               </td>

app/portainer/views/init/admin/initAdmin.html

@@ -185,7 +185,7 @@
                 >
                 <span class="space-left vertical-center">
                   {{ formValues.BackupFile.name }}
-                  <pr-icon class="fa red-icon" icon="'x'" feather="true" ng-if="!formValues.BackupFile"></pr-icon>
+                  <pr-icon icon="'x-circle'" class-name="'icon-danger'" feather="true" ng-if="!formValues.BackupFile"></pr-icon>
                 </span>
               </div>
             </div>

app/portainer/views/teams/edit/team.html

@@ -69,11 +69,13 @@
             <thead>
               <tr>
                 <th>
-                  <a ng-click="orderUsers('Username')">
-                    Name
-                    <span ng-show="sortTypeUsers == 'Username' && !sortReverseUsers" class="glyphicon glyphicon-chevron-down"></span>
-                    <span ng-show="sortTypeUsers == 'Username' && sortReverseUsers" class="glyphicon glyphicon-chevron-up"></span>
-                  </a>
+                  <table-column-header
+                    col-title="'Name'"
+                    can-sort="true"
+                    is-sorted="sortTypeUsers === 'Username'"
+                    is-sorted-desc="sortTypeUsers === 'Username' && sortReverseUsers"
+                    ng-click="orderUsers('Username')"
+                  ></table-column-header>
                 </th>
               </tr>
             </thead>
@@ -83,10 +85,14 @@
                 dir-paginate="user in users | filter:state.filterUsers | orderBy:sortTypeUsers:sortReverseUsers | itemsPerPage: state.pagination_count_users"
               >
                 <td>
-                  {{ user.Username }}
-                  <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>
+                  <span class="vertical-center">
+                    {{ user.Username }}
+                    <span class="space-left vertical-center">
+                      <a class="hyperlink vertical-center" 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></span
+                  >
                 </td>
               </tr>
               <tr ng-if="!users">
@@ -139,18 +145,22 @@
             <thead>
               <tr>
                 <th>
-                  <a ng-click="orderGroupMembers('Username')">
-                    Name
-                    <span ng-show="sortTypeGroupMembers == 'Username' && !sortReverseGroupMembers" class="glyphicon glyphicon-chevron-down"></span>
-                    <span ng-show="sortTypeGroupMembers == 'Username' && sortReverseGroupMembers" class="glyphicon glyphicon-chevron-up"></span>
-                  </a>
+                  <table-column-header
+                    col-title="'Name'"
+                    can-sort="true"
+                    is-sorted="sortTypeGroupMembers === 'Username'"
+                    is-sorted-desc="sortTypeGroupMembers === 'Username' && sortReverseGroupMembers"
+                    ng-click="orderGroupMembers('Username')"
+                  ></table-column-header>
                 </th>
                 <th>
-                  <a ng-click="orderGroupMembers('TeamRole')">
-                    Team Role
-                    <span ng-show="sortTypeGroupMembers == 'TeamRole' && !sortReverseGroupMembers" class="glyphicon glyphicon-chevron-down"></span>
-                    <span ng-show="sortTypeGroupMembers == 'TeamRole' && sortReverseGroupMembers" class="glyphicon glyphicon-chevron-up"></span>
-                  </a>
+                  <table-column-header
+                    col-title="'Team Role'"
+                    can-sort="true"
+                    is-sorted="sortTypeGroupMembers === 'TeamRole'"
+                    is-sorted-desc="sortTypeGroupMembers === 'TeamRole' && sortReverseGroupMembers"
+                    ng-click="orderGroupMembers('TeamRole')"
+                  ></table-column-header>
                 </th>
               </tr>
             </thead>
@@ -160,23 +170,37 @@
                 dir-paginate="user in teamMembers | filter:state.filterGroupMembers | orderBy:sortTypeGroupMembers:sortReverseGroupMembers | itemsPerPage: state.pagination_count_groupMembers"
               >
                 <td>
-                  {{ user.Username }}
-                  <span class="space-left" ng-if="isAdmin || user.TeamRole === 'Member'">
-                    <a ng-click="removeUser(user)" ng-class="{ 'btn disabled py-0': settings.TeamSync }">
-                      <pr-icon icon="'minus-circle'" feather="true" size="'sm'"></pr-icon> Remove
-                    </a>
-                  </span>
+                  <span class="vertical-center"
+                    >{{ user.Username }}
+                    <span class="space-left vertical-center" ng-if="isAdmin || user.TeamRole === 'Member'">
+                      <a class="hyperlink vertical-center" ng-click="removeUser(user)" ng-class="{ 'btn disabled py-0': settings.TeamSync }">
+                        <pr-icon icon="'minus-circle'" feather="true" size="'sm'"></pr-icon> Remove
+                      </a>
+                    </span></span
+                  >
                 </td>
                 <td>
-                  <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 class="vertical-center"
+                    ><pr-icon ng-if="user.TeamRole === 'Leader'" icon="'user-plus'" feather="true" size="'sm'"></pr-icon>
+                    <pr-icon ng-if="user.TeamRole === 'Member'" icon="'user'" feather="true" size="'sm'"></pr-icon>
+                    {{ user.TeamRole }}</span
+                  >
                   <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
+                      class="space-left hyperlink vertical-center"
+                      ng-click="promoteToLeader(user)"
+                      ng-if="user.TeamRole === 'Member'"
+                      ng-class="{ 'btn disabled py-0': settings.TeamSync }"
+                    >
+                      <pr-icon icon="'user-plus'" feather="true" 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
+                      class="space-left hyperlink vertical-center"
+                      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" size="'sm'"></pr-icon> Member
                     </a>
                   </span>
                 </td>

app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardDocker/APITab/TLSFieldset.tsx

@@ -17,6 +17,7 @@ export function TLSFieldset() {
         <div className="col-sm-12">
           <SwitchField
             label="TLS"
+            labelClass="col-sm-3 col-lg-2"
             checked={values.tls}
             onChange={(checked) => setFieldValue('tls', checked)}
           />