fix(ui): box-selector fixes [EE-3949] (#7489)

app/react/components/BoxSelector/BadgeIcon.tsx

@@ -0,0 +1,19 @@
+import { Icon, IconProps } from '@@/Icon';
+
+type Props = IconProps;
+
+export function BadgeIcon({ icon, featherIcon }: Props) {
+  return (
+    <div
+      className={`badge-icon
+   text-3xl h-14 w-14
+   bg-blue-3 text-blue-8
+   th-dark:bg-gray-9 th-dark:text-blue-3
+   rounded-full
+   inline-flex items-center justify-center 
+`}
+    >
+      <Icon icon={icon} feather={featherIcon} className="feather !flex" />
+    </div>
+  );
+}

app/react/components/BoxSelector/BoxSelector.tsx

@@ -19,20 +19,27 @@ export function BoxSelector<T extends number | string>({
   onChange,
 }: Props<T>) {
   return (
-    <div className={clsx('boxselector_wrapper', styles.root)} role="radiogroup">
-      {options.map((option) =>
-        option.hide ? null : (
-          <BoxSelectorItem
-            key={option.id}
-            radioName={radioName}
-            option={option}
-            onChange={onChange}
-            selectedValue={value}
-            disabled={option.disabled && option.disabled()}
-            tooltip={option.tooltip && option.tooltip()}
-          />
-        )
-      )}
+    <div className="form-group">
+      <div className="col-sm-12">
+        <div
+          className={clsx('boxselector_wrapper', styles.root)}
+          role="radiogroup"
+        >
+          {options
+            .filter((option) => !option.hide)
+            .map((option) => (
+              <BoxSelectorItem
+                key={option.id}
+                radioName={radioName}
+                option={option}
+                onChange={onChange}
+                selectedValue={value}
+                disabled={option.disabled && option.disabled()}
+                tooltip={option.tooltip && option.tooltip()}
+              />
+            ))}
+        </div>
+      </div>
     </div>
   );
 }

app/react/components/BoxSelector/BoxSelectorItem.css

@@ -11,7 +11,6 @@
   font-weight: bold;
   user-select: none;
   color: var(--text-boxselector-header);
-  padding: 0px 10px;
 }
 
 .boxselector_header .fa,
@@ -46,6 +45,8 @@
 /* not disabled */
 .boxselector_wrapper input[type='radio']:not(:disabled) ~ label,
 .box-selector-item input[type='radio']:not(:disabled) ~ label {
+  background-color: var(--bg-boxselector-color);
+
   box-shadow: none;
   cursor: pointer;
 }
@@ -70,7 +71,7 @@
 /* checked */
 .boxselector_wrapper input[type='radio']:checked + label,
 .box-selector-item input[type='radio']:checked + label {
-  @apply bg-blue-3 border-blue-6;
+  @apply bg-blue-2 border-blue-6;
   @apply th-dark:bg-blue-10 th-dark:border-blue-7;
 
   background-image: url(../../../assets/ico/checked.svg);
@@ -106,7 +107,10 @@
 .boxselector_icon,
 .boxselector_icon img {
   font-size: 90px;
-  display: block;
+}
+
+.boxselector_icon > svg {
+  margin-left: -5px;
 }
 
 .boxselector_header pr-icon {
@@ -117,11 +121,6 @@
   padding-left: 20px;
 }
 
-.boxselector_wrapper input[type='radio']:not(:disabled) ~ label,
-.box-selector-item input[type='radio']:not(:disabled) ~ label {
-  background-color: var(--bg-boxselector-color);
-}
-
 .boxselector_img_container {
   line-height: 90px;
   margin-bottom: 0;

app/react/components/BoxSelector/BoxSelectorItem.tsx

@@ -52,7 +52,7 @@ export function BoxSelectorItem<T extends number | string>({
               <Icon
                 icon={option.icon}
                 feather={option.featherIcon}
-                className="boxselector_icon space-right"
+                className="boxselector_icon !flex items-center"
               />
             )}
           </div>

app/react/components/BoxSelector/LogoIcon.tsx

@@ -0,0 +1,16 @@
+import { Icon, IconProps } from '@@/Icon';
+
+type Props = IconProps;
+
+export function LogoIcon({ icon, featherIcon }: Props) {
+  return (
+    <div
+      className={`
+   text-6xl h-14 w-14
+   inline-flex items-center justify-center 
+`}
+    >
+      <Icon icon={icon} feather={featherIcon} className="feather !flex" />
+    </div>
+  );
+}

app/react/components/BoxSelector/common-options/build-methods.tsx

@@ -0,0 +1,44 @@
+import { Edit, FileText, Globe, Upload } from 'react-feather';
+
+import GitIcon from '@/assets/ico/git.svg?c';
+
+import { BadgeIcon } from '../BadgeIcon';
+import { BoxSelectorOption } from '../types';
+
+export const editor: BoxSelectorOption<'editor'> = {
+  id: 'method_editor',
+  icon: <BadgeIcon icon={Edit} />,
+  label: 'Web editor',
+  description: 'Use our Web editor',
+  value: 'editor',
+};
+export const upload: BoxSelectorOption<'upload'> = {
+  id: 'method_upload',
+  icon: <BadgeIcon icon={Upload} />,
+  label: 'Upload',
+  description: 'Upload from your computer',
+  value: 'upload',
+};
+export const git: BoxSelectorOption<'repository'> = {
+  id: 'method_repository',
+  icon: <GitIcon />,
+  label: 'Repository',
+  description: 'Use a git repository',
+  value: 'repository',
+};
+
+export const template: BoxSelectorOption<'template'> = {
+  id: 'method_template',
+  icon: <BadgeIcon icon={FileText} />,
+  label: 'Template',
+  description: 'Use an Edge stack template',
+  value: 'template',
+};
+
+export const url: BoxSelectorOption<'url'> = {
+  id: 'method_url',
+  icon: <BadgeIcon icon={Globe} />,
+  label: 'URL',
+  description: 'Specify a URL to a file',
+  value: 'url',
+};

app/react/components/BoxSelector/common-options/deployment-methods.tsx

@@ -0,0 +1,20 @@
+import Kubernetes from '@/assets/ico/vendor/kubernetes.svg?c';
+import DockerCompose from '@/assets/ico/vendor/docker-compose.svg?c';
+
+import { BoxSelectorOption } from '../types';
+
+export const kubernetes: BoxSelectorOption<'kubernetes'> = {
+  id: 'method_kubernetes',
+  icon: Kubernetes,
+  label: 'Kubernetes',
+  description: 'Kubernetes manifest format',
+  value: 'kubernetes',
+};
+
+export const compose: BoxSelectorOption<'compose'> = {
+  id: 'method_compose',
+  icon: DockerCompose,
+  label: 'Compose',
+  description: 'docker-compose format',
+  value: 'compose',
+};