From 88757d26176f2482978c8d02ab379111d6e21b61 Mon Sep 17 00:00:00 2001
From: Rex Wang <109048808+RexWangPT@users.noreply.github.com>
Date: Thu, 1 Sep 2022 19:02:21 +0800
Subject: [PATCH] fix(docker): style fixes [EE-4024] (#7569)

* EE-4042 update docker screens trash icon

* EE-4024 fix(docker): change styles
---
 .../views/configs/create/createconfig.html    | 20 +++++----
 .../views/networks/create/createnetwork.html  | 26 ++++++------
 .../views/secrets/create/createsecret.html    | 16 ++++---
 .../views/services/create/createservice.html  | 42 +++++++++----------
 .../services/create/includes/config.html      |  4 +-
 .../create/includes/resources-placement.html  |  8 ++--
 .../services/create/includes/secret.html      |  4 +-
 .../views/services/edit/includes/configs.html |  4 +-
 .../services/edit/includes/constraints.html   |  4 +-
 .../edit/includes/containerlabels.html        |  4 +-
 .../views/services/edit/includes/hosts.html   |  4 +-
 .../views/services/edit/includes/logging.html |  4 +-
 .../views/services/edit/includes/mounts.html  |  4 +-
 .../services/edit/includes/networks.html      |  4 +-
 .../edit/includes/placementPreferences.html   |  4 +-
 .../views/services/edit/includes/ports.html   |  4 +-
 .../views/services/edit/includes/secrets.html |  4 +-
 .../services/edit/includes/servicelabels.html |  4 +-
 ...nvironment-variables-simple-mode-item.html |  4 +-
 .../git-form-additional-file-item.html        |  4 +-
 20 files changed, 90 insertions(+), 82 deletions(-)

diff --git a/app/docker/views/configs/create/createconfig.html b/app/docker/views/configs/create/createconfig.html
index d244cff9f..935e843ee 100644
--- a/app/docker/views/configs/create/createconfig.html
+++ b/app/docker/views/configs/create/createconfig.html
@@ -28,26 +28,28 @@
           <!-- !config-data -->
           <!-- labels -->
           <div class="form-group">
-            <div class="col-sm-12" style="margin-top: 5px">
-              <label class="control-label text-left">Labels</label>
-              <span class="label label-default interactive" style="margin-left: 10px" ng-click="ctrl.addLabel()">
+            <div class="col-sm-12 mt-1">
+              <label class="control-label text-left space-right">Labels</label>
+              <span class="label label-default interactive vertical-center space-left" ng-click="ctrl.addLabel()">
                 <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> add label
               </span>
             </div>
             <!-- labels-input-list -->
-            <div class="col-sm-12 form-inline" style="margin-top: 10px">
-              <div ng-repeat="label in ctrl.formValues.Labels" style="margin-top: 2px">
+            <div class="col-sm-12 form-inline mt-2">
+              <div ng-repeat="label in ctrl.formValues.Labels" class="mt-1">
                 <div class="input-group col-sm-5 input-group-sm">
                   <span class="input-group-addon">name</span>
                   <input type="text" class="form-control" ng-model="label.name" placeholder="e.g. com.example.foo" />
                 </div>
-                <div class="input-group col-sm-5 input-group-sm">
+                <div class="input-group col-sm-6 input-group-sm">
                   <span class="input-group-addon">value</span>
                   <input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar" />
+                  <span class="input-group-btn">
+                    <button class="btn btn-dangerlight" type="button" ng-click="ctrl.removeLabel($index)">
+                      <pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
+                    </button>
+                  </span>
                 </div>
-                <button class="btn btn-light" type="button" ng-click="ctrl.removeLabel($index)">
-                  <pr-icon icon="'trash-2'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon>
-                </button>
               </div>
             </div>
             <!-- !labels-input-list -->
diff --git a/app/docker/views/networks/create/createnetwork.html b/app/docker/views/networks/create/createnetwork.html
index a6cc2368e..c6cecaae4 100644
--- a/app/docker/views/networks/create/createnetwork.html
+++ b/app/docker/views/networks/create/createnetwork.html
@@ -40,13 +40,15 @@
                   <span class="input-group-addon">name</span>
                   <input type="text" class="form-control" ng-model="option.name" placeholder="e.g. com.docker.network.bridge.enable_icc" />
                 </div>
-                <div class="input-group col-sm-5 input-group-sm">
+                <div class="input-group col-sm-6 input-group-sm">
                   <span class="input-group-addon">value</span>
                   <input type="text" class="form-control" ng-model="option.value" placeholder="e.g. true" />
+                  <span class="input-group-btn">
+                    <button class="btn btn-dangerlight" type="button" ng-click="removeDriverOption($index)">
+                      <pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
+                    </button>
+                  </span>
                 </div>
-                <button class="btn btn-sm btn-light" type="button" ng-click="removeDriverOption($index)">
-                  <pr-icon icon="'trash-2'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon>
-                </button>
               </div>
               <div class="small interactive text-muted vertical-center mt-1" ng-click="addDriverOption()">
                 <pr-icon icon="'plus'" size="'md'" feather="true"></pr-icon> Add driver option
@@ -91,8 +93,8 @@
                   placeholder="e.g. my-router=172.20.10.129"
                 />
               </div>
-              <button class="btn btn-md btn-light" type="button" ng-click="removeIPV4AuxAddress($index)">
-                <pr-icon icon="'trash-2'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon>
+              <button class="btn btn-dangerlight" type="button" ng-click="removeIPV4AuxAddress($index)">
+                <pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
               </button>
               <div class="col-sm-12 small text-warning" ng-if="state.IPV4AuxiliaryAddressesError[$index]">
                 <p class="vertical-center"> <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Exclude ip cannot be the same as gateway.</p>
@@ -138,8 +140,8 @@
                   placeholder="e.g. my-router=2001:db8::1"
                 />
               </div>
-              <button class="btn btn-md btn-light" type="button" ng-click="removeIPV6AuxAddress($index)">
-                <pr-icon icon="'trash-2'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon>
+              <button class="btn btn-dangerlight" type="button" ng-click="removeIPV6AuxAddress($index)">
+                <pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
               </button>
               <div class="col-sm-12 small text-warning" ng-show="state.IPV6AuxiliaryAddressesError[$index]">
                 <p class="vertical-center"> <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Exclude ip cannot be the same as gateway.</p>
@@ -162,13 +164,13 @@
                   <span class="input-group-addon">name</span>
                   <input type="text" class="form-control" ng-model="label.key" placeholder="e.g. com.example.foo" />
                 </div>
-                <div class="input-group col-sm-5 input-group-sm">
+                <div class="input-group col-sm-6 input-group-sm">
                   <span class="input-group-addon">value</span>
                   <input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar" />
+                  <span class="input-group-btn">
+                    <button class="btn btn-dangerlight" type="button" ng-click="removeLabel($index)"> <pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon> </button
+                  ></span>
                 </div>
-                <button class="btn btn-sm btn-light" type="button" ng-click="removeLabel($index)">
-                  <pr-icon icon="'trash-2'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon>
-                </button>
               </div>
               <div class="form-group">
                 <div class="col-sm-12 small interactive text-muted vertical-center mt-1" ng-click="addLabel()">
diff --git a/app/docker/views/secrets/create/createsecret.html b/app/docker/views/secrets/create/createsecret.html
index 67e58324e..32660500d 100644
--- a/app/docker/views/secrets/create/createsecret.html
+++ b/app/docker/views/secrets/create/createsecret.html
@@ -37,8 +37,10 @@
           <!-- labels -->
           <div class="form-group">
             <div class="col-sm-12 mt-1">
-              <label class="control-label text-left">Labels</label>
-              <span class="label label-default interactive space-left" ng-click="addLabel()"> <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> add label </span>
+              <label class="control-label text-left space-right">Labels</label>
+              <span class="label label-default interactive vertical-center space-left" ng-click="addLabel()">
+                <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> add label
+              </span>
             </div>
             <!-- labels-input-list -->
             <div class="col-sm-12 form-inline mt-2">
@@ -47,13 +49,15 @@
                   <span class="input-group-addon">name</span>
                   <input type="text" class="form-control" ng-model="label.key" placeholder="e.g. com.example.foo" />
                 </div>
-                <div class="input-group col-sm-5 input-group-sm">
+                <div class="input-group col-sm-6 input-group-sm">
                   <span class="input-group-addon">value</span>
                   <input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar" />
+                  <span class="input-group-btn">
+                    <button class="btn btn-dangerlight" type="button" ng-click="removeLabel($index)">
+                      <pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
+                    </button>
+                  </span>
                 </div>
-                <button class="btn btn-dangerlight btn-only-icon" type="button" ng-click="removeLabel($index)">
-                  <pr-icon icon="'trash-2'" feather="true"></pr-icon>
-                </button>
               </div>
             </div>
             <!-- !labels-input-list -->
diff --git a/app/docker/views/services/create/createservice.html b/app/docker/views/services/create/createservice.html
index 07f43648f..a537f7d2e 100644
--- a/app/docker/views/services/create/createservice.html
+++ b/app/docker/views/services/create/createservice.html
@@ -50,12 +50,12 @@
           <div class="form-group">
             <div class="col-sm-12" style="margin-top: 5px">
               <label class="control-label text-left">Port mapping</label>
-              <span class="label label-default interactive" style="margin-left: 10px" ng-click="addPortBinding()">
+              <span class="label label-default interactive vertical-center" style="margin-left: 10px" ng-click="addPortBinding()">
                 <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> map additional port
               </span>
             </div>
-            <div class="col-sm-12 form-inline" style="margin-top: 10px">
-              <div ng-repeat="portBinding in formValues.Ports" style="margin-top: 2px">
+            <div class="col-sm-12 form-inline mt-2">
+              <div ng-repeat="portBinding in formValues.Ports" class="mt-1">
                 <!-- host-port -->
                 <div class="input-group col-sm-3 input-group-sm">
                   <span class="input-group-addon">host</span>
@@ -81,8 +81,8 @@
                     <label class="btn btn-light" ng-model="portBinding.PublishMode" uib-btn-radio="'ingress'">Ingress</label>
                     <label class="btn btn-light" ng-model="portBinding.PublishMode" uib-btn-radio="'host'">Host</label>
                   </div>
-                  <button class="btn btn-sm btn-danger" type="button" ng-click="removePortBinding($index)">
-                    <pr-icon icon="'trash-2'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon>
+                  <button class="btn btn-dangerlight" type="button" ng-click="removePortBinding($index)">
+                    <pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
                   </button>
                 </div>
                 <!-- !protocol-actions -->
@@ -205,7 +205,7 @@
               <!-- !logging-driver -->
               <!-- logging-opts -->
               <div class="form-group">
-                <div class="col-sm-12" style="margin-top: 5px">
+                <div class="col-sm-12 mt-1">
                   <label class="control-label text-left">
                     Options
                     <portainer-tooltip
@@ -214,7 +214,7 @@
                     ></portainer-tooltip>
                   </label>
                   <span
-                    class="label label-default interactive"
+                    class="label label-default interactive vertical-center"
                     style="margin-left: 10px"
                     ng-click="!formValues.LogDriverName || formValues.LogDriverName === 'none' || addLogDriverOpt(formValues.LogDriverName)"
                   >
@@ -222,8 +222,8 @@
                   </span>
                 </div>
                 <!-- logging-opts-input-list -->
-                <div class="col-sm-12 form-inline" style="margin-top: 10px">
-                  <div ng-repeat="opt in formValues.LogDriverOpts" style="margin-top: 2px">
+                <div class="col-sm-12 form-inline mt-2">
+                  <div ng-repeat="opt in formValues.LogDriverOpts" class="mt-1">
                     <div class="input-group col-sm-5 input-group-sm">
                       <span class="input-group-addon">option</span>
                       <input type="text" class="form-control" ng-model="opt.name" placeholder="e.g. FOO" />
@@ -232,8 +232,8 @@
                       <span class="input-group-addon">value</span>
                       <input type="text" class="form-control" ng-model="opt.value" placeholder="e.g. bar" />
                     </div>
-                    <button class="btn btn-sm btn-light" type="button" ng-click="removeLogDriverOpt($index)">
-                      <pr-icon icon="'trash-2'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon>
+                    <button class="btn btn-dangerlight" type="button" ng-click="removeLogDriverOpt($index)">
+                      <pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
                     </button>
                   </div>
                 </div>
@@ -277,8 +277,8 @@
                             <label class="btn btn-light" ng-model="volume.Type" uib-btn-radio="'volume'" ng-click="volume.Source = null">Volume</label>
                             <label class="btn btn-light" ng-model="volume.Type" uib-btn-radio="'bind'" ng-click="volume.Source = null">Bind</label>
                           </div>
-                          <button class="btn btn-sm btn-light" type="button" ng-click="removeVolume($index)">
-                            <pr-icon icon="'trash-2'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon>
+                          <button class="btn btn-dangerlight" type="button" ng-click="removeVolume($index)">
+                            <pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
                           </button>
                         </div>
                         <!-- !volume-type -->
@@ -366,8 +366,8 @@
                       <option selected disabled hidden value="">Select a network</option>
                       <option ng-repeat="net in availableNetworks" ng-value="net.Name">{{ net.Name }}</option>
                     </select>
-                    <button class="btn btn-sm btn-light" type="button" ng-click="removeExtraNetwork($index)">
-                      <pr-icon icon="'trash-2'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon>
+                    <button class="btn btn-dangerlight" type="button" ng-click="removeExtraNetwork($index)">
+                      <pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
                     </button>
                   </div>
                 </div>
@@ -389,8 +389,8 @@
                       <span class="input-group-addon">value</span>
                       <input type="text" class="form-control" ng-model="variable.value" placeholder="e.g. host:IP" />
                     </div>
-                    <button class="btn btn-sm btn-light" type="button" ng-click="removeHostsEntry($index)">
-                      <pr-icon icon="'trash-2'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon>
+                    <button class="btn btn-dangerlight" type="button" ng-click="removeHostsEntry($index)">
+                      <pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
                     </button>
                   </div>
                 </div>
@@ -431,8 +431,8 @@
                       <span class="input-group-addon">value</span>
                       <input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar" />
                     </div>
-                    <button class="btn btn-sm btn-light" type="button" ng-click="removeLabel($index)">
-                      <pr-icon icon="'trash-2'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon>
+                    <button class="btn btn-dangerlight" type="button" ng-click="removeLabel($index)">
+                      <pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
                     </button>
                   </div>
                 </div>
@@ -458,8 +458,8 @@
                       <span class="input-group-addon">value</span>
                       <input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar" />
                     </div>
-                    <button class="btn btn-sm btn-light" type="button" ng-click="removeContainerLabel($index)">
-                      <pr-icon icon="'trash-2'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon>
+                    <button class="btn btn-dangerlight" type="button" ng-click="removeContainerLabel($index)">
+                      <pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
                     </button>
                   </div>
                 </div>
diff --git a/app/docker/views/services/create/includes/config.html b/app/docker/views/services/create/includes/config.html
index c0350786c..f8cde6a96 100644
--- a/app/docker/views/services/create/includes/config.html
+++ b/app/docker/views/services/create/includes/config.html
@@ -24,8 +24,8 @@
           <span class="input-group-addon">Path in container</span>
           <input class="form-control" ng-model="config.FileName" placeholder="e.g. /path/in/container" />
         </div>
-        <button class="btn btn-sm btn-light" type="button" ng-click="removeConfig($index)">
-          <pr-icon icon="'trash-2'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon>
+        <button class="btn btn-dangerlight" type="button" ng-click="removeConfig($index)">
+          <pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
         </button>
       </div>
     </div>
diff --git a/app/docker/views/services/create/includes/resources-placement.html b/app/docker/views/services/create/includes/resources-placement.html
index e8405bed2..90056a42c 100644
--- a/app/docker/views/services/create/includes/resources-placement.html
+++ b/app/docker/views/services/create/includes/resources-placement.html
@@ -75,8 +75,8 @@
           <span class="input-group-addon">value</span>
           <input type="text" class="form-control" ng-model="constraint.value" placeholder="e.g. manager" />
         </div>
-        <button class="btn btn-sm btn-light" type="button" ng-click="removePlacementConstraint($index)">
-          <pr-icon icon="'trash-2'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon>
+        <button class="btn btn-dangerlight" type="button" ng-click="removePlacementConstraint($index)">
+          <pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
         </button>
       </div>
     </div>
@@ -100,8 +100,8 @@
           <span class="input-group-addon">value</span>
           <input type="text" class="form-control" ng-model="preference.value" placeholder="e.g. node.labels.datacenter" />
         </div>
-        <button class="btn btn-sm btn-light" type="button" ng-click="removePlacementPreference($index)">
-          <pr-icon icon="'trash-2'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon>
+        <button class="btn btn-dangerlight" type="button" ng-click="removePlacementPreference($index)">
+          <pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
         </button>
       </div>
     </div>
diff --git a/app/docker/views/services/create/includes/secret.html b/app/docker/views/services/create/includes/secret.html
index 42e0af3ae..a6658a000 100644
--- a/app/docker/views/services/create/includes/secret.html
+++ b/app/docker/views/services/create/includes/secret.html
@@ -35,8 +35,8 @@
             <label class="btn btn-light" ng-model="secret.overrideTarget" uib-btn-radio="false">Default location</label>
             <label class="btn btn-light" ng-model="secret.overrideTarget" uib-btn-radio="true">Override</label>
           </div>
-          <button class="btn btn-sm btn-light" type="button" ng-click="removeSecret($index)">
-            <pr-icon icon="'trash-2'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon>
+          <button class="btn btn-dangerlight" type="button" ng-click="removeSecret($index)">
+            <pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
           </button>
         </div>
       </div>
diff --git a/app/docker/views/services/edit/includes/configs.html b/app/docker/views/services/edit/includes/configs.html
index dac731f04..bddcd0a41 100644
--- a/app/docker/views/services/edit/includes/configs.html
+++ b/app/docker/views/services/edit/includes/configs.html
@@ -39,8 +39,8 @@
             <td>{{ config.Gid }}</td>
             <td>{{ config.Mode }}</td>
             <td authorization="DockerServiceUpdate">
-              <button class="btn btn-xs btn-light pull-right" type="button" ng-click="removeConfig(service, $index)" ng-disabled="isUpdating">
-                <pr-icon icon="'trash-2'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon> Remove config
+              <button class="btn btn-dangerlight pull-right" type="button" ng-click="removeConfig(service, $index)" ng-disabled="isUpdating">
+                <pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
               </button>
             </td>
           </tr>
diff --git a/app/docker/views/services/edit/includes/constraints.html b/app/docker/views/services/edit/includes/constraints.html
index ab4e4a227..d34c7717d 100644
--- a/app/docker/views/services/edit/includes/constraints.html
+++ b/app/docker/views/services/edit/includes/constraints.html
@@ -61,8 +61,8 @@
                   disable-authorization="DockerServiceUpdate"
                 />
                 <span class="input-group-btn" authorization="DockerServiceUpdate">
-                  <button class="btn btn-sm btn-light" type="button" ng-click="removePlacementConstraint(service, $index)" ng-disabled="isUpdating">
-                    <pr-icon icon="'trash-2'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon>
+                  <button class="btn btn-dangerlight" type="button" ng-click="removePlacementConstraint(service, $index)" ng-disabled="isUpdating">
+                    <pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
                   </button>
                 </span>
               </div>
diff --git a/app/docker/views/services/edit/includes/containerlabels.html b/app/docker/views/services/edit/includes/containerlabels.html
index 145735afc..e47f32342 100644
--- a/app/docker/views/services/edit/includes/containerlabels.html
+++ b/app/docker/views/services/edit/includes/containerlabels.html
@@ -47,8 +47,8 @@
                   disable-authorization="DockerServiceUpdate"
                 />
                 <span class="input-group-btn" authorization="DockerServiceUpdate">
-                  <button class="btn btn-sm btn-light" type="button" ng-click="removeContainerLabel(service, $index)" ng-disabled="isUpdating">
-                    <pr-icon icon="'trash-2'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon>
+                  <button class="btn btn-dangerlight" type="button" ng-click="removeContainerLabel(service, $index)" ng-disabled="isUpdating">
+                    <pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
                   </button>
                 </span>
               </div>
diff --git a/app/docker/views/services/edit/includes/hosts.html b/app/docker/views/services/edit/includes/hosts.html
index 1e3823343..b467eab58 100644
--- a/app/docker/views/services/edit/includes/hosts.html
+++ b/app/docker/views/services/edit/includes/hosts.html
@@ -45,8 +45,8 @@
                   disable-authorization="DockerServiceUpdate"
                 />
                 <span class="input-group-btn" authorization="DockerServiceUpdate">
-                  <button class="btn btn-sm btn-light" type="button" ng-click="removeHostsEntry(service, $index)" ng-disabled="isUpdating">
-                    <pr-icon icon="'trash-2'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon>
+                  <button class="btn btn-dangerlight" type="button" ng-click="removeHostsEntry(service, $index)" ng-disabled="isUpdating">
+                    <pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
                   </button>
                 </span>
               </div>
diff --git a/app/docker/views/services/edit/includes/logging.html b/app/docker/views/services/edit/includes/logging.html
index 91a38b227..71f5a0c07 100644
--- a/app/docker/views/services/edit/includes/logging.html
+++ b/app/docker/views/services/edit/includes/logging.html
@@ -41,8 +41,8 @@
                   disable-authorization="DockerServiceUpdate"
                 />
                 <span class="input-group-btn" authorization="DockerServiceUpdate">
-                  <button class="btn btn-sm btn-light" type="button" ng-click="removeLogDriverOpt(service, $index)" ng-disabled="isUpdating">
-                    <pr-icon icon="'trash-2'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon>
+                  <button class="btn btn-dangerlight" type="button" ng-click="removeLogDriverOpt(service, $index)" ng-disabled="isUpdating">
+                    <pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
                   </button>
                 </span>
               </div>
diff --git a/app/docker/views/services/edit/includes/mounts.html b/app/docker/views/services/edit/includes/mounts.html
index d4b625ddb..bf8506d84 100644
--- a/app/docker/views/services/edit/includes/mounts.html
+++ b/app/docker/views/services/edit/includes/mounts.html
@@ -80,8 +80,8 @@
             </td>
             <td authorization="DockerServiceUpdate">
               <span class="input-group-btn">
-                <button class="btn btn-sm btn-light" type="button" ng-click="removeMount(service, $index)" ng-disabled="isUpdating">
-                  <pr-icon icon="'trash-2'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon>
+                <button class="btn btn-dangerlight" type="button" ng-click="removeMount(service, $index)" ng-disabled="isUpdating">
+                  <pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
                 </button>
               </span>
             </td>
diff --git a/app/docker/views/services/edit/includes/networks.html b/app/docker/views/services/edit/includes/networks.html
index 28995a7b3..a63ad5f23 100644
--- a/app/docker/views/services/edit/includes/networks.html
+++ b/app/docker/views/services/edit/includes/networks.html
@@ -44,8 +44,8 @@
             </td>
             <td ng-if="network.Editable" authorization="DockerServiceUpdate">
               <span class="input-group-btn">
-                <button class="btn btn-sm btn-light" type="button" ng-click="removeNetwork(service, $index)" ng-disabled="isUpdating">
-                  <pr-icon icon="'trash-2'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon>
+                <button class="btn btn-dangerlight" type="button" ng-click="removeNetwork(service, $index)" ng-disabled="isUpdating">
+                  <pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
                 </button>
               </span>
             </td>
diff --git a/app/docker/views/services/edit/includes/placementPreferences.html b/app/docker/views/services/edit/includes/placementPreferences.html
index 08b82592e..6c156a33c 100644
--- a/app/docker/views/services/edit/includes/placementPreferences.html
+++ b/app/docker/views/services/edit/includes/placementPreferences.html
@@ -45,8 +45,8 @@
                   disable-authorization="DockerServiceUpdate"
                 />
                 <span class="input-group-btn" authorization="DockerServiceUpdate">
-                  <button class="btn btn-sm btn-light" type="button" ng-click="removePlacementPreference(service, $index)" ng-disabled="isUpdating">
-                    <pr-icon icon="'trash-2'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon>
+                  <button class="btn btn-dangerlight" type="button" ng-click="removePlacementPreference(service, $index)" ng-disabled="isUpdating">
+                    <pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
                   </button>
                 </span>
               </div>
diff --git a/app/docker/views/services/edit/includes/ports.html b/app/docker/views/services/edit/includes/ports.html
index 23d565fbc..69cc8d176 100644
--- a/app/docker/views/services/edit/includes/ports.html
+++ b/app/docker/views/services/edit/includes/ports.html
@@ -81,8 +81,8 @@
             </td>
             <td authorization="DockerServiceUpdate">
               <span class="input-group-btn">
-                <button class="btn btn-light" type="button" ng-click="removePortPublishedBinding(service, $index)" ng-disabled="isUpdating">
-                  <pr-icon icon="'trash-2'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon>
+                <button class="btn btn-dangerlight" type="button" ng-click="removePortPublishedBinding(service, $index)" ng-disabled="isUpdating">
+                  <pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
                 </button>
               </span>
             </td>
diff --git a/app/docker/views/services/edit/includes/secrets.html b/app/docker/views/services/edit/includes/secrets.html
index 336ba1f6c..bd1b116d5 100644
--- a/app/docker/views/services/edit/includes/secrets.html
+++ b/app/docker/views/services/edit/includes/secrets.html
@@ -38,8 +38,8 @@
             <td>{{ secret.Gid }}</td>
             <td>{{ secret.Mode }}</td>
             <td authorization="DockerServiceUpdate">
-              <button class="btn btn-xs btn-light pull-right" type="button" ng-click="removeSecret(service, $index)" ng-disabled="isUpdating">
-                <pr-icon icon="'trash-2'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon> Remove secret
+              <button class="btn btn-dangerlight pull-right" type="button" ng-click="removeSecret(service, $index)" ng-disabled="isUpdating">
+                <pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
               </button>
             </td>
           </tr>
diff --git a/app/docker/views/services/edit/includes/servicelabels.html b/app/docker/views/services/edit/includes/servicelabels.html
index dbdd784fb..5bb456617 100644
--- a/app/docker/views/services/edit/includes/servicelabels.html
+++ b/app/docker/views/services/edit/includes/servicelabels.html
@@ -47,8 +47,8 @@
                   disable-authorization="DockerServiceUpdate"
                 />
                 <span class="input-group-btn" authorization="DockerServiceUpdate">
-                  <button class="btn btn-sm btn-light" type="button" ng-click="removeLabel(service, $index)" ng-disabled="isUpdating">
-                    <pr-icon icon="'trash-2'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon>
+                  <button class="btn btn-dangerlight" type="button" ng-click="removeLabel(service, $index)" ng-disabled="isUpdating">
+                    <pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
                   </button>
                 </span>
               </div>
diff --git a/app/portainer/components/environment-variables-panel/environment-variables-simple-mode/environment-variables-simple-mode-item/environment-variables-simple-mode-item.html b/app/portainer/components/environment-variables-panel/environment-variables-simple-mode/environment-variables-simple-mode-item/environment-variables-simple-mode-item.html
index ee6fa1046..329a0787f 100644
--- a/app/portainer/components/environment-variables-panel/environment-variables-simple-mode/environment-variables-simple-mode-item/environment-variables-simple-mode-item.html
+++ b/app/portainer/components/environment-variables-panel/environment-variables-simple-mode/environment-variables-simple-mode-item/environment-variables-simple-mode-item.html
@@ -54,8 +54,8 @@
     <button class="btn btn-sm btn-light" type="button" ng-if="!$ctrl.hasValue()" ng-click="$ctrl.onChangeValue('')">
       <pr-icon icon="'plus'" feather="true"></pr-icon> Add value
     </button>
-    <button class="btn btn-light" type="button" ng-click="$ctrl.onRemove($ctrl.index)">
-      <pr-icon icon="'trash-2'" feather="true"></pr-icon>
+    <button class="btn btn-dangerlight" type="button" ng-click="$ctrl.onRemove($ctrl.index)">
+      <pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
     </button>
   </div>
 </ng-form>
diff --git a/app/portainer/components/forms/git-form/git-form-additional-files-panel/git-form-additional-file-item/git-form-additional-file-item.html b/app/portainer/components/forms/git-form/git-form-additional-files-panel/git-form-additional-file-item/git-form-additional-file-item.html
index 6c0c4d2f6..72d5ffec5 100644
--- a/app/portainer/components/forms/git-form/git-form-additional-files-panel/git-form-additional-file-item/git-form-additional-file-item.html
+++ b/app/portainer/components/forms/git-form/git-form-additional-files-panel/git-form-additional-file-item/git-form-additional-file-item.html
@@ -13,8 +13,8 @@
           required
         />
       </div>
-      <button class="btn btn-sm btn-dangerlight btn-only-icon" type="button" ng-click="$ctrl.removeValue()" title="Remove">
-        <pr-icon icon="'trash-2'" size="'md'" feather="true"></pr-icon>
+      <button class="btn btn-dangerlight" type="button" ng-click="$ctrl.removeValue()" title="Remove">
+        <pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
       </button>
     </div>
     <div ng-show="$ctrl[$ctrl.formName].name.$invalid">