fix(ui/box-selectors): make multi use square [EE-3856] (#8470)

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;
 }

app/react/components/BoxSelector/BoxOption.tsx

@@ -51,10 +51,14 @@ export function BoxOption<T extends Value>({
         {!disabled && (
           <div
             className={clsx(
-              'absolute top-4 right-4 flex h-4 w-4 items-center justify-center rounded-full border border-solid border-blue-8 font-bold text-white',
+              'absolute top-4 right-4 flex h-4 w-4 items-center justify-center border border-solid  font-bold text-white',
               {
-                'bg-white': !selected,
-                'bg-blue-8': selected,
+                'border-gray-6 bg-white': !selected,
+                'border-blue-8 bg-blue-8': selected,
+              },
+              {
+                'rounded-full': type === 'radio',
+                'rounded-sm': type === 'checkbox',
               }
             )}
           >

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<T extends Value>({
                 type={props.isMulti ? 'checkbox' : 'radio'}
                 isSelected={isSelected}
                 slim={slim}
-                checkIcon={props.isMulti ? Minus : Check}
               />
             ))}
         </div>

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;
 }

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<T extends Value>({
   const limitedToBE = isLimitedToBE(option.feature);
 
   const beIndicatorTooltipId = `box-selector-item-${radioName}-${option.id}-limited`;
+
+  const ContentBox = slim ? 'div' : Fragment;
+
   return (
     <BoxOption
       className={clsx(styles.boxSelectorItem, {
@@ -53,33 +57,22 @@ export function BoxSelectorItem<T extends Value>({
       type={type}
       checkIcon={checkIcon}
     >
-      <>
-        {limitedToBE && (
-          <LimitedToBeIndicator
-            tooltipId={beIndicatorTooltipId}
-            featureId={option.feature}
-          />
-        )}
-        <div
-          className={clsx('flex gap-2', {
-            'opacity-30': limitedToBE,
-            'h-full flex-col justify-between': !slim,
-            'slim items-center': slim,
-          })}
-        >
-          <div
-            className={clsx(styles.imageContainer, 'flex items-center', {
-              'flex-1': !slim,
-            })}
-          >
-            {renderIcon()}
-          </div>
-          <div>
-            <div className={styles.header}>{option.label}</div>
-            <p>{option.description}</p>
-          </div>
+      {limitedToBE && <LimitedToBeIndicator tooltipId={beIndicatorTooltipId} />}
+      <div
+        className={clsx('flex gap-2', {
+          'opacity-30': limitedToBE,
+          'h-full flex-col justify-start': !slim,
+          'slim items-center': slim,
+        })}
+      >
+        <div className={clsx(styles.imageContainer, 'flex items-start')}>
+          {renderIcon()}
         </div>
-      </>
+        <ContentBox>
+          <div className={styles.header}>{option.label}</div>
+          <p className="mb-0">{option.description}</p>
+        </ContentBox>
+      </div>
     </BoxOption>
   );
 

app/react/components/BoxSelector/LogoIcon.tsx

@@ -7,7 +7,7 @@ export function LogoIcon({ icon }: Props) {
     <div
       className={`
    inline-flex h-14 w-14
-   items-center justify-center text-6xl
+   items-center justify-center text-7xl
 `}
     >
       <Icon icon={icon} className="!flex" />