fix(image): hide button issues [EE-4166] (#7845)

* fix(image): hide button issues [EE-4166]

app/portainer/components/BEFeatureIndicator/BEFeatureIndicator.html

@@ -1,4 +1,4 @@
-<a class="ml-5 vertical-center" href="{{ $ctrl.url }}" target="_blank" rel="noopener" ng-if="$ctrl.limitedToBE">
+<a class="ml-5 vertical-center be-indicator" href="{{ $ctrl.url }}" target="_blank" rel="noopener" ng-if="$ctrl.limitedToBE">
   <ng-transclude></ng-transclude>
   <pr-icon icon="'briefcase'" feather="true" class-name="'icon icon-sm vertical-center'"></pr-icon>
   <span class="be-indicator-label">Business Edition Feature</span>

app/portainer/components/datatables/registries-datatable/registriesDatatable.html

@@ -110,7 +110,7 @@
                   <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>
+                  <span class="text-muted" style="padding-right: 5px"> <pr-icon icon="'search'" feather="true"></pr-icon> Browse </span>
                 </be-feature-indicator>
 
                 <span ng-if="!$ctrl.canBrowse(item) && !$ctrl.canManageAccess(item)"> - </span>

app/react/portainer/registries/ListView/DefaultRegistry/DefaultRegistryAction.tsx

@@ -1,3 +1,5 @@
+import { Eye, EyeOff } from 'react-feather';
+
 import { notifySuccess } from '@/portainer/services/notifications';
 import { FeatureId } from '@/portainer/feature-flags/enums';
 import { isLimitedToBE } from '@/portainer/feature-flags/feature-flags.service';
@@ -8,7 +10,6 @@ import {
 
 import { Tooltip } from '@@/Tip/Tooltip';
 import { Button } from '@@/buttons';
-import { Icon } from '@@/Icon';
 import { BEFeatureIndicator } from '@@/BEFeatureIndicator';
 
 export function DefaultRegistryAction() {
@@ -29,11 +30,11 @@ export function DefaultRegistryAction() {
       {!hideDefaultRegistry ? (
         <div className="vertical-center">
           <Button
-            className="btn btn-xs btn-light vertical-center"
+            color="danger"
+            icon={EyeOff}
             onClick={() => handleShowOrHide(true)}
             disabled={isLimited}
           >
-            <Icon icon="eye-off" feather />
             Hide for all users
           </Button>
           <BEFeatureIndicator featureId={FeatureId.HIDE_DOCKER_HUB_ANONYMOUS} />
@@ -46,11 +47,7 @@ export function DefaultRegistryAction() {
         </div>
       ) : (
         <div className="vertical-center">
-          <Button
-            className="btn btn-xs btn-success vertical-center"
-            onClick={() => handleShowOrHide(false)}
-          >
-            <Icon icon="eye" feather />
+          <Button icon={Eye} onClick={() => handleShowOrHide(false)}>
             Show for all users
           </Button>
           <Tooltip