From f71fe87ba765ecd1508c0310135e3f3ebfaa46e0 Mon Sep 17 00:00:00 2001
From: Rex Wang <109048808+RexWangPT@users.noreply.github.com>
Date: Thu, 15 Sep 2022 17:33:49 +0800
Subject: [PATCH] fix(docker): ui link style [EE-4184] (#7655)

* EE-4184 fix(docker): ui link style
---
 .../components/files-datatable/filesDatatable.html |  8 ++++++--
 .../services-datatable/servicesDatatable.html      |  4 +++-
 .../imageRegistry/por-image-registry.html          | 14 ++++++--------
 .../registries-datatable/registriesDatatable.html  | 11 ++++++++---
 .../environment-variables-panel.html               |  6 ++++--
 .../environment-variables-simple-mode.html         |  4 +++-
 6 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/app/agent/components/files-datatable/filesDatatable.html b/app/agent/components/files-datatable/filesDatatable.html
index db3c7ecf8..47e6643fc 100644
--- a/app/agent/components/files-datatable/filesDatatable.html
+++ b/app/agent/components/files-datatable/filesDatatable.html
@@ -59,7 +59,9 @@
           <tbody>
             <tr ng-if="!$ctrl.isRoot">
               <td colspan="4">
-                <a ng-click="$ctrl.goToParent()"><pr-icon icon="'corner-left-up'" feather="true"></pr-icon>Go to parent</a>
+                <button type="button" class="btn btn-link hover:no-underline !ml-0 p-0" ng-click="$ctrl.goToParent()"
+                  ><pr-icon icon="'corner-left-up'" feather="true"></pr-icon>Go to parent</button
+                >
               </td>
             </tr>
             <tr ng-repeat="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder))">
@@ -76,7 +78,9 @@
                   <a class="interactive" ng-click="$ctrl.rename({name: item.Name, newName: item.newName}); item.edit = false;"><pr-icon icon="'check'" feather="true"></pr-icon></a>
                 </span>
                 <span ng-if="!item.edit && item.Dir">
-                  <a ng-click="$ctrl.browse({name: item.Name})" class="vertical-center"><pr-icon icon="'folder'" feather="true"></pr-icon>{{ item.Name }}</a>
+                  <button type="button" class="btn btn-link hover:no-underline !ml-0 p-0" ng-click="$ctrl.browse({name: item.Name})" class="vertical-center"
+                    ><pr-icon icon="'folder'" feather="true"></pr-icon>{{ item.Name }}</button
+                  >
                 </span>
                 <span ng-if="!item.edit && !item.Dir" class="vertical-center"><pr-icon icon="'file'" feather="true"></pr-icon>{{ item.Name }}</span>
               </td>
diff --git a/app/docker/components/datatables/services-datatable/servicesDatatable.html b/app/docker/components/datatables/services-datatable/servicesDatatable.html
index f36cc1562..a89e68c74 100644
--- a/app/docker/components/datatables/services-datatable/servicesDatatable.html
+++ b/app/docker/components/datatables/services-datatable/servicesDatatable.html
@@ -159,7 +159,9 @@
                 <i ng-class="{ 'fas fa-angle-down': item.Expanded, 'fas fa-angle-right': !item.Expanded }" class="space-right" aria-hidden="true"></i>
               </td>
               <td>
-                <a ui-sref="docker.services.service({id: item.Id})" ng-click="$event.stopPropagation()">{{ item.Name }}</a>
+                <button type="button" class="btn btn-link hover:no-underline !ml-0 p-0" ui-sref="docker.services.service({id: item.Id})" ng-click="$event.stopPropagation()">{{
+                  item.Name
+                }}</button>
               </td>
               <td ng-if="$ctrl.showStackColumn">{{ item.StackName ? item.StackName : '-' }}</td>
               <td ng-show="$ctrl.columnVisibility.columns.image.display">{{ item.Image | hideshasum }}</td>
diff --git a/app/docker/components/imageRegistry/por-image-registry.html b/app/docker/components/imageRegistry/por-image-registry.html
index 0ac636b54..f16211146 100644
--- a/app/docker/components/imageRegistry/por-image-registry.html
+++ b/app/docker/components/imageRegistry/por-image-registry.html
@@ -71,14 +71,12 @@
   <!-- ! info message -->
   <div class="form-group">
     <div class="col-sm-12">
-      <p>
-        <a class="small interactive" ng-if="!$ctrl.model.UseRegistry" ng-click="$ctrl.model.UseRegistry = true;">
-          <pr-icon icon="'database'" feather="true"> </pr-icon> Simple mode
-        </a>
-        <a class="small interactive" ng-if="$ctrl.model.UseRegistry" ng-click="$ctrl.model.UseRegistry = false;">
-          <pr-icon icon="'globe'" feather="true"> </pr-icon> Advanced mode
-        </a>
-      </p>
+      <button type="button" class="btn btn-link btn-sm hover:no-underline !ml-0 p-0 vertical-center" ng-if="!$ctrl.model.UseRegistry" ng-click="$ctrl.model.UseRegistry = true;">
+        <pr-icon icon="'database'" feather="true"> </pr-icon> Simple mode
+      </button>
+      <button type="button" class="btn btn-link btn-sm hover:no-underline !ml-0 p-0 vertical-center" ng-if="$ctrl.model.UseRegistry" ng-click="$ctrl.model.UseRegistry = false;">
+        <pr-icon icon="'globe'" feather="true"> </pr-icon> Advanced mode
+      </button>
     </div>
   </div>
 
diff --git a/app/portainer/components/datatables/registries-datatable/registriesDatatable.html b/app/portainer/components/datatables/registries-datatable/registriesDatatable.html
index e9f4c07ff..b76479f6a 100644
--- a/app/portainer/components/datatables/registries-datatable/registriesDatatable.html
+++ b/app/portainer/components/datatables/registries-datatable/registriesDatatable.html
@@ -101,9 +101,14 @@
                 {{ item.URL }}
               </td>
               <td>
-                <a class="vertical-center" ng-if="$ctrl.canManageAccess(item)" ng-click="$ctrl.redirectToManageAccess(item)">
-                  <pr-icon icon="'users'" feather="true"></pr-icon> Manage access
-                </a>
+                <button
+                  type="button"
+                  class="btn btn-link hover:no-underline !ml-0 px-0 vertical-center"
+                  ng-if="$ctrl.canManageAccess(item)"
+                  ng-click="$ctrl.redirectToManageAccess(item)"
+                >
+                  <pr-icon icon="'users'" feather="true"></pr-icon>Manage access
+                </button>
                 <be-feature-indicator feature="$ctrl.limitedFeature" ng-if="$ctrl.canBrowse(item)">
                   <span class="text-muted space-left" style="padding-right: 5px"> <pr-icon icon="'search'" feather="true"></pr-icon> Browse </span>
                 </be-feature-indicator>
diff --git a/app/portainer/components/environment-variables-panel/environment-variables-panel.html b/app/portainer/components/environment-variables-panel/environment-variables-panel.html
index b3fd051ab..1d7b75a34 100644
--- a/app/portainer/components/environment-variables-panel/environment-variables-panel.html
+++ b/app/portainer/components/environment-variables-panel/environment-variables-panel.html
@@ -14,8 +14,10 @@
     ></environment-variables-simple-mode>
 
     <div ng-if="$ctrl.mode == 'advanced'" class="environment-variables-panel--advanced">
-      <div class="col-sm-12">
-        <a class="small interactive" ng-click="$ctrl.switchEnvMode()"> <pr-icon icon="'list'" feather="true"></pr-icon> Simple mode </a>
+      <div class="col-sm-12 text-clickable">
+        <button type="button" class="btn btn-link btn-sm hover:no-underline !ml-0 p-0 vertical-center" ng-click="$ctrl.switchEnvMode()">
+          <pr-icon icon="'list'" feather="true"></pr-icon> Simple mode
+        </button>
       </div>
       <div class="col-sm-12 small text-muted">
         <pr-icon icon="'alert-circle'" mode="'primary'" feather="true"></pr-icon>
diff --git a/app/portainer/components/environment-variables-panel/environment-variables-simple-mode/environment-variables-simple-mode.html b/app/portainer/components/environment-variables-panel/environment-variables-simple-mode/environment-variables-simple-mode.html
index abfd95f33..7625a9a4e 100644
--- a/app/portainer/components/environment-variables-panel/environment-variables-simple-mode/environment-variables-simple-mode.html
+++ b/app/portainer/components/environment-variables-panel/environment-variables-simple-mode/environment-variables-simple-mode.html
@@ -1,6 +1,8 @@
 <div class="environment-variables-simple-mode">
   <div class="col-sm-12">
-    <a class="small interactive" ng-click="$ctrl.onSwitchModeClick()"> <pr-icon icon="'list'" feather="true"></pr-icon> Advanced mode </a>
+    <button type="button" class="btn btn-link btn-sm hover:no-underline !ml-0 p-0" ng-click="$ctrl.onSwitchModeClick()">
+      <pr-icon icon="'edit'" feather="true"></pr-icon> Advanced mode
+    </button>
   </div>
   <div class="col-sm-12 small text-muted">
     <pr-icon icon="'alert-circle'" mode="'primary'" feather="true"></pr-icon>