fix(be-teaser): mute styles [EE-6035] (#10349)

app/assets/css/theme.css

@@ -87,7 +87,7 @@
 
   --orange-1: #e86925;
 
-  --BE-only: var(--ui-warning-7);
+  --BE-only: var(--ui-gray-6);
 
   --text-log-viewer-color-json-grey: var(--text-log-viewer-color);
   --text-log-viewer-color-json-magenta: var(--text-log-viewer-color);
@@ -259,8 +259,7 @@
 
 /* Dark Theme */
 [theme='dark'] {
-  --BE-only: var(--ui-blue-8);
+  --BE-only: var(--ui-gray-6);
-  --bg-BE-only: rgba(225, 223, 223, 0.08);
 
   --text-log-viewer-color-json-grey: var(--text-log-viewer-color);
   --text-log-viewer-color-json-magenta: var(--text-log-viewer-color);
@@ -434,6 +433,7 @@
 
 /* High Contrast Theme */
 [theme='highcontrast'] {
+  --BE-only: var(--ui-gray-6);
   --text-log-viewer-color-json-grey: var(--text-log-viewer-color);
   --text-log-viewer-color-json-magenta: var(--text-log-viewer-color);
   --text-log-viewer-color-json-yellow: var(--text-log-viewer-color);

app/portainer/components/BEFeatureIndicator/BEFeatureIndicator.html

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

app/portainer/components/accessManagement/porAccessManagementController.js

@@ -76,7 +76,7 @@ class PorAccessManagementController {
     }
 
     if (this.isRoleLimitedToBE(role)) {
-      return `${role.Name} (Business Edition Feature)`;
+      return `${role.Name} (Business Feature)`;
     }
 
     return `${role.Name} (Default)`;

app/portainer/oauth/components/oauth-settings/oauth-settings.html

@@ -169,30 +169,9 @@
 
   <oauth-providers-selector on-change="($ctrl.onSelectProvider)" value="$ctrl.state.provider"></oauth-providers-selector>
 
+  <div ng-if="$ctrl.state.provider == 'custom' || $ctrl.state.overrideConfiguration">
     <div class="col-sm-12 form-section-title">OAuth Configuration</div>
 
-  <div class="form-group" ng-if="$ctrl.state.provider == 'microsoft'">
-    <label for="oauth_microsoft_tenant_id" class="col-sm-3 col-lg-2 control-label text-left">
-      Tenant ID
-      <portainer-tooltip message="'ID of the Azure Directory you wish to authenticate against. Also known as the Directory ID'"></portainer-tooltip>
-    </label>
-    <div class="col-sm-9 col-lg-10">
-      <input
-        type="text"
-        class="form-control"
-        id="oauth_microsoft_tenant_id"
-        placeholder="xxxxxxxxxxxxxxxxxxxx"
-        ng-model="$ctrl.state.microsoftTenantID"
-        ng-change="$ctrl.onMicrosoftTenantIDChange()"
-        limited-feature-dir="{{::$ctrl.limitedFeature}}"
-        limited-feature-class="limited-be"
-        limited-feature-disabled
-        limited-feature-tabindex="-1"
-        required
-      />
-    </div>
-  </div>
-
     <div class="form-group">
       <label for="oauth_client_id" class="col-sm-3 col-lg-2 control-label text-left">
         {{ $ctrl.state.provider == 'microsoft' ? 'Application ID' : 'Client ID' }}
@@ -230,7 +209,6 @@
       </div>
     </div>
 
-  <div ng-if="$ctrl.state.provider == 'custom' || $ctrl.state.overrideConfiguration">
     <div class="form-group">
       <label for="oauth_authorization_uri" class="col-sm-3 col-lg-2 control-label text-left">
         Authorization URL
@@ -363,9 +341,81 @@
         />
       </div>
     </div>
+    <save-auth-settings-button
+      on-save-settings="($ctrl.onSaveSettings)"
+      save-button-state="($ctrl.saveButtonState)"
+      save-button-disabled="!$ctrl.isOAuthTeamMembershipFormValid() || oauthSettingsForm.$invalid"
+      limited-feature-id="$ctrl.limitedFeature"
+      limited-feature-class="$ctrl.limitedFeatureClass"
+      class-name="'oauth-save-settings-button'"
+    ></save-auth-settings-button>
   </div>
 
-  <div class="form-group" ng-if="$ctrl.state.provider != 'custom'">
+  <div ng-if="$ctrl.state.provider != 'custom'" class="limited-be">
+    <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>
+
+      <div class="form-group" ng-if="$ctrl.state.provider == 'microsoft'">
+        <label for="oauth_microsoft_tenant_id" class="col-sm-3 col-lg-2 control-label text-left">
+          Tenant ID
+          <portainer-tooltip message="'ID of the Azure Directory you wish to authenticate against. Also known as the Directory ID'"></portainer-tooltip>
+        </label>
+        <div class="col-sm-9 col-lg-10">
+          <input
+            type="text"
+            class="form-control"
+            id="oauth_microsoft_tenant_id"
+            placeholder="xxxxxxxxxxxxxxxxxxxx"
+            ng-model="$ctrl.state.microsoftTenantID"
+            ng-change="$ctrl.onMicrosoftTenantIDChange()"
+            limited-feature-dir="{{::$ctrl.limitedFeature}}"
+            limited-feature-class="limited-be"
+            limited-feature-disabled
+            limited-feature-tabindex="-1"
+            required
+          />
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label for="oauth_client_id" class="col-sm-3 col-lg-2 control-label text-left">
+          {{ $ctrl.state.provider == 'microsoft' ? 'Application ID' : 'Client ID' }}
+          <portainer-tooltip message="'Public identifier of the OAuth application'"></portainer-tooltip>
+        </label>
+        <div class="col-sm-9 col-lg-10">
+          <input
+            type="text"
+            id="oauth_client_id"
+            ng-model="$ctrl.settings.ClientID"
+            placeholder="xxxxxxxxxxxxxxxxxxxx"
+            ng-class="['form-control', { 'limited-be': $ctrl.isLimitedToBE && $ctrl.state.provider !== 'custom' }]"
+            ng-disabled="$ctrl.isLimitedToBE && $ctrl.state.provider !== 'custom'"
+            tabindex="{{ $ctrl.isLimitedToBE && $ctrl.state.provider !== 'custom' ? -1 : 0 }}"
+          />
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label for="oauth_client_secret" class="col-sm-3 col-lg-2 control-label text-left">
+          {{ $ctrl.state.provider == 'microsoft' ? 'Application key' : 'Client secret' }}
+        </label>
+        <div class="col-sm-9 col-lg-10">
+          <input
+            type="password"
+            class="form-control"
+            id="oauth_client_secret"
+            ng-model="$ctrl.settings.ClientSecret"
+            placeholder="xxxxxxxxxxxxxxxxxxxx"
+            autocomplete="new-password"
+            ng-class="['form-control', { 'limited-be': $ctrl.isLimitedToBE && $ctrl.state.provider !== 'custom' }]"
+            ng-disabled="$ctrl.isLimitedToBE && $ctrl.state.provider !== 'custom'"
+            tabindex="{{ $ctrl.isLimitedToBE && $ctrl.state.provider !== 'custom' ? -1 : 0 }}"
+          />
+        </div>
+      </div>
+
+      <div class="form-group">
         <div class="col-sm-12">
           <a class="small interactive vertical-center" ng-if="!$ctrl.state.overrideConfiguration" ng-click="$ctrl.state.overrideConfiguration = true;">
             <pr-icon icon="'wrench'"></pr-icon>
@@ -385,4 +435,6 @@
         limited-feature-class="$ctrl.limitedFeatureClass"
         class-name="'oauth-save-settings-button'"
       ></save-auth-settings-button>
+    </div>
+  </div>
 </ng-form>

app/portainer/react/components/index.ts

@@ -71,7 +71,6 @@ export const ngModule = angular
       'message',
       'buttonText',
       'className',
-      'icon',
       'buttonClassName',
     ])
   )
@@ -82,7 +81,7 @@ export const ngModule = angular
 
   .component(
     'portainerTooltip',
-    r2a(Tooltip, ['message', 'position', 'className', 'setHtmlMessage'])
+    r2a(Tooltip, ['message', 'position', 'className', 'setHtmlMessage', 'size'])
   )
   .component('badge', r2a(Badge, ['type', 'className']))
   .component('fileUploadField', fileUploadField)

app/portainer/settings/authentication/ldap/ad-settings/ad-settings.html

@@ -1,9 +1,6 @@
 <ng-form class="ad-settings" limited-feature-dir="{{::$ctrl.limitedFeatureId}}" limited-feature-class="limited-be">
-  <div class="overlay">
+  <div>
-    <div class="limited-be-link vertical-center"
+    <div class="limited-be-link vertical-center"><be-feature-indicator feature="$ctrl.limitedFeatureId"></be-feature-indicator></div>
-      ><be-feature-indicator feature="$ctrl.limitedFeatureId"></be-feature-indicator
-      ><portainer-tooltip message="'This feature is currently limited to Business Edition users only. '"></portainer-tooltip
-    ></div>
     <div class="limited-be-content">
       <auto-user-provision-toggle ng-model="$ctrl.settings.AutoCreateUsers">
         <field-description>

app/portainer/settings/authentication/ldap/ldap-custom-admin-group/ldap-custom-admin-group.html

@@ -2,8 +2,7 @@
   Auto-populate team admins <be-feature-indicator feature="$ctrl.limitedFeatureId" class="space-left" ng-if="$ctrl.isLimitedFeatureSelfContained"></be-feature-indicator>
 </div>
 
-<rd-widget ng-repeat="config in $ctrl.settings.AdminGroupSearchSettings | limitTo: (1 - $ctrl.settings.AdminGroupSearchSettings)">
+<div class="w-full px-5 pt-3" ng-repeat="config in $ctrl.settings.AdminGroupSearchSettings | limitTo: (1 - $ctrl.settings.AdminGroupSearchSettings)">
-  <rd-widget-body>
   <div class="form-group mb-3" ng-if="$index > 0">
     <span class="col-sm-12 text-muted small"> Extra search configuration </span>
   </div>
@@ -67,8 +66,7 @@
       </button>
     </div>
   </div>
-  </rd-widget-body>
+</div>
-</rd-widget>
 
 <div class="form-group mt-3">
   <div class="col-sm-12">

app/portainer/settings/authentication/ldap/ldap-group-search-item/ldap-group-search-item.html

@@ -1,5 +1,4 @@
-<rd-widget>
+<div class="w-full px-5 pt-3">
-  <rd-widget-body>
   <div ng-if="$ctrl.index > 0" style="margin-bottom: 10px">
     <span class="text-muted small"> Extra search configuration </span>
     <button
@@ -37,17 +36,10 @@
       </span>
     </div>
     <div class="col-sm-12" ng-if="$ctrl.groups.length">
-        <rd-widget>
+      <div class="w-full px-5 pt-3">
-          <rd-widget-body>
         <div class="form-group no-margin-last-child" ng-repeat="entry in $ctrl.groups">
           <div class="col-sm-4">
-                <select
+            <select class="form-control" ng-model="entry.type" ng-change="$ctrl.onGroupsChange()" limited-feature-dir="{{::$ctrl.limitedFeatureId}}" limited-feature-tabindex="-1">
-                  class="form-control"
-                  ng-model="entry.type"
-                  ng-change="$ctrl.onGroupsChange()"
-                  limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
-                  limited-feature-tabindex="-1"
-                >
               <option value="ou">OU Name</option>
               <option value="cn">Folder Name</option>
             </select>
@@ -73,8 +65,7 @@
             </button>
           </div>
         </div>
-          </rd-widget-body>
+      </div>
-        </rd-widget>
     </div>
   </div>
 
@@ -84,5 +75,4 @@
       {{ $ctrl.config.GroupFilter }}
     </div>
   </div>
-  </rd-widget-body>
+</div>
-</rd-widget>

app/portainer/settings/authentication/ldap/ldap-settings-openldap/ldap-settings-openldap.html

@@ -1,9 +1,6 @@
 <ng-form limited-feature-dir="{{::$ctrl.limitedFeatureId}}" limited-feature-class="limited-be" class="ldap-settings-openldap">
-  <div class="overlay">
+  <div>
-    <div class="limited-be-link vertical-center"
+    <div class="limited-be-link vertical-center"><be-feature-indicator feature="$ctrl.limitedFeatureId"></be-feature-indicator></div>
-      ><be-feature-indicator feature="$ctrl.limitedFeatureId"></be-feature-indicator
-      ><portainer-tooltip message="'This feature is currently limited to Business Edition users only. '"></portainer-tooltip
-    ></div>
     <div class="limited-be-content">
       <div>
         <div class="col-sm-12 form-section-title"> Information </div>

app/portainer/settings/authentication/ldap/ldap-user-search-item/ldap-user-search-item.html

@@ -1,5 +1,4 @@
-<rd-widget>
+<div class="w-full px-5 pt-3">
-  <rd-widget-body>
   <div ng-if="$ctrl.index > 0" style="margin-bottom: 10px">
     <span class="text-muted small"> Extra search configuration </span>
     <button
@@ -97,5 +96,4 @@
       {{ $ctrl.config.Filter }}
     </div>
   </div>
-  </rd-widget-body>
+</div>
-</rd-widget>

app/portainer/user-activity/activity-logs-view/activity-logs-view.html

@@ -1,11 +1,8 @@
 <page-header title="'User Activity'" breadcrumbs="['Activity Logs']" reload="true"> </page-header>
 
 <div class="be-indicator-container limited-be mx-4">
-  <div class="overlay">
+  <div>
-    <div class="limited-be-link vertical-center"
+    <div class="limited-be-link vertical-center"><be-feature-indicator feature="$ctrl.limitedFeature"></be-feature-indicator></div>
-      ><be-feature-indicator feature="$ctrl.limitedFeature"></be-feature-indicator
-      ><portainer-tooltip message="'This feature is currently limited to Business Edition users only. '"></portainer-tooltip
-    ></div>
     <div class="limited-be-content">
       <rd-widget>
         <rd-widget-body>
@@ -34,11 +31,8 @@
 </div>
 
 <div class="be-indicator-container limited-be mx-4">
-  <div class="overlay">
+  <div>
-    <div class="limited-be-link vertical-center"
+    <div class="limited-be-link vertical-center"><be-feature-indicator feature="$ctrl.limitedFeature"></be-feature-indicator></div>
-      ><be-feature-indicator feature="$ctrl.limitedFeature"></be-feature-indicator
-      ><portainer-tooltip message="'This feature is currently limited to Business Edition users only. '"></portainer-tooltip
-    ></div>
     <div class="limited-be-content">
       <div class="row">
         <activity-logs-datatable

app/portainer/user-activity/auth-logs-view/auth-logs-view.html

@@ -1,11 +1,8 @@
 <page-header title="'User Activity'" breadcrumbs="['User authentication activity']" reload="true"> </page-header>
 
 <div class="be-indicator-container limited-be mx-4">
-  <div class="overlay">
+  <div>
-    <div class="limited-be-link vertical-center"
+    <div class="limited-be-link vertical-center"><be-feature-indicator feature="$ctrl.limitedFeature"></be-feature-indicator></div>
-      ><be-feature-indicator feature="$ctrl.limitedFeature"></be-feature-indicator
-      ><portainer-tooltip message="'This feature is currently limited to Business Edition users only. '"></portainer-tooltip
-    ></div>
     <div class="limited-be-content">
       <rd-widget>
         <rd-widget-body>
@@ -33,11 +30,8 @@
 </div>
 
 <div class="be-indicator-container limited-be mx-4">
-  <div class="overlay">
+  <div>
-    <div class="limited-be-link vertical-center"
+    <div class="limited-be-link vertical-center"><be-feature-indicator feature="$ctrl.limitedFeature"></be-feature-indicator></div>
-      ><be-feature-indicator feature="$ctrl.limitedFeature"></be-feature-indicator
-      ><portainer-tooltip message="'This feature is currently limited to Business Edition users only. '"></portainer-tooltip
-    ></div>
     <div class="limited-be-content">
       <div class="row">
         <auth-logs-datatable

app/react/components/BEFeatureIndicator/BEFeatureIndicator.css

@@ -1,5 +1,6 @@
 .be-indicator {
-  border: solid 1px var(--BE-only);
+  @apply border-solid border border-gray-6;
+  @apply text-gray-6 text-xs;
   border-radius: 15px;
   padding: 5px 10px;
   font-weight: 400;
@@ -9,11 +10,12 @@
 }
 
 .be-indicator .be-indicator-icon {
-  @apply text-black th-highcontrast:text-white th-dark:text-blue-8;
+  @apply text-inherit;
 }
 
 .be-indicator:hover {
-  @apply no-underline;
+  @apply underline;
+  @apply border-blue-9 text-blue-9;
 }
 
 .be-indicator:hover .be-indicator-label {
@@ -21,5 +23,5 @@
 }
 
 .be-indicator-container {
-  border: solid 1px var(--BE-only);
+  @apply border-solid border border-gray-6;
 }

app/react/components/BEFeatureIndicator/BEFeatureIndicator.tsx

@@ -29,16 +29,14 @@ export function BEFeatureIndicator({
   }
   return (
     <a
-      className={clsx('be-indicator vertical-center', className)}
+      className={clsx('be-indicator vertical-center text-xs', className)}
       href={url}
       target="_blank"
       rel="noopener noreferrer"
     >
       {children}
       {showIcon && <Icon icon={Briefcase} className="be-indicator-icon mr-1" />}
-      <span className="be-indicator-label break-words">
+      <span className="be-indicator-label break-words">Business Feature</span>
-        Business Edition Feature
-      </span>
     </a>
   );
 }

app/react/components/BEFeatureIndicator/BEOverlay.tsx

@@ -1,16 +1,18 @@
+import clsx from 'clsx';
+
 import { FeatureId } from '@/react/portainer/feature-flags/enums';
 import { isLimitedToBE } from '@/react/portainer/feature-flags/feature-flags.service';
 
-import { Tooltip } from '@@/Tip/Tooltip';
+import { BEFeatureIndicator } from './BEFeatureIndicator';
-
-import { BEFeatureIndicator } from '.';
 
 export function BEOverlay({
   featureId,
   children,
+  className,
 }: {
   featureId: FeatureId;
   children: React.ReactNode;
+  className?: string;
 }) {
   const isLimited = isLimitedToBE(featureId);
   if (!isLimited) {
@@ -19,13 +21,10 @@ export function BEOverlay({
 
   return (
     <div className="be-indicator-container limited-be">
-      <div className="overlay">
       <div className="limited-be-link vertical-center">
-          <BEFeatureIndicator featureId={FeatureId.CA_FILE} />
+        <BEFeatureIndicator featureId={featureId} />
-          <Tooltip message="This feature is currently limited to Business Edition users only. " />
-        </div>
-        <div className="limited-be-content">{children}</div>
       </div>
+      <div className={clsx('limited-be-content', className)}>{children}</div>
     </div>
   );
 }

app/react/components/BETeaserButton.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { Briefcase } from 'lucide-react';
 
 import { FeatureId } from '@/react/portainer/feature-flags/enums';
 
@@ -11,7 +11,6 @@ interface Props {
   message: string;
   buttonText: string;
   className?: string;
-  icon?: ReactNode;
   buttonClassName?: string;
 }
 
@@ -21,7 +20,6 @@ export function BETeaserButton({
   message,
   buttonText,
   className,
-  icon,
   buttonClassName,
 }: Props) {
   return (
@@ -34,9 +32,9 @@ export function BETeaserButton({
       <span>
         <Button
           className={buttonClassName}
-          icon={icon}
+          icon={Briefcase}
           type="button"
-          color="warninglight"
+          color="default"
           size="small"
           onClick={() => {}}
           disabled

app/react/components/BoxSelector/BoxSelectorItem.module.css

@@ -38,12 +38,12 @@
   padding-left: 20px;
 }
 
-/* used for BE teaser. Dark theme specs defined by EE-5621 */
+/* used for BE teaser */
 .box-selector-item.limited.business label,
 .box-selector-item.limited.business input:checked + label {
-  @apply border-warning-7 bg-warning-1 text-black;
+  @apply border-gray-6 bg-gray-6 bg-opacity-10;
-  @apply th-dark:border-blue-8 th-dark:bg-[color:var(--bg-BE-only)] th-dark:text-white;
+  @apply th-dark:border-gray-6 th-dark:bg-gray-6 th-dark:bg-opacity-10;
-  @apply th-highcontrast:bg-warning-8 th-highcontrast:bg-opacity-10 th-highcontrast:text-white;
+  @apply th-highcontrast:border-gray-6 th-highcontrast:bg-gray-6 th-highcontrast:bg-opacity-10;
 
   filter: none;
 }

app/react/components/BoxSelector/BoxSelectorItem.tsx

@@ -9,7 +9,7 @@ import { getFeatureDetails } from '@@/BEFeatureIndicator/utils';
 
 import styles from './BoxSelectorItem.module.css';
 import { BoxSelectorOption, Value } from './types';
-import { LimitedToBeIndicator } from './LimitedToBeIndicator';
+import { LimitedToBeBoxSelectorIndicator } from './LimitedToBeBoxSelectorIndicator';
 import { BoxOption } from './BoxOption';
 import { LogoIcon } from './LogoIcon';
 
@@ -40,8 +40,6 @@ export function BoxSelectorItem<T extends Value>({
     option.feature
   );
 
-  const beIndicatorTooltipId = `box-selector-item-${radioName}-${option.id}-limited`;
-
   const ContentBox = slim ? 'div' : Fragment;
 
   return (
@@ -59,14 +57,9 @@ export function BoxSelectorItem<T extends Value>({
       type={type}
       checkIcon={checkIcon}
     >
-      {limitedToBE && (
+      {limitedToBE && <LimitedToBeBoxSelectorIndicator url={featureUrl} />}
-        <LimitedToBeIndicator
-          tooltipId={beIndicatorTooltipId}
-          url={featureUrl}
-        />
-      )}
       <div
-        className={clsx('flex gap-2', {
+        className={clsx('flex min-w-[140px] gap-2', {
           'opacity-30': limitedToBE,
           'h-full flex-col justify-start': !slim,
           'slim items-center': slim,

app/react/components/BoxSelector/LimitedToBeBoxSelectorIndicator.tsx

@@ -0,0 +1,30 @@
+import { Briefcase } from 'lucide-react';
+
+import { Icon } from '@@/Icon';
+import { Tooltip } from '@@/Tip/Tooltip';
+
+interface Props {
+  url?: string;
+}
+
+export function LimitedToBeBoxSelectorIndicator({ url }: 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">
+        <a
+          className="inline-flex items-center text-xs text-gray-6"
+          href={url}
+          target="_blank"
+          rel="noreferrer"
+        >
+          <Icon icon={Briefcase} className="!mr-1" />
+          <span>Business Feature</span>
+        </a>
+        <Tooltip
+          size="sm"
+          message="Select this option to preview this business feature."
+        />
+      </div>
+    </div>
+  );
+}

app/react/components/BoxSelector/LimitedToBeIndicator.tsx

@@ -1,37 +0,0 @@
-import { HelpCircle } from 'lucide-react';
-import clsx from 'clsx';
-
-import { TooltipWithChildren } from '@@/Tip/TooltipWithChildren';
-
-interface Props {
-  tooltipId: string;
-  url?: string;
-}
-
-export function LimitedToBeIndicator({ tooltipId, url }: Props) {
-  return (
-    <div className="absolute left-0 top-0 w-full">
-      <div className="mx-auto flex max-w-fit items-center gap-1 rounded-b-lg bg-warning-4 px-3 py-1 text-sm th-dark:bg-[color:var(--bg-BE-only)]">
-        <a
-          className="text-warning-9 th-dark:text-blue-8"
-          href={url}
-          target="_blank"
-          rel="noreferrer"
-        >
-          BE Feature
-        </a>
-        <TooltipWithChildren
-          position="bottom"
-          className={clsx(tooltipId, 'portainer-tooltip')}
-          heading="Business Edition feature."
-          message="This feature is currently limited to Business Edition users only."
-        >
-          <HelpCircle
-            className="ml-1 !text-warning-7 th-dark:!text-blue-8"
-            aria-hidden="true"
-          />
-        </TooltipWithChildren>
-      </div>
-    </div>
-  );
-}

app/react/components/Tip/Tooltip/Tooltip.tsx

@@ -1,14 +1,26 @@
 import { HelpCircle } from 'lucide-react';
 import { ReactNode, useMemo } from 'react';
 import sanitize from 'sanitize-html';
+import clsx from 'clsx';
 
 import { TooltipWithChildren, Position } from '../TooltipWithChildren';
 
+type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+const sizeClasses: Record<Size, string> = {
+  xs: 'text-xs',
+  sm: 'text-sm',
+  md: 'text-base',
+  lg: 'text-lg',
+  xl: 'text-xl',
+};
+
 export interface Props {
   position?: Position;
   message: ReactNode;
   className?: string;
   setHtmlMessage?: boolean;
+  size?: Size;
 }
 
 export function Tooltip({
@@ -16,6 +28,7 @@ export function Tooltip({
   position = 'bottom',
   className,
   setHtmlMessage,
+  size = 'md',
 }: Props) {
   // allow angular views to set html messages for the tooltip
   const htmlMessage = useMemo(() => {
@@ -27,14 +40,14 @@ export function Tooltip({
   }, [setHtmlMessage, message]);
 
   return (
+    <span className={clsx('ml-1 inline-flex items-center', sizeClasses[size])}>
       <TooltipWithChildren
         message={htmlMessage || message}
         position={position}
         className={className}
       >
-      <span className="inline-flex text-base">
+        <HelpCircle className="lucide" aria-hidden="true" />
-        <HelpCircle className="lucide ml-1" aria-hidden="true" />
-      </span>
       </TooltipWithChildren>
+    </span>
   );
 }

app/react/components/Tip/TooltipWithChildren/TooltipWithChildren.module.css

@@ -36,9 +36,5 @@
 }
 
 .tooltip-beteaser {
-  @apply text-warning-5 th-dark:text-blue-8;
+  @apply text-blue-8 hover:text-blue-9;
-}
-
-.tooltip-beteaser:hover {
-  @apply text-warning-5 th-dark:text-blue-8;
 }

app/react/components/Tip/TooltipWithChildren/TooltipWithChildren.tsx

@@ -49,7 +49,7 @@ export function TooltipWithChildren({
               rel="noreferrer"
               className={styles.tooltipBeteaser}
             >
-              Business Edition Only
+              Business Feature
             </a>
           )}
         </div>

app/react/kubernetes/annotations/AnnotationsBeTeaser.tsx

@@ -1,5 +1,3 @@
-import { Plus } from 'lucide-react';
-
 import { FeatureId } from '@/react/portainer/feature-flags/enums';
 
 import { BETeaserButton } from '@@/BETeaserButton';
@@ -42,7 +40,6 @@ export function AnnotationsBeTeaser() {
           message="Allows specifying of annotations on this resource."
           featureId={FeatureId.K8S_ANNOTATIONS}
           buttonClassName="!ml-0"
-          icon={Plus}
         />
       </div>
     </div>

app/react/kubernetes/applications/DetailsView/ApplicationDetailsWidget/RestartApplicationButton.tsx

@@ -1,5 +1,3 @@
-import { RefreshCw } from 'lucide-react';
-
 import { FeatureId } from '@/react/portainer/feature-flags/enums';
 
 import { BETeaserButton } from '@@/BETeaserButton';
@@ -10,7 +8,6 @@ export function RestartApplicationButton() {
       buttonClassName="!ml-0"
       data-cy="k8sAppDetail-restartButton"
       heading="Rolling restart"
-      icon={RefreshCw}
       featureId={FeatureId.K8S_ROLLING_RESTART}
       message="A rolling restart of the application is performed."
       buttonText="Rolling restart"

app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardKubernetes/KubeConfigTeaserForm.tsx

@@ -81,7 +81,7 @@ export function KubeConfigTeaserForm() {
           <div className="form-group">
             <div className="col-sm-12">
               <LoadingButton
-                className="wizard-connect-button"
+                className="wizard-connect-button !ml-0"
                 loadingText="Connecting environment..."
                 isLoading={false}
                 disabled

app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardKubernetes/WizardKubernetes.tsx

@@ -11,7 +11,7 @@ import EdgeAgentAsyncIcon from '@/react/edge/components/edge-agent-async.svg?c';
 
 import { BoxSelectorOption } from '@@/BoxSelector/types';
 import { BoxSelector } from '@@/BoxSelector';
-import { BEFeatureIndicator } from '@@/BEFeatureIndicator';
+import { BEOverlay } from '@@/BEFeatureIndicator/BEOverlay';
 
 import { AnalyticsStateKey } from '../types';
 import { EdgeAgentTab } from '../shared/EdgeAgentTab';
@@ -112,11 +112,10 @@ export function WizardKubernetes({ onCreate }: Props) {
         );
       case 'kubeconfig':
         return (
-          <div className="border border-solid border-orange-1 px-1 py-5">
+          <div className="mb-3">
-            <BEFeatureIndicator
+            <BEOverlay featureId={FeatureId.K8S_CREATE_FROM_KUBECONFIG}>
-              featureId={options.find((o) => o.value === type)?.feature}
-            />
               <KubeConfigTeaserForm />
+            </BEOverlay>
           </div>
         );
       default:

app/react/portainer/feature-flags/feature-flags.css

@@ -10,17 +10,19 @@ button.limited-be,
 button[disabled].limited-be.oauth-save-settings-button {
   background-color: var(--BE-only);
   border-color: var(--BE-only);
+  margin-left: 0px;
 }
 
 button.limited-be.oauth-save-settings-button {
   background-color: var(--blue-2);
   border-color: transparent;
+  margin-left: 0px;
 }
 
 ng-form.limited-be,
 form.limited-be,
 div.limited-be {
-  border: solid 2px var(--BE-only);
+  border: solid 1px var(--BE-only);
   border-radius: 8px;
   pointer-events: none;
   touch-action: none;
@@ -28,49 +30,31 @@ div.limited-be {
 }
 
 .limited-be-content {
-  background: rgba(247, 144, 9, 0.1);
+  @apply border-gray-6 p-2.5 text-xs opacity-50;
-  opacity: 0.5;
-  padding: 10px;
 }
 
 .limited-be-link {
+  padding: 10px;
+  width: inherit;
   z-index: 5;
   position: relative;
-  width: 270px;
-  height: 40px;
   top: 0px;
   right: 0px;
   float: right;
   border-top-right-radius: 8px;
   border-bottom-left-radius: 8px;
-
-  @apply bg-warning-5 text-warning-9;
-  @apply th-dark:bg-[color:var(--bg-BE-only)] th-dark:text-blue-8;
-
-  padding: 5px 10px;
   touch-action: auto;
   cursor: hand;
   pointer-events: auto;
 }
 
 .limited-be-link a {
-  @apply pointer-events-auto cursor-pointer;
+  @apply text-gray-6;
-  @apply text-warning-9 th-dark:text-blue-8;
 }
 
 .limited-be-link a:hover {
-  @apply text-warning-9 underline th-dark:text-blue-8;
+  @apply underline;
-}
+  @apply border-blue-9 text-blue-9;
-
-.overlay {
-  @apply bg-center bg-no-repeat;
-  @apply bg-[url(~@/assets/ico/lock.svg)] th-dark:bg-[url(~@/assets/ico/lock-2.svg)];
-}
-
-.limited-be input,
-.limited-be .widget-body {
-  background: rgba(247, 144, 9, 0.05);
-  @apply th-dark:bg-[color:var(--bg-BE-only)];
 }
 
 .form-control.limited-be[disabled] {

app/react/portainer/settings/SettingsView/BackupSettingsView/BackupS3Form.tsx

@@ -13,6 +13,7 @@ import { FormControl } from '@@/form-components/FormControl';
 import { LoadingButton } from '@@/buttons/LoadingButton';
 import { Input } from '@@/form-components/Input';
 import { SwitchField } from '@@/form-components/SwitchField';
+import { BEOverlay } from '@@/BEFeatureIndicator/BEOverlay';
 
 import {
   useBackupS3Settings,
@@ -57,6 +58,7 @@ export function BackupS3Form() {
       validateOnMount
     >
       {({ values, errors, isSubmitting, setFieldValue, isValid }) => (
+        <BEOverlay featureId={FeatureId.S3_BACKUP_SETTING}>
           <Form className="form-horizontal">
             <div className="form-group">
               <div className="col-sm-12">
@@ -65,7 +67,6 @@ export function BackupS3Form() {
                   labelClass="col-sm-3 col-lg-2"
                   label="Schedule automatic backups"
                   checked={values.scheduleAutomaticBackup}
-                featureId={FeatureId.S3_BACKUP_SETTING}
                   onChange={(e) => setFieldValue('scheduleAutomaticBackup', e)}
                 />
               </div>
@@ -196,7 +197,6 @@ export function BackupS3Form() {
               </div>
             </div>
             <div className="form-group">
-            <hr />
               <div className="col-sm-12">
                 <LoadingButton
                   loadingText="Saving settings..."
@@ -210,6 +210,7 @@ export function BackupS3Form() {
               </div>
             </div>
           </Form>
+        </BEOverlay>
       )}
     </Formik>
   );

app/react/portainer/settings/SettingsView/HelmCertPanel.tsx

@@ -30,7 +30,7 @@ export function HelmCertPanel() {
   };
 
   return (
-    <BEOverlay featureId={FeatureId.CA_FILE}>
+    <BEOverlay featureId={FeatureId.CA_FILE} className="!p-0">
       <Widget>
         <Widget.Title
           icon={Key}

app/react/sidebar/UpgradeBEBanner/UpgradeBEBanner.tsx

@@ -78,8 +78,7 @@ function UpgradeBEBanner() {
         <ArrowUpCircle
           className={clsx(
             'lucide text-lg',
-            'fill-warning-6 stroke-[#023959] th-dark:stroke-black',
+            'fill-gray-6 stroke-[#023959] th-dark:stroke-black th-highcontrast:stroke-black'
-            'th-highcontrast:fill-warning-6  th-highcontrast:stroke-black'
           )}
         />
         {isSidebarOpen && <>Upgrade to Business Edition</>}