diff --git a/app/react/components/BoxSelector/BoxOption.module.css b/app/react/components/BoxSelector/BoxOption.module.css index d58829cd8..9496961a0 100644 --- a/app/react/components/BoxSelector/BoxOption.module.css +++ b/app/react/components/BoxSelector/BoxOption.module.css @@ -12,10 +12,12 @@ font-size: 12px; display: block; border-radius: 8px; - padding: 15px; + + padding: 20px 15px; text-align: left; box-shadow: var(--shadow-boxselector-color); position: relative; + margin-bottom: 0; text-align: left; height: 100%; @@ -46,7 +48,5 @@ @apply th-dark:border-blue-7 th-dark:bg-blue-10; @apply th-highcontrast:border-blue-7 th-highcontrast:bg-blue-10; - border-radius: 8px; - padding: 15px; box-shadow: none; } diff --git a/app/react/components/BoxSelector/BoxOption.tsx b/app/react/components/BoxSelector/BoxOption.tsx index 7e9066951..d5a16cd46 100644 --- a/app/react/components/BoxSelector/BoxOption.tsx +++ b/app/react/components/BoxSelector/BoxOption.tsx @@ -51,10 +51,14 @@ export function BoxOption({ {!disabled && (
diff --git a/app/react/components/BoxSelector/BoxSelector.tsx b/app/react/components/BoxSelector/BoxSelector.tsx index 3580076f0..9c17e6814 100644 --- a/app/react/components/BoxSelector/BoxSelector.tsx +++ b/app/react/components/BoxSelector/BoxSelector.tsx @@ -1,5 +1,3 @@ -import { Check, Minus } from 'lucide-react'; - import styles from './BoxSelector.module.css'; import { BoxSelectorItem } from './BoxSelectorItem'; import { BoxSelectorOption, Value } from './types'; @@ -47,7 +45,6 @@ export function BoxSelector({ type={props.isMulti ? 'checkbox' : 'radio'} isSelected={isSelected} slim={slim} - checkIcon={props.isMulti ? Minus : Check} /> ))}
diff --git a/app/react/components/BoxSelector/BoxSelectorItem.module.css b/app/react/components/BoxSelector/BoxSelectorItem.module.css index 1681a864b..f9861473e 100644 --- a/app/react/components/BoxSelector/BoxSelectorItem.module.css +++ b/app/react/components/BoxSelector/BoxSelectorItem.module.css @@ -13,10 +13,8 @@ } .image-container { - margin-bottom: 20px; - text-align: left; - margin-bottom: 0; + text-align: left; } .icon, @@ -43,8 +41,8 @@ .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:bg-warning-8 th-dark:bg-opacity-10; - @apply th-highcontrast:bg-warning-8 th-highcontrast:bg-opacity-10; + @apply th-dark:bg-warning-8 th-dark:bg-opacity-10 th-dark:text-white; + @apply th-highcontrast:bg-warning-8 th-highcontrast:bg-opacity-10 th-highcontrast:text-white; filter: none; } diff --git a/app/react/components/BoxSelector/BoxSelectorItem.tsx b/app/react/components/BoxSelector/BoxSelectorItem.tsx index 537f1bcb4..bb5ae97c3 100644 --- a/app/react/components/BoxSelector/BoxSelectorItem.tsx +++ b/app/react/components/BoxSelector/BoxSelectorItem.tsx @@ -1,5 +1,6 @@ import clsx from 'clsx'; import { Icon as ReactFeatherComponentType, Check } from 'lucide-react'; +import { Fragment } from 'react'; import { isLimitedToBE } from '@/react/portainer/feature-flags/feature-flags.service'; import { Icon } from '@/react/components/Icon'; @@ -38,6 +39,9 @@ export function BoxSelectorItem({ const limitedToBE = isLimitedToBE(option.feature); const beIndicatorTooltipId = `box-selector-item-${radioName}-${option.id}-limited`; + + const ContentBox = slim ? 'div' : Fragment; + return ( ({ type={type} checkIcon={checkIcon} > - <> - {limitedToBE && ( - - )} -
-
- {renderIcon()} -
-
-
{option.label}
-

{option.description}

-
+ {limitedToBE && } +
+
+ {renderIcon()}
- + +
{option.label}
+

{option.description}

+
+
); diff --git a/app/react/components/BoxSelector/LogoIcon.tsx b/app/react/components/BoxSelector/LogoIcon.tsx index c94cd1a7c..54899fb23 100644 --- a/app/react/components/BoxSelector/LogoIcon.tsx +++ b/app/react/components/BoxSelector/LogoIcon.tsx @@ -7,7 +7,7 @@ export function LogoIcon({ icon }: Props) {
diff --git a/app/react/portainer/environments/wizard/EnvironmentTypeSelectView/kaas-icon.svg b/app/react/portainer/environments/wizard/EnvironmentTypeSelectView/kaas-icon.svg index 3c042bd69..61f7b621f 100644 --- a/app/react/portainer/environments/wizard/EnvironmentTypeSelectView/kaas-icon.svg +++ b/app/react/portainer/environments/wizard/EnvironmentTypeSelectView/kaas-icon.svg @@ -1,5 +1,4 @@ - - - \ No newline at end of file + + + +