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

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">
-        Business Edition Feature
-      </span>
+      <span className="be-indicator-label break-words">Business 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 '.';
+import { BEFeatureIndicator } from './BEFeatureIndicator';
 
 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} />
-          <Tooltip message="This feature is currently limited to Business Edition users only. " />
-        </div>
-        <div className="limited-be-content">{children}</div>
+      <div className="limited-be-link vertical-center">
+        <BEFeatureIndicator featureId={featureId} />
       </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 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>
-  );
-}

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 (
-    <TooltipWithChildren
-      message={htmlMessage || message}
-      position={position}
-      className={className}
-    >
-      <span className="inline-flex text-base">
-        <HelpCircle className="lucide ml-1" aria-hidden="true" />
-      </span>
-    </TooltipWithChildren>
+    <span className={clsx('ml-1 inline-flex items-center', sizeClasses[size])}>
+      <TooltipWithChildren
+        message={htmlMessage || message}
+        position={position}
+        className={className}
+      >
+        <HelpCircle className="lucide" aria-hidden="true" />
+      </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;
-}
-
-.tooltip-beteaser:hover {
-  @apply text-warning-5 th-dark:text-blue-8;
+  @apply text-blue-8 hover:text-blue-9;
 }

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>