From 2c25e1d48e426d5fc331feb86a07d42ac64de29e Mon Sep 17 00:00:00 2001
From: congs <mcpacino@gmail.com>
Date: Tue, 2 Aug 2022 14:22:20 +1200
Subject: [PATCH] feat(ui): EE-3571 css portainer tags (#7383)

---
 .../tags-datatable/tagsDatatable.html         | 24 +++++++++++--------
 app/portainer/views/tags/tags.html            | 19 +++++++++++----
 2 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/app/portainer/components/datatables/tags-datatable/tagsDatatable.html b/app/portainer/components/datatables/tags-datatable/tagsDatatable.html
index c0cc75483..58183c4ae 100644
--- a/app/portainer/components/datatables/tags-datatable/tagsDatatable.html
+++ b/app/portainer/components/datatables/tags-datatable/tagsDatatable.html
@@ -28,15 +28,19 @@
           <thead>
             <tr>
               <th>
-                <span class="md-checkbox">
-                  <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('Name')">
-                  Name
-                  <pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'Name' && !$ctrl.state.reverseOrder"></pr-icon>
-                  <pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"></pr-icon>
-                </a>
+                <div class="vertical-center">
+                  <span class="md-checkbox">
+                    <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 === 'Name'"
+                    is-sorted-desc="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"
+                    ng-click="$ctrl.changeOrderBy('Name')"
+                  ></table-column-header>
+                </div>
               </th>
             </tr>
           </thead>
@@ -67,7 +71,7 @@
         <div class="paginationControls">
           <form class="form-inline vertical-center">
             <span class="limitSelector">
-              <span style="margin-right: 5px"> Items per page </span>
+              <span class="space-right"> Items per page </span>
               <select class="form-control" ng-model="$ctrl.state.paginatedItemLimit" ng-change="$ctrl.changePaginationLimit()" data-cy="component-paginationSelect">
                 <option value="0">All</option>
                 <option value="10">10</option>
diff --git a/app/portainer/views/tags/tags.html b/app/portainer/views/tags/tags.html
index 95883af35..37e17a598 100644
--- a/app/portainer/views/tags/tags.html
+++ b/app/portainer/views/tags/tags.html
@@ -8,7 +8,7 @@
         <form class="form-horizontal" name="tagCreationForm" ng-submit="createTag()">
           <!-- name-input -->
           <div class="form-group">
-            <label for="name" class="col-sm-2 control-label text-left"> Name </label>
+            <label for="name" class="col-sm-2 control-label text-left required"> Name </label>
             <div class="col-sm-10">
               <input
                 type="text"
@@ -25,8 +25,14 @@
           <div class="form-group" ng-show="tagCreationForm.name.$invalid">
             <div class="col-sm-12 small text-warning">
               <div ng-messages="tagCreationForm.name.$error">
-                <p ng-message="required"><pr-icon icon="'alert-triangle'" feather="true"></pr-icon> This field is required.</p>
-                <p ng-message="validName"><pr-icon icon="'alert-triangle'" feather="true"></pr-icon> This tag already exists.</p>
+                <p ng-message="required" class="vertical-center">
+                  <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon>
+                  This field is required.
+                </p>
+                <p ng-message="validName" class="vertical-center">
+                  <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon>
+                  This tag already exists.
+                </p>
               </div>
             </div>
           </div>
@@ -40,7 +46,10 @@
                 ng-click="createTag()"
                 button-spinner="state.actionInProgress"
               >
-                <span ng-hide="state.actionInProgress"><pr-icon icon="'plus'" feather="true"></pr-icon> Create tag</span>
+                <span ng-hide="state.actionInProgress" class="vertical-center">
+                  <pr-icon icon="'plus'" feather="true"></pr-icon>
+                  Create tag
+                </span>
                 <span ng-show="state.actionInProgress">Creating tag...</span>
               </button>
             </div>
@@ -53,6 +62,6 @@
 
 <div class="row">
   <div class="col-sm-12">
-    <tags-datatable title-text="Tags" title-icon="tag" dataset="tags" table-key="tags" order-by="Name" remove-action="removeAction"></tags-datatable>
+    <tags-datatable title-text="Tags" title-icon="svg-tag2" dataset="tags" table-key="tags" order-by="Name" remove-action="removeAction"></tags-datatable>
   </div>
 </div>