From 46fba176f0899c805bcf84b97c77bdc7a203a2c6 Mon Sep 17 00:00:00 2001
From: Rex Wang <109048808+RexWangPT@users.noreply.github.com>
Date: Thu, 4 Aug 2022 22:05:27 +0800
Subject: [PATCH] EE-3846 fix alignment of left-hand side of fields (#7413)

---
 .../views/secrets/create/createsecret.html    | 24 +++++++++----------
 .../swarm/visualizer/swarmvisualizer.html     |  2 +-
 2 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/app/docker/views/secrets/create/createsecret.html b/app/docker/views/secrets/create/createsecret.html
index f684e21a1..7083725c2 100644
--- a/app/docker/views/secrets/create/createsecret.html
+++ b/app/docker/views/secrets/create/createsecret.html
@@ -7,16 +7,16 @@
         <form class="form-horizontal">
           <!-- name-input -->
           <div class="form-group">
-            <label for="secret_name" class="col-sm-1 control-label text-left">Name</label>
-            <div class="col-sm-11">
+            <label for="secret_name" class="col-sm-2 control-label text-left">Name</label>
+            <div class="col-sm-10">
               <input type="text" class="form-control" ng-model="formValues.Name" id="secret_name" placeholder="e.g. mySecret" />
             </div>
           </div>
           <!-- !name-input -->
           <!-- secret-data -->
           <div class="form-group">
-            <label for="secret_data" class="col-sm-1 control-label text-left">Secret</label>
-            <div class="col-sm-11">
+            <label for="secret_data" class="col-sm-2 control-label text-left">Secret</label>
+            <div class="col-sm-10">
               <textarea class="form-control" rows="5" ng-model="formValues.Data"></textarea>
             </div>
           </div>
@@ -36,15 +36,13 @@
           <!-- !encode-secret -->
           <!-- labels -->
           <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">Labels</label>
-              <span class="label label-default interactive" style="margin-left: 10px" ng-click="addLabel()">
-                <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> add label
-              </span>
+              <span class="label label-default interactive 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" style="margin-top: 10px">
-              <div ng-repeat="label in formValues.Labels" style="margin-top: 2px">
+            <div class="col-sm-12 form-inline mt-2">
+              <div ng-repeat="label in 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.key" placeholder="e.g. com.example.foo" />
@@ -53,8 +51,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 btn-only-icon" type="button" ng-click="removeLabel($index)">
+                  <pr-icon icon="'trash-2'" feather="true"></pr-icon>
                 </button>
               </div>
             </div>
@@ -78,7 +76,7 @@
                 <span ng-hide="state.actionInProgress">Create the secret</span>
                 <span ng-show="state.actionInProgress">Creating secret...</span>
               </button>
-              <span class="text-danger" ng-if="state.formValidationError" style="margin-left: 5px">{{ state.formValidationError }}</span>
+              <span class="text-danger space-left" ng-if="state.formValidationError">{{ state.formValidationError }}</span>
             </div>
           </div>
           <!-- !actions -->
diff --git a/app/docker/views/swarm/visualizer/swarmvisualizer.html b/app/docker/views/swarm/visualizer/swarmvisualizer.html
index 0d1f0e456..fee02d7c8 100644
--- a/app/docker/views/swarm/visualizer/swarmvisualizer.html
+++ b/app/docker/views/swarm/visualizer/swarmvisualizer.html
@@ -53,7 +53,7 @@
         <form class="form-horizontal">
           <div class="col-sm-12 form-section-title"> Refresh </div>
           <div class="form-group">
-            <label for="refreshRate" class="col-sm-1 margin-sm-top control-label text-left">
+            <label for="refreshRate" class="col-sm-2 margin-sm-top control-label text-left">
               Rate
               <i id="refreshRateChange" class="fa fa-check green-icon" aria-hidden="true" style="display: none"></i>
             </label>