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

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 th-dark:border-blue-8 th-dark:bg-[color:var(--bg-BE-only)] th-dark:text-white;
-  @apply th-highcontrast:bg-warning-8 th-highcontrast:bg-opacity-10 th-highcontrast:text-white;
+  @apply border-gray-6 bg-gray-6 bg-opacity-10;
+  @apply th-dark:border-gray-6 th-dark:bg-gray-6 th-dark:bg-opacity-10;
+  @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 && (
-        <LimitedToBeIndicator
-          tooltipId={beIndicatorTooltipId}
-          url={featureUrl}
-        />
-      )}
+      {limitedToBE && <LimitedToBeBoxSelectorIndicator 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>
-  );
-}