feat(container): container detail page as well as some icon changes [EE-3493] (#7361)

app/docker/components/datatables/container-networks-datatable/containerNetworksDatatable.html

@@ -61,12 +61,14 @@
               <td authorization="DockerNetworkDisconnect">
                 <button
                   type="button"
-                  class="btn btn-xs btn-danger"
+                  class="btn btn-xs btn-dangerlight h-fit vertical-center !ml-0"
                   ng-disabled="$ctrl.leaveNetworkActionInProgress || $ctrl.container.IsPortainer"
                   button-spinner="$ctrl.leaveNetworkActionInProgress"
                   ng-click="$ctrl.leaveNetworkAction($ctrl.container, key)"
                 >
-                  <span ng-hide="$ctrl.leaveNetworkActionInProgress"><i class="fa fa-trash-alt space-right" aria-hidden="true"></i> Leave network</span>
+                  <span ng-hide="$ctrl.leaveNetworkActionInProgress"
+                    ><pr-icon icon="'trash-2'" feather="true" mode="'danger'" class-name="'icon-secondary icon-md'"></pr-icon> Leave network</span
+                  >
                   <span ng-show="$ctrl.leaveNetworkActionInProgress">Leaving network...</span>
                 </button>
               </td>

app/docker/views/containers/edit/container.html

@@ -72,7 +72,9 @@
               <td>Name</td>
               <td ng-if="!container.edit">
                 {{ container.Name | trimcontainername }}
-                <a authorization="DockerContainerRename" href="" data-toggle="tooltip" title="Edit container name" ng-click="container.edit = true;"><i class="fa fa-edit"></i></a>
+                <a authorization="DockerContainerRename" href="" data-toggle="tooltip" title="Edit container name" ng-click="container.edit = true;"
+                  ><pr-icon icon="'edit'" feather="true" className="'space-right'"></pr-icon
+                ></a>
               </td>
               <td ng-if="container.edit">
                 <form ng-submit="renameContainer()">
@@ -125,19 +127,19 @@
               <td colspan="2">
                 <div class="btn-group" role="group" aria-label="...">
                   <a authorization="DockerContainerLogs" class="btn" type="button" ui-sref="docker.containers.container.logs({ id: container.Id })"
-                    ><i class="fa fa-file-alt space-right" aria-hidden="true"></i>Logs</a
+                    ><pr-icon icon="'file-text'" feather="true" className="'space-right'"></pr-icon>Logs</a
                   >
                   <a authorization="DockerContainerInspect" class="btn" type="button" ui-sref="docker.containers.container.inspect({ id: container.Id })"
-                    ><i class="fa fa-info-circle space-right" aria-hidden="true"></i>Inspect</a
+                    ><pr-icon icon="'info'" feather="true" className="'space-right'"></pr-icon>Inspect</a
                   >
                   <a authorization="DockerContainerStats" class="btn" type="button" ui-sref="docker.containers.container.stats({ id: container.Id })"
-                    ><i class="fa fa-chart-area space-right" aria-hidden="true"></i>Stats</a
+                    ><pr-icon icon="'bar-chart'" feather="true" className="'space-right'"></pr-icon>Stats</a
                   >
                   <a authorization="DockerExecStart" class="btn" type="button" ui-sref="docker.containers.container.exec({ id: container.Id })"
-                    ><i class="fa fa-terminal space-right" aria-hidden="true"></i>Console</a
+                    ><pr-icon icon="'terminal'" feather="true" className="'space-right'"></pr-icon>Console</a
                   >
                   <a authorization="DockerContainerAttach" class="btn" type="button" ui-sref="docker.containers.container.attach({ id: container.Id })"
-                    ><i class="fa fa-plug space-right" aria-hidden="true"></i>Attach</a
+                    ><pr-icon icon="'paperclip'" feather="true" className="'space-right'"></pr-icon>Attach</a
                   >
                 </div>
               </td>

app/portainer/components/environment-variables-panel/environment-variables-simple-mode/environment-variables-simple-mode.html

@@ -17,7 +17,7 @@
       ngf-max-size="1MB"
       ngf-model-invalid="errorFile"
     >
-      <pr-icon icon="'upload'" feather="true"></pr-icon>
+      <pr-icon icon="'upload'" feather="true"></pr-icon> Load variables from .env file
     </button>
     <span class="space-left" ng-if="errorFile.$error == 'maxSize'">
       <i class="fa fa-times red-icon space-right" aria-hidden="true"></i>

app/react/docker/networks/ItemView/NetworkContainersTable.tsx

@@ -1,5 +1,6 @@
 import { Authorized } from '@/portainer/hooks/useUser';
 import { EnvironmentId } from '@/portainer/environments/types';
+import { Icon } from '@/react/components/Icon';
 
 import { Table, TableContainer, TableTitle } from '@@/datatables';
 import { DetailsTable } from '@@/DetailsTable';
@@ -68,7 +69,7 @@ export function NetworkContainersTable({
                       <Button
                         data-cy={`networkDetails-disconnect${container.Name}`}
                         size="xsmall"
-                        color="danger"
+                        color="dangerlight"
                         onClick={() => {
                           if (container.Id) {
                             disconnectContainer.mutate({
@@ -79,9 +80,10 @@ export function NetworkContainersTable({
                           }
                         }}
                       >
-                        <i
+                        <Icon
-                          className="fa fa-trash-alt space-right"
+                          icon="trash-2"
-                          aria-hidden="true"
+                          feather
+                          class-name="icon-secondary icon-md"
                         />
                         Leave Network
                       </Button>