From d678b155baca202608ed95cd0a1f9322be19b347 Mon Sep 17 00:00:00 2001
From: Ali <83188384+testA113@users.noreply.github.com>
Date: Thu, 28 Sep 2023 11:32:58 +0100
Subject: [PATCH] fix(teasers): updated muted styles from qa feedback [EE-6035]
 (#10390)

* fix(teasers): updated muted styles from qa feedback [EE-6035]
---
 .../oauth-settings/oauth-settings.html        |   2 +-
 .../access-viewer/access-viewer.html          |  44 ++--
 .../ldap/ad-settings/ad-settings.html         |   2 +-
 .../ldap-custom-admin-group.html              | 238 +++++++++---------
 .../ldap-custom-group-search.html             |  25 +-
 .../ldap-custom-user-search.html              |  25 +-
 .../ldap-group-search/ldap-group-search.html  |  12 +-
 .../ldap-settings-custom.html                 |  24 +-
 .../ldap-settings-openldap.html               |   2 +-
 .../ldap-settings-test-login.html             |  99 ++++----
 .../ldap-user-search/ldap-user-search.html    |   2 +-
 .../save-auth-settings-button.html            |   2 +-
 .../activity-logs-datatable.html              |   2 -
 .../activity-logs-view.html                   |  10 +-
 .../auth-logs-datatable.html                  |   2 -
 .../auth-logs-view/auth-logs-view.html        |  10 +-
 .../BEFeatureIndicator/BEFeatureIndicator.css |   6 +-
 .../BoxSelector/BoxSelectorItem.tsx           |   8 +-
 .../LimitedToBeBoxSelectorIndicator.tsx       |  16 +-
 .../RollbackApplicationButton.tsx             |  50 ++--
 .../WizardKubernetes/KubeConfigTeaserForm.tsx |   8 +-
 .../portainer/feature-flags/feature-flags.css |   4 +-
 22 files changed, 290 insertions(+), 303 deletions(-)

diff --git a/app/portainer/oauth/components/oauth-settings/oauth-settings.html b/app/portainer/oauth/components/oauth-settings/oauth-settings.html
index eecf02720..636a786bc 100644
--- a/app/portainer/oauth/components/oauth-settings/oauth-settings.html
+++ b/app/portainer/oauth/components/oauth-settings/oauth-settings.html
@@ -351,7 +351,7 @@
     ></save-auth-settings-button>
   </div>
 
-  <div ng-if="$ctrl.state.provider != 'custom'" class="limited-be">
+  <div ng-if="$ctrl.state.provider != 'custom'" class="limited-be be-indicator-container">
     <div class="limited-be-link vertical-center"><be-feature-indicator feature="$ctrl.limitedFeature"></be-feature-indicator></div>
     <div class="limited-be-content">
       <div class="col-sm-12 form-section-title">OAuth Configuration</div>
diff --git a/app/portainer/rbac/components/access-viewer/access-viewer.html b/app/portainer/rbac/components/access-viewer/access-viewer.html
index 5673b7bf9..1da86123f 100644
--- a/app/portainer/rbac/components/access-viewer/access-viewer.html
+++ b/app/portainer/rbac/components/access-viewer/access-viewer.html
@@ -1,24 +1,26 @@
 <div class="col-sm-12" style="margin-bottom: 0px">
-  <rd-widget>
-    <rd-widget-header icon="user-x">
-      <header-title>
-        Effective access viewer
-        <be-feature-indicator feature="$ctrl.limitedFeature" class="space-left"></be-feature-indicator>
-      </header-title>
-    </rd-widget-header>
-    <rd-widget-body>
-      <form class="form-horizontal">
-        <div class="col-sm-12 form-section-title"> User </div>
-        <div class="form-group">
-          <div class="col-sm-12">
-            <span class="small text-muted" ng-if="$ctrl.users.length === 0"> No user available </span>
+  <div class="be-indicator-container limited-be">
+    <div class="limited-be-link vertical-center"><be-feature-indicator feature="$ctrl.limitedFeature"></be-feature-indicator></div>
+    <div class="limited-be-content">
+      <rd-widget>
+        <rd-widget-header icon="user-x">
+          <header-title> Effective access viewer </header-title>
+        </rd-widget-header>
+        <rd-widget-body>
+          <form class="form-horizontal">
+            <div class="col-sm-12 form-section-title"> User </div>
+            <div class="form-group">
+              <div class="col-sm-12">
+                <span class="small text-muted" ng-if="$ctrl.users.length === 0"> No user available </span>
 
-            <por-select ng-if="$ctrl.users.length > 0" value="$ctrl.selectedUserId" options="$ctrl.users" on-change="($ctrl.onUserSelect)" placeholder="'Select a user'">
-            </por-select>
-          </div>
-        </div>
-        <access-viewer-datatable table-key="access_viewer" dataset="$ctrl.userRoles" order-by="EndpointName" is-admin="$ctrl.isAdmin"> </access-viewer-datatable>
-      </form>
-    </rd-widget-body>
-  </rd-widget>
+                <por-select ng-if="$ctrl.users.length > 0" value="$ctrl.selectedUserId" options="$ctrl.users" on-change="($ctrl.onUserSelect)" placeholder="'Select a user'">
+                </por-select>
+              </div>
+            </div>
+            <access-viewer-datatable table-key="access_viewer" dataset="$ctrl.userRoles" order-by="EndpointName" is-admin="$ctrl.isAdmin"> </access-viewer-datatable>
+          </form>
+        </rd-widget-body>
+      </rd-widget>
+    </div>
+  </div>
 </div>
diff --git a/app/portainer/settings/authentication/ldap/ad-settings/ad-settings.html b/app/portainer/settings/authentication/ldap/ad-settings/ad-settings.html
index e3b6150a7..1c55a9ff6 100644
--- a/app/portainer/settings/authentication/ldap/ad-settings/ad-settings.html
+++ b/app/portainer/settings/authentication/ldap/ad-settings/ad-settings.html
@@ -1,5 +1,5 @@
 <ng-form class="ad-settings" limited-feature-dir="{{::$ctrl.limitedFeatureId}}" limited-feature-class="limited-be">
-  <div>
+  <div class="be-indicator-container">
     <div class="limited-be-link vertical-center"><be-feature-indicator feature="$ctrl.limitedFeatureId"></be-feature-indicator></div>
     <div class="limited-be-content">
       <auto-user-provision-toggle ng-model="$ctrl.settings.AutoCreateUsers">
diff --git a/app/portainer/settings/authentication/ldap/ldap-custom-admin-group/ldap-custom-admin-group.html b/app/portainer/settings/authentication/ldap/ldap-custom-admin-group/ldap-custom-admin-group.html
index 0963f6504..94afdcd23 100644
--- a/app/portainer/settings/authentication/ldap/ldap-custom-admin-group/ldap-custom-admin-group.html
+++ b/app/portainer/settings/authentication/ldap/ldap-custom-admin-group/ldap-custom-admin-group.html
@@ -1,129 +1,127 @@
-<div class="col-sm-12 form-section-title ldap-custom-admin-group-title" ng-style="$ctrl.isLimitedFeatureSelfContained && { 'padding-bottom': '15px' }">
+<div class="col-sm-12 form-section-title flex items-center" style="float: initial">
   Auto-populate team admins <be-feature-indicator feature="$ctrl.limitedFeatureId" class="space-left" ng-if="$ctrl.isLimitedFeatureSelfContained"></be-feature-indicator>
 </div>
 
-<div class="w-full px-5 pt-3" ng-repeat="config in $ctrl.settings.AdminGroupSearchSettings | limitTo: (1 - $ctrl.settings.AdminGroupSearchSettings)">
-  <div class="form-group mb-3" ng-if="$index > 0">
-    <span class="col-sm-12 text-muted small"> Extra search configuration </span>
-  </div>
+<rd-widget>
+  <rd-widget-body>
+    <div class="w-full pt-3" ng-repeat="config in $ctrl.settings.AdminGroupSearchSettings | limitTo: (1 - $ctrl.settings.AdminGroupSearchSettings)">
+      <div class="form-group mb-3" ng-if="$index > 0">
+        <span class="col-sm-12 text-muted small"> Extra search configuration </span>
+      </div>
 
-  <div class="form-group">
-    <label for="ldap_admin_group_basedn_{{ $index }}" class="col-sm-4 col-md-2 control-label text-left">
-      Group Base DN
-      <portainer-tooltip message="'The distinguished name of the element from which the LDAP server will search for groups.'"></portainer-tooltip>
-    </label>
-    <div class="col-sm-8 col-md-4">
-      <input
-        type="text"
-        class="form-control"
-        id="ldap_admin_group_basedn_{{ $index }}"
-        ng-model="config.GroupBaseDN"
-        placeholder="dc=ldap,dc=domain,dc=tld"
-        limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
-        limited-feature-class=" {{ $ctrl.isLimitedFeatureSelfContained && 'limited-be' }}"
-        ng-disabled="{{ $ctrl.isLimitedFeatureSelfContained }}"
-        limited-feature-tabindex="-1"
-      />
+      <div class="form-group">
+        <label for="ldap_admin_group_basedn_{{ $index }}" class="col-sm-4 col-md-2 control-label text-left">
+          Group Base DN
+          <portainer-tooltip message="'The distinguished name of the element from which the LDAP server will search for groups.'"></portainer-tooltip>
+        </label>
+        <div class="col-sm-8 col-md-4">
+          <input
+            type="text"
+            class="form-control"
+            id="ldap_admin_group_basedn_{{ $index }}"
+            ng-model="config.GroupBaseDN"
+            placeholder="dc=ldap,dc=domain,dc=tld"
+            limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
+            limited-feature-class=" {{ $ctrl.isLimitedFeatureSelfContained && 'limited-be' }}"
+            ng-disabled="{{ $ctrl.isLimitedFeatureSelfContained }}"
+            limited-feature-tabindex="-1"
+          />
+        </div>
+
+        <label for="ldap_admin_group_att_{{ $index }}" class="col-sm-4 col-md-2 control-label text-left">
+          Group Membership Attribute
+          <portainer-tooltip message="'LDAP attribute which denotes the group membership.'"></portainer-tooltip>
+        </label>
+        <div class="col-sm-8 col-md-4">
+          <input
+            type="text"
+            class="form-control"
+            id="ldap_admin_group_att_{{ $index }}"
+            ng-model="config.GroupAttribute"
+            placeholder="member"
+            limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
+            limited-feature-class=" {{ $ctrl.isLimitedFeatureSelfContained && 'limited-be' }}"
+            ng-disabled="{{ $ctrl.isLimitedFeatureSelfContained }}"
+            limited-feature-tabindex="-1"
+          />
+        </div>
+      </div>
+      <div class="form-group">
+        <label for="ldap_admin_group_filter_{{ $index }}" class="col-sm-4 col-md-2 control-label text-left">
+          Group Filter
+          <portainer-tooltip message="'The LDAP search filter used to select group elements, optional.'"></portainer-tooltip>
+        </label>
+        <div class="col-sm-8 col-md-10 vertical-center">
+          <input
+            type="text"
+            class="form-control"
+            id="ldap_admin_group_filter_{{ $index }}"
+            ng-model="config.GroupFilter"
+            placeholder="(objectClass=groupOfNames)"
+            limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
+            limited-feature-class=" {{ $ctrl.isLimitedFeatureSelfContained && 'limited-be' }}"
+            ng-disabled="{{ $ctrl.isLimitedFeatureSelfContained }}"
+            limited-feature-tabindex="-1"
+          />
+          <button class="btn btn-md btn-danger" type="button" ng-click="$ctrl.onRemoveClick($index)" ng-if="$index > 0">
+            <pr-icon icon="'trash-2'" size="'md'"></pr-icon>
+          </button>
+        </div>
+      </div>
     </div>
 
-    <label for="ldap_admin_group_att_{{ $index }}" class="col-sm-4 col-md-2 control-label text-left">
-      Group Membership Attribute
-      <portainer-tooltip message="'LDAP attribute which denotes the group membership.'"></portainer-tooltip>
-    </label>
-    <div class="col-sm-8 col-md-4">
-      <input
-        type="text"
-        class="form-control"
-        id="ldap_admin_group_att_{{ $index }}"
-        ng-model="config.GroupAttribute"
-        placeholder="member"
-        limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
-        limited-feature-class=" {{ $ctrl.isLimitedFeatureSelfContained && 'limited-be' }}"
-        ng-disabled="{{ $ctrl.isLimitedFeatureSelfContained }}"
-        limited-feature-tabindex="-1"
-      />
+    <div class="form-group mt-3">
+      <div class="col-sm-12">
+        <button disabled class="btn btn-sm btn-light vertical-center !ml-0" ng-click="$ctrl.onAddClick()">
+          <pr-icon icon="'plus'"></pr-icon>
+          Add group search configuration
+        </button>
+      </div>
+      <div class="col-sm-12 vertical-center mt-2">
+        <button
+          class="btn btm-sm btn-primary !ml-0"
+          type="button"
+          ng-click="$ctrl.search()"
+          limited-feature-dir="{{ $ctrl.limitedFeatureId }}"
+          limited-feature-class=" {{ $ctrl.isLimitedFeatureSelfContained && 'limited-be' }}"
+          ng-disabled="{{ $ctrl.isLimitedFeatureSelfContained }}"
+          limited-feature-tabindex="-1"
+        >
+          Fetch Admin Group(s)
+        </button>
+        <span ng-if="$ctrl.groups && $ctrl.groups.length === 0" class="vertical-center ml-6">
+          <pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon>
+          No groups found
+        </span>
+      </div>
     </div>
-  </div>
-  <div class="form-group">
-    <label for="ldap_admin_group_filter_{{ $index }}" class="col-sm-4 col-md-2 control-label text-left">
-      Group Filter
-      <portainer-tooltip message="'The LDAP search filter used to select group elements, optional.'"></portainer-tooltip>
-    </label>
-    <div class="col-sm-8 col-md-10 vertical-center">
-      <input
-        type="text"
-        class="form-control"
-        id="ldap_admin_group_filter_{{ $index }}"
-        ng-model="config.GroupFilter"
-        placeholder="(objectClass=groupOfNames)"
-        limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
-        limited-feature-class=" {{ $ctrl.isLimitedFeatureSelfContained && 'limited-be' }}"
-        ng-disabled="{{ $ctrl.isLimitedFeatureSelfContained }}"
-        limited-feature-tabindex="-1"
-      />
-      <button class="btn btn-md btn-danger" type="button" ng-click="$ctrl.onRemoveClick($index)" ng-if="$index > 0">
-        <pr-icon icon="'trash-2'" size="'md'"></pr-icon>
-      </button>
+
+    <div class="form-group">
+      <div class="col-sm-12 vertical-center">
+        <label for="admin-auto-populate" class="control-label text-muted !pt-0 text-left" ng-class="{ 'text-muted': !$ctrl.enableAssignAdminGroup }">
+          Assign admin rights to group(s)
+        </label>
+        <label class="switch my-0 ml-7" ng-class="{ 'business limited': $ctrl.isLimitedFeatureSelfContained }">
+          <input id="admin-auto-populate" ng-disabled="!$ctrl.enableAssignAdminGroup" name="admin-auto-populate" type="checkbox" ng-model="$ctrl.settings.AdminAutoPopulate" />
+          <span class="slider round before:content-['']"></span>
+        </label>
+      </div>
     </div>
-  </div>
-</div>
 
-<div class="form-group mt-3">
-  <div class="col-sm-12">
-    <button
-      class="label label-default interactive no-border vertical-center"
-      ng-click="$ctrl.onAddClick()"
-      limited-feature-dir="{{ $ctrl.limitedFeatureId }}"
-      limited-feature-class=" {{ $ctrl.isLimitedFeatureSelfContained && 'limited-be' }}"
-      limited-feature-disabled
-    >
-      <pr-icon icon="'plus-circle'"></pr-icon>
-      add group search configuration
-    </button>
-  </div>
-  <div class="col-sm-12 vertical-center mt-2">
-    <button
-      class="btn btm-sm btn-primary"
-      type="button"
-      ng-click="$ctrl.search()"
-      limited-feature-dir="{{ $ctrl.limitedFeatureId }}"
-      limited-feature-class=" {{ $ctrl.isLimitedFeatureSelfContained && 'limited-be' }}"
-      ng-disabled="{{ $ctrl.isLimitedFeatureSelfContained }}"
-      limited-feature-tabindex="-1"
-    >
-      Fetch Admin Group(s)
-    </button>
-    <span ng-if="$ctrl.groups && $ctrl.groups.length === 0" class="vertical-center ml-6">
-      <pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon>
-      No groups found
-    </span>
-  </div>
-</div>
-
-<div class="form-group">
-  <div class="col-sm-12 vertical-center">
-    <label for="admin-auto-populate" class="control-label text-muted !pt-0 text-left" ng-class="{ 'text-muted': !$ctrl.enableAssignAdminGroup }">
-      Assign admin rights to group(s)
-    </label>
-    <label class="switch my-0 ml-7" ng-class="{ 'business limited': $ctrl.isLimitedFeatureSelfContained }">
-      <input id="admin-auto-populate" ng-disabled="!$ctrl.enableAssignAdminGroup" name="admin-auto-populate" type="checkbox" ng-model="$ctrl.settings.AdminAutoPopulate" />
-      <span class="slider round before:content-['']"></span>
-    </label>
-  </div>
-</div>
-
-<div class="form-group" ng-if="$ctrl.settings.AdminAutoPopulate && $ctrl.groups">
-  <label for="group-access" class="control-label col-sm-2 text-left"> Select Group(s) </label>
-  <div class="col-sm-8">
-    <por-select
-      data-cy="'group-access-selector'"
-      input-id="'group-access'"
-      value="$ctrl.selectedAdminGroups"
-      on-change="($ctrl.onAdminGroupChange)"
-      options="$ctrl.groups"
-      placeholder="'Select one or more groups'"
-      is-multi="true"
-    >
-    </por-select>
-  </div>
-</div>
+    <div class="form-group" ng-if="$ctrl.settings.AdminAutoPopulate && $ctrl.groups">
+      <label for="group-access" class="control-label col-sm-2 text-left"> Select Group(s) </label>
+      <div class="col-sm-8">
+        <por-select
+          data-cy="'group-access-selector'"
+          input-id="'group-access'"
+          value="$ctrl.selectedAdminGroups"
+          on-change="($ctrl.onAdminGroupChange)"
+          options="$ctrl.groups"
+          placeholder="'Select one or more groups'"
+          is-multi="true"
+        >
+        </por-select>
+      </div>
+    </div>
+  </rd-widget-body>
+</rd-widget>
diff --git a/app/portainer/settings/authentication/ldap/ldap-custom-group-search/ldap-custom-group-search.html b/app/portainer/settings/authentication/ldap/ldap-custom-group-search/ldap-custom-group-search.html
index 91988d869..0cf88801a 100644
--- a/app/portainer/settings/authentication/ldap/ldap-custom-group-search/ldap-custom-group-search.html
+++ b/app/portainer/settings/authentication/ldap/ldap-custom-group-search/ldap-custom-group-search.html
@@ -51,24 +51,19 @@
 
 <div class="form-group" style="margin-top: 10px">
   <div class="col-sm-12">
-    <button class="label label-default interactive vertical-center" style="border: 0" ng-click="$ctrl.onAddClick()">
-      <pr-icon icon="'plus-circle'"></pr-icon>
-      add group search configuration
+    <button class="btn btn-sm btn-light vertical-center !ml-0" ng-click="$ctrl.onAddClick()">
+      <pr-icon icon="'plus'"></pr-icon>
+      Add group search configuration
     </button>
   </div>
   <div class="col-sm-12" style="margin-top: 10px">
-    <button
-      class="btn btm-sm btn-primary"
-      type="button"
-      ng-click="$ctrl.search()"
-      limited-feature-dir="{{ $ctrl.limitedFeatureId }}"
-      limited-feature-tabindex="-1"
-      limited-feature-disabled
-      limited-feature-class="limited-be"
-    >
-      Display User/Group matching
-    </button>
-    <be-feature-indicator feature="$ctrl.limitedFeatureId" class="space-left"></be-feature-indicator>
+    <be-teaser-button
+      feature-id="$ctrl.limitedFeatureId"
+      heading="'Display User/Group matching'"
+      message="'Show the list of users and groups that match the Portainer search configurations'"
+      button-text="'Display User/Group matching'"
+      button-class-name="'!ml-0'"
+    ></be-teaser-button>
   </div>
 </div>
 
diff --git a/app/portainer/settings/authentication/ldap/ldap-custom-user-search/ldap-custom-user-search.html b/app/portainer/settings/authentication/ldap/ldap-custom-user-search/ldap-custom-user-search.html
index 1acc45ddf..e8583d3eb 100644
--- a/app/portainer/settings/authentication/ldap/ldap-custom-user-search/ldap-custom-user-search.html
+++ b/app/portainer/settings/authentication/ldap/ldap-custom-user-search/ldap-custom-user-search.html
@@ -40,24 +40,19 @@
 
 <div class="form-group" style="margin-top: 10px">
   <div class="col-sm-12">
-    <button class="label label-default interactive vertical-center" style="border: 0" ng-click="$ctrl.onAddClick()">
-      <pr-icon icon="'plus-circle'"></pr-icon>
-      add user search configuration
+    <button class="btn btn-sm btn-light vertical-center !ml-0" ng-click="$ctrl.onAddClick()">
+      <pr-icon icon="'plus'"></pr-icon>
+      Add user search configuration
     </button>
   </div>
   <div class="col-sm-12" style="margin-top: 10px">
-    <button
-      class="btn btm-sm btn-primary"
-      type="button"
-      ng-click="$ctrl.search()"
-      limited-feature-dir="{{ $ctrl.limitedFeatureId }}"
-      limited-feature-disabled
-      limited-feature-class="limited-be"
-      limited-feature-tabindex="-1"
-    >
-      Display Users
-    </button>
-    <be-feature-indicator feature="$ctrl.limitedFeatureId" class="space-left"></be-feature-indicator>
+    <be-teaser-button
+      feature-id="$ctrl.limitedFeatureId"
+      heading="'Display Users'"
+      message="'Allows you to display users from your LDAP server'"
+      button-text="'Display Users'"
+      button-class-name="'!ml-0'"
+    ></be-teaser-button>
   </div>
 </div>
 
diff --git a/app/portainer/settings/authentication/ldap/ldap-group-search/ldap-group-search.html b/app/portainer/settings/authentication/ldap/ldap-group-search/ldap-group-search.html
index cea3ffd53..6170defe6 100644
--- a/app/portainer/settings/authentication/ldap/ldap-group-search/ldap-group-search.html
+++ b/app/portainer/settings/authentication/ldap/ldap-group-search/ldap-group-search.html
@@ -13,15 +13,9 @@
 
 <div class="form-group" style="margin-top: 10px">
   <div class="col-sm-12">
-    <button
-      class="label label-default interactive vertical-center"
-      style="border: 0"
-      ng-click="$ctrl.onAddClick()"
-      limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
-      limited-feature-tabindex="-1"
-    >
-      <pr-icon icon="'plus-circle'"></pr-icon>
-      add group search configuration
+    <button class="btn btn-sm btn-light vertical-center !ml-0" ng-click="$ctrl.onAddClick()" disabled>
+      <pr-icon icon="'plus'"></pr-icon>
+      Add group search configuration
     </button>
   </div>
   <div class="col-sm-12" style="margin-top: 10px">
diff --git a/app/portainer/settings/authentication/ldap/ldap-settings-custom/ldap-settings-custom.html b/app/portainer/settings/authentication/ldap/ldap-settings-custom/ldap-settings-custom.html
index 8967197cf..0988ea2cf 100644
--- a/app/portainer/settings/authentication/ldap/ldap-settings-custom/ldap-settings-custom.html
+++ b/app/portainer/settings/authentication/ldap/ldap-settings-custom/ldap-settings-custom.html
@@ -18,20 +18,7 @@
 </div>
 
 <div class="form-group">
-  <label for="ldap_url" class="col-sm-3 col-lg-2 control-label flex flex-wrap text-left">
-    LDAP Server
-    <button
-      type="button"
-      class="label label-default interactive no-border vertical-center"
-      ng-click="$ctrl.addLDAPUrl()"
-      limited-feature-dir="{{ $ctrl.limitedFeatureId }}"
-      limited-feature-disabled
-      limited-feature-class="limited-be"
-    >
-      <pr-icon icon="'plus-circle'"></pr-icon>
-      Add additional server
-    </button>
-  </label>
+  <label for="ldap_url" class="col-sm-3 col-lg-2 control-label flex flex-wrap text-left"> LDAP Server </label>
   <div class="col-sm-9 col-lg-10">
     <div class="mb-3 flex" ng-repeat="url in $ctrl.settings.URLs track by $index">
       <input type="text" class="form-control" id="ldap_url" ng-model="$ctrl.settings.URLs[$index]" placeholder="e.g. 10.0.0.10:389 or myldap.domain.tld:389" required />
@@ -40,6 +27,15 @@
       </button>
     </div>
   </div>
+  <div class="col-sm-12">
+    <be-teaser-button
+      feature-id="$ctrl.limitedFeatureId"
+      heading="'Add additional server'"
+      message="'Allows you to add an additional LDAP server'"
+      button-text="'Add additional server'"
+      button-class-name="'!ml-0'"
+    ></be-teaser-button>
+  </div>
 </div>
 
 <div class="form-group">
diff --git a/app/portainer/settings/authentication/ldap/ldap-settings-openldap/ldap-settings-openldap.html b/app/portainer/settings/authentication/ldap/ldap-settings-openldap/ldap-settings-openldap.html
index b075cfd2b..4b71e8d0e 100644
--- a/app/portainer/settings/authentication/ldap/ldap-settings-openldap/ldap-settings-openldap.html
+++ b/app/portainer/settings/authentication/ldap/ldap-settings-openldap/ldap-settings-openldap.html
@@ -1,5 +1,5 @@
 <ng-form limited-feature-dir="{{::$ctrl.limitedFeatureId}}" limited-feature-class="limited-be" class="ldap-settings-openldap">
-  <div>
+  <div class="be-indicator-container">
     <div class="limited-be-link vertical-center"><be-feature-indicator feature="$ctrl.limitedFeatureId"></be-feature-indicator></div>
     <div class="limited-be-content">
       <div>
diff --git a/app/portainer/settings/authentication/ldap/ldap-settings-test-login/ldap-settings-test-login.html b/app/portainer/settings/authentication/ldap/ldap-settings-test-login/ldap-settings-test-login.html
index 450f24191..a1e595b33 100644
--- a/app/portainer/settings/authentication/ldap/ldap-settings-test-login/ldap-settings-test-login.html
+++ b/app/portainer/settings/authentication/ldap/ldap-settings-test-login/ldap-settings-test-login.html
@@ -1,4 +1,4 @@
-<div class="col-sm-12 form-section-title" ng-style="$ctrl.isLimitedFeatureSelfContained && { 'padding-bottom': '15px' }">
+<div class="col-sm-12 form-section-title flex items-center" style="float: initial">
   Test login
   <be-feature-indicator
     ng-if="$ctrl.showBeIndicatorIfNeeded"
@@ -7,52 +7,57 @@
     ng-if="$ctrl.isLimitedFeatureSelfContained"
   ></be-feature-indicator>
 </div>
-<div class="form-inline">
-  <div class="form-group" style="margin: 0">
-    <label for="ldap_test_username" style="font-size: 0.9em; margin-right: 5px"> Username </label>
-    <input
-      type="text"
-      class="form-control"
-      id="ldap_test_username"
-      ng-model="$ctrl.username"
-      limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
-      limited-feature-class=" {{ $ctrl.isLimitedFeatureSelfContained && 'limited-be' }}"
-      ng-disabled="{{ $ctrl.isLimitedFeatureSelfContained }}"
-      limited-feature-tabindex="-1"
-    />
-  </div>
 
-  <div class="form-group no-margin">
-    <label for="ldap_test_password"> Password </label>
-    <input
-      type="password"
-      class="form-control"
-      id="ldap_test_password"
-      ng-model="$ctrl.password"
-      autocomplete="new-password"
-      limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
-      limited-feature-class=" {{ $ctrl.isLimitedFeatureSelfContained && 'limited-be' }}"
-      ng-disabled="{{ $ctrl.isLimitedFeatureSelfContained }}"
-      limited-feature-tabindex="-1"
-    />
-  </div>
+<rd-widget>
+  <rd-widget-body>
+    <div class="form-inline">
+      <div class="form-group" style="margin: 0">
+        <label for="ldap_test_username" style="font-size: 0.9em; margin-right: 5px"> Username </label>
+        <input
+          type="text"
+          class="form-control"
+          id="ldap_test_username"
+          ng-model="$ctrl.username"
+          limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
+          limited-feature-class=" {{ $ctrl.isLimitedFeatureSelfContained && 'limited-be' }}"
+          ng-disabled="{{ $ctrl.isLimitedFeatureSelfContained }}"
+          limited-feature-tabindex="-1"
+        />
+      </div>
 
-  <div class="form-group !ml-0">
-    <div class="vertical-center">
-      <button
-        type="submit"
-        class="btn btn-primary"
-        ng-disabled="$ctrl.state.testStatus === $ctrl.TEST_STATUS.LOADING || !$ctrl.username || !$ctrl.password"
-        ng-click="$ctrl.testLogin($ctrl.username, $ctrl.password)"
-        limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
-        limited-feature-class=" {{ $ctrl.isLimitedFeatureSelfContained && 'limited-be' }}"
-        limited-feature-tabindex="-1"
-      >
-        <span ng-if="$ctrl.state.testStatus !== $ctrl.TEST_STATUS.LOADING">Test</span>
-        <span ng-if="$ctrl.state.testStatus === $ctrl.TEST_STATUS.LOADING">Testing...</span>
-      </button>
-      <pr-icon icon="'check'" class="icon-success" ng-if="$ctrl.state.testStatus === $ctrl.TEST_STATUS.SUCCESS"></pr-icon>
-      <pr-icon icon="'x'" class="icon-danger" ng-if="$ctrl.state.testStatus === $ctrl.TEST_STATUS.FAILURE"></pr-icon>
+      <div class="form-group no-margin">
+        <label for="ldap_test_password"> Password </label>
+        <input
+          type="password"
+          class="form-control"
+          id="ldap_test_password"
+          ng-model="$ctrl.password"
+          autocomplete="new-password"
+          limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
+          limited-feature-class=" {{ $ctrl.isLimitedFeatureSelfContained && 'limited-be' }}"
+          ng-disabled="{{ $ctrl.isLimitedFeatureSelfContained }}"
+          limited-feature-tabindex="-1"
+        />
+      </div>
+
+      <div class="form-group !ml-0">
+        <div class="vertical-center">
+          <button
+            type="submit"
+            class="btn btn-primary"
+            ng-disabled="$ctrl.state.testStatus === $ctrl.TEST_STATUS.LOADING || !$ctrl.username || !$ctrl.password"
+            ng-click="$ctrl.testLogin($ctrl.username, $ctrl.password)"
+            limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
+            limited-feature-class=" {{ $ctrl.isLimitedFeatureSelfContained && 'limited-be' }}"
+            limited-feature-tabindex="-1"
+          >
+            <span ng-if="$ctrl.state.testStatus !== $ctrl.TEST_STATUS.LOADING">Test</span>
+            <span ng-if="$ctrl.state.testStatus === $ctrl.TEST_STATUS.LOADING">Testing...</span>
+          </button>
+          <pr-icon icon="'check'" class="icon-success" ng-if="$ctrl.state.testStatus === $ctrl.TEST_STATUS.SUCCESS"></pr-icon>
+          <pr-icon icon="'x'" class="icon-danger" ng-if="$ctrl.state.testStatus === $ctrl.TEST_STATUS.FAILURE"></pr-icon>
+        </div>
+      </div>
     </div>
-  </div>
-</div>
+  </rd-widget-body>
+</rd-widget>
diff --git a/app/portainer/settings/authentication/ldap/ldap-user-search/ldap-user-search.html b/app/portainer/settings/authentication/ldap/ldap-user-search/ldap-user-search.html
index da602cd3a..a0d914014 100644
--- a/app/portainer/settings/authentication/ldap/ldap-user-search/ldap-user-search.html
+++ b/app/portainer/settings/authentication/ldap/ldap-user-search/ldap-user-search.html
@@ -22,7 +22,7 @@
       limited-feature-tabindex="-1"
     >
       <pr-icon icon="'plus-circle'"></pr-icon>
-      add user search configuration
+      Add user search configuration
     </button>
   </div>
   <div class="col-sm-12" style="margin-top: 10px">
diff --git a/app/portainer/settings/authentication/save-auth-settings-button/save-auth-settings-button.html b/app/portainer/settings/authentication/save-auth-settings-button/save-auth-settings-button.html
index 959b06d29..5e797f260 100644
--- a/app/portainer/settings/authentication/save-auth-settings-button/save-auth-settings-button.html
+++ b/app/portainer/settings/authentication/save-auth-settings-button/save-auth-settings-button.html
@@ -3,7 +3,7 @@
   <div class="col-sm-12">
     <button
       type="button"
-      ng-class="[$ctrl.className, 'btn btn-primary btn-sm']"
+      ng-class="[$ctrl.className, 'btn btn-primary btn-sm !ml-0']"
       ng-click="$ctrl.onSaveSettings()"
       ng-disabled="$ctrl.saveButtonDisabled || $ctrl.saveButtonState"
       button-spinner="$ctrl.saveButtonState"
diff --git a/app/portainer/user-activity/activity-logs-view/activity-logs-datatable/activity-logs-datatable.html b/app/portainer/user-activity/activity-logs-view/activity-logs-datatable/activity-logs-datatable.html
index 330888e21..970090f69 100644
--- a/app/portainer/user-activity/activity-logs-view/activity-logs-datatable/activity-logs-datatable.html
+++ b/app/portainer/user-activity/activity-logs-view/activity-logs-datatable/activity-logs-datatable.html
@@ -6,9 +6,7 @@
           <div class="widget-icon space-right">
             <pr-icon icon="'history'"></pr-icon>
           </div>
-
           Activity Logs
-          <be-feature-indicator feature="$ctrl.feature"></be-feature-indicator>
         </div>
         <div class="vertical-center">
           <datatable-searchbar on-change="($ctrl.onChangeKeyword)" value="$ctrl.keyword"></datatable-searchbar>
diff --git a/app/portainer/user-activity/activity-logs-view/activity-logs-view.html b/app/portainer/user-activity/activity-logs-view/activity-logs-view.html
index e28f60a6f..d0e5801f5 100644
--- a/app/portainer/user-activity/activity-logs-view/activity-logs-view.html
+++ b/app/portainer/user-activity/activity-logs-view/activity-logs-view.html
@@ -26,15 +26,7 @@
           </div>
         </rd-widget-body>
       </rd-widget>
-    </div>
-  </div>
-</div>
-
-<div class="be-indicator-container limited-be mx-4">
-  <div>
-    <div class="limited-be-link vertical-center"><be-feature-indicator feature="$ctrl.limitedFeature"></be-feature-indicator></div>
-    <div class="limited-be-content">
-      <div class="row">
+      <div class="row mt-5">
         <activity-logs-datatable
           logs="$ctrl.state.logs"
           keyword="$ctrl.state.keyword"
diff --git a/app/portainer/user-activity/auth-logs-view/auth-logs-datatable/auth-logs-datatable.html b/app/portainer/user-activity/auth-logs-view/auth-logs-datatable/auth-logs-datatable.html
index 54a33aa2b..a72179f6d 100644
--- a/app/portainer/user-activity/auth-logs-view/auth-logs-datatable/auth-logs-datatable.html
+++ b/app/portainer/user-activity/auth-logs-view/auth-logs-datatable/auth-logs-datatable.html
@@ -6,9 +6,7 @@
           <div class="widget-icon space-right">
             <pr-icon icon="'history'"></pr-icon>
           </div>
-
           Authentication Events
-          <be-feature-indicator feature="$ctrl.feature"></be-feature-indicator>
         </div>
         <div class="vertical-center">
           <datatable-searchbar on-change="($ctrl.onChangeKeyword)"></datatable-searchbar>
diff --git a/app/portainer/user-activity/auth-logs-view/auth-logs-view.html b/app/portainer/user-activity/auth-logs-view/auth-logs-view.html
index ff9ab7c12..622d1bff3 100644
--- a/app/portainer/user-activity/auth-logs-view/auth-logs-view.html
+++ b/app/portainer/user-activity/auth-logs-view/auth-logs-view.html
@@ -25,15 +25,7 @@
           </div>
         </rd-widget-body>
       </rd-widget>
-    </div>
-  </div>
-</div>
-
-<div class="be-indicator-container limited-be mx-4">
-  <div>
-    <div class="limited-be-link vertical-center"><be-feature-indicator feature="$ctrl.limitedFeature"></be-feature-indicator></div>
-    <div class="limited-be-content">
-      <div class="row">
+      <div class="row mt-5">
         <auth-logs-datatable
           logs="$ctrl.state.logs"
           keyword="$ctrl.state.keyword"
diff --git a/app/react/components/BEFeatureIndicator/BEFeatureIndicator.css b/app/react/components/BEFeatureIndicator/BEFeatureIndicator.css
index 7e56f7538..69734ad1f 100644
--- a/app/react/components/BEFeatureIndicator/BEFeatureIndicator.css
+++ b/app/react/components/BEFeatureIndicator/BEFeatureIndicator.css
@@ -1,6 +1,6 @@
 .be-indicator {
-  @apply border-solid border border-gray-6;
-  @apply text-gray-6 text-xs;
+  @apply border border-solid border-gray-6;
+  @apply text-xs text-gray-6;
   border-radius: 15px;
   padding: 5px 10px;
   font-weight: 400;
@@ -23,5 +23,5 @@
 }
 
 .be-indicator-container {
-  @apply border-solid border border-gray-6;
+  @apply relative;
 }
diff --git a/app/react/components/BoxSelector/BoxSelectorItem.tsx b/app/react/components/BoxSelector/BoxSelectorItem.tsx
index adf4ee303..f03aca122 100644
--- a/app/react/components/BoxSelector/BoxSelectorItem.tsx
+++ b/app/react/components/BoxSelector/BoxSelectorItem.tsx
@@ -57,7 +57,13 @@ export function BoxSelectorItem<T extends Value>({
       type={type}
       checkIcon={checkIcon}
     >
-      {limitedToBE && <LimitedToBeBoxSelectorIndicator url={featureUrl} />}
+      {limitedToBE && (
+        <LimitedToBeBoxSelectorIndicator
+          url={featureUrl}
+          // show tooltip only for radio type options because be-only checkbox options can't be selected
+          showTooltip={type === 'radio'}
+        />
+      )}
       <div
         className={clsx('flex min-w-[140px] gap-2', {
           'opacity-30': limitedToBE,
diff --git a/app/react/components/BoxSelector/LimitedToBeBoxSelectorIndicator.tsx b/app/react/components/BoxSelector/LimitedToBeBoxSelectorIndicator.tsx
index 7022e7c18..1418e08b5 100644
--- a/app/react/components/BoxSelector/LimitedToBeBoxSelectorIndicator.tsx
+++ b/app/react/components/BoxSelector/LimitedToBeBoxSelectorIndicator.tsx
@@ -5,9 +5,13 @@ import { Tooltip } from '@@/Tip/Tooltip';
 
 interface Props {
   url?: string;
+  showTooltip?: boolean;
 }
 
-export function LimitedToBeBoxSelectorIndicator({ url }: Props) {
+export function LimitedToBeBoxSelectorIndicator({
+  url,
+  showTooltip = true,
+}: Props) {
   return (
     <div className="absolute left-0 top-0 w-full">
       <div className="mx-auto flex max-w-fit items-center rounded-b-lg border border-t-0 border-solid border-gray-6 bg-transparent px-3 py-1 text-gray-6">
@@ -20,10 +24,12 @@ export function LimitedToBeBoxSelectorIndicator({ url }: Props) {
           <Icon icon={Briefcase} className="!mr-1" />
           <span>Business Feature</span>
         </a>
-        <Tooltip
-          size="sm"
-          message="Select this option to preview this business feature."
-        />
+        {showTooltip && (
+          <Tooltip
+            size="sm"
+            message="Select this option to preview this business feature."
+          />
+        )}
       </div>
     </div>
   );
diff --git a/app/react/kubernetes/applications/DetailsView/ApplicationDetailsWidget/RollbackApplicationButton.tsx b/app/react/kubernetes/applications/DetailsView/ApplicationDetailsWidget/RollbackApplicationButton.tsx
index 6baba4f08..4e362ee22 100644
--- a/app/react/kubernetes/applications/DetailsView/ApplicationDetailsWidget/RollbackApplicationButton.tsx
+++ b/app/react/kubernetes/applications/DetailsView/ApplicationDetailsWidget/RollbackApplicationButton.tsx
@@ -11,6 +11,7 @@ import { Icon } from '@@/Icon';
 import { confirm } from '@@/modals/confirm';
 import { ModalType } from '@@/modals';
 import { buildConfirmButton } from '@@/modals/utils';
+import { TooltipWithChildren } from '@@/Tip/TooltipWithChildren';
 
 import {
   useApplicationRevisionList,
@@ -60,27 +61,38 @@ export function RollbackApplicationButton({
     appName
   );
 
+  const isRollbackNotAvailable =
+    !app ||
+    !appRevisions ||
+    appRevisions?.length < 2 ||
+    appDeployMethod !== 'application form' ||
+    patchAppMutation.isLoading;
+
+  const rollbackButton = (
+    <Button
+      ng-if="!ctrl.isExternalApplication()"
+      type="button"
+      color="light"
+      size="small"
+      className="!ml-0"
+      disabled={isRollbackNotAvailable}
+      onClick={() => rollbackApplication()}
+      data-cy="k8sAppDetail-rollbackButton"
+    >
+      <Icon icon={RotateCcw} className="mr-1" />
+      Rollback to previous configuration
+    </Button>
+  );
+
   return (
     <Authorized authorizations="K8sApplicationDetailsW">
-      <Button
-        ng-if="!ctrl.isExternalApplication()"
-        type="button"
-        color="light"
-        size="small"
-        className="!ml-0"
-        disabled={
-          !app ||
-          !appRevisions ||
-          appRevisions?.length < 2 ||
-          appDeployMethod !== 'application form' ||
-          patchAppMutation.isLoading
-        }
-        onClick={() => rollbackApplication()}
-        data-cy="k8sAppDetail-rollbackButton"
-      >
-        <Icon icon={RotateCcw} className="mr-1" />
-        Rollback to previous configuration
-      </Button>
+      {isRollbackNotAvailable ? (
+        <TooltipWithChildren message="Cannot roll back to previous configuration as none currently exists">
+          <span>{rollbackButton}</span>
+        </TooltipWithChildren>
+      ) : (
+        rollbackButton
+      )}
     </Authorized>
   );
 
diff --git a/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardKubernetes/KubeConfigTeaserForm.tsx b/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardKubernetes/KubeConfigTeaserForm.tsx
index c6386551d..0a9b5bd02 100644
--- a/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardKubernetes/KubeConfigTeaserForm.tsx
+++ b/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardKubernetes/KubeConfigTeaserForm.tsx
@@ -21,9 +21,8 @@ export function KubeConfigTeaserForm() {
   return (
     <Formik initialValues={initialValues} onSubmit={() => {}} validateOnMount>
       {() => (
-        <Form className="mt-5">
+        <Form>
           <FormSectionTitle>Environment details</FormSectionTitle>
-
           <div className="form-group">
             <div className="col-sm-12">
               <TextTip color="blue">
@@ -32,10 +31,9 @@ export function KubeConfigTeaserForm() {
                     href="https://docs.portainer.io/admin/environments/add/kubernetes/import"
                     target="_blank"
                     rel="noreferrer"
-                    className="mx-1"
                   >
                     Import the kubeconfig file
-                  </a>
+                  </a>{' '}
                   of an existing Kubernetes cluster located on-premise or on a
                   cloud platform. This will create a corresponding environment
                   in Portainer and install the agent on the cluster. Please
@@ -43,7 +41,7 @@ export function KubeConfigTeaserForm() {
                 </span>
               </TextTip>
             </div>
-            <div className="col-sm-12 text-muted small">
+            <div className="col-sm-12 text-muted text-xs">
               <ul className="p-2 pl-4">
                 <li>You have a load balancer enabled in your cluster</li>
                 <li>You specify current-context in your kubeconfig</li>
diff --git a/app/react/portainer/feature-flags/feature-flags.css b/app/react/portainer/feature-flags/feature-flags.css
index 58e387150..fc6526951 100644
--- a/app/react/portainer/feature-flags/feature-flags.css
+++ b/app/react/portainer/feature-flags/feature-flags.css
@@ -30,14 +30,14 @@ div.limited-be {
 }
 
 .limited-be-content {
-  @apply border-gray-6 p-2.5 text-xs opacity-50;
+  @apply border-gray-6 p-2.5 opacity-50;
 }
 
 .limited-be-link {
   padding: 10px;
   width: inherit;
   z-index: 5;
-  position: relative;
+  position: absolute;
   top: 0px;
   right: 0px;
   float: right;