fix(boxselector): fix darkmode BE teaser style [EE-4145] (#7598)

* fix(boxselector): fix darkmode BE teaser style [EE-4145]

* make opacity same when selected

* add missing link to teaser

* style unchecked boxes + light mode

* revert colors for ligh theme

app/react/components/BoxSelector/BoxSelectorItem.css

@@ -73,6 +73,7 @@
 .box-selector-item input[type='radio']:checked + label {
   @apply bg-blue-2 border-blue-6;
   @apply th-dark:bg-blue-10 th-dark:border-blue-7;
+  @apply th-highcontrast:bg-blue-10 th-highcontrast:border-blue-7;
 
   background-image: url(../../../assets/ico/checked.svg);
   background-repeat: no-repeat;
@@ -90,9 +91,10 @@
 }
 
 .box-selector-item.limited.business label,
-.box-selector-item.limited.business input[type='radio']:checked + label {
+.box-selector-item.limited.business input[type='radio'] + label {
   @apply border-warning-7 bg-warning-1 text-black;
-  @apply th-dark:bg-warning-3;
+  @apply th-dark:bg-warning-8 th-dark:bg-opacity-10;
+  @apply th-highcontrast:bg-warning-8 th-highcontrast:bg-opacity-10;
 }
 
 .boxselector_img_container {
@@ -128,4 +130,5 @@
 
 .box-selector-item p {
   margin-bottom: 0;
+  color: var(--text-boxselector-header);
 }

app/react/components/BoxSelector/BoxSelectorItem.tsx

@@ -44,7 +44,10 @@ export function BoxSelectorItem<T extends number | string>({
     >
       <>
         {limitedToBE && (
-          <LimitedToBeIndicator tooltipId={beIndicatorTooltipId} />
+          <LimitedToBeIndicator
+            tooltipId={beIndicatorTooltipId}
+            featureId={option.feature}
+          />
         )}
         <div className={clsx({ 'opacity-30': limitedToBE })}>
           <div className="boxselector_img_container">

app/react/components/BoxSelector/LimitedToBeIndicator.tsx

@@ -1,16 +1,25 @@
-import { HelpCircle } from 'react-feather';
 import ReactTooltip from 'react-tooltip';
+import { HelpCircle } from 'react-feather';
+
+import { FeatureId } from '@/portainer/feature-flags/enums';
+
+import { getFeatureDetails } from '@@/BEFeatureIndicator/utils';
 
 interface Props {
   tooltipId: string;
+  featureId?: FeatureId;
 }
 
-export function LimitedToBeIndicator({ tooltipId }: Props) {
+export function LimitedToBeIndicator({ tooltipId, featureId }: Props) {
+  const { url } = getFeatureDetails(featureId);
+
   return (
     <>
       <div className="absolute left-0 top-0 w-full">
         <div className="mx-auto max-w-fit bg-warning-4 rounded-b-lg py-1 px-3 flex gap-1 text-sm items-center">
+          <a href={url} target="_blank" rel="noopener noreferrer">
             <span className="text-warning-9">Pro Feature</span>
+          </a>
           <HelpCircle
             className="feather !text-warning-7"
             data-tip