From 5b4f6098d89f6a43bdeda1c38afa4a274567ef7c Mon Sep 17 00:00:00 2001
From: itsconquest <william.conquest@portainer.io>
Date: Fri, 2 Sep 2022 12:42:48 +1200
Subject: [PATCH] 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
---
 .../components/BoxSelector/BoxSelectorItem.css    |  7 +++++--
 .../components/BoxSelector/BoxSelectorItem.tsx    |  5 ++++-
 .../BoxSelector/LimitedToBeIndicator.tsx          | 15 ++++++++++++---
 3 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/app/react/components/BoxSelector/BoxSelectorItem.css b/app/react/components/BoxSelector/BoxSelectorItem.css
index 047c7b547..668551eac 100644
--- a/app/react/components/BoxSelector/BoxSelectorItem.css
+++ b/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);
 }
diff --git a/app/react/components/BoxSelector/BoxSelectorItem.tsx b/app/react/components/BoxSelector/BoxSelectorItem.tsx
index 19e80e77b..13ec5dcf0 100644
--- a/app/react/components/BoxSelector/BoxSelectorItem.tsx
+++ b/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">
diff --git a/app/react/components/BoxSelector/LimitedToBeIndicator.tsx b/app/react/components/BoxSelector/LimitedToBeIndicator.tsx
index 4b4e7d0e0..a4f72b16f 100644
--- a/app/react/components/BoxSelector/LimitedToBeIndicator.tsx
+++ b/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">
-          <span className="text-warning-9">Pro Feature</span>
+          <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